SEO & Рэакцыя ∴ Ізамарфізм & Індэксацыя

1. Што такое Рэакцыя? У чым сэнс? Чаму гэта добра?
2. Так ... WTF з JavaScript?
3. "Мы спрабуем зразумець JavaScript па JavaScript"
4. "Гэта цяжка зрабіць у маштабах сеткі, але мы вырашылі, што гэта варта. "
5. Што такое Рэакцыя?
6. Моцныя бакі рэагаваць
7. Ізамор ... што?
8. ReactJS ≠ AngularJS
9. Як вы гэта робіце?
10. Перавагі ReactJS для SEO
11. Недахопы рэагаваць?
12. Хто выкарыстоўвае React?
13. І ўсё яшчэ не скончана ...
14. Крыніцы і натхненне
15. Праігнараваныя прадметы

Гэта афіцыйны React на ўсіх вуснах, але нават за кошт вялікіх намаганняў па дакументацыі, цяжка зразумець, што ўплыў гэтай тэхналогіі на SEO. Невялікае асвятленне, каб асвоіць гэтую тэму?

Што такое Рэакцыя? У чым сэнс? Чаму гэта добра?

З з'яўленнем SPA , амаль "у рэжыме рэальнага часу" такія вэб-прыкладанні, як Gmail, Airbnb, Soundcloud або Netflix, JS і бібліятэкі ніколі не былі так папулярныя.

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

Цяжка прапусціць такія тэхналогіі, як AngularJS (рамкі Google), Backbone.js, Ember.js або KnockoutJS.

Масавае выкарыстанне JavaScript змяняе гульню з пункту гледжання SEO.

Так ... WTF з JavaScript?

Галоўная праблема гэтых фреймворкаў заключаецца ў тым, што змесціва ўводзіцца на баку кліента пасля загрузкі старонкі на серверы (напрыклад, у адрозненне ад PHP): калі глядзець на зыходны код, гэта нічога!

У гэтых абставінах Googlebot не ўдалося сканаваць і праіндэксаваць гэты змест, уведзены a posteriori: катастрафічны, так што з пункту гледжання SEO! (Мабыць , ...)

Нядаўна Google абвясціла, што Googlebot зараз будзе спрабаваць інтэрпрэтаваць сканаваныя старонкі, запусціўшы JavaScript ... "Паспрабуе ..."

"Мы спрабуем зразумець JavaScript па JavaScript"

Пра гэта гаворыцца ў паведамленні ад 23 мая 2014 года GoogleBot можа інтэрпрэтаваць JavaScript і, такім чынам, індэксацыя змесціва раней нябачнае (таму што згенеравана кліенцкая бок, а не серверная, вы прытрымлівацца а ..) Аднак вы можаце сабе ўявіць, у маштабах сеткі, гэта праца тытана ...

"Гэта цяжка зрабіць у маштабах сеткі, але мы вырашылі, што гэта варта. "

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

Гэта дзе React, ака рашэнне прыходзіць! Вы ўсё яшчэ прытрымлівацца?

Што такое Рэакцыя?

рэагаваць гэта бібліятэка ( набор метадаў і функцый ) для распрацоўкі інтэрфейсаў з характарыстыкай, якая змяняецца пастаянна : мы можам думаць пра модуль каментароў у рэжыме рэальнага часу або на Facebook Ticker (у якім падсумоўваецца актыўнасць вашых сяброў). , там таксама ў квазі "рэальны час").

Сіла React заключаецца ў тым, каб заўсёды знаходзіць найлепшы спосаб абнавіць і хутка адлюстроўваць [ гэтыя змены ] , не патрабуючы перазагрузкі старонкі .

Распрацоўка, а таксама публікацыя гэтай бібліятэкі вынікае з супрацоўніцтва сто ці каля таго распрацоўнікаў працуе для розных кампаній, уключаючы ініцыятыву Facebook і Instagram: даволі сур'ёзна!

Моцныя бакі рэагаваць

"Рэагаваць так хутка, таму што ён ніколі не размаўляе з DOM напрамую. "

1. Інтэлектуальнасць : код прадукту "чысты" ( просты ў чытанні, разуменні і абслугоўванні), і яго чытанне дазваляе неадкладна ўбачыць, як будзе працаваць ваша прыкладанне.
2. Прадукцыйнасць : Гэта адна з ключавых асаблівасцяў канцэпцыі React Віртуальны DOM , React засяроджана на апрацоўцы і адлюстраванні толькі змяненняў у праекце (адкласці астатнюю частку выгляду, якая не змяняецца).
3. Супольнасць : ReactJS хутка спакушыла супольнасць распрацоўнікаў JS. І не кажучы ўжо пра React Native, які са свайго боку можа публікаваць уласныя прыкладанні iPhone (і Android хутка), напісаўшы JavaScript. Таму эканоміць значны час.
4. [HOT SEO] Ізамарфізм і рэндэрынг на серверы : праз выкарыстанне сервера вузел , код можа быць сгенераваны на баку кліента і на сэрвэры (падобна PHP так ... але без перазагрузкі!) у адрозненне ад іншых бібліятэк і традыцыйных баз JS ( Backbone.js , AngularJS , ember.js і г. д.), які выконвае код толькі на баку кліента (у браўзэры). Гэты моцны момант - гэта тое, што нас больш за ўсё цікавіць з пункту гледжання SEO, паколькі ён вырашае праблему індэксацыі зместу (магчымасці сканавання і індэксацыі), населенай толькі кліентам.

Ізамор ... што?

Проста памятайце, што код паміж кліентам (вашым браўзэрам) і серверам адзін і той жа! І кажа інакш "Бэкэнд і франтэнд маюць агульны код. (Паказана справа на схеме)

Акрамя таго, React - гэта не адзіная бібліятэка, якая "ўкладвае" гэтую тэхналогію . На сённяшні дзень ужо налічваецца дваццаць гадоў, такіх як Брыскэт, Касіс, Catberry , Чаплін , кацялок , Эзель , Эст, Флатирон, топкія , Нябачны, jsblocks , Loopback, Лазойс, петлевой , Мохито, Sara.js, Сан Стэк і Taunus ,

Што тычыцца тэрміналогіі ў іншых месцах, то аддаюць перавагу размаўляць Універсальны JavaScript а не изоморфизм. Варта прызнаць, што гэта выраз выразна зразумець.

"... гэта чыста анекдатычнае сведчанне, але калі мы выкарыстоўваем слова" універсальны ", а не" изоморфный ", то кожны атрымлівае яго. "

ReactJS ≠ AngularJS

"Шмат людзей выкарыстоўваюць V у MVC. "

Не трэба параўноўваць іх, Рэагаваць у адрозненне ад AngularJS не з'яўляецца рамкай.

Калі Розніца паміж структурай і бібліятэкай Вы апантаныя, не саромейцеся зірнуць на гэтыя дыскусіі. Для іншых проста памятайце, што React не накладвае канкрэтную архітэктуру на вашае прыкладанне і можа быць прыцягнута да любога праекта, выкарыстоўваючы іншыя вэб-тэхналогіі (у тым ліку AngularJS), цалкам самастойна.

" Рэагаваць гэта проста прагляду ... "

Як вы гэта робіце?

Мы плацім, альбо мы займемся!

Калі ў нас няма сродкаў, мы прапануем сканерам альтэрнатыўную HTML-версію (здымак) сваіх старонак дзякуючы Phantom.js (вы можаце паглядзець на гэты падручнік Каб атрымаць уяўленне, мала датуецца, але дух ёсць). Так, ад маскіроўка ! Гэта "брудныя" пурыры, кажуць, цяжка падтрымліваць, але гэта працуе, вельмі добра.

Калі няма, і калі ў вас мала бюджэту (ці ўтрымліваецца бізнес-мадэль), то гэта вельмі магутны і просты ў наладцы: ён называецца PreRender або BromBone назваць толькі іх. Калі тэма « Як зрабіць SEO-дружалюбныя прыкладанні JavaScript »Цікавіць вас, гэты артыкул добры.

Перавагі ReactJS для SEO

1. Магчымасць сканавання сканаваць і індэксаваць уласнае змест: у нас ёсць усе перавагі JS, без недахопаў!
2. Спрыяльны час загрузкі спрыяе добраму карыстачу. Шчаслівыя карыстальнікі = Шчаслівы Google.

І ўсё! Так, з пункту гледжання SEO. Усё будзе залежаць ад таго, што вы будзеце рабіць у наступным бэк-офісе. І для завяршэння аналізу па гэтай тэме я прапаную вам зірнуць на гэты артыкул Зак Аргайл, распрацоўшчык @Pinterest Msgstr "Спыніць выкарыстанне рэагаваць на ўсё"

"Калі ў вас ёсць моцнае дынамічнае прыкладанне, якое неабходна рэгулярна абнаўляць, і вы хочаце пазбегнуць цяжкіх адрозненняў, вы глядзіце на праціўніка тыпу травы, і віртуальны DOM ReactJS будзе вельмі эфектыўным. Аднак, калі вы не будзеце мець такіх патрэбаў, абярыце што-небудзь яшчэ! "

Недахопы рэагаваць?

Прасцей кажучы, няма ніводнага. Калі мы трохі капаем, мы можам адзначыць гэта:

• Дакументацыя развіваецца, але ўсё роўна было нялёгка атрымаць толькі пачатак Facebook.
• Facebook пакідае за сабой права ануляваць ліцэнзію , права карыстацца React. Гэтая тэма абмяркоўваецца, хоць наіўна можна задацца пытаннем, наколькі цікавасць будзе Facebook прыняць такі тып паводзін.

Хто выкарыстоўвае React?

Усё больш і больш кампаній! Размаўляць пра самых вядомых, вядома, мы можам прывесці Facebook, Instagram, але таксама Yahoo, Adobe, Airbnb, AdRoll, Asana, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Хан Акадэмію, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp і поўны іншых ,

І ўсё яшчэ не скончана ...

Вам спадабаўся гэты артыкул? Дзякуй за тое, што вы падзяліліся ім ці распавядалі пра свой досвед (добра ці дрэнна) з рамкамі і бібліятэкамі JS, пакінуўшы каментар.

І калі ў вас яшчэ ёсць энергія, я магу толькі параіць вам прачытаць наш папярэдні артыкул Demandware: плюсы і мінусы для SEO ,

PS: Дзякуй Georges , Жэрэмі , Blandine , Франсуа і Одры для карэктуры!

Крыніцы і натхненне

1. Рэакцыя супраць AngularJS - Як параўнаць іх [EN]
2. Facebook ReactJS - Рэсурсы для пачатку [FR]
3. Awesome React, калекцыя цудоўных інструментаў, рэсурсаў, відэа і бліскучых рэактараў [EN]

Праігнараваныя прадметы

1. React Native, структура для стварэння ўласных прыкладанняў з выкарыстаннем React [EN]
2. JSX, пашырэнне сінтаксісу JavaScript, падобнае на XML [EN]
3. Шматразовыя кампаненты [EN]
4. Рэактыўныя дапаўненні, некаторыя карысныя ўтыліты для стварэння прыкладанняў React [EN]
5. Flux, архітэктура прыкладанняў для стварэння вэб-прыкладанняў на кліенце [EN]