Керівництво розробника для виконання SEO на AngularJS Web Apps

Отримання вашого AngularJS Apps Indexed
Сучасні пошукові системи та URL-адреси програм на стороні клієнта
Створення HTML5 режимів маршрутизації замість Hashbangs
Обробка SEO з боку сервера за допомогою ExpressJS
Зйомка знімків за допомогою Node.JS
Мапи сайту також важливі

До 23 травня 2014 року, якщо б ви попросили мене створити для вас веб-сайт JavaScript для пошуку в пошукових системах, я б намагався відважити вас. Тепер, якщо ви запитаєте мене, я б сказав вам, що це шлях.
Майже всі рамки JavaScript MVC, які включають AngularJS, змінюють внутрішній вміст HTML-структури. Це використовується для того, щоб зробити попередньо відтворений HTML важко індексувати для пошукових систем. Однак з просуванням технологій, Google і інші пошукові системи є краще розуміти веб-сторінки . Бот-сканування JavaScript, а простий JS, якщо бути точним, більше не є головною проблемою, а вміст все більше і більше веб-додатків індексується пошуковими системами.
Це чудова новина для веб-майстрів, проте сам Google радить бути обережним.

Це завжди гарна ідея, щоб ваш сайт деградував. Це допоможе користувачам насолоджуватися вашим вмістом, навіть якщо їхній браузер не має сумісних реалізацій JavaScript. Це також допоможе відвідувачам з вимкненим або вимкненим JavaScript, а також пошуковими системами, які ще не можуть виконати JavaScript. Google.

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

Отримання вашого AngularJS Apps Indexed

Хоча Google автоматично індексує ваш вміст, ви можете налаштувати властивості рендерінгу вмісту таким чином, щоб Google Bots індексували вміст саме так, як ви хочете. Один із найпростіших способів досягти цього, обслуговуючи вміст Angular JS за допомогою власного серверного сервера.

Сучасні пошукові системи та URL-адреси програм на стороні клієнта

Щоб полегшити роботу з індексації вмісту веб-додатків, Google та інші пошукові системи надають веб-майстрам функцію URL-адреси у форматі hashbang . Всякий раз, коли пошукова система зустрічається з hashbag URL, тобто URL, що містить #! ' він перетворює його в ? _escaped_fragment_ = URL, де він буде знаходити повне відображення HTML-контенту, готового до індексування.

Наприклад, Google перетворить URL-адресу hashbang з: http://www.example.com/#!/page/content в URL-адресу: http://www.example.com/?_escaped_fragment_=/page/content

На другому URL-адресі, який спочатку не відображається відвідувачам веб-сайту, пошукова система знайде вміст, який не є JS, і який легко індексувати.
Тепер наступний крок полягає в тому, щоб зробити вашу програму достатньо розумною, щоб, коли пошуковий бот запитує другий URL, ваш сервер повинен повернути необхідні знімки HTML сторінки. Отже, вам потрібно налаштувати наступну спеціальну URL-адресу для переадресації / перезапису для вашої програми.

RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]

Тут можна помітити, що ми встановили спеціальний каталог знімка як URL-адресу переспрямування. Цей каталог буде містити ваші знімки HTML відповідних сторінок програм. Ви можете налаштувати власний каталог і внести зміни відповідно.

Наступною проблемою для вирішення є інструктаж AngularJS використовувати hashbangs. За кутом за замовчуванням викидайте URL тільки з #, а не #! . Щоб зробити Angular зробити це просто додайте наступний модуль як залежність з первинними модулями Angular

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

Створення HTML5 режимів маршрутизації замість Hashbangs

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

Тоді нам доведеться налаштувати AngularJS таким чином, щоб він використовував URL-адреси HTML5, коли і де б він не мав обробляти 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 (функція (req, res, next) {var fragment = req.query._escaped_fragment_; // Якщо немає фрагмента в запитах params // тоді ми не обслуговуємо crawler if (! fragment) return next (); // Якщо фрагмент порожній, подайте // index page if (фрагмент === "" || fragment === "/") fragment = "/index.html "; // Якщо фрагмент не починається з" / '//, то він додає його до нашого фрагмента, якщо (fragment.charAt (0)! == "/") fragment =' / '+ фрагмент; // Якщо фрагмент не закінчується з '.html' // додайте його до фрагмента, якщо (fragment.indexOf ('. html') == -1) фрагмент + = ".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, і ви можете легко використовувати його для створення власних екранів клопоту безкоштовно. Ось кроки для налаштування інструменту гранул і початок згортання 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-snapshot за допомогою команди npm install grunt-html-snapshot –save-dev
Наступним кроком є створення власного файлу grunt javascript Gruntfile.js. Файл JS має наступний код

module.exports = функція (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 {повернути requestUri.replace (/// g, 'prefix-');}}, // якщо ви не хочете зберігати теги скриптів у знімках html // За замовчуванням встановіть параметр 'removeScripts', якщо його виключно видалить scripts: true,}}}}); grunt.registerTask ('default', ['htmlSnapshot']); };

Після цього ви можете виконати завдання за допомогою команди grunt htmlSnapshot

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

Мапи сайту також важливі

Для більш чіткого контролю над тим, як роботи пошукової системи отримують доступ до вашого сайту, необхідно також тонко налаштувати карту сайту. Всякий раз, коли пошуковий бот знаходить приклад.com/sitemap.xml, він слідкує за посиланнями, наведеними в мапі сайту, перш ніж сліпо слідувати всім посиланням на сайті. Це найкращий спосіб, якщо ви хочете індексувати сторінку, яка не пов'язана з жодною іншою сторінкою, наприклад, цільові сторінки кампанії з поштовою програмою, хоча ця практика не схвалюється.
Для вмісту AJAX найкраще перелічити всі сторінки / URL-адреси, які генерує ваша програма, щоб пошукові системи індексували їх належним чином, навіть якщо ваше додаток є однією сторінкою. Ось приклад мапи сайту

<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"> ... <url> <loc> http://www.yourwebsite.com/#!/page1 </loc> < changefreq> daily </changefreq> <пріоритет> 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 можна робити що завгодно. Перейти Fly.

Наступні дві вкладки змінюють вміст нижче.

Rachit лідирує функцію розвитку бізнесу мобільності, стратегію мобільності та практику консалтингу в Algoworks. Він є експертом усіх мобільних технологій і має досвід управління командами, залученими до розробки користувацьких програм для iPhone / iPad / Android.