5 вещей, которые каждый SEO-специалист должен знать о JavaScript

1. Что такое JavaScript?
2. Используйте Внутренние Связи Правильно
3. HTML-снимки
4. Покажите свой Javascript для поисковых систем
5. Обратите внимание на структуру URL
6. Улучшить задержку вашего сайта
7. Последние мысли
8. Сергей Грибняк
9. Последние сообщения Сергея Грибняка ( увидеть все )

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

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

Что такое JavaScript?

Давайте начнем с уточнения терминов здесь.

Будучи самым популярным языком программирования для разработки веб-сайтов ( согласно исследованию Business Insider 2018 ), JavaScript использует фреймворки для создания интерактивных веб-страниц, управляя поведением различных элементов на странице. Другими словами, это делает веб-страницы динамичными и интерактивными.

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

JavaScript может быть размещен в HTML-документе, или разработчики могут сделать ссылку или ссылку на него.

HTML - это язык гипертекстовой разметки. Его цель состоит в том, чтобы организовать контент и отразить его структуру, включая все текстовые элементы, такие как заголовки и подзаголовки (H1, H2, .., H6), абзацы, маркеры и другие детали форматирования.

Еще одна аббревиатура для современных SEO-специалистов, достаточно смелых для изучения основ JavaScript, - Document Object Model ( DOM ). Браузер выполняет серию шагов для визуализации страницы после получения HTML-документа. Эта серия шагов в основном составляет DOM.

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

Используйте Внутренние Связи Правильно

Стратегия внутренних ссылок - верный способ показать архитектуру вашего веб-сканера и указать на наиболее важные веб-страницы.

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

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

HTML-снимки

История отношений снимков HTML с Google длинна и противоречива.

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

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

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

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

Покажите свой Javascript для поисковых систем

Каждый специалист по SEO знает, как важно предоставить поисковым системам Google правильный файл robots.txt, чтобы обеспечить оптимальные возможности сканирования. Критическим моментом здесь является показ веб-страницы сканерам точно так же, как вы показываете ее пользователям.

В худшем случае Google интерпретирует этот диссонанс как маскировку и удалит сайт из своего индекса.

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

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

Обратите внимание на структуру URL

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

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

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

Hashbang был когда-то хаком для поддержки сканеров. В сбежавших фрагментах есть два опыта.

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

Другой - это экранированный фрагмент или ужасный URL. Этот URL заменяет (#!) На «_escaped_fragment_» и служит снимком HTML. Он получил «уродливое» имя из-за своей длины и внешнего вида.

Одной из наиболее рекомендуемых стратегий является API PushState History. Будучи основанным на навигации и частью History API, он обновляет URL в адресной строке. Это позволяет вносить изменения только в те части контента, которые необходимо обновить.

PushState History API позволяет веб-сайту на основе JavaScript использовать «чистые» URL-адреса и поддерживается Google.

Идеальным вариантом использования этого метода является бесконечная прокрутка. При правильной реализации API PushState History возвращает пользователя в то же место, которое он просматривал до обновления страницы.

Улучшить задержку вашего сайта

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

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

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

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

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

Подумайте над решением проблемы предполагаемой задержки, добавив JavaScript в HTML; добавление атрибута async в HTML, чтобы сделать ваш JavaScript асинхронным; или сокращение элементов JavaScript в документе HTML.

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

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

Последние мысли

Любопытство к новым знаниям - это то, что отличает выдающегося специалиста по SEO от пакета.

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

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

Я надеюсь, что этот пост вдохновил вас углубиться в JavaScript и его практическое значение для SEO.

Есть вопросы или предложения по этой теме? Я буду ждать, чтобы увидеть ваши комментарии ниже!

Если вы хотите узнать больше о SEO, у нас есть выбор статей для чтения:

Как опередить конкурентов и доминировать на сложных рынках SEO в 2018 году

Как PageRank действительно работает: понимание Google

Обновленные рекомендации Google - что изменилось?

Сергей Грибняк

Сергей Грибняк является основателем Opporty и агентство цифрового маркетинга Умное решение ,
Он также является экспертом в области цифрового маркетинга, сертифицированным Google и Bing. Сергей является постоянным автором журнала Search Engine Journal и Search Engine Watch.

Последние сообщения Сергея Грибняка ( увидеть все )

назад

Похожие

Комментарии