Teknisk Marknadsföring, Tjäna pengar på dina Bloggar och Prylar

Hur man visar HTML-källa i Chrome (och varför)

Hur man visar HTML-källa i Chrome (och varför)

Din sajts källkod är det som “krafter” din sajt. Den definierar känslan, utseendet och funktionaliteten på dina webbsidor, vilket hjälper dig att uppnå fantastiska användarupplevelser och andra varumärkesmål som omvandlingar och hänvisningar.

Källkoden för din sida påverkar din sökmotoroptimering. Detta beror på att sökmotorer “läser” det för att avgöra var din webbplats rankas. Detta betyder i princip att oupptäckta fel i din sidkälla kan göra att din webbplats inte rankas som den ska, eller ännu värre, leda till felaktig SEO-data eller till och med en dålig användarupplevelse.

Varför behöver du se din webbplats källkod?

Som nämnts tidigare påverkar källan till din sida SEO. Faktum är att du bör inkludera att titta på källkoden som en del av din SEO-revision, även om det finns ett behov av att fördjupa användningen av SEO-verktyget i kombination. En bra sak med att titta på sidkällan är att det är ett sätt att se vad dina konkurrenter gör och ta reda på sätt att “pivotera” den för att nå dina egna affärsmål.

Här är några fler anledningar till varför du bör granska din källkod:

Det hjälper att kontrollera rubriktaggar

Om din webbplats inte har titeltaggar visas den helt enkelt inte i sökmotorerna. Titeltaggen finns i HTML-dokumentet i rubriken head. Titeltaggar är synliga för sökmotorer och är vanligtvis klickbara.

Om du knappar in “Ahrefs” till exempel i en Google-sökning är det första resultatet “Ahrefs: Analysera webbplatser med vårt kostnadsfria SEO-revisions- och rapporteringsverktyg

Video från Onely

Om du inte är en webbutvecklare och använder ett JavaScript- eller AJAX-baserat innehållshanteringssystem kan du stöta på vissa SEO-problem. Om du kontrollerar källkoden eller väljer en webbplatsplattform kan bero på dina behov och hur mycket arbete du behöver för att få din webbplats indexerad och rankad.

Leta efter dolda filer som inte borde finnas där

Ibland är det vanligtvis filer som inte bör döljas. Detta görs vanligtvis i filen “display: ingenting” fast egendom. Ibland kan detta kombineras med Javascript för att lägga till ytterligare funktionalitet. Eller vissa plugins eller SEO-experter kanske vill göra knep för att förbättra din rankning, eller så kan innehållet döljas av misstag.

Läsa:  Hur du förbättrar din prestation med tidsregistrering

Ibland kan dolt innehåll också bero på följande orsaker:

  • plugins eller oärliga byråer som kanske vill manipulera sökresultat,
  • avsiktlig CSS-manipulation – dolda div, osynlig text, innehåll utanför visningsporten eller vitt teckensnitt på vit bakgrund.

Oavsett orsakerna kan du ta en titt på din sidkälla för att se.

Du kan visa dolda filer genom att trycka på Cmd+Opt+F(Mac), Ctrl+F(Linux) och Ctrl+shift+F(Windows) efter att du redan har öppnat källkoden.

Skriv “dold” eller “display: ingenting” i sökfältet. Du bör kunna se alla dolda objekt. Om de inte gör det kan du prata med utvecklaren för att ändra den funktionaliteten/stilen.

Kontrollera analysutdragen

Är ditt Google Analytics-kodavsnitt korrekt installerat på varje webbsida? Sök efter “UA” i källan till din sida. Du bör se 7 siffror efter UA. Om du har installerat Google Analytics mer än en gång kan du ta bort det.

Det kan vara tråkigt att manuellt kontrollera dina Google Analytics-utdrag, särskilt om du har en webbplats med flera sidor. Ett enklare sätt att kontrollera spårningskodavsnitt är att använda XML-webbplatskartor. Det ger dig en uppdelning av alla webbadresser du äger. Från dessa kan du se vilka som behöver spårningskodavsnitten. Ibland kan det vara bättre att be dina utvecklare att skapa skript som kan kontrollera spårningskodavsnitten.

Kontrollera om det finns några länkar som är “nofollow” men de borde inte vara det

Om du bygger länkar eller anlitar en SEO-expert kan du kontrollera de webbplatser som länkar till dina sidor för att se om de ställer in din länk som en “följ” eller “nofollow”-länk. En “nofollows”-länk talar om för sökmotorer att ignorera den webbsidan. Leta efter ordet “rel=extern nofollow” i dina länkar och identifiera de som inte borde ha det. Återigen hjälper sökalternativet att se hur dessa implementeras i DOM.

Du kan kontrollera om taggarna finns i HTTP-huvudena. Du kan göra detta genom att klicka på “Nätverk” (samma panel som du använder för att söka). Du kan se resurserna i avsnittet “Namn” till vänster. Klicka på resursen och klicka sedan på “titel”. Du kommer att se uppdelningen av resursen. Kontrollera om det finns kanoniska taggar, till exempel “rel=nofollow”.

När du är här kan du kontrollera resursens HTTP-status för omdirigeringar. Bekräfta även omdirigeringstypen och eventuella feltillstånd och taggar som robottagg eller hreflang.

Kontrollera att metabottaggen används korrekt

Ett annat sätt att tala om för sökmotorer att indexera webbsidor eller inte är att använda en metabot-tagg. Dessa börjar följd av namn = “robotar”. Om du har dem i din källkod, se till att de inte hindrar den faktiska indexeringen av innehållet som ska indexeras.

Läsa:  Varför du behöver en smart marknadsföringsprocess för innehåll

Kontrollera sidans laddningstid

För att kontrollera laddningstiden, klicka på “Nätverk” högst upp i utvecklarverktygen och välj sedan “fler verktyg”. Du kan se hur lång tid det tar att ladda varje resurs i millisekunder.

Det sista verktyget i verktygslistan är “kontroller”. Klicka här för att se förslagen du får för att förbättra din webbsidas laddningstid. Du får en sammanfattning när besiktningen är klar.

Scrolla ner till avsnittet “möjlighet”. Förslag inkluderar t.ex.

  • Visa bilder i nästa generations format
  • Ta bort renderingsblockerande resurser
  • Föranslut till de nödvändiga startpunkterna

Det finns också en sammanfattning av de uppskattade tidsbesparingarna som en implementering av varje markerat objekt skulle spara. Du kan även se fler förbättringsförslag i “diagnossessionen”.

Det finns en videoikon som låter dig ta skärmdumpar av vad användarna faktiskt upplever.

Se upp för JS- och CSS-resurser som laddas före DOM. Klicka på JS och CSS medan du fortfarande är i webbvillkoren.

Kontrollera återgivningen av vyn

Hittills har vi kontrollerat element med hjälp av element, källor och maskor. Alla dessa kan hittas i DevTools, som är ett fönster som innehåller alla dessa verktyg. Ett annat verktyg vi kan använda är enhetens verktygsfält precis före “element”. På så sätt kan du se hur olika resurser renderas i olika bildportar, till exempel på mobilen.

Om du vill se hur det renderas på specifika enheter, välj “inställningar” Anpassa och hantera utvecklarverktyg (tre knappar) i det övre högra hörnet av utvecklarverktyg, välj sedan “enheter”.

Kontrollera bildoptimering

Har dina bilder titel och alttags? Bild alt-taggar beskriver dina bilder och används av sökmotorrobotar för att “förstå” dina bilder. Detta är mycket viktigt, särskilt om du säljer produkter via din webbplats. För onlineshopping vill du inkludera produktens märke och serienummer i alt-taggbeskrivningen. Något att notera. De glidande “dekorativa bilderna” längst upp på sidan behöver inte innehålla alt-taggar. Se till att produktbilder, infografik, skärmdumpar, diagram, lagfoton och logotyper har alt-taggar.

Taggar ska inte vara “fyllda med sökord”, utan bör taggas på sätt som matchar ditt innehåll. Du kan se dina foton genom att söka efter taggen .

Ett annat sätt att validera beskrivningar av bildalternativ är genom elementpanelen efter att du har använt källkoden.

Ökar din bild din sidstorlek och laddningstid? Om din bild är optimerad för mobila enheter? Du kan kontrollera det interna värdet för en bild mot en bild vars storlek bestäms av vyn du väljer:

Om dina bilder inte är responsiva, eller om bilderna kan komprimeras eller ändra storlek för att förbättra din sidstorlek och laddningstid, kan du titta på källkoden och se om det är vettigt att ändra den.

Läsa:  Hur och hur mycket tjänar du med Onlyfans

Visa källa vs. Inspektera element

Det finns två sätt att se koden “Visa källa” och “Inspektera element”. De är två webbläsarfunktioner som låter dig se HTML-koden för din sida. Den största skillnaden är att “Visa källa” visar HTML-koden som levererades från webbservern till din webbläsare. Inspect Elements är ett utvecklarverktyg för att se tillståndet för DOM-trädet efter att webbläsaren har åtgärdat sina fel och eventuell Javascript-manipulation.

Här är uppdelningen:

  • HTML-felsökning i webbläsaren
  • HTML-normalisering i webbläsaren
  • DOM-manipulation med Javascript

Som jag har nämnt tidigare, genom att använda “Visa källa” med en ensidig app kan du se Javascript vs. HTML. Eventuella HTML-fel kan också korrigeras med verktyget “Check Elements”.

Här är ett hypotetiskt fel som du kan se när du använder “Visa källa”

Titel

Den första meningen.Andra meningen.

“Check Element” skulle ha fixat punkten

i form

Visa källkoden för dina webbsidor i Chrome

Enligt W3Counter är Chrome den mest populära webbläsaren, helt enkelt.

Det betyder att de flesta använder den för att komma åt din webbplats på flera enheter. Som webbansvarig och webbplatsägare behöver du därför veta hur du ser på dess källkod för att verkligen kunna analysera vad användarna upplever när de använder din webbplats.

på en PC

Snabbtangent – Ctrl+U eller Ctrl+Skift+I eller F12

  • Du kan också högerklicka på webbsidan vars källkod du vill se (se till att klicka på en tom del av sidan)
  • Välj “visa sidkälla”

  • Det tredje alternativet är att gå till “anpassa och hantera Google Chrome” (ikonen i webbläsarens övre högra hörn).
  • Gå till “Fler verktyg”
  • Sedan “utvecklarverktyg”

Så här kan du se källkoden för din sida med utvecklarverktyget:

Alternativt kan du klicka på “Visa sidkälla” eller Ctrl+U istället för att använda utvecklarverktyget om du vill rensa rummet.

Du kommer att märka att webbadressen har ändrats visningskälla: https://www.sivutosi.fi/ och du kan se hela koden för den sidan utan alla verktyg:

Du kan dock inte visuellt se vad koden är för ett visst innehåll:

Skärmdumpen ovan låter mig högerklicka på ett specifikt ord eller innehåll och se vad det är. I det här fallet är “SEO Audit & Reporting Tool”.

<p class="c3">Här är några andra webbläsarinstruktioner:</p> <h3 id="h.uleq5dx3sxpo" class="c10"><span class="ez-toc-section" id="pa_en_Mac"></span>på en Mac<span class="ez-toc-section-end"></span></h3> <p class="c3">Så här visar du en sidas källkod i mac Chrome</p> <p class="c3">Snabbtangent – Kommando + Alternativ + U</p> <ul class="c5 lst-kix_ff53ca5hcjli-0 start"> <li class="c3 c8">Du kan också gå till Visa och sedan Utvecklare</li> <li class="c3 c8">Klicka sedan på “visa sidkälla”</li> </ul> <p class="c3"> </p> <p class="c3">Här är några ytterligare instruktioner för dina webbläsarinställningar:</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://favtechies.com/7-basta-wordpress-vard-med-gratis-ssl-certifikat-2024-billigt-och-premium/" target="_self" class="IRPP_minimalist"><!-- INLINE RELATED POSTS 4/4 //--><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#3498DB; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Läsa:</span>  <span class="postTitle">7 bästa WordPress-värd med gratis SSL-certifikat 2024 (billigt och premium)</span></div></a></div><h3 id="h.740pp5docsku" class="c10"><span class="ez-toc-section" id="PC_Safari"></span>PC + Safari<span class="ez-toc-section-end"></span></h3> <p class="c3">Snabbtangent – Alternativ+Kommando+U</p> <ul class="c5 lst-kix_69ogii2f3f1g-0 start"> <li class="c3 c8">Öppna en webbläsare</li> <li class="c3 c8">Välj “inställningar” från “menyn”</li> <li class="c3 c8">Gå till tilläggssektionen</li> <li class="c3 c8">Välj “utvecklingsmeny”</li> <li class="c3 c8">Gå till sidan vars sidkälla du vill visa</li> <li class="c3 c8">Välj Visa sidkälla på menyn Utveckla</li> </ul> <p class="c3">Alternativt</p> <ul class="c5 lst-kix_9vl3esjc6ujm-0 start"> <li class="c3 c8">Högerklicka på sidan</li> <li class="c3 c8">Välj “visa sidkälla”</li> </ul> <p>Observera att “framkalla”-menyn måste vara aktiverad som i steg 1-4 i föregående avsnitt</p> <h3 id="h.va30jsrxepy4" class="c10"><span class="ez-toc-section" id="Mac_Safari"></span>Mac + Safari<span class="ez-toc-section-end"></span></h3> <p class="c3">Snabbtangent – Alternativ+Kommando+U</p> <p class="c3">Öppna en webbläsare</p> <ul class="c5 lst-kix_wqv2lby989ke-0 start"> <li class="c3 c8">Klicka på “Safari”</li> <li class="c3 c8">Välj “inställningar”</li> <li class="c3 c8">Gå till fliken Avancerat</li> <li class="c3 c8">Kontrollera “visa utvecklingsmeny”</li> <li class="c3 c8">Högerklicka eller tryck med två fingrar på styrplattan</li> <li class="c3 c8">Välj “visa sidkälla” eller “kontrollera element”</li> <li class="c3 c8">Högerklicka på webbsidan vars källkod du vill visa</li> <li class="c3 c8">Välj “visa sidkälla”</li> </ul> <h3 id="h.mr3lqhms4vgv" class="c10"><span class="ez-toc-section" id="PC_Firefox"></span>PC + Firefox<span class="ez-toc-section-end"></span></h3> <p class="c3">Snabbtangent – Ctrl + U</p> <ul class="c5 lst-kix_ue1vem6hhhv-0 start"> <li class="c3 c8">Klicka på menyn (överst till höger där du ser hamburgermenyn),</li> <li class="c3 c8">Bläddra till “Webbutvecklare” och klicka</li> <li class="c3 c8">Klicka på “Inspektör”</li> </ul> <h3 id="h.tvrhe9e19tta" class="c10"><span class="ez-toc-section" id="Mac_Firefox"></span>Mac + Firefox<span class="ez-toc-section-end"></span></h3> <p class="c3">Snabbtangent – Kommando + U</p> <ul class="c5 lst-kix_g5queq9gt34-0 start"> <li class="c3 c8">Högerklicka på sidan vars sidkälla du vill visa</li> <li class="c3 c8">Välj sidkälla</li> <li class="c3 c8">Alternativt kan du gå till “verktygsmenyn”</li> <li class="c3 c8">Välj sedan “Webbutvecklare”</li> <li class="c3 c8">Klicka på “sidkälla”</li> </ul> <h2 id="h.vet4pykpvmqo" class="c19"><span class="ez-toc-section" id="Hur_man_anvander_en_specifik_del_av_kallkoden_i_Chrome"></span>Hur man använder en specifik del av källkoden i Chrome<span class="ez-toc-section-end"></span></h2> <p class="c3">Ibland kan källkoden för en sida vara ganska lång och täcka hundratals rader kod, men du måste fortfarande använda en specifik del för att uppnå något. Ett bra exempel på detta är om du letar efter trasiga länkar. Du kan söka efter ett specifikt avsnitt. Gör det här:</p> <ul class="c5 lst-kix_pthnt6fhqfa1-0 start"> <li class="c3 c8">Efter att ha använt sidans källkod (kolla hur vi beskrev det i föregående avsnitt)</li> <li class="c3 c8">Tryck på Ctrl + F</li> <li class="c3 c8">Ett sökfält visas</li> </ul> <p class="c3"> </p> <ul class="c5 lst-kix_pthnt6fhqfa1-0"> <li class="c3 c8">Skriv här vad du vill</li> <li class="c3 c8">Det är markerat. Med upp- och nedpiltangenterna kan du använda den specifika produkt du letar efter, eftersom det kan finnas flera</li> <li class="c3 c8">När du är klar klickar du på “avbryt”</li> </ul> <h2 id="h.79rap9u0umfq" class="c19"><span class="ez-toc-section" id="Komprimerad"></span>Komprimerad<span class="ez-toc-section-end"></span></h2> <p class="c3">Vi har tittat på hur du visar en webbplatss källkod i Chrome, hur du visar en specifik kodbit och varför du behöver visa webbplatsens HTML-källkod. Som du kanske har märkt har Dev Tools oändliga möjligheter när det kommer till det och källan till sidan. Det skulle vara bra om du kunde undersöka det mer så att du snabbt kan upptäcka eventuella problem med din webbplats. Du kan till och med låta den göra revisionen åt dig. Kom ihåg att så kraftfullt som Dev Tools är kan du inte lita på att det gör en perfekt SEO-revision. Du måste inkludera andra verktyg som kan automatisera processen och påskynda den.</p> <div class="related-posts"><h4 style="background: linear-gradient(135deg, #fe981f, #10a7bf, #077f92); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"><span class="ez-toc-section" id="Empfohlene_Themen"></span>Empfohlene Themen:<span class="ez-toc-section-end"></span></h4><ul><li><a href="https://favtechies.com/fyra-delar-av-en-framgangsrik-fintech-app/" rel="dofollow" style="color: #00aaff;">Fyra delar av en framgångsrik Fintech-app</a></li><li><a href="https://favtechies.com/hur-man-integrerar-ahrefs-med-mailchimp-via-zapier/" rel="dofollow" style="color: #00aaff;">Hur man integrerar Ahrefs med Mailchimp (via Zapier)</a></li><li><a href="https://favtechies.com/hur-man-far-edu-bakatlankar-till-din-webbplats/" rel="dofollow" style="color: #00aaff;">Hur man får .Edu-bakåtlänkar till din webbplats</a></li><li><a href="https://favtechies.com/kanoniska-webbadresser-varfor-de-ar-viktiga-hur-man-anvander-dem/" rel="dofollow" style="color: #00aaff;">Kanoniska webbadresser: varför de är viktiga & Hur man använder dem</a></li><li><a href="https://favtechies.com/12-satt-att-fa-gratis-bakatlankar-for-ditt-foretag/" rel="dofollow" style="color: #00aaff;">12 sätt att få gratis bakåtlänkar för ditt företag</a></li></ul></div> <div class="simplesocialbuttons simplesocial-round-txt simplesocialbuttons_inline simplesocialbuttons-align-left post-761038 post simplesocialbuttons-inline-no-animation"> <button class="simplesocial-fb-share" rel="nofollow" target="_blank" aria-label="Facebook Share" data-href="https://www.facebook.com/sharer/sharer.php?u=https://favtechies.com/hur-man-visar-html-kalla-i-chrome-och-varfor/" onclick="javascript:window.open(this.dataset.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="simplesocialtxt">Facebook </span> </button> <button class="simplesocial-twt-share" rel="nofollow" target="_blank" aria-label="Twitter Share" data-href="https://twitter.com/intent/tweet?text=Hur+man+visar+HTML-k%C3%A4lla+i+Chrome+%28och+varf%C3%B6r%29&url=https://favtechies.com/hur-man-visar-html-kalla-i-chrome-och-varfor/" onclick="javascript:window.open(this.dataset.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="simplesocialtxt">Twitter</span> </button> <button rel="nofollow" target="_blank" class="simplesocial-linkedin-share" aria-label="LinkedIn Share" data-href="https://www.linkedin.com/sharing/share-offsite/?url=https://favtechies.com/hur-man-visar-html-kalla-i-chrome-och-varfor/" onclick="javascript:window.open(this.dataset.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="simplesocialtxt">LinkedIn</span></button> <button onclick="javascript:window.location.href = this.dataset.href;return false;" class="simplesocial-email-share" aria-label="Share through Email" rel="nofollow" target="_blank" data-href="mailto:?subject=Hur man visar HTML-k%C3%A4lla i Chrome %28och varf%C3%B6r%29&body=https://favtechies.com/hur-man-visar-html-kalla-i-chrome-och-varfor/"><span class="simplesocialtxt">Email</span></button> <button class="simplesocial-reddit-share" rel="nofollow" target="_blank" aria-label="Reddit Share" data-href="https://reddit.com/submit?url=https://favtechies.com/hur-man-visar-html-kalla-i-chrome-och-varfor/&title=Hur man visar HTML-k%C3%A4lla i Chrome %28och varf%C3%B6r%29" onclick="javascript:window.open(this.dataset.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="simplesocialtxt">Reddit</span> </button> </div>