SEO vs. React: A webrobotok okosabbak, mint gondolnád

Sokan még mindig attól tartanak, hogy ha olyan webhelyeket építesz fel, mint a React, az Angular vagy az Ember, akkor az rontani fogja a keresőmotor rangsorolását.

A gondolkodásmód így szól: a keresőmotorok által használt webrobotok csak akkor képesek feltérképezni az oldalakat, ha azokat a felhasználó böngészőjében renderelik teljesen. Ehelyett csak a háttérprogramból szállított HTML-kódot fogják látni.

Ha ez a HTML-kód nem tartalmaz mást, mint néhány metacímkét és szkriptcímkét, a keresőmotor feltételezi, hogy az oldalad alapvetően üres, és rosszul rangsorol.

Gyakran látom, hogy a Keresőoptimalizálás (SEO) tanácsadói azt javasolják, hogy az oldalt jelenítse meg a háttérképen, hogy a webrobotok sok szép HTML-kódot láthassanak, amelyeket aztán indexelhetnek.

Számomra ez a tanács ésszerűtlennek és irreálisnak tűnik. 2016 van. A felhasználók elvárják, hogy az oldalak dinamikusak legyenek, és élénk felhasználói élményt nyújtsanak számukra. Nem akarják megvárni az új HTML-oldal betöltését, valahányszor rákattintanak valamire.

Tehát továbbra is érvényes az „ügyféloldali megjelenítés sérti az oldal rangját” állítás?

A kutatás elvégzése

Először is, egy nyilatkozat: korántsem SEO szakember. De olvastam egy kicsit a témában, és itt találtam.

Íme a Google bejelentése a webmester blogjukon 2015 októberétől:

Ma, amíg nem tiltja le a Googlebot számára a JavaScript vagy CSS fájlok feltérképezését, általában képesek vagyunk a weboldalak renderelésére és megértésére, mint a modern böngészők. Ennek a fejlesztésnek a tükrében a közelmúltban frissítettük a webmesterekkel kapcsolatos technikai irányelveinket, amelyek azt javasolják, hogy ne tiltsák meg a Googlebot webhelye CSS- vagy JS-fájljainak feltérképezését.

Íme egy keresőmotor-cikk 2015 májusából:

Futtattunk egy sor tesztet, amelyek igazolták, hogy a Google képes végrehajtani és indexelni a JavaScript-et számos megvalósítással. Megerősítettük azt is, hogy a Google képes az egész oldal renderelésére és a DOM olvasására, ezáltal dinamikusan generált tartalom indexelésére. A DOM-ban található SEO-jeleket (oldalcímek, metaleírások, kanonikus címkék, metarobot-címkék stb.) Tiszteletben tartják. A DOM-ba dinamikusan beillesztett tartalom szintén feltérképezhető és indexelhető. Bizonyos esetekben a DOM jelek akár elsőbbséget élvezhetnek a HTML forráskódban szereplő ellentmondó állításokkal szemben. Ehhez több munkára lesz szükség, de több tesztünk esetében is így volt.

Ez a két forrás azt sugallja, hogy valóban biztonságos az ügyféloldali renderelt elrendezés használata.

A Preactjs.com teszt

Nemrégiben tweeteltem egy panaszt a SEO tanácsadókról, akik a szeretett React-emről szurkálnak. Pontosabban: a Preact-ra költözök, amely a Facebook React könnyű alternatívája. Ezt a választ kaptam Jason Millertől, a Preact egyik fejlesztőjétől:

Eltekintve a Search Engine Land blog cikkétől, amelyet fentebb idéztem, Jason tweetelt egy linket a Google kereséshez a Preact honlaphoz, amely így néz ki:

Ez az oldal teljes egészében ügyféloldalon jelenik meg, az Előkészítés használatával, mivel a forráskód megnézése azt bizonyítja:

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');

Ha a Googlebot nem tudta elolvasni a Preact által renderelt HTML-kódot, akkor az csak a metacímkék tartalmánál fog megjelenni.

És mégis, így néznek ki a Google eredményei, amikor a következő webhelyre keresnek : preactjs.com :

Andrew Farmer egy másik, 2016. márciusi cikke arra figyelmeztet, hogy a Google-tól eltérő keresőmotorok nem támogatják a JavaScript-et:

Kutatásom során nem találtam bizonyítékot arra, hogy a Yahoo, a Bing vagy a Baidu támogatná a JavaScriptet a robotjaiban. Ha fontos ezeknek a keresőmotoroknak a SEO, akkor a szerveroldali renderelést kell használnia, amelyet egy későbbi cikkben tárgyalok.

Ezért úgy döntöttem, hogy kipróbálom Jason tesztjét más keresőkkel:

✅ Bing

Andrew figyelmeztetése Bingre vonatkozóan lényegtelennek tűnik. Itt vannak a Bing eredményei a webhely keresésekor : preactjs.com :

✅ Yahoo

És a Yahoo eredmények a következő webhely keresésekor : preactjs.com :

✅ Duck Duck Go

És a Duck Duck Go eredmények a következő webhely keresésekor : preactjs.com :

Aid️ Baidu

A Baidu kínai keresőnek problémái vannak a preactjs.com-tal. Itt találhatók az eredmények a következő webhely keresésekor : preactjs.com :

Tehát úgy tűnik, hogy hacsak nem a magas rangsorolás a lényegében csak Kínában található keresőmotor számára elsőbbséget élvez, akkor semmi baj nincs azzal, ha weboldalait az ügyféloldalon JavaScript segítségével tesszük közzé, mindaddig, amíg betartasz néhány alapvető szabályt (idézve Andrew Farmer blogbejegyzéséből):

  • Adja meg alkatrészeit, mielőtt bármi aszinkron műveletet végezne.
  • Tesztelje minden oldalát a Megtekintés Google-ként funkcióval, hogy megbizonyosodjon arról, hogy a Googlebot megtalálja a tartalmát

Köszönöm, hogy elolvasta!

Frissítve 2016. október 25

Andrew Ingram ugyanazokat a teszteket futtatta, mint én, és más eredményre jutott.

Idézet Andrew-tól:

Íme, hány oldalt indexelt a különböző keresőmotorok a „site: preactjs.com” lekérdezéssel automatikusan annak köszönhető, hogy a SPA-kban még nem lehet 404-es egyenértéket deklarálni. Azt is olvastam (nem emlékszem, hol), hogy a Google néhány napos késéssel rendelkezik a SPA-k indexeléséről a szerverhez képest. renderelt alkalmazások. Lehet, hogy ez nem jelent problémát az Ön számára, de érdemes tudni róla.

Munkahipotézise az, hogy a Google-tól eltérő keresőmotorok képesek indexelni az ügyféloldali renderelt oldalakat, de nem tudják feltérképezni őket, azaz linkeket követni és indexelni egy webhely más oldalait.

→ Kövesse a Hacker News című beszélgetést

Köszönetnyilvánítás

Thanks to Adam Audette (Search Engine Land) and Andrew Farmer for their excellent blog articles from which I quoted, Jason Miller for his input and inspiration, my colleagues from the eBay Classifieds Group for their support and Quincy Larson of Free Code Camp for publishing this article!