5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F
1 2 3 4 5 6 7 8
В чём проблема?

Последние годы разработчики сайтов уделяют больше внимания удобству интерфейсов: всё должно быть быстро, удобно и понятно. Но технологии, которые помогают создавать такие проекты, не всегда «дружат» с поисковыми системами. Иногда современные сайты либо отсутствуют в поиске Яндекса или Google, либо плохо ранжируются. Часто так бывает у сайтов с динамической подгрузкой данных. Давайте разберёмся, в чём сложность их индексации и как решить этот вопрос.

Что нужно знать про индексирование в поисковиках?

Один из этапов работы поисковых систем — сбор информации, индексирование. Это добавление документов в базу данных поисковиков. За процесс отвечают поисковые роботы (краулеры), которые перебирают документы в сети. Они анализируют содержимое и сохраняют информацию на сервере. После переходят по ссылкам на следующие документы.

Для поисковых систем существуют ограничения на тип индексируемых данных (например, Flash и частично Javacript). Чтобы понять, как поисковые системы видят страницы сайта, воспользуйтесь панелью вебмастера. Инструменты доступны только для подтвержденных сайтов.

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

Search console в Google вкладка «Сканирование»

Вкладка «Сканирование»
Search console в Google вкладка «Отображение»

Вкладка «Отображение»

В зависимости от технологий разработки сайта возникают различия: как страницы видят пользователи и как их видят поисковые роботы. Часто такие различия связаны с контентом, который подгружается динамически.

Что такое динамическая подгрузка данных?

Под динамической подгрузкой данных понимается, как правило, использование технологии AJAX. Это подход для создания интерактивных интерфейсов. Он строит взаимодействие пользователя и веб-сервера по сценарию:

  1. Пользователь нажимает на кнопку, ссылку или другой элемент страницы.
  2. Элемент обрабатывается JavaScript’ом, после запрос уходит на сервер, чтобы получить данные.
  3. Сервер возвращает информацию, скрипт добавляет информацию на страницу без ее перезагрузки.

Таким образом, AJAX позволяет добавлять или обновлять контент на странице без её перезагрузки. Это позволяет:

Преимущества использования технологии AJAX:
  • Возможность подгружать данные без перезагрузки страниц позволяет делать пользование сайтом в большей степени ориентированным на посетителей. Создается впечатление беспрерывности работы сайта.
  • Снижение нагрузки на сервер.
  • Экономия трафика посетителей.

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

Где применяют динамическую подгрузку (AJAX)?
Single page application (SPA-сайты)

Одностраничные сайты-приложения представляют собой единственную страницу, в которой содержимое динамически загружается в ответ на действия пользователя. Целью SPA-сайтов является предоставления более гибкого взаимодействия с пользователем сродни мобильному приложению.

Примеры сайтов:

Интерактивные проекты

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

Примеры сайтов:

Классические сайты с применением AJAX

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

Примеры сайтов:

В чём сложность индексации динамического контента?

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

  • Поисковый робот не видит контент, потому что его нет в HTML-коде. Из-за этого страницы могут не индексироваться.
  • Поисковые системы могут индексировать только главную страницу. Так получается, если разработчик использует символ «#» после доменного имени в URL-адресах: http://site.ru/#page-1 или http://site.ru/#page-2. Если адреса на сайте выглядят так, то в индекс поисковых систем будет попадать только главная страница.
Как решить проблему?

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

  1. Необходимо, чтобы поисковый робот понял, что сайт поддерживает схему сканирования AJAX. Реализация зависит от организации URL-адресов на сайте.
    • Если адреса на сайте формируются с помощью «#», нужно заменить их на «#!» (хэшбэнг). То есть http://site.ru/#urlhttp://site.ru/#!url.
    • Если адреса имеют обычные ЧПУ без хэша, добавьте на динамические страницы мета-тег <meta name=»fragment» content=»!»>.
  2. При выполнении условий выше, робот будет запрашивать варианты страниц с параметром «?_escaped_fragment_=», по которым ему нужно отдавать HTML-снимки (HTML-копии страниц со всем контентом, загруженным после выполнения JavaScript). Чтобы создать HTML-снимки страниц обычно используют headless браузеры на стороне сервера. Например, PhantomJS или HtmlUnit.Подробнее для разработчиков:

Когда робот попадёт на страницу с «#!» в URL-адресе или с мета-тегом <meta name=»fragment» content=»!»>, он запросит страницу с параметром «?_escaped_fragment_=»:

  • http://site.ru/#!urlhttp://site.ru/?_escaped_fragment_=url
  • http://site.ru/urlhttp://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, так и для компаний-партнеров. Пишите с вопросами: hello@topright.ru.

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

Читайте также
Недлинные тексты о пяти стратегиях.
Саша Майер
Специализированные термины из собственной вики по брендингу
Ульяна Кожевникова
И как их избежать
Никита Михеенков