Аптымізацыя адной старонкі прыкладання: зрабіць JavaScript сайт SEO-сумяшчальным

1. Чаму адзінкавыя прыкладання старонкі дрэнна для SEO?
2. Як вырашыць гэтую праблему?
3. Якія крокі вы можаце зрабіць, каб аптымізаваць зразумеласці вашага спа-салон?
4. высновы

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

Адна- старонка (SPA) у модзе ў цяперашні час. Facebook і Gmail ўсяго толькі некалькі добра вядомых прыкладаў. Усё знаёмыя з пошукавай аптымізацыяй бы сказаць вам, АГР з'яўляюцца SEO кашмар. Але вы не павінны адмовіцца ад тэхналогій, як бескарысна. Вось чаму.

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

Ёсць некалькі спосабаў, каб аб'яднаць выключную хуткасць і карыстацкі досвед SPA з зразумеласцю рэгулярных вэб-прыкладанняў. Шэраг нашых праектаў на MindK наступных спосабаў. Сёння мы будзем дзяліцца імі з вамі.

змест:

1. Чаму адзінкавыя прыкладання старонкі дрэнна для SEO?
2. Як вырашыць гэтую праблему?
3. Якія крокі вы можаце зрабіць, каб аптымізаваць зразумеласці вашага спа-салон?
4. Высновы.

Чаму адзінкавыя прыкладання старонкі дрэнна для SEO?

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

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

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

Цяпер, калі некаторая частка кантэнту на старонцы павінна быць зменена, ваш браўзэр пасылае выклік AJAX на сервер. Сервер у адказ пасылае дадзеныя (часцей за ўсё ў фармаце JSON) Ваш браўзэр патрабуе, каб абнавіць старонку.

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

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

Гэта як ваш бліскучы новы вэб-сайт / вэб-дадатак становіцца SEO катастрофы.

Як вырашыць гэтую праблему?

1. Пазбягайце AJAX схему сканавання ад Google

У 2009 годзе Google прадставіла абыходны шлях прызначаны, каб зрабіць SPA пошукавай зручным.

Схема заключаецца ў даданні hashbang да URL гэтай старонкі (#!); вырабляючы HTML здымак старонкі (гэта можна зрабіць з дапамогай папярэдне апрацоўваць ); кармлення вэб-павукоў старонкі HTML версіі праз URL, дзе «#!» замяняецца на «? _escaped_fragment_ =» маркер.

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

У 2015 годзе Google ужо састарэў схему сканавання AJAX. Кампанія спыніць падтрымліваць яго ў другім квартале 2018 года.

Цяпер Googlebot будзе ў стане аказаць URL-адрас з #! у іх саміх па сабе. Гэта азначае, што вы больш не будзеце мець, каб забяспечыць яго папярэдне аказаныя старонкі.

нядаўні выпрабаванне Барташ Góralewicz паказаў, што Google, як правіла, у стане выканаць JavaScript на кліенцкіх рендеренные прыкладаннях, створаных з рознай JS рамкай на вуглы акрамя.

У той жа час, іншыя пошукавыя сістэмы (якія апрацоўваюць амаль 37% пошукавых запытаў у ЗША ) І ботаў сацыяльных медыя не так добра поўзае

JavaScript, як Google. Так што калі вы хочаце быць высокі рэйтынг у Baidu, Яндэкс , Bing або Yahoo, не спадзявацца на іх AJAX поўзаюць магчымасцяў.

Пераканайцеся, што ваш SPA індэксуецца з дапамогай метадаў я апішу ніжэй.

Як пошукавыя сістэмы поўзаць сайты пабудаваны на розных JS рамак; крыніца: moz.com

2. Выкарыстанне на боку сервера візуалізацыі

Нягледзячы на ​​Google цяпер сцвярджае, што можа сканаваць JavaScript, гэта лепш, чым потым шкадаваць. Справа Hulu ў (Амаль 60% зніжэнне бачнасці) паказвае, што не прымаючы ніякіх мер засцярогі можа прывесці да катастрафічных вынікаў. Вось чаму мы ў MindK выкарыстоўваць серверны рэндэрынг для павышэння SPA зразумеласці.

Вы можаце ўзяць дадатак, пабудаванае на баку кліента рамках JavaScript як React, Кутняе, або Vue.js і зрабіць яго статычным HTML і CSS на сэрвэры.

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

Гэта павялічыць ўспрыманую хуткасць загрузкі і паляпшэння UX!

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

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

Далейшае чытанне: як наладзіць серверны рэндэрынг для рэагаваць , вуглаваты , і Vue.js прыкладання адной старонкі.

Крыніца: Medium.com

3. З дапамогай прагрэсіўнага паляпшэння і функцыі выяўлення.

Крыніца: blog.teamtreehouse.com

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

• Па-першае, стварыць просты HTML-старонкі, якія могуць быць як доступ і праіндэксаваныя вэб-сканер і бачаць карыстальнікі.
• затым выкарыстоўвайце функцыя выяўлення паступова павысіць досвед працы з CSS і JavaScript. Выявіць функцыі, падтрымоўваныя браўзэрам карыстальніка і ўключыць / адключыць іх адпаведным чынам. Праверце, калі функцыя API даступныя і ніколі не выкарыстоўваць карыстацкі агент браўзэра, каб уключыць / адключыць функцыі прыкладання. Не забудзьцеся праверыць свой SPA для шматлікіх браўзэраў перад яго запускам.
• Ужывайце на боку сервера або гібрыдную візуалізацыю, каб прынесці карыстальнікам кантэнт па першым патрабаванні. Пераканайцеся ў тым, што глыбокія спасылкі працуюць для вашага SPA. Ніколі не перанакіроўваць кліентаў на галоўную старонку замест таго, каб іх глыбокай звязаны кантэнт.
• Выкарыстоўвайце адаптыўны дызайн, які месціць некалькі прылад. Ніколі не служаць рознае ўтрыманне для карыстальнікаў і пошукавых сістэм. Гэтае правіла прымяняецца, нават калі вы карыстаецеся дынамічная сервіроўкі змяніць дызайн сайта для розных прылад.
• Ня перавесці ваш стары сайт да прагрэсіўнага SPA на адным дыханні. Замест гэтага, развіваць яго ў ітэрацый. Даданне адной функцыі ў той час, дазволіць вам убачыць, як кожны з іх ўплывае на SEO.
• выкарыстанне пошук кансолі , Ён будзе таксама выявіць існаванне структураваных дадзеных, Рыч карты, Sitelinks і АМП.
• Дадаць мараль з Schema.org структураваныя дадзеныя. Гэта дазваляе сумаваць першарадныя часткі вашага кантэнту ў машыначытэльным фармаце. Можна, напрыклад, пазначыць тып дадзеных старонкі (напрыклад, пра тое, што гэта «рэцэпт»). Ці вы маглі б пералічыць усе інгрэдыенты, якія складаюць рэцэпт. Проста пераканайцеся, што гэтыя метададзеныя, на самай справе, правільна з інструмент Google для тэставання структураваных дадзеных , І ніколі не маркіраваць кантэнт з няправільным тыпам дадзеных.
• Праверка SPA для некалькіх браўзэраў, выкарыстоўваючы такія інструменты, як BrowserStack.com , Browserling.com або BrowserShots.org ,
• Аптымізацыя SPA для хуткасці, перш чым вы зрабілі даступнымі для грамадскасці. Хоць Googlebot можа чакаць больш 5-20 секунд да індэксацыі старонкі, мала рэальных карыстальнікаў будуць чакаць так доўга.

Якія крокі вы можаце зрабіць, каб аптымізаваць зразумеласці вашага спа-салон?

1. Складзіце поўны спіс старонак на вашым сайце

SEO спецыялісты рэкамендуюць стварыць sitemap.xml для любога вэб-прыкладанні. Нават пасьля абвяшчэньня, што Googlebot можа сканаваць прыкладання JavaScript, уладальнікі вэб-сайтаў працягваюць справаздачнасць праіндэксаваных старонак.

Sitemap.xml файл , які змяшчае ўсе URL - адрас для вашага прыкладання. Вы павінны выкарыстоўваць Sitemap ў якасці кіраўніцтва, каб пераканацца, што пошукавыя робаты не зачынялі вочы на ​​некаторыя важныя часткі вашага прыкладання.

Звярніце ўвагу, што Sitemaps неабходна прасоўванне. Так дадайце наступны радок у файл robot.txt. Такім чынам, Googlebot будзе ведаць месцазнаходжанне вашага сайта. Пасля гэтага, вы павінны прадставіць свой Sitemap ў Google Search Console, якая выкліча індэксацыю вашага сайта.

Вы павінны дадаць <META NAME = "фрагмент» змест = "!"> Тэг ў верхняй частцы вашага сайта , каб дазволіць Googlebot ведаць , што гэта, на самай справе, у SPA.

2. Выкарыстоўвайце «Fetch , як Google» інструмент

Google Search Console мае магчымасць «Fetch, як Google». Fetch, як Google з'яўляецца неверагодна карысным для Ора, паколькі гэта дазваляе ўбачыць, што JS і CSS элементы не даступныя для індэксацыі. Выкарыстоўваючы гэты інструмент, вы можаце выявіць, што пошукавая сістэма адлюстроўвае SPA няпоўна ці ігнаруе важныя функцыі.

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

Запуск Google Search Console дазваляе праглядаць прыкладанні праз вачэй шукальніка і даведацца, якія дадатковыя крокі неабходна распачаць для паляпшэння пошуку рэйтынгу.

Опцыя Search Console, «Fetch» ​​адпраўляе адказ HTTP з вашай старонкі разам з поўнай загрузкі зыходнага кода, як паказана на вэб-павукоў.

Опцыя «Сканаваць і адлюстраваць» адпраўляе назад адказ HTTP, а таксама два скрыншота старонкі: адзін, як відаць па Googlebot і яшчэ адзін праз вачэй карыстальнікаў. Ён таксама паказвае, што Googlebot рэсурсы не маглі б атрымаць. Такім чынам, вы пераканайцеся, што ні адзін з неабходных рэсурсаў, такіх як JS файлы, адказы сервера, API і г.д не ня заблякаваны ў файле robots.txt.

Паколькі Google абясцэніўся старой AJAX схемы сканавання, сайты, якія выкарыстоўваюць гэта могуць сутыкнуцца з нечаканымі праблемамі. У якасці меры засцярогі, Google у цяперашні час рэкамендуе выкарыстоўваць інструмент «Сканаваць і адлюстраваць», каб праверыць АГР, якія маюць hashbangs ці якія ўцяклі тэгі фрагментаў у іх URL.

Такім чынам , параўнанне вынікаў для «#! »Старонка і"? _Escaped_fragment_ = "URL , каб убачыць , калі ёсьць якая -то розніца.

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

3. Выкарыстанне отн = кананічныя спасылкі

Не толькі отно = кананічныя спасылкі могуць спатрэбіцца , калі ў вас ёсць некалькі старонак з аднолькавым зместам. Яны таксама могуць дазволіць сканарам ведаць, якая частка URL з'яўляецца абавязковым, і які не з'яўляецца.

Напрыклад, гэта дазволіць Googlebot , каб выявіць , калі параметр запыту ўплывае на рэндэрынг старонкі (параметры разбіўкі на старонкі , такія як «? Старонка = 11»,) або няма (адсочванне параметраў , як «utm_source = facebook»).

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

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

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

Для таго, каб атрымаць выгаду з отн = кананічнага элемента, вы павінны будзеце выкарыстоўваць дынамічныя URL. Акрамя таго, памятайце, што кананічны і Sitemap URL-адрас павінен быць ідэнтычнымі.

І ня забудзьцеся праверыць , калі отн = кананічныя спасылкі вядуць да рэальных вэб - сайтам, і robots.txt дазволу Googlebot для індэксавання аднаго прыкладання старонкі.

4. Налада Google Analytics

Google Analytics з'яўляецца важнай часткай намаганняў SEO. Ён працуе па колькасці праглядаў старонак лесанарыхтоўчых кожны раз карыстальнікі перайшлі на вашай старонцы. Але SPA няма HTML адказу, які будзе генераваць прагляды старонак. Для таго, каб атрымаць выгаду з Google Analytics вы павінны знайсці іншы шлях.

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

Іншы заменай Google Analytics з'яўляецца Дыспетчар тэгаў Google ,

5. Ужывайце Open Graph і Twitter карты

акцыі Сацыяльныя медыя могуць гуляць вырашальную ролю ў вашых SEO высілкаў пабудовы спасылак.

укараненне карты Twitter дазволіць вашай SPA мець багаты абмен на Twitter.

Для забеспячэння карэктнага абмену праз Facebook, вы павінны разгледзець пытанне аб укараненні Open Graph.

Калі хто-то падзяляе спасылку ў першы раз, павук паўзе ФБ старонкі, збірае інфармацыю пра яго і стварае візуальны аб'ект, які пасля будзе адлюстроўвацца на старонках Facebook. facebook-х Open Graph Пратакол дазваляе аптымізаваць і структураваць долю людзей дадзеных праз сацыяльную сетку. Для таго, каб выкарыстоўваць Open Graph, вы павінны дадаць некаторыя тэгі <META> у <HEAD> на старонцы HTML вы жадаеце апублікаваць у сацыяльнай сетцы.

Тэгі найбольш карыснага Open Graph <META>:

• ог: назва (назвы загаловак старонкі);
• OG: апісанне (кароткае апісанне таго, што ваш кантэнт о);
• OG: тып (паказвае тып дадзеных змесціва);
• OG: малюнак (паказвае URL малюнка, якая выкарыстоўваецца для ілюстрацыі старонкі);
• ог: URL (вызначае кананічны URL дадзенай старонкі).

Вы можаце выкарыстоўваць Facebook, адладчык інструмент каб праверыць свае пазнакі OG.

Але гэтага не дастаткова пры працы з прыкладаннямі адной старонкі без сервернага рэндэрынгу.

У адрозненні ад Googlebot, сканеры Facebook, пакуль не могуць інтэрпрэтаваць JavaScript!

Нават калі вы дадалі ўсе правільныя тэгі В.Г., павукі толькі прынесці просты HTML. У выніку вы атрымаеце пост, што ніхто ў здаровым розуме не будзе дзяліцца:

Крыніца: www.michaelbromley.co.uk

Адзін са спосабаў, каб забяспечыць багаты сацыяльны абмен на АГР з'яўляецца Стварэнне ўмоўнага перасылак якія будуць служыць метададзеныя ботаў Facebook. Такім чынам, пошукавыя робаты атрымаць статычны файл, замест таго, каб мець справу з JavaScript, і звычайныя карыстальнікі будуць перанакіроўвацца на URL-адрас, які мае рэальны змест.

высновы

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

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

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

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