Як підготувати сайт до просування

Наша команда-партнер Artmisto

В чому проблема?

Останні роки розробники сайтів приділяють більше уваги зручності інтерфейсів: все повинно бути швидко, зручно і зрозуміло. Але технології, які допомагають створювати такі проекти, не завжди «дружать» з пошуковими системами. Іноді сучасні сайти або відсутні в пошуку Яндекса або Google, або погано ранжуються. Часто так буває у сайтів з динамічним підвантаженням даних. Давайте розберемося, в чому складність їх індексації та як вирішити це питання.

Що потрібно знати про індексування в пошукових системах?

Один з етапів роботи пошукових систем - збір інформації, індексування. Це додавання документів в базу даних пошукових систем. За процес відповідають пошукові роботи (краулери), які перебирають документи в мережі. Вони аналізують вміст і зберігають інформацію на сервері. Після переходять за посиланнями на такі документи.

Для пошукових систем існують обмеження на тип індексованих даних (наприклад, Flash і частково Javacript). Щоб зрозуміти, як пошукові системи бачать сторінки сайту, скористайтеся панеллю вебмастера. Інструменти доступні тільки для підтверджених сайтів.

В Яндексі використовуйте інструмент « Перевірка відповіді сервера ». Тут знаходиться код, який отримує бот Яндекса, але без візуального відображення. В Google використовуйте «Подивитися як Googlebot» в розділі «Сканування». Введіть потрібну адресу сторінки і натисніть «Отримати і відобразити» і перейдіть за посиланням на вказану адресу. У вкладці «Сканування» буде код сторінки, у вкладці «Відображення» - то, як сторінку бачить Googlebot.

Вкладка «Сканування» Вкладка «Відображення»

Залежно від технологій розробки сайту виникають відмінності: як сторінки бачать користувачі та як їх бачать пошукові роботи. Часто такі відмінності пов'язані з контентом, який завантажується динамічно.

Що таке динамічне підвантаження даних?

Під динамічною підвантаженням даних розуміється, як правило, використання технології AJAX . Це підхід для створення інтерактивних інтерфейсів. Він будує взаємодію користувача і веб-сервера за сценарієм:

1. Користувач натискає на кнопку, посилання або інший елемент сторінки.
2. Елемент обробляється javascript'ом, після запит йде на сервер, щоб отримати дані.
3. Сервер повертає інформацію, скрипт додає інформацію на сторінку без її перезавантаження.

Таким чином, AJAX дозволяє додавати або оновлювати контент на сторінці без її перезавантаження. Це дозволяє:

Переваги використання технології AJAX:

• Можливість довантажувати дані без перезавантаження сторінок дозволяє робити користування сайтом більшою мірою орієнтованим на відвідувачів. Створюється враження безперервності роботи сайту.
• Зниження навантаження на сервер.
• Економія трафіку відвідувачів.

В якості альтернативної технології можна використовувати WebSocket , При якому обмін даними між браузером і сервером відбувається в режимі реального часу. Технологія застосовується в сервісах з live-контентом, наприклад, в соціальних мережах, де стрічки і діалоги між користувачами регулярно оновлюються без перезавантаження сторінок.

Де застосовують динамічну подгрузку (AJAX)?

Single page application (SPA-сайти)

Односторінкові сайти-додатки є єдину сторінку, в якій вміст динамічно завантажується у відповідь на дії користувача. Метою SPA-сайтів є надання більш гнучкого взаємодії з користувачем на кшталт мобільному додатку.

Приклади сайтів:

Інтерактивні проекти

Під інтерактивними проектами ми розуміємо невеликі промосайт, які допомагають розповідати користувачам «історію» про продукт або сервісі. Навігація і структура таких сайтів гранично проста. Такі сайти тримають користувачів в одному зручному інтерфейсі.

Приклади сайтів:

Класичні сайти із застосуванням AJAX

У класичних сайтах подгрузка даних за допомогою AJAX може застосовуватися для вирішення різних завдань: відображення більш докладної інформації, завантаження лістингу товарів і т.д.

Приклади сайтів:

У чому складність індексації динамічного контенту?

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

• Пошуковий робот не бачить контент, тому що його немає в HTML-коді. Через це сторінки можуть не індексуватися.
• Пошукові системи можуть індексувати тільки головну сторінку. Так виходить, якщо розробник використовує символ "#" після доменного імені в URL-адресах: http: або http:. Якщо адреси на сайті виглядають так, то в індекс пошукових систем буде потрапляти тільки головна сторінка.

Як вирішити проблему?

Щоб підготувати до просування сайт з динамічною підвантаженням контенту, використовують схему сканування AJAX.

1. Необхідно, щоб пошуковий робот зрозумів, що сайт підтримує схему сканування AJAX. Реалізація залежить від організації URL-адрес на сайті.
   • Якщо адреси на сайті формуються за допомогою «#», потрібно замінити їх на «#!» (Хешбенг). Тобто http: → http:.
   • Якщо адреси мають звичайні ЧПУ без хеша, додайте на динамічні сторінки мета-тег <meta name = "fragment» content = "!»>.
2. При виконанні умов вище, робот буде запитувати варіанти сторінок з параметром «? _Escaped_fragment_ =», за якими йому потрібно віддавати HTML-знімки (HTML-копії сторінок з усім контентом, завантаженим після виконання JavaScript). Щоб створити HTML-знімки сторінок зазвичай використовують headless браузери на стороні сервера. наприклад, PhantomJS або HtmlUnit .Детальніше для розробників:

Коли робот потрапить на сторінку з «#!» В URL-адресу або з мета-тегом <meta name = "fragment» content = "!»>, Він запросить сторінку з параметром «? _Escaped_fragment_ =»:

• http: → http://site.ru/?_escaped_fragment_=url
• http://site.ru/url → http://site.ru/url?_escaped_fragment_=

В результаті пошуковий робот буде отримувати HTML-знімки всіх сторінок, які і будуть додані в індекс. Сайт буде брати участь в пошуку на загальних підставах. В індексі пошукових систем при цьому зберігаються адреси без параметра «? _Escaped_fragment_ =».

Рекомендації для розробників

Що роблять пошуковики для індексації динамічного контенту?

У жовтні 2015 року Google відкликав рекомендації по скануванню сайтів на AJAX. Тепер, якщо для Googlebot немає обмежень по читанню файлів JS і CSS, він отрісовиваєт і завантажує контент в тому ж варіанті, яким його бачать користувачі у себе в браузері. Це означає, що сайти, які використовують динамічно підвантажуємий контент, повинні коректно індексуватися в Google, якщо роботу відкриті службові файли.

Нагадаємо, щоб перевірити, як виглядають сторінки сайту для пошукового робота Google, можна скористатися сервісом Search Console. У розділі «Сканування» потрібно вибрати «Подивитися як Googlebot», ввести до відповідного рядка адреса сторінки і натиснути кнопку «Отримати і відобразити». Після обробки отримати результат: подивитися, як бот бачить сторінку і які компоненти JS або CSS йому недоступні.

У листопаді 2015 року Яндекс оголосив про тестування подібної технології - використання JS і CSS при скануванні сайтів.

Корисне почитати

Чи потрібно слідувати новими рекомендаціями Google?

Поки тільки Google здатний індексувати сайти без отримання повної HTML-копії сторінок. Яндекс тільки тестує таку можливість. Для всіх інших пошукових систем варіант залишається колишній. Тому відмовлятися від HTML-копій сторінок буде некоректним рішенням.

Індексування сторінок з підстановкою параметра «? _Escaped_fragment_ =» (коли відбувається звернення до повної HTML-версії сторінки) як і раніше підтримується і в Google. Якщо ви використовуєте на сайті AJAX для подгрузки контенту, ваш сайт буде як і раніше коректно індексуватися в Google, якщо роботу віддаються сторінки з «? _Escaped_fragment_ =».

Як готувати сайти під SEO правильно?

Якщо ви все зрозуміли - впроваджувати! Якщо у вас залишилися питання, ви можете безкоштовно порадитися з нашими SEO-фахівцями. Наша рекламна команда Topright постійно консультує дизайнерів і розробників - як для Nimax, так і для компаній-партнерів. Пишіть з питаннями: [email protected] .

Крім того, якщо перед вами стоїть завдання розробити сайт в тому числі під SEO-трафік, а ви не дуже хочете займатися цією частиною роботи, ви можете передати її нам в рамках партнерської програми. Читайте докладніше про послугу SEO-проектування , Подивіться умови нашої партнерської програми по інтернет-маркетингу.