Добрыя метады SEO з JavaScript Frameworks

1. Аперацыя JavaScripts інфраструктура.
2. Google і JavaScript
3. Пазіцыянаванне сайта з дапамогай JavaScript Framework
4. 1 / Audit яе сайт
5. 2 / Як можна гэтыя SEO дружалюбныя сайты?

У пачатку сакавіка адбыўся SEOCamp Cédric Рамбо і Філіп Yonnet для канферэнцыі па SEO падыход прыняць у дачыненні да поўных сайтаў JavaScript.
Падчас гэтай канферэнцыі, яны патлумачылі, як паводзілі сябе пошукавыя сістэмы сутыкаюцца гэтыя сайты і асабліва тое, як можна пазіцыянаваць з дапамогай гэтай тэхналогіі.
Па-першае, нягледзячы на ​​яго складанасць і яго несумяшчальнасці з рухавікамі папулярнасць JavaScript Framework расце. Гэтыя наперад вызначаныя функцыі маюць шмат пераваг:

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

Але што для нас SEO?

Аперацыя JavaScripts інфраструктура.

У адрозненне ад звычайнага вэб-сайта, які ідзе за камунікацыйную мадэль кліент-сервер, дадатак на JavaScript на аснове Ajax (і іншыя вэб-прыкладанні) варта мадэль «на баку кліента візуалізацыі», а менавіта:

Першы запыт загрузіць макет старонкі, CSS і JavaScript. Гэта распаўсюджана, што некаторыя або ўсе змесціва не загружаецца. Затым JavaScript пасылае другі запыт на сервер, які адказвае на JSON, каб канчаткова сфармаваць адпаведны HTML.

Кліенцкая рэндэрынгу (у Ajax)

JavaScript Framework выкарыстоўваецца для стварэння вэб-прыкладанняў, даступных праз адзіны вэб-старонкі, гэта называецца SPA (Single Application Page) з'яўляецца выпадак Twitter, напрыклад, які з'яўляецца мабільным і настольным дадаткам.

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

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

Архітэктура версіі SSR (на боку сервера візуалізацыі)

Сёння на баку кліента рашэнні 4 сутыкненне BackBone, Knockout.JS, ember.js AngularJS і пры падтрымцы Google.

Кутняя JS JS з'яўляецца самай папулярнай асновай.

Гэтая мадэль развіцця ўзнікае шэраг праблем.

Задача # 1:

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

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

Задача № 2:

Які індэкс? Змены ўтрымання рэгулярна на аснове ўзаемадзеяння.

Якія сігналы? Як аналізаваць спасылкі і змесціва старонкі?

Што звязаць гэтыя сігналы? Калі паняцце старонкі, звязанай з URL знікла, як працягваць выкарыстоўваць бягучы алгарытм?

Задача № 3:

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

Калі JS уключаны ў браўзэры.

Калі JS адключаны

Поўнае цела JS

Таму не дзіўна, што значны ўплыў на бачнасць SEO гэтых сайтаў ...

зніжэнне бачнасці

Google і JavaScript

Сёння мы ведаем, што Google інтэрпрэтуе JS, які генеруе загаловак, мета апісанне, мета-тэгі робатаў: тэст у падтрымку ,

• Google ўключае ў сябе CSS і JS файлы для ідэнтыфікацыі мабільнай сяброўскай старонкі або выявіць схаваныя элементы.
• Google можа чытаць падзеі OnClick
• Такім чынам, Google можа ісці за ўтрыманне дынамічна генераваны ў JS індэксаваць.

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

Для таго, каб лепш поўзаць і паказальным Ajax, Google прапанаваў у 2009 годзе тэхнічнай Hashbang (#!). Тэхнічна, калі робат сустракае URL з Hashbang ён будзе сканаваць гэтую старонку і замяніць на Hashbang _escaped_fragment_ то будзе індэксаваць старонку ў яе першапачатковым выглядзе. Але сёння гэты метад з'яўляецца састарэлым, паколькі Google сцвярджае, што для чытання генеравацца кантэнт Ajax ...

Метад PushState, прапанаваны Гісторыя IP HTML5 з'яўляецца больш устойлівым рашэннем для дынамічнай навігацыі URL-адрас застаецца нязменным. Яна таксама мае перавагу, што дазваляе навігацыі, нават калі карыстальнік адключае JavaScript, паколькі ён уключаны ў HTML5. У прыватнасці, PushState () змяняе шлях URL, які адлюстроўваецца ў адраснай радку карыстальніка. Для SEO гэта ідэальнае, рухавікі могуць чытаць гэтыя URL-адрас і дыферэнцыююцца адзін ад аднаго.

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

Пазіцыянаванне сайта з дапамогай JavaScript Framework

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

1 / Audit яе сайт

Па-першае, калі Fetch, як тэставанне Google не ў стане зрабіць старонку, як чакалася. Існуе праблема.

Рашэнне заключаецца ў Абезгалоўлены браўзэры: Браўзэр «безгаловы» з'яўляецца кіраванай праграмным асяроддзем з каманднага радка з JavaScript API, здольнай зрабіць поўны HTML старонку, запусціўшы HTML, CSS і JS ў якасці браўзэра. Мы гаворым пра безгаловы, таму што ён не мае GUI (інтэрфэйс).

Мы можам імітаваць ўсе, што адбываецца ў браўзэры і, такім чынам, праверыць код, згенераваны JS і Ajax Framework.

Заўвага: Гэты тып сканавання стварае «ілжывыя візіты» ў інструментах WebAnalytics (таму што яны выконваюць усе без сцэнарыяў выключэнні).

Phantom JS JS і Casper з'яўляюцца абезгалоўленых браўзэра, апошні мае гонар быць скрабок.

Акрамя таго, можна правяраць з крычала жабкай ў " поўзаць JavaScript ».

Якія крычаць жабы SEO арыентаванага шукальнік, ён нядаўна набыў рэжым «абезгалоўленых браўзэра» на аснове PhantomJS. Ён можа сканаваць сайт цалкам Кутні.

Праверце JS, CSS і выявы ў канфігурацыі павука

Настройка JS выкананне, агент карыстальніка і памер экрана

Са студзеня 2017 года Botify таксама дае такую ​​магчымасць.

лагатып Botify

2 / Як можна гэтыя SEO дружалюбныя сайты?

Рашэнне 1: кадуюцца па-рознаму з паступовай стратэгіяй паляпшэння.

Прынцып паступовага паляпшэння заключаецца ў пабудове яго слаёў сайта 3:

• Змест захоўваецца ў HTML-кодзе (утрыманне і функцыі, даступнай для ўсіх).
• Фарматаванне вызначаецца знешнімі каскадных табліц стыляў (CSS).
• Пісьмовае функцыянальнасць вонкавага скрыпту, напрыклад JavaScript.

Рашэнне 2: Стварыце сябе HTML здымкі. Гэты метад з дапамогай Google рэкамендуецца для Ajax.

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

Гэты код «захоплены» перад адпраўкай як звычайны HTML-старонкі, браўзэр карыстальніка.

Тым не менш, гэты метад не страціць частку цікавасці «кліент на баку рэндэрынгу», старонка становіцца статычнай.

Часта арбітраж адправіць толькі пошукавыя робат маментальных здымкаў рухавікоў.

Рашэнне 3: Выкарыстоўвайце трэці сервер prérendition. Дакумент папярэдняга вытворчасці інструментаў палягчаюць поўзаць наш сайт. Сервер prérendition дазваляе папярэдне зрабіць статычныя старонкі, калі інструмент выяўляе гусенічных прыходзіць на ваш сайт будзе паказваць яму статычны канчатковы рэндэрынг HTML.

Асноўныя прылады трэцяга prérendition з'яўляюцца: PreRender , SEO Ajax 4 (Cocorico!) Brombone ,

Увага гэтага метаду можа выглядаць як клоакинг, нават калі гэта не так.

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

• Альбо пазбеглі хэш-фрагменты такога метаду з махрамі (як паказана вышэй).
• Любы метад фрагментаў адкараскаўся мета-тэг: <META NAME = «фрагмент» змест = «»>

Калі ласка, звярніце ўвагу, што гэты метад у HTML5 з выкарыстаннем метаду PushState () з'яўляецца састарэлым, як і іншыя. На дадзены момант гэты метад працуе нават на розных пошукавых сістэмах. Але да якога часу?

JavaScript Framework: Наступнае пакаленне

Будучыня JavaScript Frameworks «ізаморфныя» здольны гібрыднае выканання (з боку сервера і / або кліента).

З ReactJS або HapiJS, мы можам генерыраваць HTML перад яго адпраўкай у браўзэр. Гэта становіцца магчымым ствараць вэб-сайты з JS Framework, не ствараючы праблем з SEO.

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

Распрацоўка Framework JS гэта галаваломка, якая не з'яўляецца нерастваральных, але патрабуе моцнай тэхнічнай боку і распрацоўшчыкаў SEO.

І ў любым выпадку, гэтая кніга для сітуацый, калі SEO трафік не з'яўляецца стратэгічным для сайта:

Мы можам зрабіць сайты, зробленыя з гэтымі тэхналогіямі crawlables і Неперетачиваемой.

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