Большинство современных веб-сайтов содержат JavaScript, что делает их динамичными и интерактивными. Хотя боты поисковых систем довольно умны, они все же могут не отображать большую часть контента JavaScript, что влияет на рейтинг страницы.
Содержимое JavaScript во многом зависит от того, как ваш сайт отображает код.
Например, при рендеринге на стороне сервера сервер содержит содержимое веб-сайта. По запросу браузер получает полностью отрендеренный HTML.
Однако при рендеринге на стороне клиента JavaScript рендерится браузером с использованием модели DOM.
Третий вариант рендеринга — это динамический рендеринг, при котором содержимое, отображаемое на стороне клиента, отправляется в браузер, а содержимое, отображаемое на стороне сервера, отправляется в поисковые системы.
Методы рендеринга влияют на рендеринг JS и, следовательно, на рейтинг страницы.
Чтобы убедиться, что весь код JS вашего веб-сайта отображается, вы должны следовать надлежащим методам оптимизации JavaScript. Но сначала давайте разберемся, что такое 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, описательные якорные тексты для ссылок. Псевдоссылки, такие как теги
Метаданные
Если на сайте не используются пакеты 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 может легко сканировать ссылки и переходить по ним.
<a href=”http://toadmin.ru.com”>Welcome to Geek world</a>
Таким же образом добавьте изображения, используя тег img src, а не тег img data-src:
<img src=”myimg.png” />
Предпочитаете рендеринг на стороне сервера
Убедитесь, что контент вашего веб-сайта доступен на сервере отдельно от браузера пользователя.
Убедитесь, что в отображаемом HTML есть весь важный контент, который вы хотите отобразить.
Визуализированный HTML должен иметь правильный заголовок, мета-роботы, мета-описания, изображения, структурированные данные и канонические теги.
Сделайте ваш сайт на JavaScript SEO-дружественным
Чтобы протестировать реализацию JavaScript SEO на вашей веб-странице, вы можете выполнить следующие шаги:
- Знайте, сколько JavaScript использует ваш сайт: для этого вы можете просто отключить JavaScript в своем браузере. Если вы не видите много контента, это означает, что ваш веб-сайт в значительной степени использует JavaScript.
- Проверьте, получает ли робот Googlebot весь важный контент и теги: вы можете использовать Удобный для мобильных устройств инструмент тестирования Google или инструмент проверки расширенных результатов, чтобы проверить, как Googlebot использует необработанный HTML для отображения контента.
- Вы также можете использовать расширения Chrome, такие как Посмотреть визуализированный исходный код чтобы понять, как JavaScript изменяет страницу, и сравнить исходный HTML и отрендеренный.
- Вы можете проверить наличие важных тегов (заголовок, мета-описание и т. д.) в отображаемом HTML-коде с помощью Расширение SEO Pro для Chrome.
Вывод
В этой статье мы узнали о том, как JavaScript может немного усложнить обработку SEO, и о подходах к решению потенциальных проблем, вызванных добавлением большого количества JavaScript в ваш код.
Мы также рассмотрели некоторые передовые методы и инструменты, чтобы сделать ваш веб-сайт JavaScript оптимизированным для SEO. Другими замечательными инструментами, которые помогают Google распознавать и сканировать ваш динамический контент, являются Prerender, AngularJSа также Huckabuy.
Вы также можете проверить некоторые из лучших способов уменьшить время загрузки сайта.
Понравилось читать статью? Как насчет того, чтобы поделиться с миром?