Полный гайд по SEO для сайтов на JavaScript

Данный материал — адаптированный перевод оригинальной статьи Definitive Javascript SEO Guide с сайта neilpatel.com

Вы когда-нибудь задумывались, как JavaScript (JS), один из столпов современной Сети, может повлиять на видимость вашего контента в поисковой системе (ПС)? Если ваш сайт содержит код на JS, стоит уделить этому внимание.

В статье разберемся в тонкостях JS с точки зрения SEO и расскажем, как определить, что содержимое вашего сайта индексируется и ранжируется в ПС.

Что такое JavaScript SEO

Для начала дадим определение. JavaScript SEO — это поисковая оптимизация всего сайта или отдельных его элементов, реализованных с помощью JS.

Сейчас JS довольно распространен. Он делает сайты динамическими, интерактивными и запоминающимися. Тем не менее с точки зрения поисковой оптимизации он создает ряд сложностей.

Раньше веб-сайты были преимущественно на HTML и CSS. Поисковые системы могли обойти все страницы, проиндексировать контент и сайт ранжируется в ПС. Но с современными фреймворками и библиотеками JS стал первичным языком программирования для создания веб-приложений. Это улучшает пользовательский опыт (UX), но для SEO становится палкой о двух концах.

Как JS влияет на SEO-элементы

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

Рендеринг. Традиционно веб-страницы показывают контент напрямую. Но с JS загрузка контента происходит после того, как загрузится HTML и CSS, то есть асинхронно. Существует риск, что текст, загруженный на JS, может остаться невидимым для поисковых систем.

Ссылки. JavaScript можно использовать для генерации динамических ссылок. Это удобно с точки зрения UX, но поисковым системам может быть сложно обнаружить и просканировать ссылки, что повлияет на внутреннюю перелинковку. Некоторые CMS используют навигацию на JS, и это тоже может привести к проблемам с индексацией.

Lazy load для изображений. Ленивая загрузка изображений — это техника, предполагающая загрузку изображений только при достижении области видимости. Такое решение может ускорить загрузку. Однако, в случае неправильной реализации lazy load поисковые системы могут не проиндексировать изображения, ухудшится их видимость для поиска.

Время загрузки. Скорость загрузки — один из факторов ранжирования. Объемный неиспользуемый код на JS может тормозить загрузку страницы, негативно влияя на продвижение и UX.

Метатеги. Некоторые сайты могут использовать JS для отображения метатегов (например, title и description). Если рендеринг происходит неправильно, ПС могут не распознать важную информацию, которая потенциально влияет на то, как страница представлена в поисковой выдаче.

Пагинация. В интернет-магазинах пагинация часто представлена в виде бесконечного скролла или подгрузки по клику («Показать ещё»), реализованного с помощью JS. Это опасно тем, что поисковые боты не смогут распознать код на JS и значительная часть карточек товаров не будет проиндексирована. Также бесконечный скролл, реализованный с большим количеством неиспользованного кода на JS, негативно влияет на скорость и производительность.

Вывод: несомненно, JS повышает функциональность, но в то же время создает ряд проблем с точки зрения поисковой оптимизации. Они решаемы, но важно выяснить их причину. Убедитесь, что JS не снижает эффективность работ по оптимизации.

Как поисковые системы обрабатывают JS

Схема обработки JS поисковыми системами

Источник: https://www.screamingfrog.co.uk/seo-spider/tutorials/crawl-JS-seo/

Для понимания JS SEO важны нюансы. Давайте разберем поэтапно, как Googlebot обрабатывает JS:

Краулинг

Краулинг — процесс сбора информации о новых или обновленных страницах. Традиционно веб-сканеры извлекают HTML, и на этом краулинг заканчивается. Современные сканеры также способны обрабатывать код на JS, но ресурсы для обработки ограничены.

Если код на JS слишком длинный или сложный, поисковый бот может пропустить его. В итоге часть контента останется не отсканированной и, следовательно, не проиндексированной. Нет полной индексации — нет полноценного ранжирования.

Рендеринг

Обработка (рендеринг) браузером JS

Источник: https://prismic.io/blog/JS-rendering-methods

Здесь посложнее. Рендеринг — это то, как браузер или ПС обрабатывает JS для отображения содержимого. У Google, например, процесс рендеринга двухэтапный.

Первый этап — краулинг и индексация необработанного HTML. Второй — повторный рендеринг и индексация кода на JS.

Процесс рендеринга довольно длительный — на это могут уходить часы или даже недели.

Индексация

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

Сравнение видов рендеринга

Источник: https://thetombomb.com/posts/rendering-options-on-the-web

Рендеринг бывает трех видов:

Server-Side Rendering (SSR) — рендеринг на стороне сервера

При использовании SSR сервер полностью рендерит JS и отправляет уже обработанную страницу в браузер.

Плюсы: быстрая загрузка, контент полностью доступен для ПС. Минусы: высокая нагрузка на сервер, из-за чего потенциально снижается производительность.

Client-Side Rendering (CSR) — рендеринг на стороне клиента

Рендерингом занимается браузер. Когда пользователь заходит на страницу, сервер отправляет файлы JS, которые обрабатывает браузер.

Плюсы: снижение нагрузки на сервер. Минусы: снижение скорости загрузки и потенциальные задержки индексации (если рендеринг происходит медленно).

Динамический рендеринг

Динамический рендеринг — метод, объединяющий два вида рендеринга. Сервер определяет, от кого идет запрос — от пользователя или от бота поисковой системы. В первом случае сервер доставляет контент, обработанный на стороне клиента. Во втором — отправляет предварительно обработанный контент. Такое решение позволяет ПС сразу получить доступ к данным, а пользователям — расширенный функционал, предлагаемый JS.

Правила оптимизации сайта на JS

1. Избегайте клоакинга — показа разных данных для пользователя и ПС. Любые различия могут привести к попаданию под фильтры или санкции.

2. Приоритезируйте. Если ключевой контент реализован на JS, убедитесь, что он доступен в исходном HTML. Индексация HTML происходит раньше, и в случае проблем с рендерингом важная информация будет уже проиндексирована.

3. Много тестируйте. Используйте инструменты вроде Screaming Frog SEO Spider (парсер) и проверки URL (инструмент в Google Search Console), чтобы понять, как Googlebot видит вашу страницу. Если часть информации потерялась, вероятно, проблема с рендерингом.

4. Улучшайте. Проектируйте основные функции без JS. JS должен только расширять функционал. Убедитесь, что пользователи и ПС могут получить доступ к основному контенту, даже если JS не срабатывает.

5. Используйте lazy load с осторожностью. Ленивая загрузка может улучшить производительность. Но удостоверьтесь, что она не используется для загрузки данных в верхней части страницы и сразу доступна для поисковых ботов. Ленивая загрузка iframes тоже хороша для SEO.

6. Минимизируйте и оптимизируйте. Минимизируйте свои файлы JS и сократите неиспользуемый код. Чем компактнее сценарий, тем выше его производительность.

Распространенные проблемы с JS

Несмотря на приложенные усилия, могут возникнуть проблемы. Важно правильно их диагностировать и решить.

Блокировка рендеринга. JS не дает странице отображаться до полной загрузки. Убедитесь, что используется асинхронная или отложенная загрузка.

Блокировка рендеринга на десктопе

Источник: https://gtmetrix.com/blog/how-to-eliminate-render-blocking-resources/

Проблемы с краулингом. Если Googlebot не сможет просканировать JS, часть данных будет невидима для ПС. Убедитесь, что файлы JS не закрыты от сканирования в файле robots.txt.

Неполный рендеринг. Как мы уже упоминали выше, возможны отсрочки в рендеринге JS поисковыми системами. Если нет важной информации в исходном коде HTML, он может не проиндексироваться.

Проблемы с внутренними ссылками. Если используете JS для внутренних ссылок, проверьте, доступны ли они для краулеров. Поисковый робот должен видеть структуру вашего сайта.

Дубли. Если несколько URL имеют идентичное содержание из-за JS фреймворка, это может сбить с толку поисковые системы. Убедитесь, что ваши URL-адреса различаются и содержательны.

Инструменты для JavaScript

Для оптимизации сайта на JS требуется правильный набор инструментов. Ниже перечислим наиболее важные.

Google Search Console

С помощью инструмента проверки URL можно понять, как Googlebot видит страницу вашего сайта.

Screaming Frog

Этот парсер проверит ваш ресурс и обнаружит проблемы с JS.

Lighthouse

Интегрирован в Chrome Dev Tools и предоставляет пользователю информацию для повышения производительности веб-приложений.

Browser DevTools

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

Log File Analysis

Используйте сервисы для анализа серверных логов.

SEO-агентства

Если вы не разбираетесь в оптимизации сайта на JS, квалифицированную помощь в продвижении веб-ресурса готовы предложить в Racurs Agency.

Технический SEO-аудит

Наше SEO-агентство предоставит технический аудит вашего сайта с JS и предложит другие диджитал-услуги.

FAQ

Как лучше реализовать JS на моем сайте?

Начните с постепенного улучшения, то есть ваш сайт должен работать даже без JS. Расставьте приоритеты для критически важного контента, избегайте клоакинга, тестируйте рендеринг и рассмотрите внедрение lazy load для изображений. Всегда оптимизируйте и минимизируйте JS-файлы во избежание проблем с рендерингом.

Существуют ли особые SEO-инструменты, которые помогут мне в оптимизации?

Google Search Console, Lighthouse и Screaming Frog незаменимы. Для анализа логов используйте сервисы, которые показывают, как поисковые системы взаимодействуют с JS.

Как JS влияет на индексацию и ранжирование в поисковых системах?

JS может изменить содержимое страницы, ссылки или даже метатеги после начала загрузки HTML. Если возникнет проблема с рендерингом JS, ПС не сможет правильно проиндексировать и ранжировать ваш сайт.

Как агентства оптимизируют сайты на JS?

SEO-оптимизация сайта с JS — это обеспечение доступности контента для ПС, сокращение времени рендеринга и устранение потенциальных проблем с индексацией. Для выявления проблем seo-специалисты проводят технический аудит, затем формируют техническое задание с приоритезацией пунктов для внедрения.

Как убедиться, что код на JS рендерится и индексируется должным образом?

Помогут регулярные проверки в таких инструментах, как URL Inspection Tools, Google Search Console. Также рассмотрите возможность внедрения рендеринга на стороне сервера для важной информации, чтобы гарантировать ее наличие в исходном HTML.

Каких наиболее частых ошибок с точки зрения SEO следует избегать при внедрении JS?

Избегайте блокировки рендеринга JS и клоакинга. Убедитесь, что в robots.txt не стоит запрет на сканирование JS. В этом случае не стоит полагаться только на рендеринг на стороне браузера (клиента).

Как я могу оптимизировать динамический контент для повышения видимости в поисковых системах?

Динамический контент часто реализован на JS. Рассмотрите динамический рендеринг, когда сервер предоставляет ПС полностью обработанную страницу, а пользователи получают версию, обработанную на стороне клиента.

Существуют ли JS-фреймворки и библиотеки, которые лучше с точки зрения SEO?

Нет ни одного JavaScript-фреймворка, специально оптимизированного под SEO. На данный момент только Next.JS и Nuxt.JS используют рендеринг на стороне клиента.

Как я могу определить эффективность моих усилий?

Обеспечьте регулярный мониторинг органического трафика, позиций и показателей индексации. Такие системы аналитики, как Google Analytics и Google Search Console, могут дать важную информацию.

О каких трендах в области JavaScript SEO необходимо знать?

Мир SEO и JS постоянно развивается. Следите за достижениями в сфере того, как поисковые системы обрабатывают JS, за появлением новых инструментов и апдейтами в JS-фреймворках, а также за SEO-новостями, форумами, сообществами и последними обновлениями поисковых систем.

Заключение

В этой статье мы постарались досконально разобраться в особенностях SEO-оптимизации сайтов на JS.

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