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.

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.

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.

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”.