SEO для вэб-сайтаў ReactJS

1. 1. URL-адрас павінен быць «Google дружалюбнымі» і загрузіць самастойна
2. 2. Выкарыстоўвайце стандартныя спасылкі <a href> ў вашым HTML
3. 3. Сервернай JavaScript

Наша команда-партнер Artmisto

ReactJS з'яўляецца папулярнай бібліятэкай JavaScript выкарыстоўваецца для расце ліку сайтаў. На самай справе, 5,6% топ 10000 сайтаў у цяперашні час выкарыстоўвае React, па лічбавым тэхналогіі сайт трэнду BuiltWith.

Стварэнне вэб-сайты і мабільныя вэб-прыкладанні ў React можа дапамагчы стварыць сучасны карыстацкі досвед, аднак, як і многія іншыя тэхналогіі JavaScript, ёсць пошукавыя задачы рухавіка для ўліку. На шчасце, React дазваляе альбо на баку кліента або на боку сервера рэндэрынгу JavaScript (што робіць яго «ізаморфныя»), што азначае, што React сайт можа канкураваць за трафікам.

Некаторыя з абласцей, каб назіраць за захаванне і вырошчванне арганічнага руху пры пераходзе на React сайце JS пералічаныя ніжэй.

1. URL-адрас павінен быць «Google дружалюбнымі» і загрузіць самастойна

URL-адрас павінен выглядаць як статычныя URL-адрас з каталогамі як мага больш (http://www.alicesbooks.com/fiction/sci-fi/). Яшчэ лепш, пераканайцеся, што вы карыстаецеся словы, якія апісваюць змест, так што кожны можа зразумець.

Некаторыя JavaScript-цяжкіх сайтаў або адну старонку прыкладання маюць хэштэгу ў URL, які Google, верагодна, не будзе паўзці (напрыклад https://www.alicesbooks.com/#scifi).

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

Распрацоўшчык Заўвага: Адзін з спосабаў развіваць гэтыя віды унікальных URL - адрасоў з'яўляецца навігацыйным кампанентам для React, такіх як Рэагаваць маршрутызатар https://github.com/ReactTraining/react-router , PMG выкарыстоўвае Рэагаваць маршрутызатар з некаторымі нашымі ўласнымі інструментамі.

2. Выкарыстоўвайце стандартныя спасылкі <a href> ў вашым HTML

Пераканайцеся, лагічна вынікае ўтрыманне звязана з дапамогай <a href> спасылкі забяспечыць адкрыццё пошукавай сістэмы.

Пазбягайце размяшчэнне важнага змесціва за падзеямі JavaScript. Google не можа прытрымлівацца сайта «OnClick» падзеі на ўсіх. Як паказана на Мос у мінулым годзе, проста «не выкарыстоўваць OnClick падзей у JavaScript у якасці замены для ўнутраных спасылак.»

3. Сервернай JavaScript

Навошта выкарыстоўваць серверны рэндэрынг? Серверны рэндэрынгу забяспечыць ёсць звычайны HTML для Googlebot лёгка чытаць. Так, Google, безумоўна, можа сканаваць і візуалізацыі на баку кліента JavaScript. У канкурэнтных прасторах, гэта занадта дорага, каб спадзявацца толькі на аказанне Google, ускладненых JavaScript.

1. Google вельмі прасунуць у яго здольнасці аказваць на бок кліента JavaScript. Тым не менш, пошукавыя сістэмы і іншыя платформы, такія як Bing, Baidu, Yandex, Apple і Facebook, якія рэгулярна скануюць сайты, як правіла, менш развіты і могуць прывесці да значнага скарачэння трафіку.
2. Цяжкае баку кліента візуалізацыі, здаецца, прыводзіць да Google поўзаць менш старонак для сайта - гэта азначае, новыя старонкі будуць атрымліваць менш трафіку. Google не заўсёды робяць на баку кліента JavaScript, каб цалкам зразумець старонку. Гэта, верагодна, з-за часу, неабходнага запавольвае значна паўзе.
3. Google можа проста не зразумець тое, што чалавек не будзе мець праблем з пры працы з JavaScript. Часам нязначныя памылкі JavaScript можа прывесці да Google адсутнай кантэнту.
4. Нават калі пошукавая сістэма скануе і адлюстроўвае на баку кліента JavaScript, гэта ўсё яшчэ можа прывесці да паводзін, якое з'яўляецца нечаканым, напрыклад, поўзаць тон недарэчных JSON-файлаў. Pre-візуалізацыі HTML проста прасцей для пошукавых сістэм (і маркетолагаў), каб цалкам зразумець.

Што для адлюстравання на боку сервера? Змест і спасылкі павінны быць даступныя ў HTML і павінны быць сканіравацца для Google, каб надзейна прачытаць на гэтай старонцы. JavaScript і CSS файлы таксама павінны быць зроблены скануюцца, трымаючы іх адмыкнутая з дапамогай файлаў robots.txt. Зыходнае змест, якое загружае, перш чым карыстальнік ўзаемадзейнічае павінна быць зроблена на боку сервера. Пасля гэтага, на баку кліента рэндэрынгу OK.

Распрацоўшчык Заўвагі па ажыццяўленню

• Серверны рэндэрынг HTML можа быць зроблена з дапамогай «ReactDOM.renderToString» замест «ReactDOM.render.» Рэагаваць шлем можа быць карысным для візуалізацыі галаўнога секцыі элементы, такія як мета-тэгі.
• Вазьміце погляд на Наступная структура JS для React. Наступны JS пабудаваны спецыяльна для сервернага рэндэрынгу і пастаўляецца са сваёй уласнай унутранай бібліятэкай маршрутызацыі. Будаўніцтва з нуля прасцей, чым дааснашчэнне код, каб зрабіць на боку сервера візуалізацыі.