Как JavaScript может принести пользу вашему SEO

Если вы когда-нибудь заходили на потрясающий интерактивный сайт, от которого одновременно хочется подбросить в воздух конфетти и поделиться им с друзьями, велика вероятность, что он был создан на JavaScript. Фактически, любой сайт, использующий Google Analytics (и другие инструменты отслеживания), интерактивные элементы или веб-приложения, также использует JavaScript, практически вездесущий язык кодирования. Возможности безграничны. Недостатки? Если все сделать неправильно, это может загубить ваш SEO. Как же использовать JavaScript SEO в своих интересах и повысить эффективность поиска? Давайте погрузимся в эту тему.

Что такое JavaScript SEO?

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

Как сделать ваш JavaScript SEO-дружественным

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

1. Используйте динамический рендеринг (в редких случаях) в качестве обходного пути.

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

Рендеринг на стороне сервера (SSR)

Что это: Когда JavaScript отображается на сервере перед тем, как появиться в вашем браузере или на серверах Google.

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

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

Рендеринг на стороне клиента (CSR)

Что это такое: CSR — это когда JavaScript отображается в вашем браузере только с базовой версией HTML, а остальной контент передается через JavaScript.

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

Недостатки CSR: Хотя рендеринг происходит быстрее, производительность поиска значительно ниже, поэтому вам придется сосредоточиться на предоставлении Google как можно большего количества информации, чтобы он мог проиндексировать ваш контент должным образом.

Совет эксперта: Кристина Азаренко, ведущий технический SEO-эксперт, говорит: «Использование рендеринга на стороне клиента означает, что Googlebot не может получить доступ к содержимому. Гораздо лучше и успешнее использовать рендеринг на стороне сервера, чтобы Googlebot также обслуживал контент с сервера».

Динамический рендеринг

Что это: Динамический рендеринг выявляет ботов, которые не могут отрисовать JavaScript, и предоставляет SSR-версию.

Как это влияет на SEO: Он позволяет ботам индексировать версию вашего контента, что делает его более доступным для поиска.

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

2. Используйте уникальный, описательный метаконтент.

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

• Теги заголовков.
• Мета-описания.
• Alt-текст и атрибуты для изображений.

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

3. Реализуйте ленивую загрузку.

Ленивая загрузка ускоряет загрузку страницы, предоставляя содержимое только по мере необходимости или в процессе чтения. Это особенно полезно при загрузке больших изображений или контента, требующего много ресурсов. Ваши изображения и элементы контента, требующие больших ресурсов, не будут загружаться вместе с остальным содержимым верхней части страницы, но по мере того, как пользователи будут читать контент, они будут загружаться. А если пользователь не дочитает до конца страницы, вы не будете загружать лишние изображения. Недостатком является то, что если кто-то быстро прокручивает страницу, он может ждать, пока загрузятся изображения. Более того, это может повлиять на то, как Google воспринимает вашу веб-страницу. Поэтому, если вы придерживаетесь этой практики, делайте это осторожно.

4. Убедитесь, что ваш JavaScript совместим с Google.

Зайдите в Search Console и вставьте URL-адрес конкретной страницы в инструмент проверки URL-адресов, чтобы посмотреть, как его отображает Google. Хотите еще один инструмент для тестирования? Вы также можете использовать Google Rich Results Test и Google Mobile Friendly Test, чтобы посмотреть, как отображается HTML. Совет эксперта: Дэвид Циммерман из компании Reliable Acorn рекомендует использовать такие инструменты, как Google Mobile Friendly Test, поскольку они показывают, что видит паук Google. Циммерман добавляет, что если «ваш разработчик «где-то прочитал», что Google может читать JavaScript, это еще не значит, что он понимает, как написать SEO-дружественный сайт на JavaScript». Итог? Не стоит забывать о том, что нужно быть начеку.

5. Исправьте все ошибки, связанные с поиском.

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

6. Исправьте и повторно протестируйте.

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

Лучшие практики JavaScript SEO

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

1. Получите начальные знания о JavaScript SEO.

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

2. Поместите все важное содержимое в исходный код.

Помните, я упоминал, что Google может индексировать только то, что видит? Чтобы ваш сайт был индексируемым, следуйте совету Азаренко и «убедитесь, что проблемы с JavaScript не сломают ваши SEO-усилия». Она рекомендует «обеспечить доступность всего важного контента в исходном коде (то есть до выполнения JavaScript). Это позволит Google «читать» вашу информацию, не прибегая к помощи JavaScript». Включите все метаданные (заголовок, мета-роботы, канонические теги и т.д.), основной текст и структурированные данные».

3. Регулярно проверяйте свой сайт на SEO-удобство JavaScript.

Даже небольшие правки в коде JavaScript или контенте могут изменить восприятие Google вашего сайта. И дело не только в JavaScript — использование таких инструментов, как Google Search Console, для мониторинга производительности страниц может помочь убедиться, что ваш сайт остается в верхней части результатов поиска. Совет эксперта: Тристан Харрис рекомендует использовать такие инструменты, как Google PageSpeed Insights и Lighthouse, для проверки SEO-производительности и определения областей улучшения.

Лучшая практика № 4. Следите за рекомендациями Google.

Google регулярно обновляет свои алгоритмы и, соответственно, лучшие практики. Поэтому стоит внимательно следить за обновлениями на странице Google. Циммерман рекомендует использовать монитор страниц, например Hexomatic, чтобы быть в курсе рекомендаций Google по JavaScript SEO: «Если монитор страниц показывает, что Google внес обновление, я проверяю его, чтобы понять, не следует ли как-то изменить мои процессы».

Лучшая практика № 5. Следуйте лучшим практикам SEO на странице.

Конечно, здесь я уделяю особое внимание JavaScript SEO, но ключевые принципы SEO все равно применимы. Хотя JavaScript может уменьшить объем контента, который видят поисковые системы, убедиться, что ваш контент оптимизирован в соответствии с лучшими практиками SEO, по-прежнему важно. Совет эксперта: Дэйв Вер Меер рекомендует отключить JavaScript. «Это самый быстрый способ выявить целый ряд серьезных проблем. Когда вы посещаете страницы своего сайта, вы можете обнаружить такие тревожные сигналы, как отсутствие контента, потому что он не отображается до загрузки страницы, и если некоторые ссылки не работают», — говорит Ver Meer.

Испытание

Чтобы проверить свои новые навыки в относительно (читай: абсолютно) безопасной обстановке, я отправился на свой иногда друг, иногда заклятый враг ChatGPT. Моя задача: «Я хочу создать форму с кодом Javascript для сбора лидов. Пожалуйста, используйте забавные заполнители для имени, электронной почты, бюджета и сообщения». Ответ GPT: «Конечно! Ниже приведен простой пример формы JavaScript для сбора лидов. Эта форма включает поля для имени, электронной почты, бюджета и сообщения. Я добавил забавные заполнители, как вы и просили. Форма также включает базовую проверку, чтобы убедиться, что поля имени, электронной почты и сообщения не остались пустыми.» Вот HTML для формы.

Что касается забавных мест? Ну, в GPT решили, что Железный человек — это весело. Вот как выглядит полный код в HTML:

А вот и JavaScript:

Конечно, в ChatGPT была оговорка:

А теперь самое интересное. Давайте посмотрим, как ChatGPT оптимизирует этот JavaScript для SEO. Неудивительно, что HTML-версия кода оказалась значительно более надежной. Я разбил его на две части, чтобы вы могли сравнить различия. (Я опишу их ниже).

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

Теперь давайте посмотрим на обновленный JavaScript.

Выглядит знакомо? Давайте сравним код рядом.

Они идентичны. Удивлены? Вот почему. Мой совершенно новый код JavaScript отвечает за функциональность моей совершенно новой лид-ген формы. И только функциональность. Он не отвечает за структуру или содержание «страницы». Именно в этом случае на помощь приходит HTML. И именно к нему относятся рекомендации по SEO-оптимизации.

Как я использовал ChatGPT для оптимизации SEO JavaScript

Вам интересно узнать, какие именно изменения рекомендовал ChatGPT для SEO-оптимизации JavaScript? Изменение 1. Добавьте заголовок и метаописание страницы.

Изменение 2. Используйте теги заголовков.

Изменение 3. Разметка полей формы для SEO и доступности.

Изменение 4. Добавьте alt-текст к изображениям.

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

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

Итоги JavaScript SEO

Принятие решения об использовании JavaScript на вашем сайте требует понимания последствий для SEO и соответствующего планирования, чтобы ваш сайт оставался SEO-дружелюбным — или доступным для поиска, ползания и индексации поисковыми системами. Это не означает, что вы не хотите отказываться от JavaScript. Напротив, чтобы максимально использовать интерактивные функции, необходимо найти и нанять разработчиков, которые разбираются в JavaScript и SEO и смогут помочь вам выделиться и быть найденным. Самый главный вывод? Самое важное, что вы можете сделать для того, чтобы ваш JavaScript был SEO-дружественным, — это обеспечить правильное отображение и структурировать HTML страницы, чтобы предоставить как можно больше информации о ее содержимом. Возможно, к удивлению (а возможно, и нет), правила on-page SEO применимы и к JavaScript SEO — главное, чтобы поисковые системы могли «видеть» ваш контент.