Javascript blir allt vanligare och det är därför en växande huvudvärk för SEO-branschen, detta då Googlebot fortfarande inte kan med 100% säkerhet rendera upp Javascript-baserat innehåll. I denna artikel vägleder jag dig i hur man implementerar pre-render på sin sajt, för att hjälpa Googlebot på traven.
Innan vi börjar prata pre-render så är det viktigt att förstå problematiken vi står inför när vi pratar Javascript + SEO. Problemet är att Googlebot sällan kan rendera upp allt Javascript-baserat innehåll på sajter, eller att Javascripten tar för lång tid för Googlebot att ladda ner, så att den indexerar sidan men väntar på att Javascript-boten skall komma och rendera upp sidan. Detta kan dröja då det tar längre tid att rendera upp en Javascript-baserad sida än en HTML-sida.
För tre dagar sedan insåg jag att min sajt inte kunde renderas upp fullständigt av Google (detta hittade jag genom använda verktyget ”Testa live URL” i Google Search Console.) Googlebot lyckades se det första elementet på startsidan men inget mer än så. Detta ledde till att de missade 95% av innehållet på startsidan. Jag kollade upp de element som inte kunde laddas in och insåg att samtliga var Javascript-baserade då de innehåller små, små animationer.
Här finns en enkel lösning och det är just pre-render. Pre-render är när man sparar ner en sida till en HTML-fil, som man serverar till Googlebot när den besöker sidan. Den ”vanliga” användaren serveras fortfarande den vanliga upplevelsen (med Javascript), medan Google får en lättladdad fil (HTML) att ta i tu med.
När jag insåg problemet på sajten började jag genast arbetet med att förstå hur man kan lägga till pre-render på min sajt. Jag hittade väldigt få informativa artiklar om detta som inte var för tekniska för mig som är relativt okunnig inom programmering.
Därför tänkte jag, nu när jag väl satt upp pre-render på min egna sajt, att jag skall skapa en resurs jag själv skulle behövt när jag implementerade pre-render. Jag baserar lite av artikeln på det inlägget jag följde (här), så ni kommer se likheter mellan min artikel och inlägget jag baserar artikeln på.
Vad du behöver för att implementera pre-render med .htaccess
- Ett gratiskonto av prerender.io
- En .htaccess fil som du har åtkomst till
- Möjlighet att lägga till en kodsnutt i <head>-avsnittet
- Denna kod att lägga i .htaccess-filen
- Backup av FTP + .htaccess (för att vara på den säkra sidan)
Hur man implementerar pre-render
1. Skapa ett konto hos prerender.io
Gå in på deras sajt och registrera dig. Om du behöver ha pre-render på fler än 200 URL:er så kostar det varje månad, men det handlar oftast inte om speciellt mycket pengar. Kopiera din prerender.io token, denna kommer du behöva i nästa steg.
2. Gå in i din .htaccess-fil
Det första vi skall göra är att lägga till en kodsnutt till vår .htaccess-fil. Har du cPanel eller någon form av FTP-klient så hittar du denna under ”public_html”.
Gå in på .htaccess-filen. Denna fil kan se lite olika ut beroende på ifall du använt den tidigare, ändrat permalänkinställningar (i WordPress) eller så är den bara helt tom.
Kopiera in denna kod högst upp i .htaccess-filen.
#RequestHeader set X-Prerender-Token “YOUR_TOKEN”
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_# Only proxy the request to Prerender if it’s a request for HTML
RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(index\.html\.var|index\.php)?(.*) http://service.prerender.io/http://example.com/$3 [P,L]
Byt ut de fetmarkerade områdena med din sajt och din egna prerender.io token. Tänk på att domänen måste exakt överensstämma med den du använder, så lägg till https:// eller/och www. där ifall det är något du använder. Se till att ha kvar / i slutet av domänen för att få koden att funka.
Sådär, nu har du implementerat allt du behöver på server-nivå. Nu är det dags för oss att lägga in meta-taggen på alla sidor du vill pre-rendera.
Nu behöver du lägga till följande någonstans innan </head> på samtliga sidor:
<meta name="fragment" content="!">Detta kan du antingen göra direkt i koden på sajten, men om du känner att du inte vill pilla i någon kod så kan du använda pluginet ”Add to All” (förutsatt att du använder WordPress). När du installerat Add to All kan du gå in på ”Inställningar”, klicka på ”Add to All”, gå in på ”Header” och lägga in kodsnutten.
Klicka spara och sedan är du klar! Du har nu implementera pre-render. Det var inte så svårt, eller hur?
Testa pre-renderlösningen
Innan vi lägger detta bakom oss så är det viktigt att vi även testar så att allt innehåll renderas ut korrekt. Renderas endast delar av innehållet ut så kan detta tas som cloaking, alltså att vi försöker dölja innehåll från Googlebot och därav kan vi bli straffade. Det är därför viktigt att allt innehåll som visas för besökarna är tillgängligt i den pre-rendrade HTML-filen.
Att testa detta är extremt enkelt, gå in med på sin sajt och lägg till ?_escaped_fragment_= i slutet av URL:en (t.ex. dinsajt.se/?_escaped_fragment_=) du vill kolla upp för att få upp pre-render versionen.
Får du några problem i framtiden så rekommenderar jag att kontakta [email protected], jag hade lite frågor och fick svar inom 30 minuter av supporten som vägledde mig till vad som var problemet.
Det var allt för denna guiden. Lycka till med implementeringen!
Har du testat implementera pre-render? Eller har du några frågor om något som känns oklart? Lämna gärna en kommentar så svarar jag på detta i den bästa mån jag kan!
