SEO срещу React: Уеб роботите са по-умни, отколкото си мислите

Много хора все още се притесняват, че ако създадете уебсайтове, използвайки инструменти като React, Angular или Ember, това ще навреди на класирането на вашата търсачка.

Мисленето протича по следния начин: уеб роботите, които търсачките използват, няма да могат да обхождат страницата правилно, освен ако не са изцяло изобразени в браузъра на потребителя. Вместо това те ще виждат само HTML кода, доставен от бекенда.

Ако този HTML код не съдържа нищо повече от няколко мета тагова и тагове за скриптове, търсачката ще приеме, че страницата ви е по принцип празна и ще ви класира зле.

Обикновено виждам, че консултантите за оптимизация на търсачки (SEO) препоръчват да изобразите страницата си в бекенда, така че уеб роботите да могат да видят много хубави HTML кодове, които след това могат да индексират.

За мен този съвет изглежда неразумен и нереален. Това е 2016 г. Потребителите очакват страниците да бъдат динамични и да им осигурят бърз потребителски опит. Те не искат да чакат нова HTML страница да се зареди всеки път, когато щракнат върху нещо.

И така, твърдението „визуализацията от страна на клиента вреди на ранга на вашата страница“ все още е валидно?

Изследване

Първо, отказ от отговорност: В никакъв случай не съм SEO експерт. Но прочетох малко темата и ето какво открих.

Ето съобщение от Google в техния блог за уеб администратори от октомври 2015 г .:

Днес, докато не блокирате Googlebot да обхожда вашите JavaScript или CSS файлове, ние обикновено сме в състояние да изобразяваме и разбираме вашите уеб страници като съвременните браузъри. За да отразим това подобрение, наскоро актуализирахме техническите си насоки за уеб администратори, за да препоръчаме да не се разрешава на Googlebot да обхожда CSS или JS файлове на вашия сайт.

Ето статия на Land of Search Engine от май 2015 г.:

Изпълнихме поредица от тестове, които потвърдиха, че Google може да изпълнява и индексира JavaScript с множество внедрения. Също така потвърдихме, че Google е в състояние да изобрази цялата страница и да прочете DOM, като по този начин индексира динамично генерирано съдържание. SEO сигналите в DOM (заглавия на страници, мета описания, канонични тагове, мета роботи етикети и др.) Се спазват. Съдържанието, динамично вмъкнато в DOM, също може да се обхожда и индексира. Освен това, в някои случаи DOM сигналите могат дори да имат предимство пред противоречиви изявления в изходния HTML код. Това ще изисква повече работа, но това беше случаят с няколко от нашите тестове.

Тези два източника предполагат, че всъщност е безопасно да се използва рендирано оформление от страна на клиента.

Тестът Preactjs.com

Наскоро туитнах оплаквания относно SEO консултанти, които се занимават с любимия ми React. За да бъда точен, аз съм в процес на мигриране към Preact, лека алтернатива на React на Facebook. Получих този отговор от Джейсън Милър, един от разработчиците, работещи по Preact:

Освен статията в блога от Search Engine Land, която цитирах по-горе, Джейсън туитна връзка към търсене в Google за началната страница на Preact, която изглежда така:

Тази страница се изобразява изцяло от страна на клиента, като се използва Preact, както се вижда от изходния код:

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

Ако Googlebot не беше в състояние да прочете HTML кода, представен от Preact, той нямаше да показва повече от съдържанието на мета таговете.

И все пак, ето как изглеждат резултатите от Google при търсене на сайт: preactjs.com :

Друга статия на Андрю Фармър от март 2016 г. предупреждава за липса на поддръжка на JavaScript от търсачки, различни от Google:

В изследването си не можах да намеря доказателства, че Yahoo, Bing или Baidu поддържат JavaScript в своите роботи. Ако SEO за тези търсачки е важно за вас, ще трябва да използвате визуализация от страна на сървъра, което ще обсъдя в следваща статия.

Затова реших да изпробвам теста на Джейсън с други търсачки:

✅ Бинг

Предупреждението на Андрю относно Бинг изглежда несъществено. Ето резултатите от Bing при търсене на сайт: preactjs.com :

✅ Yahoo

И резултатите от Yahoo при търсене на сайт: preactjs.com :

✅ Duck Duck Go

И резултатите от Duck Duck Go при търсене на сайт: preactjs.com :

⚠️ Байду

Китайската търсачка Baidu има проблеми с preactjs.com. Ето резултатите от него при търсене на сайт: preactjs.com :

Така че изглежда, че освен ако високото класиране в това, което по същество е само търсачка в Китай, не е приоритет за вас, няма нищо лошо в това да рендирате уеб страниците си от страна на клиента с помощта на JavaScript, стига да спазвате някои основни правила (цитирано от публикацията в блога на Андрю Фармър):

  • Визуализирайте компонентите си, преди да направите нещо асинхронно.
  • Тествайте всяка от страниците си с Fetch as Google, за да сте сигурни, че Googlebot намира вашето съдържание

Благодаря за четенето!

Актуализация от 25 октомври 2016 г.

Андрю Инграм проведе същите тестове, както и аз, стигна до различно заключение.

Цитат от Андрю:

Ето колко страници са индексирали различни търсачки, използвайки заявката „site: preactjs.com“ Google: 17 Bing: 6 Yahoo: 6 Baidu: 1 Един от резултатите на Google е страница за грешка, но вероятно не може да бъде деиндексирана автоматично поради това, че все още не е налице начин за деклариране на 404 еквивалент в SPA. Също така прочетох (не мога да си спомня къде), че Google има латентност от няколко дни, когато става въпрос за индексиране на SPA в сравнение със сървъра- изобразени приложения. Това може да не е проблем за вас, но си струва да знаете.

Неговата работна хипотеза е, че роботите на търсачките, различни от Google, са в състояние да индексират показани от клиента страници, но не и да ги обхождат , т.е.

→ Следвайте дискусията в Hacker News

Благодарности

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!