Полное руководство по JavaScript для SEO (издание 2021 г.)

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

Что такое JavaScript SEO?

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

  • Оптимизации контента, вводимого через JavaScript для сканирования, рендеринга и индексации поисковыми системами.
  • Предотвращением, диагностикой и устранением проблем ранжирования для веб-сайтов и SPA (одностраничных приложений), построенных на платформах JavaScript, таких как как React, Angular и Vue.
  • Обеспечение того, чтобы веб-страницы были обнаружены поисковыми системами посредством ссылки на передовые методы.
  • Улучшение времени загрузки страниц для анализа и выполнения кода JS для упрощения взаимодействия с пользователем (UX). [19659008] Является ли JavaScript хорошим или плохим для SEO?Это зависит от обстоятельств! JavaScript необходим для современного Интернета, он делает создание веб-сайтов масштабируемым и простым в обслуживании. Однако некоторые реализации JavaScript могут быть вредными для видимости поисковой системы.

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

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

    • Отображаемый контент [19659005] Ссылки
    • Изображения с отложенной загрузкой
    • Время загрузки страницы
    • Мета данные

    Что такое веб-сайты на базе JavaScript?

    Когда мы говорим о сайтах, построенных на JavaScript, мы не имеем в виду просто добавить уровень интерактивности JS в HTML-документы (например, при добавлении анимации JS на статическую веб-страницу). В этом случае веб-сайты на базе JavaScript относятся к случаям, когда основной или основной контент вводится в DOM через JavaScript.

    Модель оболочки приложения.

    Этот шаблон называется оболочкой приложения и является основой для прогрессивных веб-приложений ( PWA). Мы рассмотрим это дальше.

    Как проверить, создан ли сайт с помощью JavaScript

    Вы можете быстро проверить, построен ли веб-сайт на платформе JavaScript, используя инструмент поиска технологий, такой как BuiltWith или Wappalyzer. Вы также можете «Проверить элемент» или «Просмотреть исходный код» в браузере, чтобы проверить код JS. Популярные фреймворки JavaScript, которые вы можете найти, включают:

    JavaScript SEO для основного контента

    Вот пример: современные веб-приложения строятся на фреймворках JavaScript, таких как Angular, React и Vue. Фреймворки JavaScript позволяют разработчикам быстро создавать и масштабировать интерактивные веб-приложения. Давайте взглянем на шаблон проекта по умолчанию для Angular.js, популярного фреймворка, созданного Google.

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

    Теперь мы видим, что этот HTML-документ почти полностью лишен какого-либо содержания. В теле страницы есть только корень приложения и несколько тегов скрипта. Это связано с тем, что основное содержимое этого одностраничного приложения динамически вводится в DOM через JavaScript. Другими словами, это приложение зависит от JS для загрузки ключевого контента на странице!

    Потенциальные проблемы с SEO: любой основной контент, отображаемый для пользователей, но не для роботов поисковых систем, может стать серьезной проблемой! Если поисковые системы не могут полностью сканировать весь ваш контент, ваш веб-сайт может быть проигнорирован в пользу конкурентов. Мы обсудим это более подробно позже.

    JavaScript SEO для внутренних ссылок

    Помимо динамической вставки контента в DOM, JavaScript также может влиять на возможность сканирования ссылок. Google обнаруживает новые страницы, сканируя ссылки, которые он находит на страницах.

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

    Однако Google также рекомендует разработчикам не полагаться на другие элементы HTML, такие как div или span, или обработчики событий JS для ссылок. Такие ссылки называются «псевдо», и они, как правило, не будут сканироваться в соответствии с официальными рекомендациями Google:

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

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

    JavaScript SEO для отложенной загрузки изображений

    JavaScript также может повлиять на возможность сканирования изображений с отложенной загрузкой. Вот простой пример. Этот фрагмент кода предназначен для отложенной загрузки изображений в DOM с помощью JavaScript:

    Робот Googlebot поддерживает отложенную загрузку, но он не «прокручивается», как пользователь-человек, когда посещает ваши веб-страницы. Вместо этого робот Google просто изменяет размер своего виртуального окна просмотра, чтобы увеличить его при сканировании веб-контента. Таким образом, прослушиватель событий «прокрутки» никогда не запускается, и поисковый робот никогда не обрабатывает контент.

    Вот пример более оптимизированного для SEO кода:

    Этот код показывает, что IntersectionObserver API запускает обратный вызов при любом обнаружении элемент становится видимым. Он более гибкий и надежный, чем прослушиватель событий при прокрутке, и поддерживается современным роботом Googlebot. Этот код работает благодаря тому, как Googlebot изменяет размер своего окна просмотра, чтобы «видеть» ваш контент (см. Ниже).

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

    Собственная отложенная загрузка в Google Chrome.

    Возможные проблемы с поисковой оптимизацией: подобно тому, как основной контент не загружается, важно убедиться, что что Google может «видеть» весь контент на странице, включая изображения. Например, на сайте электронной коммерции с несколькими рядами списков продуктов отложенная загрузка изображений может обеспечить более быстрое взаимодействие с пользователями и ботами!

    Javascript SEO для скорости страницы

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

    • Минимизация JavaScript
    • Откладывание некритического JS до тех пор, пока основное содержимое не будет отрисовано в DOM
    • Встраивание критического JS
    • Обслуживание JS в небольших полезных нагрузках

    Потенциальный SEO Проблемы: медленный веб-сайт создает неудобства для всех пользователей, даже для поисковых систем. Сам Google откладывает загрузку JavaScript для экономии ресурсов, поэтому важно убедиться, что все, что обслуживается клиентами, закодировано и эффективно доставляется, чтобы помочь защитить ранжирование.

    JavaScript SEO для метаданных

    Также важно отметить, что SPA, которые использовать пакет маршрутизатора, такой как response-router или vue-router, необходимо предпринять некоторые дополнительные шаги для обработки таких вещей, как изменение метатегов при переходе между представлениями маршрутизатора. Обычно это выполняется с помощью пакета Node.js, такого как vue-meta или response-meta-tags.

    Что такое представления маршрутизатора? Вот как ссылки на разные «страницы» в одностраничном приложении работают в React за пять шагов:

    1. Когда пользователь посещает веб-сайт React, на сервер отправляется запрос GET для файла ./index.html. [19659005] Затем сервер отправляет клиенту страницу index.html, содержащую сценарии для запуска React и React Router.
    2. Затем веб-приложение загружается на стороне клиента.
    3. Если пользователь нажимает ссылку на перейти на новую страницу (/ example), на сервер отправляется запрос для нового URL.
    4. React Router перехватывает запрос до того, как он достигнет сервера, и обрабатывает изменение страницы самостоятельно. Это делается путем локального обновления визуализированных компонентов React и изменения URL-адреса на стороне клиента.

    Другими словами, когда пользователи или боты переходят по ссылкам на URL-адреса на веб-сайте React, они не обслуживаются несколькими статическими HTML-файлами. Скорее, компоненты React (например, заголовки, нижние колонтитулы и основной текст), размещенные в файле root ./index.html, просто реорганизуются для отображения другого содержимого. Вот почему они называются одностраничными приложениями!

    Возможные проблемы с поисковой оптимизацией: поэтому важно использовать такой пакет, как React Helmet, чтобы убедиться, что пользователям предоставляются уникальные метаданные для каждой страницы, или «просмотр», при просмотре СПА. В противном случае поисковые системы могут сканировать одни и те же метаданные для каждой страницы или, что еще хуже, вообще не сканировать!

    Как все это повлияет на SEO в целом? Затем нам нужно узнать, как Google обрабатывает JavaScript.

    Как Google обрабатывает JavaScript?

    Чтобы понять, как JavaScript влияет на SEO, нам нужно понять, что именно происходит, когда GoogleBot сканирует веб-страницу:

    1. Сканирование
    2. Render
    3. Index

    Сначала робот Google сканирует URL-адреса в своей очереди, страница за страницей. Сканер выполняет GET-запрос к серверу, обычно используя мобильный пользовательский агент, а затем сервер отправляет HTML-документ.

    Затем Google решает, какие ресурсы необходимы для визуализации основного содержимого страницы. Обычно это означает, что сканируется только статический HTML, а не какие-либо связанные файлы CSS или JS. Почему?

    По данным веб-мастеров Google, робот Googlebot обнаружил около 130 триллионов веб-страниц. Масштабная отрисовка JavaScript может быть дорогостоящей. Чистая вычислительная мощность, необходимая для массовой загрузки, синтаксического анализа и выполнения JavaScript, огромна.

    Вот почему Google может отложить рендеринг JavaScript на потом. Любые невыполненные ресурсы помещаются в очередь для обработки службами веб-рендеринга Google (WRS) по мере доступности вычислительных ресурсов.

    Наконец, Google проиндексирует любой обработанный HTML-код после выполнения JavaScript.

    Процесс сканирования, визуализации и индексации .

    Другими словами, Google сканирует и индексирует контент двумя волнами:

    1. Первая волна индексации, или мгновенное сканирование статического HTML, отправляемого веб-сервером
    2. Вторая волна индексации, или отложенное сканирование любого дополнительного контента, отображаемого с помощью JavaScript
    индексации волны Google. Источник: Google I / O’18

    Суть в том, что контент, отображаемый на JS, может испытывать задержку при сканировании и индексировании Google. Раньше на это уходили дни или даже недели. Например, Googlebot исторически работал на устаревшем механизме рендеринга Chrome 41. Однако в последние годы они значительно улучшили свои веб-сканеры.

    Робот Googlebot был недавно обновлен до последней стабильной версии браузера Chromium без головы в мае 2019 года. Это означает, что их поисковый робот теперь «вечнозеленый» и полностью совместим с ECMAScript 6 (ES6) и выше или последние версии JavaScript.

    Итак, если Googlebot технически может запускать JavaScript сейчас, почему мы все еще беспокоимся о проблемах с индексированием?

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

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

    Вот несколько причин, по которым Google может никогда не запускать ваш код JavaScript:

    • Заблокирован в robots.txt
    • Тайм-ауты
    • Ошибки

    Таким образом, JavaScript может вызвать проблемы с поисковой оптимизацией, когда основной контент полагается на JavaScript, но не обрабатывается Google.

    Реальное приложение: JavaScript SEO для электронной коммерции

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

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

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

    Как тестировать и отлаживать проблемы SEO с помощью JavaScript

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

    1. Визуализируйте страницу с помощью Google Webmaster Tools. Это поможет вам просматривать страницу с точки зрения Google.
    2. Используйте оператор поиска по сайту, чтобы проверить индекс Google. Убедитесь, что весь ваш контент JavaScript правильно индексируется, вручную проверив Google.
    3. Отлаживайте с помощью встроенных инструментов разработчика Chrome. Сравните и сопоставьте то, что Google «видит» (исходный код) с тем, что видят пользователи (отрисованный код), и убедитесь, что они совпадают в целом.

    Существуют также удобные сторонние инструменты и плагины, которые вы можете использовать. Мы скоро поговорим об этом.

    Инструменты Google для веб-мастеров

    Лучший способ определить, испытывает ли Google технические трудности при попытке отобразить ваши страницы, — это протестировать их с помощью инструментов Google для веб-мастеров, таких как:

    Тест Google для мобильных устройств.

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

    Оба этих инструмента Google для веб-мастеров использовать тот же вечнозеленый движок рендеринга Chromium, что и Google. Это означает, что они могут дать вам точное визуальное представление о том, что Googlebot на самом деле «видит», когда сканирует ваш веб-сайт.

    Существуют также сторонние технические инструменты SEO, такие как инструмент Merkle для получения и визуализации. В отличие от инструментов Google, это веб-приложение фактически предоставляет пользователям полноразмерный снимок экрана всей страницы.

    Сайт: оператор поиска

    В качестве альтернативы, если вы не уверены, индексируется ли содержание JavaScript в Google, вы можете быстро выполнить проверка с помощью оператора site: search в Google.

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

    Вот как это выглядит в поисковой выдаче Google:

    Инструменты разработчика Chrome

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

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

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

    Проверить элемент.

    Сравните и сопоставьте эти две точки зрения, чтобы увидеть, есть ли ядро контент загружается только в DOM, но не жестко закодирован в источнике. Существуют также сторонние расширения Chrome, которые могут помочь в этом, например плагин Web Developer от Криса Педерика или плагин View Rendered Source от Джона Хогга.

    Как исправить проблемы с рендерингом JavaScript

    После диагностики проблемы рендеринга JavaScript , как решить проблемы с SEO с помощью JavaScript? Ответ прост: универсальный Javascript, также известный как «изоморфный» JavaScript.

    Что это значит? Универсальный или изоморфный здесь относится к приложениям JavaScript, которые могут быть запущены либо на сервере, либо на клиенте.

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

    • Отрисовка на стороне сервера (SSR). Это означает, что JS выполняется на сервере для каждого запроса. Один из способов реализовать SSR — использовать библиотеку Node.js, такую ​​как Puppeteer. Однако это может создать большую нагрузку на сервер.
    • Гибридный рендеринг. Это комбинация рендеринга как на стороне сервера, так и на стороне клиента. Перед отправкой клиенту основной контент обрабатывается на стороне сервера. Любые дополнительные ресурсы выгружаются клиенту.
    • Динамический рендеринг. В этом обходном пути сервер обнаруживает пользовательский агент клиента, выполняющего запрос. Затем, например, он может отправлять предварительно обработанное содержимое JavaScript в поисковые системы. Любые другие пользовательские агенты должны будут отображать свой контент на стороне клиента. Например, веб-мастера Google рекомендуют популярное решение с открытым исходным кодом Renderton для реализации динамического рендеринга.
    • Добавочная статическая регенерация или обновление статического контента после того, как сайт уже был развернут. Это можно сделать с помощью таких фреймворков, как Next.js для React или Nuxt.js для Vue. У этих фреймворков есть процесс сборки, который будет предварительно отображать каждую страницу вашего JS-приложения в статические активы, которые вы можете обслуживать из чего-то вроде корзины S3. Таким образом, ваш сайт может получить все SEO-преимущества рендеринга на стороне сервера без управления сервером!

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

    Обратите внимание: для веб-сайтов, построенных на системе управления контентом (CMS), которая уже выполняет предварительную визуализацию большей части контента, например WordPress или Shopify , обычно это не проблема.

    Ключевые выводы

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

Комментарии запрещены.