Сделайте ваш JavaScript-сайт SEO-дружественным с помощью этих решений

Сделайте ваш JavaScript-сайт SEO-дружественным с помощью этих решений

Большинство современных веб-сайтов содержат JavaScript, что делает их динамичными и интерактивными. Хотя боты поисковых систем достаточно интеллектуальны, они все же могут не отображать большую часть содержимого JavaScript, что влияет на рейтинг страницы. Содержание JavaScript во многом зависит от способа рендеринга кода на вашем сайте. Например, при серверном рендеринге сервер содержит содержимое сайта.

 

Вашу рекламу скликивают конкуренты?

Подключите защиту по ссылке и экономьте ваш рекламный бюджет!

svg%3E

После запроса браузер получает полностью отрендеренный HTML. Однако при рендеринге на стороне клиента JavaScript отображается браузером с помощью DOM.

svg%3E

Третьим вариантом рендеринга является динамический рендеринг, при котором содержимое, отрисованное на стороне клиента, попадает в браузер, а содержимое, отрисованное на стороне сервера, попадает в поисковую систему (системы). Методы рендеринга влияют на то, как отображается JS и, следовательно, на рейтинг страницы.

svg%3E

Чтобы убедиться, что весь JS-код вашего сайта отображается, вы должны следовать надлежащей практике JavaScript SEO. Но сначала давайте разберемся, что такое JavaScript SEO.

Что такое JavaScript SEO?

JavaScript SEO облегчает поисковым системам поиск и индексацию JavaScript-кода (динамического контента) веб-сайта (или веб-страницы). Google или любая другая поисковая система обрабатывает JavaScript в три этапа, а именно: переползание, рендеринг и индексирование. Чтобы Google мог выполнить все эти действия, содержимое JavaScript должно быть SEO-дружественным, т.е. видимым и доступным.

Как Google обрабатывает содержимое JavaScript на странице

Вот шаги, которые Googlebot выполняет для обработки JavaScript:

  • Получает URL-адрес из очереди ползания с помощью HTTP-запроса
  • Проверяет файл robots.txt на наличие URL-адресов, которые сайт не разрешает просматривать.
  • Пропускает «запрещенные» URL, анализирует ответ на наличие других URL и добавляет их в очередь на сканирование.
  • Ставит страницы в очередь на отрисовку, за исключением тех, которые помечены как не индексируемые
  • Chromium отображает страницу, выполняет JavaScript и индексирует страницу
  • Повторно анализирует отображаемый HTML на наличие ссылок
  • Постановка URL-адресов в очередь на сканирование

Когда Google не индексирует содержимое JavaScript?

Google может индексировать JavaScript, если он реализован правильно. Например, если некоторые из ваших файлов JS и CSS скрыты, Google не сможет правильно проиндексировать сайт. Аналогичным образом, если в исходном HTML есть ссылки, которых нет в отображаемом HTML, Google может пропустить эти ссылки при просмотре или индексировании. Кроме того, если JavaScript не встроен непосредственно в HTML, Google придется загрузить файл для выполнения. Кроме того, поисковые системы могут иметь кэшированную версию веб-страницы (для повышения производительности), и JavaScript на странице может быть не синхронизирован с ней. Поскольку каждый бит кода JavaScript должен быть прочитан, чрезмерное использование JavaScript может замедлить скорость страницы или вызвать ошибки таймаута.

Почему JavaScript SEO важен?

JavaScript SEO важен, поскольку он влияет на многие элементы страницы и факторы ранжирования, которые Google (или поисковые системы) сканируют для SEO:

Элемент на страницеПотенциальная проблема SEOВозможное SEO-решение
Рендеринг содержимогоПоисковые системы (например, Google) не могут отобразить вашу страницу, если ее ресурсы заблокированы в файле robots.txt вашего сайта. Также Google не может индексировать или рендерить JS и CSS файлы, которые заблокированы или скрыты.Сократите JavaScript на основном содержимом страницы используйте альтернативные подходы к рендерингу на стороне клиента, такие как рендеринг на стороне сервера, динамический рендеринг, гибридный рендеринг (комбинация рендеринга на стороне клиента и на стороне сервера)
Ссылки Если некоторые ссылки являются внутренними или JavaScript генерирует ссылки на URL, когда пользователь нажимает на них, Google не сможет обнаружить такие ссылки.Используйте анкорные ссылки с атрибутом href, описательные анкорные тексты для ссылок. Псевдоссылки, такие как теги <div> и <span>, не просматриваются.
МетаданныеЕсли на сайте не используются пакеты Node.js, такие как vue-meta, поисковые системы могут просматривать одни и те же метаданные или, что еще хуже, вообще не просматривать метаданные для каждого вида или страницы.Используйте такие пакеты Node.js, как react-helmet, vue-meta, react-meta-tags
Ленивые изображения Поисковая машина не выбирает содержимое, которое помечено для ленивой загрузки. Поисковая система не может прокручивать содержимое, и, следовательно, некоторое содержимое может никогда не быть отображено.Используйте API IntersectionObserver, который понимает видимость и положение элементов DOM, когда они доступны. Вы также можете использовать встроенную функцию ленивой загрузки браузера (Chrome).
Время загрузки страницы Страница с большим количеством JavaScript может медленно загружаться, что может повлиять на ее рейтинг в поисковой выдаче.Добавляйте критический JS-код в строку и откладывайте некритический JS-код до отображения основного содержимого, сокращая общий JS-код.

Лучшие практики для JavaScript SEO

Следуя некоторым лучшим практикам, мы можем добиться того, что поисковые системы будут лучше просматривать и отображать страницы:

Добавлять ссылки и изображения в соответствии с установленными веб-стандартами. Добавляйте все ссылки, используя ahreftag, а не onclick#pageurl или window.location.href='/page-url. Google сможет легко переползать по ссылкам и следовать по ним. Таким же образом добавляйте изображения, используя тег img src, а не тег img data-src:

Предпочитайте рендеринг на стороне сервера. Убедитесь, что содержимое вашего сайта доступно на сервере отдельно от браузера пользователя.

Убедитесь, что ваш HTML содержит все важное содержимое, которое вы хотите показать. Отрисованный HTML должен содержать правильный заголовок, мета-роботы, мета-описания, изображения, структурированные данные и канонические теги.

Сделать ваш сайт JavaScript SEO дружественным

javascript code

Чтобы проверить внедрение JavaScript SEO на вашей веб-странице, вы можете выполнить следующие шаги:

  • Узнайте, сколько JavaScript использует ваш сайт: Для этого вы можете просто отключить JavaScript в своем браузере. Если вы не видите большого количества контента, это означает, что ваш сайт в основном использует JavaScript.
  • Проверьте, получает ли Googlebot все важное содержимое и теги: Вы можете использовать инструмент тестирования Google на мобильную дружественность или инструмент тестирования богатых результатов, чтобы проверить, как Googlebot использует необработанный HTML для рендеринга контента.
  • Вы также можете использовать расширения chrome, такие как View Rendered Source, чтобы понять, как JavaScript изменяет страницу, и сравнить исходный HTML и отрендеренный.
  • Вы можете проверить наличие важных тегов (title, meta description и т.д.) на отрисованном HTML с помощью расширения SEO Pro Chrome.

Заключение

В этой статье мы узнали о том, как JavaScript может немного усложнить работу с SEO, и о подходах к решению потенциальных проблем, вызванных добавлением большого количества JavaScript в ваш код. Мы также рассмотрели некоторые лучшие практики и инструменты, позволяющие сделать ваш JavaScript-сайт SEO-дружественным. Другие замечательные инструменты, которые помогают Google распознать и просмотреть ваш динамический контент, — это Prerender, AngularJS и Huckabuy.

Наш проект поддержало государство в виде гранта на развитие алгоритмов!
This is default text for notification bar

Конкуренты скликивают рекламу?

Подключите защиту бесплатно и проверьте, сколько ботов кликают на вашу контекстную рекламу Яндекс.Директ и оцените потери вашего бюджета. Никаких финансовых обязательств.