Grundläggande teknisk kunskap hjälper dig att optimera din webbplats för sökmotorer och skapa trovärdighet hos utvecklare.
Nu när du har skapat värdefullt innehåll på grundval av en solid efterforskning av sökord är det viktigt att se till att det inte bara är läsbart för personer utan också av sökmotorer!
Du behöver inte ha en djup teknisk förståelse vad gäller dessa koncept, men det är viktigt att förstå vad dessa tekniska tillgångar gör så att du kan tala intelligent om dem med utvecklare. Att tala dina utvecklares språk är viktigt eftersom du förmodligen behöver dem för att utföra några av dina optimeringar. Det är osannolikt att de prioriterar dina frågor om de inte kan förstå din begäran eller se dess betydelse. När du skapar trovärdighet och förtroende för dina enheter, kan du börja riva bort byråkratin som ofta hindrar avgörande arbete från att bli gjort.
Utöver support på flera håll är det viktigt att förstå teknisk optimering av SEO om du vill se till att dina webbsidor är strukturerade för både människor och sökrobotar. Därför har vi delat upp detta kapitel i tre avsnitt:
1. Hur webbplatser fungerar
2. Hur sökmotorer förstår webbplatser
3. Hur användare interagerar med webbplatser
Eftersom den tekniska strukturen på en webbplats kan ha en enorm inverkan på dess prestanda är det avgörande för alla att förstå dessa principer. Det kan också vara en bra idé att dela denna del av guiden med dina programmerare, innehållsförfattare och designers så att alla parter som är involverade i en sajtkonstruktion är enade.
Hur webbplatser fungerar
Om sökmotoroptimering är processen för att optimera en webbplats för sökning, behöver skapare av SEO åtminstone en grundläggande förståelse för det de optimerar!
Nedan beskriver vi webbplatsens resa från köp av domännamn till dess fullt återgivna tillstånd i en webbläsare. En viktig komponent i webbplatsens resa är rendering vilken är processen då en webbläsare förvandlar en webbsidas kod till en synlig sida.
Att veta detta om webbplatser är viktigt för skapare av SEO att förstå av några anledningar:
· Stegen i den här sammansättningsprocessen för webbsidan kan påverka belastningstider, och hastighet är inte bara viktigt för att hålla kvar användare på din webbplats, det är också en av Googles rankingfaktorer.
· Google renderar vissa resurser, såsom JavaScript, på ett ”andra pass”. Google kommer först att titta på sidan utan JavaScript, därefter några dagar till några veckor senare kommer den att rendera JavaScript, vilket innebär att SEO-kritiska element som läggs till på sidan med hjälp av JavaScript kanske inte kommer att indexeras.
Föreställ dig att webbplatsens laddningsprocess är din pendling till arbetet. Du gör dig redo hemma, samlar ihop dina saker att ta med till kontoret och tar sedan den snabbaste vägen från ditt hem till ditt arbete. Det vore dumt att bara ta på dig av dina skor, ta en längre väg till arbetet, släppa dina saker på kontoret och sedan omedelbart återvända hem för att ta på din andra skor, eller hur? Det är på sätt och vis vad ineffektiva webbplatser gör. I detta kapitel kommer du att lära dig hur du kan diagnostisera var din webbplats kan vara ineffektiv, vad du kan göra för att effektivisera och de positiva konsekvenserna av din ranking och användarupplevelse som kan vara resultatet av den effektiviseringen.
Innan en webbplats kan nås måste den installeras!
1. Domännamn köps. Domännamn som .com köps från en registrator av domännamn. Dessa registratorer är endast organisationer vilka hanterar reservationer av domännamn.
2. Domännamnet länkas till IP-adress. Internet förstår inte namn såsom ”abba.com” som webbplatsadresser utan hjälp av domännamnservrar (DNS). Internet använder en serie nummer som kallas IP-adress (ex: 127.0.0.1), men vi vill använda namn som abba.com eftersom de är lättare för människor att komma ihåg. Vi måste använda en DNS för att länka de mänskliga läsbara namnen med nummer läst av maskin.
Hur en webbplats når från server till webbläsare
1. Användare begär domän. Nu när namnet är länkat till en IP-adress via DNS kan personer begära en webbplats genom att skriva domännamnet direkt i sin webbläsare eller genom att klicka på en länk till webbplatsen.
2. Webbläsaren gör förfrågningar. Den begäran om en webbsida uppmanar webbläsaren att göra en DNS sökningsbegäran för att konvertera domännamnet till sin IP-adress. Webbläsaren gör sedan en begäran till servern om koden din webbsida är konstruerad med, till exempel HTML, CSS och JavaScript.
3. Servern skickar resurser. När servern har fått begäran om webbplatsen skickar den webbplatsfilerna som ska monteras i sökarens webbläsare.
4. Webbläsaren sätter ihop webbsidan. Webbläsaren har nu fått resurserna från servern, men den måste fortfarande sätta ihop allt och skapa webbsidan så att användaren kan se den i sin webbläsare. När webbläsaren analyserar och organiserar alla webbsidans resurser skapar den en Document Object Model (DOM). DOM är vad du kan se när du högerklickar och ”inspekterar element” på en webbsida i din Chrome webbläsare.
5. Webbläsaren gör slutliga förfrågningar. Webbläsaren kommer bara att visa en webbsida efter att all nödvändig kod har laddats ner, tolkats och körts, så när webbläsaren behöver någon ytterligare kod för att visa din webbplats kommer den att göra en ytterligare begäran från din server.
6. Webbplatsen visas i webbläsaren. I slutändan har din webbplats nu omvandlats (renderats) från kod till vad du ser i din webbläsare.
Nu när du vet hur en webbplats visas i en webbläsare kommer vi att fokusera på vad en webbplats är gjord av – med andra ord koden (programmeringsspråk) som används för att konstruera dessa webbsidor.
De tre vanligaste är:
· HTML – Vad en webbplats säger (titlar, grundläggande innehåll etc.)
· CSS – Hur en webbplats ser ut (färg, teckensnitt etc.)
· JavaScript – Hur den beter sig (interaktivt, dynamiskt osv.)
HTML: Vad en webbplats säger
HTML står för hypertext markup language, och det fungerar som ryggraden på en webbplats. Element som rubriker, stycken, listor och innehåll definieras i HTML.
HTML är viktigt för skapare av SEO att kunna eftersom det är vad som finns ”under huven” på alla sidor de skapar eller arbetar med. Samtidigt som ditt CMS troligen inte kräver att du skriver dina sidor i HTML (ex: genom att välja ”hyperlänk” kan du skapa en länk utan att du behöver skriva in ”a href =”), är det vad du ändrar varje gång du gör något på en webbsida, till exempel lägga till innehåll, ändra ankartexten för interna länkar, och så vidare. Google genomsöker dessa HTML-element för att avgöra hur relevant ditt dokument är för en viss fråga. Med andra ord, vad som finns i din HTML spelar en enorm roll i hur din webbsida rankas i Googles organiska sökning!
CSS: Hur en webbplats ser ut
CSS står för ”cascading style sheets”, och det är detta som får dina webbsidor att ta in vissa teckensnitt, färger och layouter. HTML skapades för att beskriva innehåll, snarare än för att styla det, så när CSS kom in på scenen var det en stor förändring. Med CSS kan webbsidor ”förskönas” utan att det kräver manuellt kodning av stilar i HTML på varje sida – en besvärlig process, särskilt för stora webbplatser.
Först 2014 började Googles indexeringssystem rendera webbsidor mer som en faktisk webbläsare, i motsats till en webbläsare som bara är text. Ett black hat SEO förfarande vilket försökte utnyttja Googles äldre indexeringssystem dolde text och länkar via CSS i syfte att manipulera sökmotorns ranking. Denna ”dold text och länkar” -praxis bryter mot Googles kvalitetsriktlinjer.
Komponenter i CSS som skapare av SEO särskilt bör bry sig om:
· Eftersom stildirektiv kan leva i externa filer för stil (CSS-filer) istället för sidans HTML, gör det din sida mindre tung av kod, vilket minskar filöverföringsstorleken och gör laddningstider snabbare.
· Webbläsare måste fortfarande ladda ner resurser såsom din CSS-fil, så komprimering av dem kan göra att dina webbsidor laddas snabbare och sidhastigheten är en rankningsfaktor.
· Att dina sidor är mer fulla av innehåll än tyngda av kod kan leda till bättre indexering av webbplatsens innehåll.
· Om du använder CSS för att dölja länkar och innehåll kan din webbplats manuellt straffas och tas bort från Googles index.
JavaScript: Hur en webbplats beter sig
Under Internets tidiga dagarna byggdes webbsidor med HTML. När CSS kom in hade webbsidan förmåga att anpassa med en stil. När programmeringsspråket JavaScript kom in i bilden kunde webbplatser nu inte bara ha struktur och stil, utan de kunde vara dynamiska.
JavaScript har öppnat upp många möjligheter för skapande av icke-statisk webbsida. När någon försöker få åtkomst till en sida som har förbättrats med detta programmeringsspråk, kommer användarens webbläsare att köra JavaScript mot den statiska HTML-koden som servern skickade tillbaka, vilket resulterar i en webbsida som kommer till liv med någon form av interaktivitet.
Du har definitivt sett JavaScript i aktion – du kanske bara inte visste om det! Det beror på att JavaScript kan göra nästan vad som helst på en sida. Det kan till exempel skapa en popup, eller så kan den begära tredjepartsresurser såsom annonser att visas på din sida.
Tack och lov finns det ett sätt att kontrollera om Google ser det.
Rendering av klientsidan kontra rendering på serversidan
JavaScript kan dock ge vissa problem för SEO, eftersom sökmotorer inte ser JavaScript på samma sätt som mänskliga besökare gör. Det beror på klientsida kontra serversida rendering. Det flesta JavaScript körs i en klients webbläsare. Med rendering på serversidan, å andra sidan, där körs filerna på servern och servern skickar dem till webbläsaren i fullt återgivet tillstånd.
SEO-kritiska sidelement som text, länkar och taggar vilka laddas på klientens sida med JavaScript, snarare än vara representerade i din HTML, är osynliga från sidans kod tills de återges. Detta innebär att robotar för sökmotor inte ser vad som finns i din JavaScript – åtminstone inte initialt.
Google säger att så länge du inte blockerar Googlebot från att genomsöka dina JavaScript-filer så kan de i allmänhet återge och förstå dina webbsidor precis som en webbläsare kan, vilket innebär att Googlebot bör se samma saker som en användare vilken tittar på en webbplats i sin webbläsare. På grund av denna ”andra våg av indexering” för JavaScript på klientsidan kan Google dock missa vissa element vilka endast är tillgängliga när JavaScript har körts.
Det finns också några andra saker som kan gå fel under Googlebots process för att rendera dina webbsidor, vilket kan hindra Google från att förstå vad som finns i din JavaScript:
· Du har blockerat Googlebot från JavaScript-resurser (ex: med robots.txt, som vi lärde oss om i kapitel 2)
· Din server kan inte hantera alla förfrågningar angående genomsökande av ditt innehåll
· JavaScript är för komplext eller föråldrat för att Googlebot ska förstå
· JavaScript ”laddar inte” innehåll på sidan förrän efter att sökroboten har slutat med sidan och gått vidare
Samtidigt som JavaScript öppnar många möjligheter för skapande av webbsidor, kan det också ha några allvarliga konsekvenser för din SEO om du inte är försiktig.
Tack och lov finns det ett sätt att kontrollera om Google ser samma sak som dina besökare. Om du vill se en sida om hur Googlebot visar din sida använder du Google Search Consoles verktyg ”URL-inspektion”. Klistra bara in sidans URL i GSC-sökfältet.
Härifrån klickar du på ”Testa URL Live”.
När Googlebot har crawlat om din URL klickar du på ”Visa testad sida” för att se hur din sida genomsöks och återges.
Klicka på fliken ”Skärmdump” intill ”HTML” för att visa hur Googlebot smarttelefon renderar din sida.
I gengäld kommer du se hur Googlebot ser din sida kontra hur en besökare (eller du) kan se sidan. På fliken ”Mer information” visar Google dig också en lista över de resurser som de kanske inte har kunnat få för webbadressen du angav.
Att förstå hur webbplatser fungerar ger en bra grund för det vi ska prata om härefter: tekniska optimeringar vilka hjälper Google att förstå sidorna på din webbplats bättre.
Hur sökmotorer förstår webbplatser
Föreställ dig att du är en sökmotors sökrobot som skannar ner en artikel på 10000 ord om hur man bakar en tårta. Hur identifierar du författaren, receptet, ingredienserna eller stegen som krävs för att baka en tårta? Det är här schema markup kommer in. Det låter dig mata sökmotorer med mer specifika klassificeringar angående vilken typ av information som finns på din sida.
Schema är ett sätt att märka eller organisera ditt innehåll så att sökmotorerna får bättre förståelse för vad vissa element på dina webbsidor är. Den här koden tillhandahåller strukturer för dina data, varför schema ofta kallas ”strukturerad data.” Processen med att strukturera dina data benämns ofta ”mark up” eftersom du markerar upp ditt innehåll med organisationskod.
JSON-LD är Googles föredragna schema mark up (tillkännagavs i maj 16), vilket Bing också stödjer. För att se en fullständig lista över de tusentals schema mark up tillgängliga, besök Schema.org eller se Google Developer’s Introduction to Structured Data mer information om hur du implementerar strukturerade data. När du har implementerat de strukturerade data som bäst passar dina webbsidor kan du testa din mark up med Googles Structured Data Testing Tool.
Förutom att hjälpa bots som Google att förstå vad ett visst innehåll handlar om, kan schema mark up även göra det möjligt för specialfunktioner att följa dina sidor i SERPerna. Dessa specialfunktioner kallas ”rich snippets”, och du har antagligen sett hur de fungerar. Det är saker som:
· Karuseller i Top Stories
· Recensioner med stjärnor
· Sökrutor för webblänkar
· Recept
Kom ihåg att användning av strukturerad data kan hjälpa till att aktivera så rich snippet finns presenterad, men garanterar inte det. Andra typer av rich snippet kommer sannolikt att läggas till i framtiden när användningen av schema mark up ökar.
Några slutliga råd för framgång med schemat:
· Du kan använda flera typer av schema markup på en sida. Men om du markerar ett element, till exempel en produkt, och det finns andra produkter som listas på sidan, måste du också markera dessa produkter.
· Markera inte innehåll som inte är synligt för besökare och följ Googles kvalitetsriktlinjer. Om du till exempel lägger till en strukturerad granskning till en sida, se till att dessa recensioner verkligen syns på den sidan.
· Om du har duplicerade sidor ber Google att du markerar varje duplikat sida med din strukturerade mark up, inte bara den kanoniska versionen.
· Tillhandhåll original och uppdaterat (om tillämpligt) innehåll på dina strukturerade datasidor.
· Strukturerad mark up bör vara en exakt återspegling av din sida.
· Försök att använda den mest specifika typen av schema mark up för ditt innehåll.
· Recensioner som markerats upp bör inte skrivas av företaget. De bör vara äkta obetalda företagsrecensioner från faktiska kunder.
Berätta för sökmotorer om dina önskade sidor med kanonisering
När Google genomsöker samma innehåll på olika webbsidor vet det ibland inte vilken sida som ska indexeras i sökresultaten. Därför uppfanns rel=”canonical” tagg, för att hjälpa sökmotorer att bättre indexera den föredragna versionen av innehållet och inte alla dess duplikat.
Rel=”canonical” tagg låter dig berätta för sökmotorer var den ursprungliga, huvudversionen av ett innehåll innehåller. Du säger i huvudsak ”Hej sökmotor! Indexera inte detta; indexera källsidan istället.” Så om du vill publicera en del av innehållet, oavsett om det är exakt eller något modifierat, men inte vill riskera att skapa duplicerat innehåll, är den kanoniska taggen här för att rädda dig.
Korrekt kanonisering säkerställer att varje unikt innehåll på din webbplats bara har en URL. För att förhindra att sökmotorer indexerar flera versioner av en enda sida, rekommenderar Google att ha en självrefererande kanonisk tagg på varje sida för din webbplats. Utan en kanonisk tagg som talar om för Google vilken version av din webbsida som är den föredragna, kan https://www.example.com indexeras separat från https://example.com och skapa duplikat.
”Undvik duplicerat innehåll” är en Internet sanning, och med goda skäl! Google vill belöna webbplatser med unikt, värdefullt innehåll – inte innehåll som har tagits från andra källor och upprepas på flera sidor. Eftersom motorer vill ge den bästa sökarupplevelsen kommer de sällan att visa flera versioner av samma innehåll, och istället välja att bara visa den kanoniserade versionen, eller om det inte finns en kanonisk tagg, vilken version som de anser vara mest sannolika original.
Det är också mycket vanligt att webbplatser har flera duplikat av sidor på grund av sorterings- och filteralternativ. Som exempel kanske du på en webbplats för e-handel har det som kallas en fasetterad navigering vilken gör att besökare kan begränsa produkterna för att hitta exakt vad de letar efter, till exempel en ”sortera efter” -funktion som ordnar om resultat i produktkategorins sida från lägsta till högsta pris. Detta kan skapa en URL som ser ut så här: exempel.com/mens-shirts?sort=price_ascending. Lägg till fler sorterings- / filteralternativ såsom färg, storlek, material, märke etc. och fundera då på alla variationer i din huvudsakliga produktkategorisida som detta skulle skapa!
Hur användare interagerar med webbplatser
I kapitel 1 nämnde vi att trots att SEO står för sökmotoroptimering handlar SEO lika mycket om människor som det handlar om sökmotorerna själva. Det beror på att sökmotorer finns för att tjäna sökare. Detta mål hjälper till att förklara varför Googles algoritm belönar webbplatser vilka ger bästa möjliga upplevelser för sökare, och varför vissa webbplatser, trots att de har egenskaper såsom robusta backlink-profiler, kanske inte fungerar bra i sökningen.
När vi förstår vad som gör deras upplevelse i webbläsar optimal kan vi skapa dessa upplevelser för maximal prestanda i sökresultat.
Säkerställa en positiv upplevelse för dina mobilbesökare
Eftersom över hälften av all webbtrafik idag kommer från mobil kan man fastslå att din webbplats skall vara tillgänglig och lätt att navigera i för mobila besökare. I april 2015 lanserade Google en uppdatering av sin algoritm vilken skulle främja mobilvänliga sidor, framför sidor vilka inte är mobilvänliga. Så hur kan du se till att din webbplats är mobilvänlig? Även om det finns tre huvudsakliga sätt att konfigurera din webbplats för mobil rekommenderar Google responsiv webbdesign.
Responsiv design
Responsiva webbplatser är utformade för att passa skärmen på den typ av enhet dina besökare använder. Du kan använda CSS för att få webbsidan att ”svara” på enhetsstorleken. Detta är idealiskt eftersom det förhindrar att besökarna måste dubbelklicka eller klämma och zooma för att se innehållet på dina sidor. Är du inte säker på om dina webbsidor är mobilvänliga? Du kan använda Googles test för att kontrollera om den är mobilvänlig!
AMP
AMP står för Accelerated Mobile Pages, och det används för att leverera innehåll till mobila besökare i hastigheter som är mycket högre än med leverans utan AMP. AMP kan leverera innehåll så snabbt eftersom det levererar innehåll från sina cacheservrar (inte den ursprungliga webbplatsen) och använder en speciell AMP-version av HTML och JavaScript.
Mobil först indexering
Från och med 2018 började Google byta över webbplatser till mobil först indexering. Den förändringen ledde till viss förvirring mellan mobilvänlighet och mobil först, så det är bra att göra otvetydigt. Med mobil först indexering crawlar och indexerar Google mobilversionen av dina webbsidor. Att göra din webbplats kompatibel med mobilskärmar är bra för användare och din prestanda i sökningen, men indexering av mobil först sker oberoende av mobilvänlighet.
Detta har väckt viss oro för webbplatser vilka saknar paritet mellan mobila och stationära versioner, såsom att visa olika innehåll, navigering, länkar etc. i deras mobilvy. En mobilwebbplats med olika länkar, som exempel, kommer att ändra sättet på vilket Googlebot (mobil) genomsöker din webbplats och skickar länkkapital till dina andra sidor.
Förbättra sidhastigheten för att mildra besökarnas frustration
Google vill tillhandahålla innehåll vilket laddas blixtsnabbt för sökare. Vi har kommit att förvänta oss att resultat laddas snabbt, och när vi inte får dem, kommer vi snabbt att studsa tillbaka till SERP för att leta efter en bättre och snabbare sida. Det är därför sidhastighet är en avgörande aspekt av SEO. Vi kan förbättra hastigheten på våra webbsidor genom att dra nytta av verktyg som de som vi har nämnt nedan. Klicka på länkarna för att lära dig mer om var och en.
· Googles PageSpeed Insights verktyg och dokumentation om bästa praxis
· GTMetrix
· Googles Hastighets- och prestandatester för mobil webbplats
· Chrome DevTools & Handledning
Bilder är en av de element främst skyldigheterna till långsamma sidor!
Som diskuterats i kapitel 4 är bilder en av de främsta orsakerna till långsamma webbsidor! Förutom bildkomprimering, optimering av alt-text, att välja rätt bildformat och skicka webbplatskartor finns det andra tekniska sätt att optimera hastigheten och sättet på vilket bilder visas för dina användare. Några primära sätt att förbättra leveransen av bilder är följande:
1. SRCSET: Hur du levererar den bästa bildstorleken för varje enhet
SRCSET-attributet låter dig ha flera versioner av din bild och därefter specificera vilken version som skall användas i olika situationer. Den här koden läggs till i <img> -taggen (där din bild finns i HTML) för att tillhandahålla unika bilder för specifika enheter.
Detta är som begreppet responsiv design vilket vi diskuterade tidigare, med undantag för bilder!
Detta påskyndar inte bara din tid för laddande av bilder, det är också ett unikt sätt att förbättra din användarupplevelse på sidan genom att tillhandahålla olika och optimala bilder för olika enhetstyper.
2. Visa besökarnas laddning av bild pågår med lat laddning
Lat laddning inträffar när du går till en webbsida och istället för att se ett tomt vitt utrymme för var en bild kommer att visas, blir där en oskarp enklare version av bilden eller en färgad ruta som ligger på plats medan den omgivande texten laddas. Efter några sekunder laddas bilden tydligt och i full upplösning. Den populära bloggplattformen Medium gör det riktigt bra.
Versionen med den låga upplösningen laddas initialt och därefter full version med hög upplösning. Detta hjälper också till att optimera din kritiska renderingsväg! Så samtidigt som alla dina andra sidresurser hämtas, visar du en teaser-bild med låg upplösning vilken hjälper till att berätta för användare att saker händer / laddas. För mer information om hur du ska lata ladda dina bilder, kolla in Googles Lazy Loading Guidance.
Förbättra hastigheten genom att kondensera och paketera dina filer
Revisioner av sidhastighet kommer ofta rekommendera såsom ”minify resursen”, men vad betyder det egentligen? Minification kondenserar en kodfil genom att ta bort saker som radbrytningar och mellanslag, såväl som att förkorta kodvariabla namn där det är möjligt.
”Bundling” är en annan vanlig term som du kommer att höra med hänvisning till att förbättra sidhastigheten. Processen med bundling kombinerar en bunt av lika kodningsspråkfiler till en enda fil. Som exempel kan en bunt JavaScript-filer läggas i en större fil för att minska mängden JavaScript-filer för en webbläsare.
Genom att både minifiera och paketera de filer som behövs för att konstruera din webbsida kommer du att snabba upp din webbplats och minska antalet kallelser på HTTP (fil).
Förbättra upplevelsen för internationella målgrupper
Webbplatser vilka riktar sig till målgrupper från flera länder bör bekanta sig med bästa metoderna för internationella SEO, för att ge den mest relevanta upplevelserna. Utan dessa optimeringar kan internationella besökare ha svårt att hitta den version av din webbplats som tillgodoser dem.
Det finns två huvudsakliga sätt på vilket en webbplats kan göras internationell:
· Språk
Webbplatser Vilka riktar sig till de som talar flera språk betraktas som flerspråkiga webbplatser. Dessa webbplatser bör lägga till något som heter en hreflang-tagg för att visa Google att din sida har kopia för ett annat språk. Läs mer om hreflang.
· Land
Webbplatser vilka riktar sig till målgrupper i flera länder kallas multiregionala webbplatser och de bör välja en URL-struktur vilken gör det enkelt att rikta in sina domäner eller sidor till specifika länder. Detta kan innefatta användningen av en landskods toppnivådomän (ccTLD) såsom ”.ca” för Kanada, eller en generisk toppdomän (gTLD) med en landsspecifik undermapp som ”exempel.com/ca” för Kanada. Läs mer om lokala specifika webbadresser.