JavaScript SEO en Google

Javascript en SEO hebben al jaren een interessante relatie met elkaar. Van no go voor de zoekmachine, naar prima crawlbaar. Volgens de laatste updates van Google in ieder geval. Laten we dat de komende tijd eens gaan testen! JavaScript SEO, is het nog steeds problematisch? Wat kan Google wel aan en wat niet en hoe zit het met andere zoekmachines? Bing bot, DuckDuckGo, Facebook, noem ze maar. Hoe gaan de bots om met frameworks als Angular, React of VUE? We gaan het allemaal testen en delen de ervaringen hier. Nu eerst de achtergronden en best practices voor SEO JavaScript succes!

JavaScript SEO en Google door de jaren heen

Tot voor kort kon Google geen JavaScript websites renderen. Daarmee was het vrijwel onmogelijk voor Google om te bepalen welke content er op de website staat en dus kon je goede rankings wel vergeten. JavaScript en SEO zijn lang geen goede combinatie geweest. Maar dat is gelukkig verleden tijd. Een korte geschiedenis van JavaScript en SEO:

Vroeger: JavaScript niet toegankelijk voor zoekmachine crawlers

Zo rond 2010 en daarvoor werd JavaScript door de zoekmachine grotendeels omzeild. Dat had ook zijn voordelen. Zo werd JavaScript nog wel eens benut om delen van een navigatie buiten bereik te houden van de zoekmachine crawlers. Daardoor kon je bijvoorbeeld vrij eenvoudig het probleem van product filters oplossen. Een prijsfilter in een webshop kan voor veel duplicate content zorgen en vroeger, ver voor de komst van de canonical url, werd dat nog wel eens opgelost door gedeeltes van een menu in JavaScript te plaatsen. Buiten bereik, probleem opgelost.

In 2009 werd het AngularJS gelanceerd. Een Open Source JavaScript framework, wat mede door Google groot werd gemaakt. Ideaal voor dynamische websites. De content kon daarmee nog flexibeler worden gepresenteerd. Wellicht iets te flexibel, want Google en andere zoekmachines kunnen er niet mee overweg. Gelukkig waren er wel oplossingen. Namelijk door statische versies (HTML Snapshots) van elke pagina beschikbaar te stellen. Deze werden dan als _escaped_fragment_ beschikbaar gesteld. Een ‘fragment‘  meta tag wees de zoekmachine op de beschikbaarheid hiervan. Meer daarover in de handleiding hiervoor op de Year of Moo website. BuiltVisible heeft recenter ook een heel goede publicatie hierover opgesteld. Google zelf predikte het volgende als webmaster guidelines, maar heeft deze uitleg ondertussen afgeschreven. Deze techniek is gelukkig vervallen en betere oplossingen als ServerSideRendering zijn ervoor in de plaats gekomen.

Tegenwoordig: JavaScript volledig crawlbaar?

Ondertussen laat Google weten dat het Javascript prima kan crawlen, mits het aan een aantal best practices voldoet. Het adviseert daarbij gebruik te maken van Progressive Enhancement. Het toevoegen van functionaliteit daar waar de browser van de gebruiker het toestaat. Ofwel het bruikbaar en toegankelijk houden van je website, daar waar incompetentie browsers (of search engine bots) benut worden. Google stelde nieuwe guidelines voor JavaScript SEO op. Progressive Enhancement is zeker een goede oplossing! Zeker daar Google niet de enige zoekmachine is. Bing, DuckDuck go, maar ook social sites als Facebook hebben bots, waar je je site voor toegankelijk wilt houden.

Daarmee zijn we ondertussen in de tegenwoordige tijd aangeland. Google zegt JavaScript te kunnen crawlen, te kunnen renderen en dus ook te indexeren. John Mueller, Chief van de Google Webmaster Office Hours hangouts, gaf recentelijk een toelichting op de Angular Connect developer conference. Bijgaand een video hiervan en de belangrijkste highlights:

Google over JavaScript en SEO best practices

De essentie van deze speech: Google (e.a. search engines) heeft unieke, crawlbare URL’s nodig… en crawlbare links! Daarmee is het in staat jouw content te bekijken (bezoeken, renderen) en indexeren. Een opsomming van de best practices voor JavaScript sites en goede technische SEO:

Search bots hebben unieke URL’s nodig

Zorg ervoor dat unieke content in jouw JavaScript app toegankelijk is via een unieke URL (2:55). Hoe ziet een goede URL eruit? Bekijk deze tips van Moz. Zorg dat elke pagina/state een eigen URL heeft. Hetzelfde geldt voor elke taal waarin een pagina wordt getoond. Ieder een unieke URL. Voor Angular kun de daarvoor HTML5 mode activeren.

Angular gebruikt in standaard mode, hashbang URL’s. URL’s waarin dus de # is opgenomen, bijvoorbeeld zo: www.daarom.com/#/blog1. Het hekje (#) wordt in HTML gebruikt om links binnen een pagina aan te geven (bookmarks). Daar veel moderne sites een Single Page Application zijn (SPA) zijn alle ‘links’  dus eigenlijk interne links / bookmarks. Dat klopt dan theoretisch, voor het verbeteren van de vindbaarheid vormt dit een probleem, zoekmachines zien de hele site als 1 pagina. Terwijl je wilt dat je content, pagina’s, states, individueel toegankelijk zijn en daarmee beter afzonderlijk scoren op relevante zoekopdrachten!

Canonical URL voorkomt duplicate content, voorkom loops!

Het volgende punt dat John Mueller aanhaalt (6:11) is de Canonical URL. Daarmee geef je een uniek adres aan je content, pagina, state. Is de content via meerdere URL’s toegankelijk, dan kun je met de Canonical URL aangeven welke URL de leidende is. Lees ook deze update van Google. Let erop dat je consistent, de juiste URL’s als Canonical aanwijst. Let op bij het gebruik van 301’s en Canonicals. Hier dreigt een gevaar voor loops, van 301 naar canonical en weer terug.

Hashbang URL’s, Ajax Crawling & Escaped Fragments

Escaped fragments worden niet langer door Google geadviseerd (7:26) Zoals je dat hier al eerder kon lezen. De creatie en het beheer van snapshots is erg bewerkelijk en daarmee foutgevoelig. Progressive Enhancement is de betere oplossing! John Mueller geeft aan dat Google in staat is #! URL’s te renderen met een maar mitsen en maaren (8:45) Iets dat we zelf binnenkort gaan testen.

Het gebruik van het gebruikelijke <a href> element vs JavaScipt ‘onclick’ is wel een waardevolle tip voor alle JavaScript sites/links.

Lukt het Google niet om de pagina te ‘renderen’ dan valt het terug op de html waaruit de pagina is opgemaakt. Daarmee is de kans groot dat de pagina’s, vrij van content, als duplicate worden gezien. (11:00)

Title tag, meta description en andere meta tags

Ondertussen standaard declaraties voor SEO succes: de title tag, meta description, href lang tags en andere bepalende meta tags. Zorg dat ze voor elke pagina aanwezig en uniek zijn. Zorg dat ze aan de head van elke pagina zijn toegevoegd en zorg dat de head correct is gedeclareerd. (11:49)

Hidden text en uitklapvelden met meer tekst, tekst die zichtbaar wordt na gebruiker input, het was even een no go voor SEO. John geeft dat hier ook aan (13:07). [Update] Met de mobile first index in zicht, is het standpunt hierover ondertussen echter gewijzigd. Tekst in tabs, achter read more links, hidden text, wordt tegenwoordig weer als volwaardig gezien. Aldus Garry Illyes begin november. Let er wel op dat de content op de juiste manier beschikbaar is.

SiteMap.xml

Zorg dat je sitemap.xml goed is opgesteld. Hierin alle (canonical) URL’s die je geïndexeerd wilt hebben met de update datum. (20:32)

Googlebot rendering & pre-rendered content

Als best practice adviseert John Mueller, pre-rendered content. Bij voorkeur middels Isomorphic JavaScript. (15:33)  AirBnB schreef er destijds een mooie blog over. Angular Universal heeft dit ingebakken. Voor VUE is er tegenwoordig NUXT. Ook maar even testen binnenkort!

Optimaliseer je website

Tot zo ver de best practices. Ga je nu aan de slag om verbeteringen door te voeren, je URL’s op te schonen? Let dan wel even op de volgende punten: Pas je URL’s aan, zorg dat dat je die netjes migreert! Zorg ervoor dat je sitemap.xml correct is en zorg voor consistente Canonicals (16:36);

Hoe test je of jouw JavaScript site SEO vriendelijk is?

Er zijn verschillende testjes die ju kunt doen om te bepalen of Google jouw site kan crawlen, renderen en indexeren. Let er op; er zijn ook andere zoekmachines en bots, maar laten we beginnen met Google. Allereerst: Google Search Console (18:20): je kunt hier pagina’s opvragen via de ‘fetch as google’  optie. Deze geeft een grafische representatie van wat Google Bot ziet. Gaat het hier niet goed, dan heb je al een indicatie dat er werk aan de winkel is. Ziet de afbeelding er goed uit, dan is dat wat je krijgt. Helaas krijg je niet de onderliggende html/dom te zien. Dus meta data en andere markup/content checken is niet mogelijk. Check ook het aantal geïndexeerde pagina’s in Search console en loop de verschillende opties af om na te gaan of je problemen ziet.

Eigen: Een simpel testje is om na te gaan of de content van je pagina’s geïndexeerd wordt door een stuk tekst in quotes in te geven in de zoekmachine. Wordt deze text gevonden dan is dat ook weer een indicatie dat het goed gaat. Controleer vervolgens met een site:www.jouwangularapp.com welke pagina’s er zijn geïndexeerd. SEO tool, screaming frog, rendert tegenwoordig ook JavaScript. Daarmee kun je de gebruikelijke SF scan uitvoeren.

Een uitdagender optie is het monitoren van de serverlogs. De verschillende bots die je site bezoeken laten hier zien welke pagina’s wel en niet bezocht worden. Hier patronen in herkennen helpt bij het oplossen van crawlproblemen. Voor SEO experts is de serverlog een rijke bron aan informatie voor de optimalisatie van crawlbudget en het is zeker van waarde bij het bepalen van de toegankelijkheid van JavaScript intensieve sites.

Javascript SEO: De proef op de som

Heel mooi allemaal, hoe goed Google nu met JavaScript om kan gaan. Ware het niet dat wat Google zegt, in de praktijk niet altijd zo uit pakt. Dus test altijd of jouw hippe JavaScript framework zich goed laat crawlen.

Wil je je verder verdiepen in Javascript SEO, kijk dan ook eens de volgende Youtube Series van Google, op het Webmaster Kanaal:

Heb je uitdagingen met de vindbaarheid van jouw Javascript website? Neem dan nu contact op, dan we het snelst weer actief.