Chrome DevTools = SEO-verktyg

Publicerad 2 december 2016, senast uppdaterad 2023-05-22

Använd verktyget Chrome DevTools som ett SEO-verktyg. Bli inte beroende av något tredjepartsverktyg som helt plötsligt slutar att fungera. Ta saken i egna händer. Lär dig hur du inspekterar koden själv för att exempelvis se om noindex gömmer sig i HTTP Head eller undersöka varför din webbsida laddar långsamt och framför allt vad det är som gör webbplatsen långsam. 

I detta inlägget kommer jag bara använda och referera till Googles webbläsare Chrome och deras verktyg Chrome DevTools. De flesta funktioner finns även i andra webbläsare, men där heter de kanske inte samma sak.

Vad är Chrome DevTools?

Chrome DevTools (Chrome Developer Tools) är ett verktyg som finns inbyggt i Chrome. Tanken är att det ska underlätta webbutveckling och felsökning av webbplatser. Men det finns även många funktioner som underlättar vardagen för alla som jobbar med SEO. Innan vi hoppar in i verktyget ska vi dock titta på funktionen Visa sidkälla som inte ska förväxlas med Chrome DevTools. Med Visa sidkälla kan du se sidans källkod direkt i webbläsaren.

Hur kollar jag webbsidans källkod?

1. Ladda ner Chrome (Googles webbläsare) om du inte redan använder det
2. Öppna vilken webbplats du vill
3. Högerklicka på webbplatsen (klicka inte direkt på ett objekt som till exempel text, bild eller meny)
4. En meny med Visa sidkälla och Inspektera visas
5. Klicka på Visa sidkälla

Du kan även gå via menyn: Visa > Utvecklare > Visa källa
Eller skriva in följande i ditt webbadressfält: view-source:https://www.example.se

Nu öppnas ett nytt fönster/en ny flik där du kan se sidans källkod för den specifika webbsidan. Här kan du oftast se title, H1, Google Analytics-kod och alt-attribut med mera. Genom att använda funktionen Sök (cmd+f på mac) kan du enkelt hitta det du söker efter.

Visa sidkälla är tyvärr inte tillräckligt längre

Historiskt har det gått bra att titta enbart på sidkällan för att få fram viktig information, men webben har utvecklats och nya kodspråk har tillkommit och börjat ta över mer och mer. JavaScript är ett sådant. Jag tänker inte gå djupare in på JavaScript, SEO och Google. Vi kan bara konstatera att sidkällan ibland inte ger oss den information som vi behöver, eftersom vår webbläsare behöver analysera och rendera källkoden först. Detta ger oss helt enkelt två olika versioner av koden. Vi har sidans källkod och en kod som är renderad av webbläsaren (mer om hur du ser den renderade koden längre ner).

Google vill och försöker förstå så mycket som möjligt av våra webbbplatser och tittar därför helst på samma kod som en besökare gör, alltså den renderade. Ta dock inte detta för givet. Om det skulle finnas något med sidan som Google inte gillar, t.ex. långa laddningstider eller delar av sidan som de är blockerade från att läsa av, kan det innebära att de går tillbaka och tittar på källkoden. Se helt enkelt till att sidans källkod inte skiljer sig för mycket från koden som webbläsaren har renderat.

Ett tips här är att säkerställa att viktiga SEO-element som till exempel title, meta, canonical alltid finns med och går att läsa i sidans källkod. Annars är risken stor att du får problem. För att kunna se koden som vår webbläsare har renderat behöver vi använda oss av andra verktyg. Här kommer Chrome DevTools in i bilden.

Att använda Chrome DevTools

För att se den renderade koden som besökaren ser kan vi använda oss av Chrome DevTools. Gör helst detta i inkognitoläge utan några tillägg. Öppna Chrome DevTools:

1. Högerklicka på en webbplats
2. Klicka på Inspektera

Eller menyn Visa > Utvecklare > Verktyg för utvecklare.

Detta öppnar upp DevTools. Se bilden nedan. Högst upp ser vi en meny med olika funktioner och flikar. Jag kommer främst fokusera på fyra delar här: Inspektera element, Enhetsverktyget, fliken Elements och fliken Network. Under Elements ser vi den renderade HTML-koden till vänster och till höger ser vi CSS-koden. Det som är spännande här är att du kan ändra i både HTML- och CSS-koden direkt i webbläsaren. Mer om det lite senare.

Så här ser det ut när vi öppnat upp Chrome DevTools. Vi börjar uppe till vänster.

Funktion 1 – Inspektera element

Här gör du muspekare till en inspekterare som du kan slå på och av. Denna är värdefull om du snabbt vill gå igenom vilka element en sida har.

Funktion 2 – Slå på och av Enhetsverktyget

Här kan du snabbt se hur en webbplats ser ut i olika enheter. Slå på och slå av den och säkerställ att viktiga SEO-element inte försvinner i mobilversionen. Något som blir viktigare nu när Google ändrar sitt index till Mobile-first. I flera fall här har jag är upptäckt att H1 i desktop byts ut till H2 i mobilversion. Troligtvis för att H2 var mindre och passade bättre in när skärmen var mindre. Skulle du upptäcka detta på din webbplats, be då din utvecklare att använda CSS för att göra text större eller mindre.

Längst upp på sidan kan du ändra din enhet eller om du bara vill se en speciell storlek på din enhet. När du ändrar fram och tillbaka kan du behöva uppdatera sidan så den laddas. Tänk dock alltid på att testa din webbplats i riktiga enheter och kör gärna även din webbplats i Google mobiltest.

Fliken Elements

Under fliken Element hittar vi HTML-koden som Chrome renderat utifrån sidans källkod. Det är här vi bland annat kan se titeln och metabeskrivningen om det genereras med hjälp av JavaScript. Här kan vi även söka (cmd+f på mac) efter specifika element precis som vi gjorde när vi tittade på sidkällan.

Vill du inspektera eller jämföra den renderade koden med sidans källkod?

1. Högerklicka på webbplatsen du vill titta på
2. Klicka på Inspektera
3. Högerklicka på <html>
4. Välj Copy och Copy outerHTML
5. Klistra in i din textredigerare
6. Gör samma med sidans källkod och kopiera även in det i ett dokument i din textredigerare
7. Jämför de två olika dokumenten och leta framför allt efter skillnader

Designa i webbläsaren – varför inte SEO i webbläsaren?

Är du utvecklare har du säkert koll på benämningen designa i webbläsare eller den engelska benämningen design in the browser. I stort handlar det om att du gör tillfälliga förändringar i din HTML och CSS direkt i webbläsaren för att direkt kunna se hur resultatet blir. På det sättet slipper du skriva kod på ett ställe och se resultatet på ett annat ställe. Du vill se dina kodförändringar direkt.

Samma gäller för oss som jobbar med SEO. Vi vill kanske testa hur en ny rubrik skulle se ut i webbläsaren eller behöver vi kanske skicka förslag på en ny rubrik till våra utvecklare. Istället för att lite slarvigt skicka över att H1:an behöver bytas ut och att brödtexten behöver skrivas om, så kan vi köra SEO direkt i webbläsaren. Jag lovar dig, dina utvecklare kommer älska dig och risken för missuppfattningar kommer minska. Se bilderna här nedan där jag lekt lite med vår kategorisida för SEO: https://www.pineberry.com/bloggen/seo.

På bilden här nedanför har jag ändrat brödsmulenavigeringen, rubriken och kategoritexten.

För att ändra direkt i koden öppnar du upp Chrome DevTools och ställer dig på fliken Elements. När du väl är här kan du dubbelklicka på elementet som du vill ändra. Detta gäller även CSS-koden som är till höger på sidan.

Säkerställ att utvecklarna inte har snubblat på tangenterna

Du får tillgång till din nya sajt för första gången och givetvis vill du säkerställa att allt ser bra ut. Du kollar igenom sidorna, och det ser bra ut rent visuellt, men vad är det egentligen som gömmer sig i koden? Se bilden här nedan. Här ser vi att utvecklarna har jobbat lite för sena nätter och taggat upp huvudrubriken på kategorisidorna med H2 istället för H1. (bilderna är manipulerade)

Ta en skärmbild där du inspekterar rubriken och säg till dina utvecklare att huvudrubriken här på kategorisidorna inte ska vara H2:a utan H1:a. Tydligt, enkelt och risken för missuppfattningar minskar.

Fliken Network

Under fliken Network hittar vi också många användbara funktioner när vi jobbar med SEO.

Här har jag laddat om sidan och spelat in en hämtning (cmd + R på mac). Tänk på att inspelningsknappen måste lysa rött när du laddar om sidan. Den gör det automatiskt om du använder (cmd + R på mac).
Här får jag i alla fall en överblick över vad det som hämtas in när själva webbsidan byggs upp. Vi kan även längst ner i panelen se:

• Hur många förfrågningar (requests) som ställs
• Hur stora filer som överförs
• Hur lång tid det tar att hämta hela sidan
• Hur lång tid det tar för det initiala HTML-dokumentet att laddas och analyseras (DOMContentLoaded & blå linje i tidslinjen)
• Hur lång tid det tar för sidan att laddas klart (Load & röd linje i tidslinjen)

När är sidan klar och när tittar Google på sidan?

Den röda linjen är mest intressant eftersom det är då webbsidan laddats klart, och det är ungefär i detta ögonblicket som Google tittar på sidan. Har du viktiga delar som laddas efter detta bör du säkerställa att Google ser det. Detta kan du bland annat göra med funktionen Hämta som Google i Search Console och genom att kolla Googles cachade webbsidor genom att skriva följande i webbadressfältet: cache:http://www.exempel.se. Gäller det text kan du också göra en Googlesökning på en eller två meningar: ”två meningar av exempeltext”. Upptäcker du att det är stora skillnader på hur Google ser på din sida och hur sidan ser ut för besökarna bör du undersöka vad det beror på och varför Google inte kan/vill titta på hela din sida.

Hur laddas din webbsida rent visuellt

Om vi vill ta det ett steg längre kan vi slå på funktion som tar skärmbilder under tiden. Vi gör det genom att klicka på videokameran strax under Element-fliken och laddar om sidan.

Här kan vi se hur vår webbsida växer fram och hur den ser ut efter en viss laddningstid. Klicka på en bild så ser du ett streck i tidslinjen och kan där se var du befinner dig i landningsprocessen. Kolla din webbsida hur den ser ut vid den röda linjen (Load). Är det stor skillnad på hur din webbsida ser ut i webbläsaren när den laddat klart? I så fall bör du undersöka vad som händer efter det röda strecket och om det kan vara av värde att titta mer på.

Vilka förfrågningar ställer min webbsida?

Vi hoppar ner till Request table som Google kallar det. Här får vi information om alla förfrågningar som ställs. Här finns det några användbara funktioner som vi ska titta närmare på. Du ändrar kolumnerna här genom att högerklicka på rubrikerna: Name, Status med mera. En av funktionerna som jag gillar här är att:

1. Slå på kolumnen Size
2. Ladda om sidan
3. Sortera på Size

Här får vi snabbt fram vilka tunga filer som laddas på sidan. Vi kan till exempel se här att vi har en bild som ligger på 183 KB. Lite stor kan jag tycka. Jag klickar på bilden för att få mer information om den. När vi klickat på den får vi först upp HTTP header-information (kommer till detta senare). Eftersom detta är en bild så är jag mer intresserad av själva bilden och dess data. Jag klickar därför på Preview istället och kan se att bilden är 934 x 726 px. Här finns det optimeringsmöjligheter. Se bild.

På detta sättet kan jag snabbt gå igenom alla filer på den specifika webbsidan för att se så om jag kan optimera något på sidan. En sida som laddas snabbare uppskattas av både botar och människor.

Även kolumnen Time är intressent att sortera på om du vill se vilka förfrågningar som tar längst tid. Experimentera gärna med de andra kolumnerna också och se om du hittar något som kan underlätta ditt SEO-arbeta. Det finns mycket nyttig information som gömmer sig här.

Kolla så dina redirects fungerar och skickar rätt svarskoder

På www.sokmotorkonsult.se har vi https och www i början. Har du detsamma är det viktigt att förfrågningar med bara http skickas vidare till https och att non www skickas vidare till www. Vi kollar så detta fungerar som det ska. Vi slår på knappen för inspelning och skriver in https://www.pineberry.com/bloggen/seo i webbadressfältet och laddar sidan. Jag letar därefter upp förfrågan som ställs mot https://www.pineberry.com/bloggen/seo.

Under General ser vi att svarskoden blir 301:a, vilket är det vi vill se. Vi kan sen se under Response Headers och Location att vi flyttat till https://www.pineberry.com/bloggen/seo. På https://www.pineberry.com/bloggen/seo kan vi sen se att vi får 200 i svarskod, vilket också är det vi vill ha.

Kolla HTTP headers

När vi ändå är inne på Headers-fliken så kan vi titta lite på vilken respons vi får från HTTP Head när vi ställer en förfrågan. Det viktigaste här är att säkerställa att det inte ligger några taggar som ställer till det för Google att titta på sidan. Till exempel så kan X-Robots-Tag smyga sig in här med noindex och nofollow. Du kan också hitta canonical-länkar här, vilket kan ställa till det om det inte gjorts rätt. Märker du att något är fel eller om din webbplats inte rankar – kolla HTTP Head i Chrome DevTools

Laddningstiden är lång men vad är det som tar sådan tid?

Under fliken Timing kan vi analysera vad det egentligen är som tar sådan tid när vi laddar en webbsida. Är det till exempel Time to first byte (TTFB) som står för den stora delen så kan vi optimera våra bilder så de försvinner utan att tjäna på det. Det beror på att Time to first byte-linjen måste avslutas innan alla bilder med mera kan börjar hämtas. Google rekommenderar att TTFB inte överstiger 200ms. Skulle det vara Content Download som står för den större biten så bör vi till exempel prioritera att optimera våra bilder med mera. Mer om Timing och TTFB kan du läsa hos Google här.

Hoppas du kan använda några funktioner i ditt SEO-arbete och att Chrome DevTools blir ett av alla dina SEO-verktyg. Kommentera gärna om du använder Chrome DevTools och vilka funktioner du gillar bäst.