Як зрабіць AngularJS дзіўным з SEO
- Хэшбанг #!
- Дадаць хэшбанг у канфігурацыі AngularJS
- Парады PhantomJS
- Калі ласка, скажыце браўзэру без галавы
- Убудовы для змены DOM
- Праверце вынік
- Заключныя думкі
AngularJS - адна з найбольш хутка растучых Javascript-платформаў на рынку прама зараз, і ўсе вэб-сайты, заснаваныя на Javascript, сутыкаюцца з той жа праблемай, калі гаворка ідзе пра індэксацыю папярэдне адлюстраванага HTML. На шчасце, ёсць нейкія шляхі вакол нейкай спецыяльнай маршрутызацыі URL.
Я ўпершыню сутыкнуўся з гэтай праблемай, калі выпусціў свой першы сайт AngularJS DingScore , Я заўважыў, што Google і Bing зусім не індэксуюць мае суб-старонкі, нават з картай XML. Каранёвая старонка выйшла як {{title}} і не дзіўна, што гэта сапраўды было ў HTML.
Таму мы сутыкаемся з 2 асноўнымі пытаннямі
- Здаецца, што пошукавыя сістэмы ведаюць, што на самой справе гэта дзве розныя старонкі. http://dingscore.com/#/livescore/livenow http://dingscore.com/#/livescore/International/13
- Выкананне Java не выконваецца, таму што калі ў вашым HTML-файле ёсць <title> {{title}} </title>, яны ўбачаць яго так. Не вынік, які мы хацелі б
Каб прадэманстраваць, я зрабіў захапленне на экране 
Гэты сайт налічвае каля 150 унікальных URL-адрасоў, і я дадаў іх усё ў інструменты Webmaster для таго, каб Google думаў, што гэтага будзе дастаткова, але няма.
Хэшбанг #!
Калі вы ніколі не чулі слова хэшбанг ( не хасаг ) раней, не хвалюйся. Я таксама не. У асноўным, гэта спосаб (адзіны спосаб) інфармаваць пошукавыя сістэмы аб тым, што да бягучай вэб-старонкі, якая атрымліваецца па бягучым URL, утрымліваецца загружаны ўтрыманне AJAX.
Такім чынам, два папярэднія URL зараз будуць
http://dingscore.com/#!/livescore/livenow http://dingscore.com/#!/livescore/International/13
Google і Bing пераўтвораць гэтыя два адрасы ў спецыяльна распрацаваны URL, які можа быць даступны серверу. Затым сканеры наведаюць пераўтвораныя URL замест гэтага.
Такім чынам, два спецыяльных пераўтварэння URL, якія Google і Bing будзе сканаваць
http://dingscore.com/?_escaped_fragment_=/livescore/livenow http://dingscore.com/?_escaped_fragment_=/livescore/International/13
Такім чынам, зараз вы бачыце, што ў вас ёсць нешта, што вы маглі б працаваць з серверам, і вы можаце пачаць ствараць свае адлюстраваныя здымкі HTML. Я зрабіў тое, каб стварыць правіла для перазапісу ў .htaccess, і я выкарыстаў PhanthomJS стварыць здымкі.
Вось мой прыклад з mod_rewrite з Apache:
RewriteEngine на опцыі + FollowSymLinks RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Здымкі /% 1? [NC, L]
Калі сканер пераўтворыць ваш хэшбанг (#!) У? _Escaped_fragment_ = залежыць ад вас, каб пераканацца, што здымак існуе. Я атрымліваю cronjob сканаваць мой сайт кожныя 2 гадзіны і абнаўляць здымкі з PhantomJS.
Дадаць хэшбанг у канфігурацыі AngularJS
Усё, што вам трэба зрабіць, гэта даручыць AngularJS выкарыстоўваць іх замест звычайнага хэша. Проста дадайце адну радок кода ў канфігурацыю маршрутызацыі
.config (['$ routeProvider', '$ locationProvider', функцыя ($ routeProvider, $ location) {$ location.hashPrefix ('!'); ....
Парады PhantomJS
Блакаванне аналітыкі
Адна рэч, якую я заўважыў, калі пачаў сканаваць сайт з PhantomJS, - гэта тое, што мой Google Analyics сышоў з розуму з трафіку. Відавочна, што гэта не так дзіўна, таму што выкананне ўсіх відаў Javascripts для захавання вашага AJAX-кантэнту таксама выкліча вашу статыстыку, у маім выпадку Google Analytics. Таму я дадаў request.abort () для ўсяго трафіку analytics.js у сцэнары.
page.onResourceRequested = function (requestData, request) {if ((/analytics.js/gi).test(requestData['url '])) {request.abort (); }};
Калі ласка, скажыце браўзэру без галавы
Вам таксама трэба сказаць сцэнар, калі старонка будзе гатовая да здымак, PhantomJS не будзе ведаць, калі загружаецца ўвесь змест AJAX ці калі канчатковы DOM будзе. Таму вам трэба ўсталяваць сцяг і абнавіць сцяг, калі ўсе вашы запыты XHR скончылі працу.
<body data-status = "{{status}}"> </body>
А потым дадайце нешта падобнае ў кантролеры, калі чакаеце, што старонка будзе гатовая
$ scope.status = "гатовы";
Убудовы для змены DOM
Першае, што прыходзіць у галаву, гэта папулярны Javascript Font, які замяняе плягін Cufon . Не ўпэўнены, колькі ўсё яшчэ выкарыстоўваюць яго, але вы атрымаеце ідэю. Усе ўбудовы, якія змяняюць DOM, лепш за ўсё выключаць пры здымках.
<h1> Назва SEO </h1>
І Cufon цалкам змяніць DOM і сапсуе вынікі SEO
<h1> <cufon class = "cufon cufon-canvas" alt = "SEO" style = "width: 92px; height: 32px;"> <canvas width = "117" height = "37" style = "width: 117px; вышыня: 37px; верхняя: -4px; злева: -2px; "> </canvas> <cufontext> SEO </cufontext> </cufon> <cufon class =" cufon cufon-canvas "alt =" Title "style =" width: 93px; height: 32px; "> <canvas width =" 111 "height =" 37 "style =" width: 111px; height: 37px; top: -4px; злева: -2px; "> </canvas> < cufontext> Назва </cufontext> </cufon> </h1>
Праверце вынік
Пасля таго, як я зрабіў усё гэта, я заўважыў, што праз два дні мае старонкі сканаваныя правільна
URL сайта:
http://dingscore.com/#!/livescore/livenow
URL сканавання:
http://dingscore.com/?_escaped_fragment_=/livescore/livenow
URL здымак:
http://dingscore.com/snapshots/livescore/livenow.html
Заключныя думкі
Мая апошняя думка, калі вэб-сайт AngularJS (распрацаваны Google) будзе мець большае ўплыў, калі гаворка ідзе пра рэйтынг, то, напрыклад, блог WordPress з падобным зместам і SEO працы?
Com/?Com/?
RewriteRule ^ (. *) $ / Здымкі /% 1?
Com/?