SEO: індэксаванне прыкладання JavaScript

1. Як Вуглавыя Універсальны працуе (тэорыя)
2. Як наладзіць Вуглавая Universal (практыка)
3. Ці сапраўды гэта працуе?
4. sitemap.xml поўзаць
5. JS-уключаны поўзаць
6. недахопы
7. разгортванне
8. вопыт карыстальніка
9. Што рабіць, калі вы не выкарыстоўваеце Кутнім?
10. ReactJS
11. Vue.js
12. Папярэдне апрацоўваць-шпа-убудова
13. Prerender.io
14. ваш чарга

Адным з найбольш важных SEO выклік на дадзены момант з'яўляецца JavaScript прыкладання індэксацыі у пошукавых сістэмах.

Паколькі Google абвясціў аб «Ajax-паўзе схему» індэксацыя састарэння (= на аснове URL спецыфічных фрагментаў), шматлікія эксперыменты былі працаваць для таго , каб вызначыць фактычныя індэксацыі здольнасці самога важнай пошукавай сістэмы.

Вось, напрыклад, вельмі цікавы JavaScript каркасаў параўнання :

Google рэгулярна сцвярджае, што яна інтэрпрэтуе JavaScript, але ёсць некаторыя абмежаванні :

• Толькі індэксавацца кантэнт з'яўляецца адзін даступны на старонцы ў выпадку нагрузкі;
• JavaScript павінен быць дастаткова хутка ( 5 другой s, здаецца, мяжа).

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

Найлепшым рашэннем з'яўляецца стварэнне на боку сервера візуалізацыі.

TL; DR: Вы павінны выкарыстоўваць Серверны ПРАДАСТАЎЛЕННЕ.

Мы ўяўляем тут эфектыўнае рашэнне для кутніх 4 прыкладанняў: кутняя Універсальны ,

Як Вуглавыя Універсальны працуе (тэорыя)

Вуглавыя універсальны меў звычай быць Кутнім 2 дадаткам, і цяпер інтэграваны ў кутняе 4 ядро. Гэта дазваляе генераваць на боку сервера, што прыкладанне павінна быць зроблена на баку кліента. Пасля дастаўкі ў браўзэры, гэта папярэдне апрацаваную версію регідратацыі з дадаткам JS і ўсё , што будзе адбывацца далей будзе зроблена на баку кліента.

Яна патрабуе , каб разгарнуць NodeJS на серверы (але PHP і Python рэалізацыі плануюцца).

Заўвага: Вуглавая 4 не моцна адрозніваецца ад Кутняе 2, ён проста назваў тое, што шлях з-за семантычнай versionning. Калі вы выкарыстоўваеце Вуглавыя 2, вы павінны абнавіць вуглавыя 4.

Як наладзіць Вуглавая Universal (практыка)

Як і варта было чакаць, ёсць шмат, каб растлумачыць, аб практыцы, таму мы напісалі аддзелены артыкул пра гэта: Як усталяваць вуглавыя Універсальныя ,

Ці сапраўды гэта працуе?

стандартны поўзаць

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

Гэта прыкладна эквівалентна асноўнай каманды завітка:

завітак https://your-url.com

на вашым сайце: гэта проста donwloads выніковы HTML і не запускаць любыя JS або вэб-рэндэрынгу.

Час водгуку вельмі добрае (HTML пастаўляецца ў менш чым 500 мс). Заўважым перш за ўсё, інструмент збірае ўсе спасылкі старонкі правільна і поўзае ўвесь сайт. Гэта сапраўды збірае назву, H1 або мета - апісання тэгаў і ўсё змесціва HTML адпавядае таму , што было б у запушчанае прыкладанне на баку кліента. Такім чынам, стандартнае суадносіны старонкавы тэкст і словы могуць быць вылічаныя гэтак жа, як калі б гэта быў звычайны вэб-сайт.

Пошукавыя сістэмы не будуць мець ніякіх праблем у індэксацыі нашага сайта.

sitemap.xml поўзаць

Аб рэгулярным дадатку JS, адзін з абыходнага з'яўляецца стварэнне файла sitemap.xml, каб пераканацца, што пошукавыя сістэмы праіндэксаваць усе старонкі.

Ён працуе таксама з кутнім Universal, але гэта не з'яўляецца неабходным , паколькі ўсе спасылкі выяўляныя ў згенераваных старонках.

JS-уключаны поўзаць

Наш другі тэст дазволіць JavaScript:

Як і варта было чакаць, поўзанне цяпер значна больш павольна (як інструмент спрабуе выканаць увесь код JS). Мы часта атрымліваем некаторы тайм-аўт і спасылкі на старонкі ня сканіравацца.

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

недахопы

дакументацыя

Яна яшчэ маладая тэхналогія, гэта дрэнна дакументаваны. Адсутнасць дакументацыі можа паўплываць на праект.

разгортванне

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

вопыт карыстальніка

Вы можаце ўключыць Універсал толькі для робатаў або для ўсіх наведвальнікаў.

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

Модуль кутні / Preboot прызначаны , каб пазбегнуць гэтага. З дапамогай гэтага модуля, пасля таго, як версія PreRender старонкі візуалізуецца, то на баку кліента версія запускаецца ў схаваным DOM копіі. У той жа час, усе ўзаемадзеяння карыстальнікаў запісваюцца. Як толькі выкананне скончана, версія і папярэдне сфармавана на баку кліента версія перамыкаюцца і ўзаемадзеяння прайграваюцца.

Настройка Preboot не лёгка і будзе прадметам будучай артыкула.

Што рабіць, калі вы не выкарыстоўваеце Кутнім?

Іншыя асноўныя структуры маюць эквівалентныя рашэнні і калі яны гэтага не робяць, вы ўсё яшчэ можаце выкарыстоўваць prerender.io ).

ReactJS

• Самым вядомым рашэннем на боку сервера візуалізацыі для React з'яўляецца Next.js , Гэта вельмі лёгка ўсталяваць, але ўсё ж рэкамендуецца ўсталяваць яго ў пачатку, а не праект скончаны. Next.js прапануе кампанент Link для кіравання маршрутамі. Яно таксама заменіць канфігурацыю Webpack для генерацыі пучка.
• З існуючым дадаткам, выкарыстоўваючы пэўную дзёрзкасць і канфігурацыю WebPack, уключаючы прыстасаваныя пагрузчыкі і г.д., гэта можа быць прасцей у выкарыстанні экспрэса і адаптаваць канфігурацыю. У гэтым выпадку, вы можаце выкарыстоўваць зрэагаваць-дом renderToString , І вы павінны будзеце адаптуюць рэагаваць-маршрутызатар (Калі выкарыстоўваецца).

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

Vue.js

Vue.js прапануе некалькі рашэнняў на боку сервера візуалізацыі:

• Nuxt.js , Які з'яўляецца эквівалентам Next.js для VueJS. nuxt / стартар Шаблон дазваляе самонастройки праекта, здольны генераваць ўсе старонкі ў статычнай версіі. Гэтыя файлы могуць быць абслужаны Nginx непасрэдна.

• Ую SSR з'яўляецца больш складаным. Гэта даволі блізка да кутніх Universal. Вам прыйдзецца адаптавацца да ўмоў выканання, каб вырабіць дакладную службу SSR. Толькі beforeCreate і інш стварылі гаплікі жыццёвага цыклу даступныя на серверным боку.
  Яна забяспечвае гарачую перазагрузку (так што вам не прыйдзецца перазагрузіць сервер кожны раз Node), што зручна.

Папярэдне апрацоўваць-шпа-убудова

PreRender-спа-убудова з'яўляецца WebPack убудова. Гэта аснова агностыку, і дазваляе візуалізаваць калекцыю URL. Мноства уверх вельмі хутка І могуць быць інтэграваныя ў вашым SPA зборкі. Атрыманыя статычныя файлы проста павінны быць апублікаваныя на вэб-сервер.

Prerender.io

Prerender.io з'яўляецца агульным рашэннем для стварэння статычнай версіі любога прыкладання JavaScript.

Гэта рашэнне SaaS, але кампанія таксама дае свой інструмент як праект з адкрытым зыходным кодам , Так што вы можаце ўсталяваць яго на свой уласны сервер.

У асноўным, гэта сэрвіс шматструменнага забеспячэння PhantomJS выпадкі, адказныя за аказанне старонак.

Мы рэкамендуем, каб запусціць яго за проксі-серверам Nginx (ёсць «Афіцыйная» канфігурацыя Nginx , І мы зрабілі некалькі прыстасаванні ).

ваш чарга

Ўсталявалі вы яго? У вас ёсць зваротная сувязь, каб падзяліцца? Ці ёсць у вас сутыкаюцца з праблемамі? ЗВЯЖЫЦЕСЯ З НАМІ калі вам патрэбна дапамога, ці замовіць SEO АЎДЫТ !