SEO супраць React: вэб Шукальнікі разумнейшы, чым вы думаеце

  1. Выкананне навукова-даследчых
  2. тэст Preactjs.com
  3. ✅ Bing
  4. ✅ Yahoo
  5. ✅ Duck Duck Go
  6. ⚠️ Baidu
  7. Абнаўленне 25 кастрычніка 2016
  8. Acknowlegements

Многія людзі да гэтага часу асцерагаюцца, што калі вы будаваць сайты, выкарыстоўваючы такія інструменты, як React, Кутняе, або Ember, гэта пашкодзіць вашай пошукавай сістэмы рэйтынгу.

Мысленне ідзе нешта накшталт гэтага: вэб-сканеры, якія шукаюць выкарыстоўваць рухавікі не змогуць поўзаць старонкі належным чынам, калі гэта не цалкам адлюстроўваецца ў браўзэры карыстальніка. Замест гэтага яны будуць бачыць толькі HTML код, які пастаўляецца з ўнутранага інтэрфейсу.

Калі гэты HTML-код не ўтрымлівае нічога больш, чым пару мета-тэгі і тэгі сцэнара, пошукавая сістэма будзе лічыць, ваша старонка ў асноўным пусты і ранжыраваць вас дрэнна.

Я часта бачу Пошукавая аптымізацыя (SEO) кансультанты рэкамендуюць вам зрабіць вашу старонку на сервернай, так што вэб-шукальнікі могуць бачыць шмат добрых HTML код, які яны могуць затым горада.

Для мяне, гэты савет здаецца неразумным і нерэалістычным. Гэта 2016 г. Карыстальнікі чакаюць, што старонкі павінны быць дынамічнымі і забяспечыць іх падступным карыстацкі досвед. Яны не хочуць чакаць новага HTML-старонкі, каб загрузіць кожны раз, калі яны націскаюць на нешта.

Дык гэта «на баку кліента рэндэрынгу рэжа ранг старонкі» заяву застаецца ў сіле?

Выкананне навукова-даследчых

Па-першае, адмова ад адказнасці: я не буду ні ў якім разе эксперт SEO. Але я чытаў на гэтую тэму крыху, і вось што я знайшоў.

вось аб'яву ад Google на сваім вэб-майстры блога з кастрычніка 2015 года:

тэст Preactjs.com

Я нядаўна напісаў плач па SEO кансультантаў прыдзіркі аб маёй каханай React. Каб быць дакладным, я знаходжуся ў працэсе пераходу да апярэджання , Лёгкі вага альтэрнатывы Facebook, React. Я атрымаў гэты адказ ад Джэйсан Мілер , Адзін з распрацоўшчыкаў, якія працуюць на апярэджання:

Акрамя артыкула блога ад Search Engine Land, які я цытаваў вышэй, Джэйсан твітэры спасылку на пошук Google для ПРЕАКТ хатняй старонкі , Які выглядае наступным чынам:

Гэтая старонка адлюстроўваецца цалкам на баку кліента, выкарыстоўваючы апярэджання, як погляд на яго зыходны код даказвае:

<! DOCTYPE HTML> <HTML> <HEAD> <META кадоўкі = "UTF-8"> <назва> ПРЕАКТ: Fast React 3kb альтэрнатывы з той жа ES6 API. & Кампаненты ўзмацняльніка; Віртуальны DOM. </ Назва> <META NAME = "вьюпорт" змест = "шырыня = Прылада шырыня, пачаткова-шкала = 1, максімальны маштаб = 1, мінімальны-ш"> <META NAME = "мабільны вэб-дадатак сігналу кіравання на »змест =" так "> <META NAME =" яблык мабільных вэб-прыкладанняў з падтрымкай "змест =" так "> <META NAME =" -определение фармату "змест =" тэлефон = няма "> <META NAME = "тэма-колер" змест = "# 673AB8"> <спасылка отн = "праяўляюцца" HREF = "/ manifest.json"> <спасылка отн = "значок" Тып = "малюнак / PNG" HREF = "/ актывы / дадатак -icon-192.png »памеры =" 192x192 "> <скрыпт> (функцыя (URL) {акно [ '_ boostrap _' + URL] = выбаркі (URL);}) ( '/ ўтрыманне' + location.pathname.replace ( / ^ \ / (REPL) \ / $ /, '/ індэкс') + 'мкр.') ;? </ скрыпт> <спасылка отн = "ярлык" HREF = "/ favicon.ico"> <спасылка HREF = "/ style.6bae35e4ff9d687cb418.css" отн = "табліца стыляў"> </ галава> <цела> <скрыпт> (функцыя (я, s, о, г, г, а, т) {я [ 'GoogleAnalyticsObject'] = г; я [г] = я [г] || функцыя () {. (я [г] .q = я [г] .q || []) штурхаць (аргументы)}, я [г] = .l 1 * новая дата (); а = s.createElement (о), т = s.getElementsByTagName (о) [0]; a.async = 1; a.src = г; m.parentNode.insertBefore (а, т) }) (акно, дакумент, 'сцэнар', "// www.google- analytics.com/analytics.js','ga');ga('create », 'UA-6031694-20', 'аўто'); га ( 'адправіць', 'прагляд старонкі'); </ скрыпт> <скрыпт тып = "тэкст / JavaScript" SRC = "/ bundle.a0afd09fd48712ed0f26.js"> </ скрыпт> </ body> </ html>

Калі Googlebot не ў стане прачытаць HTML-код, вынесенае апярэджання, ён не будзе паказваць больш, чым змест мета-тэгаў.

І тым ня менш, вось што вынікі Google выглядаць пры пошуку сайта: preactjs.com:

яшчэ артыкул па Эндру Фармер з сакавіка 2016 года папярэджвае аб адсутнасці ў JavaScript падтрымкі пошукавых, акрамя Google рухавікоў:

✅ Bing

папярэджанне Андрэя аб Bing здаецца неістотным. вось Bing вынікі пры пошуку сайта: preactjs.com:

✅ Yahoo

і вынікі Yahoo пры пошуку сайта: preactjs.com:

✅ Duck Duck Go

і Вынікі Duck Duck Go пры пошуку сайта: preactjs.com:

⚠️ Baidu

Кітайскі пошукавік Baidu мае праблемы з preactjs.com. вось яго вынікі пры пошуку сайта: preactjs.com:

Таму, здавалася б, што калі не высокі рэйтынг у тым, што па сутнасці з'яўляецца Кітай толькі пошукавай сістэмы з'яўляецца прыярытэтнай задачай для вас, няма нічога дрэннага з прадастаўленнем вэб-старонак на баку кліента з дапамогай JavaScript, да таго часу, пакуль вы будзеце прытрымлівацца некаторых асноўных правілах (ЦІТ ад блог Эндру Фармер ):

  • Рэндэру вашых кампанентаў, перш чым рабіць што-небудзь асінхронна.
  • Праверце кожны з вашых старонак з Fetch , як Google , каб гарантаваць , што Googlebot знаходзіць сваё ўтрыманне

Дзякуй за чытанне!

Абнаўленне 25 кастрычніка 2016

Andrew Ingram пабег тыя ж тэсты, што я пабег прыйшоў да іншага высновы.

Quote ад Andrew:

Выконвайце абмеркавання на Hacker News

Acknowlegements

Дзякуючы Адам Одетт ( Land Search Engine ) і Эндру Фармер за іх выдатныя артыкулы блога, з якога я цытаваў, Джэйсан Мілер за яго ўклад і натхненне, мае калегі з eBay Аб'явы Група за іх падтрымку і Квінсі Ларсан Free Code Camp за публікацыю гэтага артыкула!

Дык гэта «на баку кліента рэндэрынгу рэжа ранг старонкі» заяву застаецца ў сіле?