JavaScript і SEO в 2016 році

Ви все ще віддаєте пошуковиках HTML-версію свого SPA програми? 2016 рік на дворі, часи змінилися.


AJAX як технологія остаточно сформувалася до 2005 року. У 2006 році W3C випустив першу попередню специфікацію об'єкта XMLHttpRequest в спробі створити офіційний веб-стандарт. У 2009 році Google виступив з пропозицією зробити AJAX-сторінки доступними для пошуковиків. Тоді вони не могли інтерпретувати JavaScript, тому був запропонований ряд практик, які гарантували що пошукові системи зможу індексування AJAX-додаток.

Веб-майстрам доводилося генерувати HTML-версію свого сайту, а зі сторінок з адресою ?_escaped_fragment=page віддавати срендеренную HTML-версія сторінки з відпрацьованим JavaScript'ом. З цього приводу існує докладне керівництво від Яндекса і Google.

Однак з жовтня 2015 року Google відзначає своє керівництво як застаріле, не рекомендоване (deprecated). Запису в блозі Гугла стверджує що пошуковий павук здатний інтерпретувати веб-сторінки точно так само, як сучасні браузери.

Практика
Отже, в наявності односторінковий сайт на AngularJS. Потрібно з мінімальними рухами забезпечити його індексацію в Google і заодно перевірити, чи дійсно Google виконує весь JavaScript-код.

Першим ділом включимо HTML5 History API Mode для UI-router:

angular.module('app', ['ui.router'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
});

Тепер потрібно налаштувати nginx так, щоб всі запити на відправлялися index.html:

location / {
try_files $uri $uri/ /index.html =404;
}

Власне, все. Цього достатньо, щоб Google почав індексувати сайт. Як пруфа можу навести свій особистий проект seo11.ru.

Це SPA додаток на Angular 1.5, але всі проіндексовані сторінки, навіть без sitemap.xml.

Контент сторінок вставляється через ui-view, але він без проблем доступний Google-павуку:


З допомогою $stateProvider для кожної сторінки сайту прописані унікальні title і description:

<title data-ng-bind="title">SEO 1:1</title>
<meta name="description" content="{{description}}">

Працюють обидва варіанти:


Google відпрацьовує сторінку повністю, рівно так, як це робиш ваш браузер. Аж до того, що текст у цьому блоці доступний для пошуку:

<p ng-show="isFirefox">Якщо ви користуєтеся браузером Firefox...</p>

А в цьому блоці не доступний:

<p ng-if="isFirefox">, Просто натисніть на підсвічену стрілку...</p>

Різниця в тому, що ng-show просто додає display: hide до елементу, а ng-if вирізає елемент прямо з DOM.

А Яндекс?

Робот Яндекса теж може індексувати JavaScript, але поки що в рамках експерименту. Про це докладно написано блог. На жаль, це працює не для всіх сайтів і зараз не можна бути впевненим, що ваш JS-сайт буде проіндексований.

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

Однак витрачати на це значні ресурси не доцільно, оскільки рано чи пізно Яндекс буде повноцінно виконувати JS-код для всіх сайтів (якщо раніше не загнется).

На сьогоднішній день найбільш простим способом генерації HTML-версії сайту є використання headless-браузера для ренгеринга сторінок, наприклад PhantomJS. Можна робити це на льоту або ж віддавати кешовані заздалегідь сторінки (є навіть спеціальні сервіси, наприклад prerender.io).

Особисто я використовую плагін html-snapshots, який запускається в Gulp'ом на етапі складання проекту.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.