Понимать JavaScript и его потенциальное влияние на эффективность поиска очень важно. Если поисковые системы по каким-то причинам не могут сканировать сайт и анализировать его контент, ничего индексироваться не будет, и сайт не появится в поисковой выдаче.
Главный вопрос, который относится к JavaScript: могут ли поисковые системы «видеть» контент? Если нет, что тогда следует исправить?
Что такое JavaScript?
У современной веб-страницы есть три главных компонента:
- HTML — язык гипертекстовой разметки служит становым хребтом всего контента на сайте. Это структура веб-сайта (заголовки, параграфы, списки элементов и пр.)
- CSS — каскадные таблицы стилей — дизайн и элементы, которые формируют стиль сайта. Это презентационный уровень веб-ресурса.
- JavaScript — JavaScript — это интерактивность, согласованность всех составных частей и ключевой компонент динамического веба.
JavaScript помещается либо в HTML-документа в тегах <script> (т.е. встроен в HTML), либо в качестве внешнего скрипта. Существует множество библиотек и фреймворков JavaScript, в т.ч. jQuery, AngularJS, ReactJS, EmberJS.
Библиотеки и фреймворки JavaScript:
Что такое AJAX?
AJAX, или «асинхронный JavaScript и XML» — это набор техник по веб-разработке , совмещающий JavaScript и XML, что позволяет веб-приложениям взаимодействовать с сервером в фоновом режиме. Асинхронный означает, что другие функции или линии кода могут запускаться, когда запущен скрипт async. XML некогда был основным языком передачи данных; однако AJAX используется для всех типов передачи данных (включая JSON).
AJAX служит для обновления контента или слоя веб-страницы без полной перезагрузки страницы. В классической модели при загрузке страницы запрашиваются все элементы (assets) на странице и извлекаются с сервера, а затем происходит их отрисовка на странице.
Сервер генерирует совершенно новую страницу, отправляет ее браузеру, затем браузер перезагружает всю страницу.
Однако для AJAX загружаются лишь те элементы, которые отличаются на страницах.
Скрипт JavaScript определяет, какая информация необходима для обновления страницы. И сервер возвращает только запрашиваемые элементы. Так улучшается общий опыт взаимодействия: нет необходимости перезагружать всю страницу целиком.
Наглядный пример работа AJAX — Google Maps. Здесь тоже нет полной перезагрузки: когда пользователь совершает различные манипуляции на экране и выбирает маршрут, происходят мини-запросы к серверу для загрузки контента.
Что такое объектная модель документа (DOM)?
DOM — это шаги, которые браузер совершает для визуализации веб-страницы, после получения HTML-документа.
Первое, что браузер получает, это HTML-документ, затем начинается парсинг контента в этом документе, добавляются дополнительные ресурсы, такие как изображения, CSS и файлы JavaScript
DOM — это то, что формирует парсинг информации и ресурсов.
В современном мире DOM часто отличается от первичного HTML-документа, в силу того, что называют dynamic HTML .
Динамический HTML — это способность страницы менять свое содержимое в зависимости от входных данных, условий окружения (время дня) и других переменных данных, HTML, CSS и JavaScript.
Простой пример — тег <title>
Просмотр без графического интерфейса (headless browsing)
Просмотр без графического интерфейса (или headless browsing) — это просто получение веб-страниц без пользовательского интерфейса. Google, а теперь и Baidu , используют это, чтобы лучше понимать структуру и контент веб-страниц.
PhantomJS и Zombie.js — это скриптовые браузеры без интерфейса, их обычно используют для автоматизации веб-взаимодействий при тестировании.
Сложности поискового продвижения (и как их исправить)
Вот основные сложности, связанные с JavaScript:
- Возможность сканирования.
- Возможность доступа ботов к информации и анализа контента.
- Задержка загрузки или латентность (процесс визуализации веб-страниц) .
Возможность сканирования
Могут ли боты находить URL и понимать архитектуру сайта?
Два главных элемента:
- Блокируется доступ поисковых систем к JavaScript (даже случайно).
- Правильные внутренние ссылки, события JavaScript не используются как замена тегов HTML.
Почему блокировка JavaScript — проблема?
Если поисковые системы не получают доступ к JavaScript, они не смогут «увидеть» все то, что видит конечный пользователь. Привлекательность для поисковых систем ухудшается. Google может посчитать, что используется т.н. клоакинг (прием «черной оптимизации»).
Инструменты тестирования, такие как Fetch as Google , robots.txt компании TechnicalSEO.com и Fetch and Render , могут помочь с поиском ресурсов, которые заблокированы для Googlebot.
Простейший способ решить эту проблему — предоставить поисковым системам доступ к ресурсам, которые им нужны, чтобы понять UX сайта.
Внутренние ссылки
Внутренние ссылки делаются в обычных анкорных тегах в HTML или DOM (используется HTML тег hrefs=»www.example.com» ).
Не стоит использовать браузерные события JavaScript onclick как замену внутренним ссылкам.
Наличие внутренних ссылок — это мощный сигнал для поисковых систем относительно архитектуры сайта и важных страниц. Я ряде случаев они отменяли такие «SEO-намеки», как атрибуты canonical .
Структура URL
Исторически сложилось, что сайты на JavaScript (сайты AJAX) использовали в URL идентификаторы фрагмента (#).
Не рекомендуется:
- Хеш (#) — единичный символ фунта не сканируется поисковыми системами. Используется для идентификации анкорной ссылки. Это ссылки, которые дают возможность переходить к другим разделам статьи на странице. Все, что находится после единичного хэша URL никогда не отправляется серверу, страница автоматически прокручивается к первому элементу с совпадающим ID. Google не рекомендует использовать «#» в URL.
- Хешбэнг (#!) — был хаком для поддержки краулеров (сейчас Google хочет их избегать и только Bing поддерживает).
Рекомендуется:
- pushState History API — PushState — это навигационная часть History API (как пример, история посещений в браузере). По сути, pushState обновляет URL в адресной строке. И обновляется лишь то, что нужно изменить на странице. Это разрешает JS-сайтам использовать только «чистые» URL. pushState лучше использовать для бесконечного скроллинга (т.е. пользователь указывает на новые части страницы, которые URL обновит). В идеале, после перезагрузки страницы, пользователь видит все ту же часть контента. Однако не нужно обновлять страницу, поскольку контент обновляется при прокручивании, а URL обновляется в адресной строке.
- Пример: хороший пример реализации бесконечного скроллинга для поисковых систем можно найти здесь . Технически используется replaceState(), без обратной кнопки.
Возможность доступа ботов к контенту
Google может обрабатывать JavaScript и использовать DOM (вместо HTML-документа).
Вместе с тем, в некоторых случаях у поисковых систем возникают сложности с пониманием JavaScript. Никто не хочет оказаться в положении Hulu.com (сайт потерял половину рейтинга в Google из-за ошибок по части поисковой оптимизации ).
Если мы говорим о Googlebot, который выполняет JavaScript, то нужно отметить, что есть несколько важных элементов, благодаря которым поисковые системы получают контент:
- Если от пользователя требуется определенное действие, например, что-то на сайте включить, понадобится это проверить.
- Если загрузочное событие JavaScript длится около 5 секунд, поисковые системы это могут и не увидеть.
- Тесты Screaming Frog показывают, что на визуализацию контента уходит пять секунд.
- Если в JavaScript допущены ошибки, тогда и браузер, и поисковые системы могут пропустить некоторые части страниц.
Как проверить, что контент сайта доступен Google
Предоставить Google тот же сценарий, что и пользователям — это предпочтительный сценарий.
Впервые Google объявил, что может «лучше понимать веб (т.е. JavaScript)» в мае 2014 . Некоторые эксперты и раньше предполагали, что Googlebot сканирует JavaScript. В 2015 появились подтверждения, что Google может сканировать JavaScript и использовать DOM . Таким образом, если вы можете видеть контент в DOM, есть вероятность, что Google его проанализировал.
- Убедитесь, что ваш контент появляется в DOM.
- Протестируйте подгруппу страниц, чтобы узнать, может ли Google индексировать контент.
- Вручную проверяйте внешние ссылки с вашего контента.
- Используйте инструмент Fetch with Google, который позволяет узнать, будет ли контент доступен Google и не блокируется ли JavaScript в файле robots.txt. Также можно использовать инструмент Fetch and Render As Any Bot Tool .
Процесс визуализации веб-страниц
Когда браузеры получают HTML-документ и создают DOM (хотя существует определенный уровень предварительного сканирования), большинство ресурсов загружаются так, как и появляются в HTML-документе. Это значит, что если у вас есть большой файл в верхней части HTML, браузер загрузит этот большой файл первым.
Google загружает самое необходимо раньше. Концепт визуализации веб-страниц состоит в том, чтобы «показать пользователю верхнюю часть экрана как можно раньше».
Но если у вас есть необязательные ресурсы или JavaScript-файлы, которые замедляют загрузку страницы, визуализация страниц блокируется.
Если инструменты Page Speed Insights Tool или WebPageTest.org показали, что есть блокирующий рендер-ресурс, тогда:
- Inline: Добавьте JavaScript в HTML-докумнет.
- Async : Убедитесь, что JavaScript асинхронный (т.е. добавьте атрибут async в тег HTML).
- Defer : JavaScript размещается ниже в HTML.
Важно понимать, что скрипты должны размещаться в порядке очередности. Скрипты, которые загружают контент «выше линии сгиба» — это приоритет, их не нужно изменять. Любой скрипт, который ссылается на еще один файл, может использоваться только после загрузки этого файла.
Проверьте, что ваш контент доступен, и не скрыт от Google. Каждый сценарий требует тестирования. Оцените потенциальные решения, опираясь на результат.
