SEO и JavaScript: 6 вещей, которые нужно знать

  1. Основные определения
  2. 1. Пусть поисковые системы увидят ваш JavaScript
  3. 2. Внутренняя ссылка
  4. 3. Структура URL
  5. 4. Протестируйте свой сайт
  6. 5. Снимки HTML
  7. 6. Задержка сайта
  8. Заключение

Знание основ JavaScript стало жизненно важным навыком для современного профессионала SEO, хотя до недавнего времени отношения между этими двумя дисциплинами были предметом споров.

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

Хотя HTML, который работает с PHP, CSS и т. Д., Может быть прочитан сканером напрямую, доступ к веб-сайту на основе JavaScript невозможен сразу. Сканеры Google сначала анализируют DOM, и только после этого они отображают сайт.

Основные определения

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

  • JavaScript - это язык программирования, который делает веб-страницы динамичными и интерактивными. Вы можете поместить JavaScript в HTML-документ или сделать ссылку или ссылку на него.
  • HTML обозначает язык разметки гипертекста. Проще говоря, это организатор контента: HTML предоставляет структуру веб-сайта (списки, заголовки, подзаголовки, абзацы и т. Д.) И определяет статический контент.
  • AJAX - это асинхронный JavaScript и XML. По сути, он обновляет контент без обновления всей страницы. AJAX позволяет веб-приложениям и серверам взаимодействовать без вторжения на текущую страницу.

Тем не менее, вы должны отметить, что начиная со второго квартала 2018 года, Google больше не понадобится AJAX для рендеринга сайтов на основе JavaScript ,

Современный профессионал SEO должен также иметь базовое понимание DOM (объектная модель документа). Вы можете рассматривать DOM как инструмент, используемый Google для изучения и анализа веб-страниц.

Сначала Google получает HTML-документ и идентифицирует его элементы JavaScript. Затем браузер запускает DOM, позволяя поисковику отображать страницу.

Затем браузер запускает DOM, позволяя поисковику отображать страницу

1. Пусть поисковые системы увидят ваш JavaScript

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

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

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

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

2. Внутренняя ссылка

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

Самый важный совет: используйте внутреннюю ссылку и даже не пытайтесь заменить ее событиями JavaScript при нажатии.

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

Поэтому было бы лучше реализовать внутреннее связывание, используя обычные якорные теги в HTML или DOM, чтобы предоставить пользователям лучший опыт.

3. Структура URL

Веб-сайты на основе JavaScript, используемые для включения идентификаторов фрагментов в URL-адрес , но одиночные хеши (#) и хешбанги (#!) не рекомендуется Google ,

Настоятельно рекомендуется использовать PushState History API. Он обновляет URL-адрес в адресной строке и позволяет веб-сайтам JavaScript использовать чистые URL-адреса.

Чистый URL-адрес также называется удобным для поисковых систем URL-адресом, состоящим из простого текста, который легко понять неопытным пользователям.

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

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

4. Протестируйте свой сайт

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

Вот эксперимент Бартоша Горалевича это показывает, как робот Googlebot взаимодействует с JavaScript на разных платформах.

Это исследование помогает нам понять, когда пришло время беспокоиться и действовать активно.

Однако всегда лучше прогнозировать возможные ошибки и проблемы и избегать их, так почему бы не провести некоторое тестирование?

Выполните следующие два основных шага, чтобы обнаружить возможные перерывы:

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

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

Протестируйте свой сайт, следуя это краткое руководство от Google ,

Закончены ли все ваши тесты и результаты выглядят многообещающими? Большой!

Но что, если что-то не работает?

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

Между тем, снимок HTML может спасти ситуацию.

5. Снимки HTML

Google представил снимки HTML в 2009 году и отклонил их в 2015 году. Это длинная история и постоянная тема.

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

HTML снимки может понадобиться в нескольких ситуациях, поэтому вы должны хотя бы ознакомиться с ними.

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

В идеальном мире веб-сайт использовал бы какое-либо обнаружение пользовательского агента на стороне сервера и показывал бы снимок HTML-кода ботам и пользователям.

Обратите внимание, что Google стремится увидеть то же впечатление, что и зритель. Поэтому лучше возвращать снимки HTML сканерам поисковых систем.

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

6. Задержка сайта

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

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

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

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

Это означает, что ваши страницы могут появляться быстрее, но код JavaScript замедляет их.

Проверьте, сколько времени занимает загрузка страницы с помощью Page Speed ​​Insights или других подобных инструментов. Проанализируйте результаты, чтобы увидеть, есть ли JavaScript, блокирующий рендеринг.

Вот несколько главных решений, чтобы решить это:

  • Добавьте JavaScript в HTML.
  • Добавьте атрибут «async» в HTML, чтобы сделать ваш JavaScript асинхронным.
  • Сократите элементы JavaScript в документе HTML.

Пытаясь улучшить ситуацию, имейте в виду основные правила JavaScript.

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

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

Заключение

Поисковые системы постоянно развиваются, поэтому они, без сомнения, будут интерпретировать ваш JavaScript лучше и быстрее в будущем.

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

Больше SEO ресурсов:

Имиджевый кредит

Фото в посте: Stock Snap

Однако всегда лучше прогнозировать возможные ошибки и проблемы и избегать их, так почему бы не провести некоторое тестирование?
Но что, если что-то не работает?