1. Могут ли поисковые системы сканировать контент, отображаемый с помощью JavaScript?
2. 1) Думая о тестах
3. 2) Собственные заявления Google
4. 3) Другие боты и инструменты
5. 4) Работа с фреймворками
6. 5) Понимание эффективности сканирования и ограничений ресурсов
7. Основы сканирования HTML
8. Основы написания страниц на JavaScript
9. Безголовые Браузеры
10. Важность событий
11. Путать плохой SEO с ограничениями JavaScript
12. 5 основных правил SEO SEO

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

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

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

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

Могут ли поисковые системы сканировать контент, отображаемый с помощью JavaScript?

Краткий ответ «да» опасен.

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

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

Кроме того, есть гораздо больше ботов, чем просто Google. К ним относятся Bing, социальные боты (Facebook, Twitter, LinkedIn), международные поисковые системы и инструменты (мониторинг, аудит, составители карт сайта, инструменты для ссылок и т. Д.). Большинство этих ботов не сканируют JavaScript. Те, что делают, отстают от Google в способностях.

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

1) Думая о тестах

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

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

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

2) Собственные заявления Google

Также часто встречается сообщение в блоге от Google, в котором говорится, что он может сканировать JavaScript. Они не являются нечестными (они действительно довольно хороши в этом), но они не дают достаточно подробностей и помещают много отказов от слов.

Короче, Google сказал они «в целом способны воспроизводить и понимать» и «мы рекомендуем следовать принципам прогрессивного улучшения».

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

3) Другие боты и инструменты

Существенная проблема с использованием JavaScript состоит в том, что о других ботах часто забывают. Хотя Google добился значительного прогресса в своих способностях сканирования, Bing, Facebook, Twitter, LinkedIn и международные сканеры не соответствуют возможностям Google.

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

К счастью, есть несколько способов разделить разницу и минимизировать риск (поддерживать уникально индексируемые URL-адреса с заголовком, мета-контентом и контролем сканирования по-прежнему на стороне сервера… воспринимайте это как оптимизацию сайта Flash).

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

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

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

4) Работа с фреймворками

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

Это сравнимо с оценкой платформ веб-серверов, таких как Apache против IIS против nginx, или платформ CMS, таких как WordPress против Drupal против Adobe CQ. Хотя с некоторыми из этих платформ проще работать или они уже оснащены оптимизированными функциями, их можно сделать в целом оптимизированными для SEO. Менее важно, какой плагин SEO используется, чем то, что находится в вашем теге заголовка HTML. Это потому, что Google смотрит на продукт, код и метрики, производимые этими платформами.

То же самое верно для индексации JavaScript. Google обычно просматривает визуализированный контент по событию загрузки (или в пределах возможного 5-секундного тайм-аута).

5) Понимание эффективности сканирования и ограничений ресурсов

Анализ содержимого, для которого требуется современный безголовый браузер, который должен выполнять и отображать с использованием JavaScript, требует больше ресурсов, чем выборка HTML-страницы и ее анализ. Это требует реальных затрат времени, ресурсов процессора и электроэнергии. Ожидайте, что сканирование JavaScript будет медленным и более разборчивым (зависит от прав доступа). И наоборот, ожидайте, что поисковые системы будут использовать более традиционный метод сканирования для поддержки оперативной, основной и крупномасштабной функциональности.

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

Основы сканирования HTML

Понимание обхода JavaScript требует фундаментального понимания того, как работает традиционный обход.

Короче говоря, процесс сканирования выглядит так:

1. Бот делает GET-запрос для страницы (они запрашивают файл у сервера)
2. Бот загружает сырой HTML-файл (так же, как ваш источник просмотра)
3. Поисковая система анализирует HTML, извлекая контент и метаданные (местоположение, тег, атрибуты и т. Д.), Связанные с этим контентом.
4. Содержимое хранится (индексируется), оценивается и ранжируется различными способами.

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

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

Прежде чем приступить к этому, полезно понять, что делает JavaScript.

Основы написания страниц на JavaScript

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

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

1. Начальный запрос - браузер (и поисковый бот) отправляет запрос GET для HTML и связанных ресурсов.
2. Рендеринг DOM - Браузер (поисковый бот) начинает рендеринг DOM. DOM расшифровывается как объектная модель документа. Не позволяй этому запугать тебя. Не обращайте внимания на все те сложные графы генеалогического дерева, которые вы видите в презентациях. Это в основном название того, как браузер (поисковый бот) понимает, как формируется контент на странице, и описывает отношения. Если вам не нравится JavaScript, подумайте об этом как о браузере (поисковом боте), который все это вычислит, создаст чат org и создаст страницу. Этот DOM может быть интерпретирован (превращен в визуальные эффекты) браузером (поисковым ботом).
3. DOM Loaded - при работе на странице браузер (поисковый бот) запускает события, одно из которых - DOMContentLoaded. Это событие означает, что исходный документ HTML был загружен и проанализирован. Это в состоянии готовности. Проще говоря, это браузер, который говорит, что имеет дело со всем, что он загрузил, и он готов к тому, что JavaScript начнет работать со страницей.
4. JavaScript вносит изменения - После этого JavaScript может вносить изменения на странице. Проще говоря, подумайте об этом, добавляя, удаляя или изменяя контент в источнике HTML. Это как открыть страницу в блокноте и изменить заголовок. JavaScript может делать кучу вещей, эффективно перекодируя страницу для достижения желаемого эффекта. Этот желаемый эффект представлен в браузере и может не совпадать с исходным исходным кодом. Это контент, который вы можете увидеть, если вы используете Inspect Element в вашем браузере.
5. Событие загрузки - событие загрузки запускается браузером, когда ресурс и его зависимые ресурсы закончили загрузку. Это важное событие, потому что, как правило, говорится, что страница «готова».
6. События после загрузки и пользовательские события - страница может продолжать изменяться в зависимости от содержимого, передаваемого на нее, или через пользовательские события, такие как onClick. Это перестановки на странице после ее завершения.

Безголовые Браузеры

Фраза «безголовый браузер» используется для описания возможностей JavaScript робота Googlebot. Это просто означает, что Googlebot - это браузер (Chrome) без визуального компонента. Он делает то же самое, что и Chrome, но вместо того, чтобы разрабатывать его для визуального вывода и взаимодействия с пользователем, он предназначен для вывода кода и взаимодействия с ним из командной строки или кода.

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

Чтобы сделать это очень просто, вы можете думать о сканировании JavaScript как о роботе Google, который делает это:

1. Google посещает вашу веб-страницу в качестве браузера
2. В событии загрузки (или через 5 секунд), они щелкают правой кнопкой мыши и выбирают Inspect Element
3. Они выбирают тег HTML вверху
4. Они правой кнопкой мыши -> Копировать -> Копировать OuterHTML
5. Они используют копию и вставленный HTML (визуализированный контент) точно так же, как они использовали бы источник HTML

Давайте остановимся на этом последнем пункте. Как только робот Googlebot отображает контент (Inspect Element HTML), он использует его как традиционный источник HTML. Это возвращает вас в зону комфорта HTML и CSS.

Вышеописанный процесс также показывает, как вы проверяете JavaScript-зависимые сайты для SEO

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

Когда вы смотрите на скриншот в инструменте Google Fetch and Render, вы видите рендеринг страницы примерно в то время, когда робот Googlebot сделал снимок, с использованием этого визуализированного HTML, а не исходного HTML.

Важность событий

Есть два основных типа событий, которые следует учитывать при поиске в SEO SEO.

1) Загрузка события

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

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

Вы можете увидеть этот момент внутри Производительность сети в инструментах разработчика Chrome ,

Этот инструмент показывает временную шкалу контента, загруженного в браузер. Синяя линия обозначает событие DOMContentLoaded, а красная линия обозначает событие загрузки.

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

Вы также можете проверить это с Инструмент выборки и рендеринга , Контент, который появляется после этого момента, не отображается на скриншоте.

2) События пользователя

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

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

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

Это означает, что часть контента на странице, отображаемой на JavaScript, индексируется, а другая - нет. Заголовок страницы продукта может отображаться с помощью снимка, но атрибуты продукта, загруженные с помощью AJAX на скрытой «вкладке», - нет.

Путать плохой SEO с ограничениями JavaScript

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

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

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

Вот некоторые из общих проблем, которые мы видим:

1. Индексируемые URL - страницы все еще нуждаются в уникальных, отличных и индексируемых URL. PushState не делает URL Должна быть настоящая страница с ответом 200 OK сервера для каждой отдельной «страницы», которую вы хотите проиндексировать. Одностраничное приложение должно включать URL-адреса на стороне сервера для каждой категории, статьи или продукта.
2. Правильное получение pushState - используйте pushState для представления изменения URL. Тем не менее, это должен представлять канонический URL, который имеет поддержку на стороне сервера. Ошибки pushState и слабая реализация на стороне сервера могут создать дублированный контент.
3. Требования к отсутствующим страницам - по-прежнему нужны страницы: заголовки, метаописания, открытый график, мета роботов, чистые URL, атрибуты alt и т. Д. Аудит страницы с использованием подхода Inspect Element. Те же стандарты для HTML-страниц по-прежнему применяются к контенту, отображаемому в JavaScript
4. ahref и img src - Страницы все еще нуждаются в ссылках на них. Процессы сканирования и сканирования Google, как правило, одинаковы. Поместите ссылки в атрибуты href, а изображения в атрибуты src. Google борется с различными подходами, такими как размещение URL-адресов в атрибутах данных вместо типичного атрибута HTML.
5. Несколько версий - рендеринг JavaScript может создавать версии (pre-DOM и post-DOM), поэтому минимизируйте противоречия между ними. Например, исходный HTML-код имеет неверный канонический и правильный rel = next / prev, но отображаемая страница имеет правильную каноническую информацию и ей не хватает rel = next / prev.
6. Ограничения ботов - несколько ботов борются со сканированием JavaScript. Для борьбы с этим мы рекомендуем помещать заголовок, мета-теги, социальные теги и технические теги SEO в исходный HTML-код на стороне сервера.

5 основных правил SEO SEO

Это сводится к 5 основным принципам оптимизации контента JavaScript (для Google):

1. Содержимое события загрузки (или 5-секундный тайм-аут) индексируется.
2. Содержимое, зависящее от пользовательских событий, не индексируется.
3. Страницы требуют индексируемого URL с поддержкой на стороне сервера.
4. Проверяйте визуализированный HTML (Inspect Element), используя те же лучшие методы SEO, которые вы используете на традиционных страницах.
5. Избегайте противоречий между версиями.

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

Реализации JavaScript имеют некоторый риск. Вы столкнетесь с тем, что не работает, и вам придется опираться на свои основные принципы и пересматривать реализации до тех пор, пока это не сработает. Вы должны иметь некоторую терпимость к риску при реализации JavaScript. Это также требует некоторого принятия потерь с другими ботами. Однако можно перенести весь сайт из HTML в JS и поддерживать рейтинг / трафик. Если вы потратите время и проведете тестирование, вы сможете максимально снизить риск.

Похожие

Комментарии