Все, что вам нужно знать о JavaScript SEO

Спросите любого программиста, и он скажет вам, что думает о JavaScript.

С момента своего выпуска JavaScript (JS) был самым популярным языком программирования, используемым веб-разработчиками по всему миру. Недавний опрос веб-разработчиков, проведенный Stack Overflow, показал, что JavaScript является наиболее предпочтительным языком программирования уже восемь лет подряд.

JS позволяет веб-разработчикам с легкостью создавать крупномасштабные веб-приложения. Он обладает исключительной способностью динамически обновлять страницы и делать их более интерактивными. Более того, фреймворки JavaScript, такие как AngularJS, ReactJS, Vue и NodeJS, значительно сокращают время и усилия, необходимые для разработки сайтов на основе JS. Неудивительно, что JavaScript лежит в основе 96 процентов веб-сайтов по всему миру.

Тем не менее, сайты на основе JS, похоже, имеют отношения любви и ненависти к Google. JavaScript может легко контролировать и изменять HTML, чтобы сделать веб-страницы динамичными и интерактивными, тем самым улучшая UX сайта. Тем не менее поисковым системам трудно работать с JS, оставляя большую часть контента JavaScript неиндексированным.

Давайте немного углубимся в то, почему JavaScript усложняет работу Google и что вы можете сделать, чтобы сделать ваш контент JS удобным для ботов.

Как Javascript влияет на SEO?

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

У поисковых систем есть свои ограничения при отображении веб-страниц, содержащих контент JavaScript. Google выполняет начальный обход страницы и индексирует то, что находит. Когда ресурсы становятся доступными, боты возвращаются к рендерингу JS на этих страницах. Это означает, что контент и ссылки, основанные на JavaScript, рискуют остаться незамеченными поисковыми системами, что может нанести вред поисковой оптимизации сайта.

Источник

Однако Google знает, что JavaScript никуда не денется! В результате гигант поисковых систем выделил большую часть своих ресурсов, чтобы помочь специалистам по поиску оптимизировать свои сайты на основе JS.

Посмотрите серию видеороликов о JavaScript SEO от Google, которые помогут сделать ваш JS-контент более доступным для поиска в Интернете.

SEO-специалистам необходимо преобразовать свои веб-страницы на основе JS в формат, который ценит Google. Имея небольшое представление о том, как поисковые системы обрабатывают контент JS, можно заставить JavaScript и SEO работать вместе, чтобы повысить рейтинг вашего сайта.

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

Боты Google обрабатывают JS иначе, чем страницы без JS. Боты обрабатывают их в три этапа: сканирование, индексирование и рендеринг. Эти этапы легко понять благодаря графике от Google Developers ниже:

Источник

Ползание

Этот этап посвящен возможности обнаружения вашего контента. Это сложный процесс, включающий подпроцессы, а именно начальные наборы, создание очередей и планирование сканирования, важность URL-адресов и другие.

Начнем с того, что боты Google ставят страницы в очередь для сканирования и рендеринга. Боты используют модуль синтаксического анализа для извлечения страниц, перехода по ссылкам на страницах и рендеринга до момента, когда страницы будут проиндексированы. Модуль не только отображает страницы, но также анализирует исходный код и извлекает URL-адреса из фрагментов <a href="…">.

Боты проверяют файл robots.txt, разрешено ли сканирование. Если URL-адрес помечен как запрещенный, боты его пропускают. Поэтому очень важно проверять файл robots.txt, чтобы избежать ошибок.

Рендеринг

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

Рендеринг на стороне сервера (SSR)

Как следует из названия, в этом типе рендеринга страницы заполняются на сервере. При каждом доступе к сайту страница отображается на сервере и отправляется в браузер.

Другими словами, когда пользователь или бот заходит на сайт, они получают контент в виде HTML-разметки. Обычно это помогает поисковой оптимизации, поскольку Google не нужно отдельно отображать JS для доступа к контенту. SSR является традиционным методом рендеринга и может оказаться дорогостоящим, когда речь идет о пропускной способности.

Рендеринг на стороне клиента

Рендеринг на стороне клиента — относительно новый тип рендеринга, который позволяет разработчикам создавать свои сайты, полностью визуализируемые в браузере с помощью JavaScript. Таким образом, вместо того, чтобы иметь отдельную HTML-страницу для каждого маршрута, рендеринг на стороне клиента позволяет динамически создавать каждый маршрут непосредственно в браузере. Хотя этот тип рендеринга изначально медленный, поскольку он делает несколько обращений к серверу, после завершения запросов работа с инфраструктурой JS становится быстрой.

Возвращаясь к тому, что происходит после сканирования страницы, боты определяют страницы, которые необходимо отобразить, и добавляют их в очередь рендеринга, если только метатег robots в необработанном HTML-коде не указывает роботу Googlebot не индексировать страницу.

Страницы остаются в очереди рендеринга на несколько секунд, но это может занять некоторое время, в зависимости от количества доступных ресурсов.

Источник

Когда ресурсы позволяют, служба веб-рендеринга Google (WRS) выполняет визуализацию, анализ и компиляцию страниц, а также выполнение кода JavaScript на странице. Бот снова анализирует отображаемый HTML-код на наличие ссылок и ставит найденные URL-адреса в очередь для сканирования. Визуализированный HTML используется для индексации страницы.

Индексация

Как только WRS получает данные из внешних API и баз данных, индексатор Caffeine в Google может индексировать контент. Этот этап включает в себя анализ URL-адреса, понимание содержимого страниц и его релевантности, а также сохранение обнаруженных страниц в индексе.

Как оптимизировать JavaScript для SEO

JavaScript при неправильной реализации может испортить SEO. Следуйте этим передовым методам SEO для Javascript, чтобы улучшить рейтинг вашего сайта.

Будьте настойчивы в своих усилиях по SEO на странице

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

Кроме того, хорошо иметь оптимизированную для SEO структуру URL. В некоторых случаях веб-сайты реализуют изменение URL-адреса pushState, что сбивает с толку Google, когда он пытается найти канонический. Убедитесь, что вы проверяете URL-адреса на наличие таких проблем.

Убедитесь, что ваш JavaScript отображается в дереве DOM.

Рендеринг JavaScript работает, когда DOM страницы достаточно загружен. DOM или объектная модель документа показывает структуру содержимого страницы и взаимосвязь каждого элемента с другим. Вы можете найти его в браузере «Проверить элемент» в коде страницы. DOM — это основа динамически генерируемой страницы.

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

Боты пропускают рендеринг и выполнение JS, если метатег robots изначально содержит noindex. Googlebot не запускает события на странице. Если контент добавляется на страницу с помощью JS, это нужно делать после загрузки страницы. Если контент добавляется в HTML при нажатии на кнопку, при прокрутке страницы и так далее, он не будет проиндексирован.

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

Избегайте блокировки доступа поисковых систем к содержимому JS

Чтобы избежать проблемы, связанной с тем, что Google не может найти JS-контент, некоторые веб-мастера используют процесс, называемый маскировкой, который предоставляет JS-контент пользователям, но скрывает его от поисковых роботов. Однако этот метод считается нарушением Руководства Google для веб-мастеров, и вы можете быть наказаны за него. Вместо этого поработайте над определением ключевых проблем и сделайте контент JS доступным для поисковых систем.

Иногда хост сайта может быть непреднамеренно заблокирован, что не позволяет Google просматривать содержимое JS. Например, если на вашем сайте есть несколько дочерних доменов, которые служат для разных целей, каждый из них должен иметь отдельный файл robots.txt, поскольку поддомены рассматриваются как отдельный веб-сайт. В таком случае вам нужно убедиться, что ни одна из этих директив robots.txt не блокирует поисковым системам доступ к ресурсам, необходимым для рендеринга.

Используйте соответствующие коды состояния HTTP

Сканеры Google используют коды состояния HTTP для выявления проблем при сканировании страницы. Поэтому вы должны использовать осмысленный код состояния, чтобы информировать ботов о том, что страница не должна быть просканирована или проиндексирована. Например, вы можете использовать HTTP-статус 301, чтобы сообщить ботам, что страница переместилась на новый URL-адрес, что позволит Google соответствующим образом обновить свой индекс.

Обратитесь к этому списку кодов состояния HTTP и узнайте, когда их использовать:

Источник

Исправить дублированный контент

Когда для веб-сайтов используется JavaScript, для одного и того же контента могут быть разные URL-адреса. Это приводит к проблемам с дублированием содержимого, часто из-за использования заглавных букв, идентификаторов или параметров с идентификаторами. Убедитесь, что вы нашли такие страницы, выберите исходный/предпочтительный URL-адрес, который вы хотите проиндексировать, и установите канонические теги, чтобы поисковые системы не запутались.

Исправление лениво загружаемого контента и изображений

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

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

Используйте SEO-инструменты JS

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

• Функция проверки URL. Этот инструмент находится в Google Search Console. Он может показать вам, смогли ли поисковые роботы Google проиндексировать или просканировать ваши страницы.
• Сканеры поисковых систем. Эти инструменты позволяют эффективно тестировать и отслеживать, как поисковые системы сканируют ваши страницы.
• Статистика скорости страницы. Google Page Speed ​​Insights делится подробностями о производительности вашего сайта и предлагает рекомендации по ее улучшению.
• Сайт: Команда. Этот инструмент поможет вам увидеть, правильно ли Google проиндексировал ваш контент. Все, что вам нужно сделать, это ввести эту команду в Google — сайт: [URL-адрес веб-сайта] «фрагмент текста или запрос»

SEO-проблемы JavaScript

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

1. Неминифицированные файлы JavaScript и CSS

Если вы используете инструменты SEO для аудита своего веб-сайта JS, вы, вероятно, столкнулись с предупреждением о проблемах с неминифицированным Javascript и CSS. Со временем файлы JS и CSS отягощаются ненужными строками кода, пробелами, комментариями в исходном коде и размещением на внешних серверах, что замедляет работу вашего сайта. Убедитесь, что вы избавились от ненужных строк, пробелов и комментариев, чтобы сократить время загрузки страниц, повысить уровень вовлеченности и улучшить SEO.

2. Использование хеша в URL-адресах

Помните, что сказал Джон Мюллер о плохих URL-адресах на мероприятии SEO?

«Для нас, если мы видим там какой-то хэш, то это означает, что остальное там, вероятно, не имеет значения. По большей части мы отказываемся от этого, когда пытаемся проиндексировать контент…»

Тем не менее, некоторые сайты на основе JS генерируют URL-адреса с хешем. Это может иметь катастрофические последствия для вашего SEO. Убедитесь, что ваш URL удобен для Google. Это точно не должно выглядеть так:

www.example.com/#/about -нас ИЛИ

www.example.com/about#us

3. Не проверять внутреннюю ссылочную структуру

Google требует правильных ссылок <a href> для поиска URL-адресов на вашем сайте. Также, если ссылки добавляются в DOM после нажатия на кнопку, боты их не увидят. Большинство веб-мастеров упускают из виду эти моменты, в результате чего страдает их SEO.

Позаботьтесь о том, чтобы предоставить традиционную ссылку «href», сделав их доступными для ботов. Проверьте свои ссылки с помощью инструмента аудита веб-сайта SEOprofiler, чтобы улучшить внутреннюю структуру ссылок вашего сайта.

Ознакомьтесь с презентацией Тома Гринуэя во время конференции Google I/O, чтобы получить рекомендации по правильной структуре ссылок:

Вывод

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

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