Кіраўніцтва распрацоўшчыка для выканання SEO на вэб-прыкладаннях AngularJS

Атрыманне індэксаваных прыкладанняў AngularJS
Сучасныя пошукавыя сістэмы і URL-прыкладанні на кліенце
Стварэнне HTML5 рэжымаў маршрутызацыі замест Hashbangs
Апрацоўка SEO з боку сервера з дапамогай ExpressJS
Здымак з дапамогай Node.JS
Карта сайта таксама важныя

Да 23 мая 2014 г., калі б вы папрасілі мяне стварыць для вас вэб-сайт для пошукавых сістэм з JavaScript, я б імкнуўся вас моцна перашкаджаць. Цяпер, калі вы спытаеце мяне, я скажу вам, што гэта шлях.
Амаль усе механізмы JavaScript MVC, якія ўключаюць AngularJS, змяняюць унутранае змесціва вашай структуры HTML. Раней гэта было зроблена, каб зрабіць папярэдне зробленую HTML цяжкім для індэксацыі пошукавых сістэм. Аднак з развіццём тэхналогій Google і іншыя пошукавыя сістэмы лепш разумець вэб-старонкі , Bot-Crawling JavaScript, просты ў дакладнасці JS, больш не з'яўляецца сур'ёзнай праблемай, і змест больш і больш вэб-прыкладанняў індэксуецца пошукавымі сістэмамі.
Гэта дзіўная навіна для вэб-майстроў, аднак сам Google раіць быць асцярожным.

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

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

Атрыманне індэксаваных прыкладанняў AngularJS

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

Сучасныя пошукавыя сістэмы і URL-прыкладанні на кліенце

Каб палегчыць працу індэксацыі змесціва вэб-прыкладанняў, Google і іншыя пошукавыя сістэмы прадаставілі вэб-майстрам функцыю фармату хэш- URL-адрасоў. Кожны раз, калі пошукавая машына сустракаецца з хэш-пакетам, г.зн. URL, які змяшчае #! ' ён пераўтворыць яго ў ? _escaped_fragment_ = URL, дзе ён можа знайсці поўны адлюстраваны змест HTML, гатовы да індэксацыі.

Так, напрыклад, Google ператворыць URL хэш-ханга з: http://www.example.com/#!/page/content У адрас: http://www.example.com/?_escaped_fragment_=/page/content

Па другім URL, які, дарэчы, першапачаткова не адлюстроўваецца наведвальнікам сайта, пошукавік знойдзе змест, які не з'яўляецца JS, які будзе лёгка праіндэксаваць.
Цяпер наступны крок - зрабіць прыкладанне досыць разумным, каб, калі бот пошукавай сістэмы знаходзіўся на запыце другога URL, ваш сервер павінен вярнуць неабходныя здымкі HTML старонкі. Такім чынам, вам трэба ўсталяваць наступнае адмысловае змяненне маршрутызацыі URL для вашага прыкладання.

RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Здымкі /% 1? [NC, L]

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

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

angular.module ('HashBangURLs', []). config (['$ locationProvider', функцыя ($ location) {$ location.hashPrefix ('!');}]);

Стварэнне HTML5 рэжымаў маршрутызацыі замест Hashbangs

Мы згадвалі, што HTML5 з'яўляецца дзіўным? Ну гэта так. Такім чынам, разам з тэхнікай Hashbang, якую мы згадвалі вышэй, спалучэнне HTML5 і AngularJS дае нам яшчэ адзін узлом, каб падмануць пошукавыя сістэмы для разбору ? _Escaped_fragment_ URL-адрасоў, фактычна не выкарыстоўваючы адрасы Hashbang.
Для гэтага спачатку трэба паведаміць Google, што мы фактычна выкарыстоўваем змест AJAX, і бот павінен наведаць той жа URL, выкарыстоўваючы сінтаксіс _escaped_fragment_. Вы можаце зрабіць гэта, уключаючы наступны мета ў свой HTML-код.

Тады нам прыйдзецца наладзіць AngularJS так, каб ён выкарыстоўваў HTML5-URL-адрасы, калі і калі б ён меў патрэбу ў апрацоўцы URL-адрасоў і маршрутызацыі. Вы можаце зрабіць гэта, дадаўшы наступны модуль AnglarJS у свой код

angular.module ('HTML5ModeURLs', []). config (['$ routeProvider', функцыя ($ route) {$ route.html5Mode (true);}]);

Апрацоўка SEO з боку сервера з дапамогай ExpressJS

У нашых папярэдніх паведамленнях мы казалі пра дзіўнасць ExpressJS у якасці нашага сервера на аснове JavaScript / nodeJS , Вы таксама можаце выкарыстоўваць ExpressJS для нашага маршрутызацыі на серверы замест Apache.
Для таго, каб ваша ExpressJS-фрэймворка атрымала статычны HTML, спачатку трэба ўсталяваць праграмнае забеспячэнне, якое будзе шукаць _escaped_fragment_ у нашых уваходных URL-адрасах. Пасля таго, як ён выявіў, ён будзе імгненна служыць здымкі HTML.

// У нашай app.js канфігурацыі app.use (function (req, res, next) {var fragment = req.query._escaped_fragment_; // Калі ў парам запытаў няма фрагмента //, то мы не абслугоўваем crawler if (! fragment) return next (); // Калі фрагмент пусты, адлучыце // індэксную старонку if (fragment === "" || fragment === "/") fragment = "/index.html "; // Калі фрагмент не пачынаецца з '/' // дапаўняе яго да нашага фрагмента if (fragment.charAt (0)! ==" / ") fragment = '/' + fragment; // Калі фрагмент не заканчваецца з '.html' // дадаць яго да фрагмента if (fragment.indexOf ('. html') == -1) fragment + = ".html"; // Падаваць статычную здымку HTML паспрабуйце {var file = __dirname + "/ Snapshots" + фрагмент; res.sendfile (файл);} catch (err) {res.send (404);}});

Мы яшчэ раз ўсталёўваем здымкі ў каталог верхняга ўзроўню з імем '/ snapshot' . ExpressJS таксама ўлічвае магчымасць таго, што URL-адрас, адлюстраваны ў пошукавай сістэме, не мае простых функцый сінтаксісу, такіх як '/' ці '.html' , і такім чынам забяспечвае правільную частку робата.

Здымак з дапамогай Node.JS

На рынку ёсць шмат інструментаў, якія вы можаце выкарыстоўваць для здымкі HTML з вашага вэб-прыкладання, з якога Zombie.JS і Phantom.JS з'яўляюцца найбольш часта выкарыстоўваюцца. Гэтыя здымкі будуць тое, што мы вернемся, калі Google запытвае URL з запытам _escaped_fragment_ .

Ідэя PhantomJS і нават ZombieJS заключаецца ў тым, каб стварыць бязгалоўны браўзэр, які атрымлівае доступ да звычайнага URL-адрасы старонкі вашага вэб-прыкладання, захоплівае змесціва HTML, якое адлюстроўваецца пры поўным выкананні, а затым вяртае канчатковы HTML у часовы файл.
Ёсць шмат рэсурсаў, якія вы можаце накіроўваць вас аб тым, як гэта зрабіць гэта выдатна, напрыклад,

Таму мы не будзем падрабязна падрабязна пра гэта. Аднак мы, вядома, хацелі б падкрэсліць інструмент з адкрытым зыходным кодам, які вы выкарыстоўваеце для здымкі HTML, Prerender.IO , Вы можаце выкарыстоўваць яго ў якасці сэрвісу, альбо вы можаце ўсталяваць яго на ўласным серверы, бо праект з адкрытым зыходным кодам і даступны GitHub

Аднак тое, што яшчэ прасцей, гэта інструмент пад назвай Grunt-html-snapshot, і адгадайце, дзе яго можна знайсці, Node.JS.

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

Спачатку ўсталюеце NodeJS. Вы можаце спампаваць яго з http://nodejs.org , Нараўне з вузлом таксама ўсталюйце npm (менеджэр пакетаў вузлоў). Для карыстальнікаў Mac і Windows, NodeJS пастаўляецца як клік і ўсталёўка прыкладанняў. Карыстальнікам Ubuntu трэба будзе атрымаць файл tar.gz і ўсталяваць яго з каманднага тэрмінала. Тыя, хто з апошняй Ubuntu, могуць таксама ўсталяваць, выкарыстоўваючы каманду sudo apt-get install nodejs nodejs-dev npm . Npm пастаўляецца з Grunt
Адкрыйце камандную кансоль і перайдзіце ў тэчку праекта.
Каб усталяваць прыладу Grunt ва ўсім свеце, запусціце каманду: npm install -g grunt-cli
Вы таксама можаце ўсталяваць лакальную копію Grunt і яе важную функцыю здымкі HTML, выкарыстоўваючы каманду npm install grunt-html-snapshot –save-dev
Наступным крокам з'яўляецца стварэнне ўласнага файла Grunt JavaScript Gruntfile.js. Файл JS будзе мець наступны код

module.exports = function (grunt) {grunt.loadNpmTasks ('grunt-html-snapshot'); grunt.initConfig ({htmlSnapshot: {all: {options: {snapshotPath: '/ project / snapshots /', sitePath: 'http://example.com/my-website/', URL-адрасы: ['#! / page1' , '#! / page2', '#! / page3'] sanitize: function (requestUri) {// вяртае 'index.html', калі URL '/', інакш прэфікс if (// $ /. test ( requestUri)) {return 'index.html';} else {return requestUri.replace (/// g, 'prefix-');}}, // калі вы не захочаце захоўваць тэгі сцэнара ў здымках html // Усталюйце `removeScripts` значэнне true. Па змаўчанні гэта памылка removeScripts: true,}}}}); grunt.registerTask ('па змаўчанні', ['htmlSnapshot']); };

Пасля таго, як вы зрабілі, вы можаце запусціць задачу з дапамогай каманды grunt htmlSnapshot

Інструмент Grunt мае яшчэ некалькі функцый, якія мы прапусцілі тут. Вы можаце даведацца больш пра іх па адрасе grunt-html-здымак стар. Вы таксама заўважылі, што мы даем шлях да старонкі вэб-прыкладання задачы, таму для таго, каб ён працаваў належным чынам, спачатку трэба наладзіць свой сайт на серверы, а затым накіраваць задачу на правільныя URL-адрасы. Таксама здымак тут захоўваецца аўтаматычна на шляху / праект / здымак / , вы можаце змяніць яго ў адпаведнасці з вашымі патрабаваннямі.

Карта сайта таксама важныя

Для больш дакладнага кантролю над тым, як пошукавыя сістэмы робяць доступ да вашага сайта, неабходна таксама наладзіць карту сайта. Кожны раз, калі бот-пошукавік знаходзіць example.com/sitemap.xml, ён перамяшчаецца па спасылках, прыведзеных на карце сайта, перш чым слепа прытрымлівацца ўсіх спасылак сайта. Гэта лепшы спосаб, калі вы хочаце праіндэксаваць старонку, якая не звязана з якой-небудзь іншай старонкай, напрыклад, на мэтавых старонках кампаніі-рассылання, але гэтая практыка не адпавядае рэчаіснасці.
Для AJAX-кантэнту лепш за ўсё пералічыць усе старонкі / URL-адрасы, якія стварае ваша прыкладанне, каб пошукавыя сістэмы праіндэксавалі іх правільна, нават калі ваша прыкладанне ўяўляе сабой прыкладанне з адной старонкай. Вось прыклад сайта

<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"> ... <url> <loc> http://www.yourwebsite.com/#!/page1 </loc> < changefreq> штодня </changefreq> <priority> 1.0 </priority> </url> <url> <loc> http://www.yourwebsite.com/#!/page2 </loc> <changefreq> штодня </ changefreq > <priority> 1.0 </priority> </url> <url> <loc> http://www.yourwebsite.com/#!/page3 </loc> <changefreq> штодня </changefreq> <priority> 1.0 < / Priority> </url> ... </urlset>

AngularJS Awesomeness

З перашкодай неіндэмікальнасці няма, няма ніякіх прычын, чаму вы не можаце стварыць усе вэб-старонкі з дапамогай JavaScript. Людзі ўжо вельмі спадзяюцца на JS, і тэндэнцыя не спыняецца. Раней галоўнай праблемай стала HTML, але зараз з рашэннем індэксаванага змесціва AJAX вы можаце зрабіць што заўгодна. Go Fly.

Наступныя дзве ўкладкі змяніць змест ніжэй.

Rachit кіруе функцыямі развіцця мабільнага бізнесу, стратэгіяй мабільнасці і практыкай кансалтынгу ў Альговорсе. Ён з'яўляецца экспертам усіх мабільных тэхналогій і мае вопыт кіравання камандамі, якія займаюцца распрацоўкай карыстацкіх прыкладанняў для iPhone / iPad / Android.

Com/?
RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /?
RewriteRule ^ (. *) $ / Здымкі /% 1?