SEO vs React: Webcrawlere er smartere end du tror

Mange mennesker er stadig bekymrede for, at hvis du bygger et websted ved hjælp af værktøjer som React, Angular eller Ember, vil det skade din søgemaskineplacering.

Tænkningen går omtrent som denne: de webcrawlere, som søgemaskiner bruger, vil ikke kunne gennemgå en side korrekt, medmindre den er fuldstændig gengivet i brugerens browser. I stedet ser de kun HTML-koden leveret fra backend.

Hvis denne HTML-kode ikke indeholder mere end et par metatags og script-tags, antager søgemaskinen, at din side dybest set er blank og rangordner dig dårligt.

Jeg ser ofte SEO-konsulenter (Search Engine Optimization) anbefale, at du gengiver din side på backend, så webcrawlere kan se en masse flot HTML-kode, som de derefter kan indeksere.

For mig virker dette råd urimeligt og urealistisk. Det er 2016. Brugere forventer, at siderne er dynamiske og giver dem en smart brugeroplevelse. De ønsker ikke at vente på, at en ny HTML-side indlæses, hver gang de klikker på noget.

Så er udsagnet "gengivelse på klientsiden gør ondt i din siderangering" stadig gyldig?

Gør forskningen

For det første en ansvarsfraskrivelse: Jeg er på ingen måde en SEO-ekspert. Men jeg læste lidt om emnet, og her er hvad jeg fandt.

Her er en meddelelse fra Google på deres webmasterblog fra oktober 2015:

I dag, så længe du ikke blokerer Googlebot for at gennemgå dine JavaScript- eller CSS-filer, er vi generelt i stand til at gengive og forstå dine websider som moderne browsere. For at afspejle denne forbedring opdaterede vi for nylig vores tekniske retningslinjer for webmastere for at anbefale mod at afvise Googlebot fra at gennemgå dit websteds CSS- eller JS-filer.

Her er en artikel fra søgemaskinerland fra i maj 2015:

Vi kørte en række tests, der bekræftede, at Google er i stand til at udføre og indeksere JavaScript med en lang række implementeringer. Vi bekræftede også, at Google er i stand til at gengive hele siden og læse DOM og derved indeksere dynamisk genereret indhold. SEO-signaler i DOM (sidetitler, metabeskrivelser, kanoniske tags, meta-robots tags osv.) Respekteres. Indhold, der dynamisk indsættes i DOM, kan også crawles og indekseres. Desuden kan DOM-signalerne i visse tilfælde endda have forrang over modstridende udsagn i HTML-kildekode. Dette vil kræve mere arbejde, men det var tilfældet i flere af vores tests.

Disse to kilder antyder, at det faktisk er sikkert at bruge gengivet layout på klientsiden.

Preactjs.com-testen

Jeg tweetede for nylig et klagesang om SEO-konsulenter, der nikkede om min elskede React. For at være præcis er jeg i gang med at migrere til Preact, et let alternativ til Facebooks React. Jeg fik dette svar fra Jason Miller, en af ​​udviklerne, der arbejder på Preact:

Bortset fra blogartiklen fra Search Engine Land, som jeg har citeret ovenfor, tweetede Jason et link til en Google-søgning efter startsiden til Preact, som ser sådan ud:

Denne side gengives helt på klientsiden ved hjælp af Preact, som et kig på kildekoden beviser:

Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');
(function(i,s,o,g,r,a,m))(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');

Hvis Googlebot ikke var i stand til at læse HTML-koden, der blev gengivet af Preact, ville den ikke vise mere end indholdet af metatags.

Og alligevel, her ser Google-resultaterne ud, når du søger efter site: preactjs.com :

En anden artikel af Andrew Farmer fra marts 2016 advarer om manglende JavaScript-support fra andre søgemaskiner end Google:

I min forskning kunne jeg ikke finde noget bevis for, at Yahoo, Bing eller Baidu understøtter JavaScript i deres crawlere. Hvis SEO på disse søgemaskiner er vigtig for dig, skal du bruge rendering på serversiden, som jeg vil diskutere i en fremtidig artikel.

Så jeg besluttede at prøve Jason's test med andre søgemaskiner:

✅ Bing

Andrews advarsel angående Bing virker ubetydelig. Her er Bing-resultaterne, når du søger efter site: preactjs.com :

✅ Yahoo

Og Yahoo-resultaterne, når de søger efter site: preactjs.com :

✅ Duck Duck Go

Og Duck Duck Go-resultaterne, når du søger efter site: preactjs.com :

⚠️ Baidu

Den kinesiske søgemaskine Baidu har problemer med preactjs.com. Her er resultaterne, når du søger efter site: preactjs.com :

Så det ser ud til, at medmindre rangordning højt i det, der i det væsentlige er en eneste søgemaskine i Kina, er en prioritet for dig, er der intet galt med at gengive dine websider på klientsiden ved hjælp af JavaScript, så længe du følger nogle grundlæggende regler (citeret fra Andrew Farmer's blogindlæg):

  • Gengiv dine komponenter, inden du gør noget asynkront.
  • Test hver af dine sider med Fetch as Google for at sikre, at Googlebot finder dit indhold

Tak for læsningen!

Opdatering 25. oktober 2016

Andrew Ingram kørte de samme tests, som jeg kørte, kom til en anden konklusion.

Citat fra Andrew:

Her er hvor mange sider forskellige søgemaskiner har indekseret ved hjælp af forespørgslen "site: preactjs.com" Google: 17 Bing: 6 Yahoo: 6 Baidu: 1Et af Googles resultater er en fejlside, men det kan formodentlig ikke de-indekseres automatisk på grund af, at der endnu ikke er en måde at erklære en 404-ækvivalent i SPA'er. Jeg har også læst (jeg kan ikke huske hvor), at Google har en latenstid på et par dage, når det kommer til indeksering af SPA'er sammenlignet med server- gengivne apps. Dette er muligvis ikke et problem for dig, men det er værd at vide om.

Hans arbejdshypotese er, at andre søgemaskine-robotter end Google er i stand til at indeksere gengivne sider på klientsiden, men ikke gennemgå dem, dvs. følge links og indeksere andre sider på et websted.

→ Følg diskussionen om Hacker News

Anerkendelser

Tak til Adam Audette (Search Engine Land) og Andrew Farmer for deres fremragende blogartikler, som jeg citerede fra, Jason Miller for hans input og inspiration, mine kolleger fra eBay Classifieds Group for deres støtte og Quincy Larson fra Free Code Camp for offentliggørelsen af ​​dette artikel!