Чтобы обеспечить успех поисковой системы, крайне важно, чтобы вы знали, как выявлять любые проблемы с вашим сайтом, знать, индексируется ли ваш сайт и отображается ли он, и, конечно же, как сделать его оптимизированным для SEO!
В этом блоге мы углубимся в JavaScript SEO, не оставляя камня на камне. Вот меню на сегодня, для вашего потребления знаний:
- Что такое JavaScript?
- Что такое JavaScript-сайт?
- Как работает бот Google?
- Различные типы рендеринга?
- Проблемы с SEO в JavaScript и как их решить
Что такое JavaScript?
JavaScript, или чаще называемый JS, — это язык программирования для веб-сайтов и приложений.
JS находится на той же полке, что и HTML и CSS, и обеспечивает более высокий уровень интерактивности веб-сайта благодаря анимированной графике, ползункам, кнопкам, загрузчикам, картам и многим другим функциям.
Веб-сайты, построенные на JavaScript, становятся все более популярными среди разработчиков. в 2019 году 67,8% разработчиков использовали JavaScript. Такие фреймворки, как Angular и React, используются для создания мобильных и веб-приложений, а также одно- и многостраничных веб-сайтов.
Креативность и интерактивность, которые обеспечивает JavaScript, не лишены недостатков и трудностей, как мы увидим ниже.
Что такое JavaScript-сайт?
Как упоминалось ранее, ранее JavaScript использовался только для добавления глазури на торт и действительно оживлял веб-сайт поверх любого основного контента. Веб-сайты, на которых JavaScript используется для изменения или добавления важного контента на страницу, считаются сайтами JavaScript.
Как работает бот Google?
Чтобы понять одну из проблем с сайтами JavaScript, нам нужно посмотреть, как Google сканирует и индексирует веб-сайты. Он начинает с посещения и сканирования и передает увиденный контент на этап индексации, где он анализируется и сохраняется в индексе. Когда ссылки обнаружены, они возвращаются сканеру, и процесс продолжается.
Но что происходит, когда часть контента генерируется с помощью JavaScript?
Добавляется дополнительный шаг, называемый этапом рендеринга. Сканирующий бот Google выполняет JS при рендеринге страницы, что требует больших ресурсов. Разделяя индексирование и рендеринг, Google может максимально быстро индексировать не-JS-контент, а затем вернуться к завершению процесса с JavaScript-контентом позже.
Вот диаграмма, предоставленная Google, чтобы показать процесс.
С более чем 130 триллионами веб-страниц, откладывая выполнение JavaScript, Google может быстро просмотреть большую часть контента, не упуская из виду контент JavaScript. Создание веб-сайтов JavaScript в двухэтапном процессе в конечном итоге означает, что это занимает больше времени, а сколько времени — это вопрос, на который нельзя ответить.
Различные типы рендеринга
Если быстрое индексирование вашего контента является приоритетом, вам необходимо убедиться, что ваш тип рендеринга соответствует вашим потребностям.
Существует несколько различных типов рендеринга:
- Рендеринг на стороне сервера (SSR)
- Рендеринг на стороне клиента (CSR)
- Динамический рендеринг
Рендеринг на стороне сервера (SSR)
Рендеринг на стороне сервера, который также называется универсальным или изоморфным рендерингом, представляет собой метод рендеринга, который генерирует статическую HTML-разметку JavaScript на сервере, позволяя вашему браузеру получать полностью визуализируемую HTML-страницу, которую можно легко сканировать и индексировать. , а затем обслуживать клиента с помощью указанной отображаемой HTML-страницы
Этот тип рендеринга предпочтительнее для SEO, так как для полного анализа HTML-разметки требуется мало времени, так как не нужно проходить этап рендеринга, а это означает, что контент может быть проиндексирован быстрее.
Тем не менее, SSR может быть сложным и создает дополнительные трудности для разработчиков, но существуют инструменты для различных JS-фреймворков, которые помогают реализовать этот метод рендеринга, например Next.JS (React), Angular Universal (Angular) и Nuxt.JS. (Вью.JS).
Рендеринг на стороне клиента (CSR)
Рендеринг на стороне клиента находится на противоположной стороне спектра. JavaScript отображается на стороне клиента их браузером с использованием DOM (объектная модель документа). Именно здесь возникают проблемы с индексированием, рендерингом и сканированием, поскольку боты Google пытаются понять контент.
По сути, клиент получает файл JavaScript + стандартный HTML-документ, и все это нужно тут же отобразить.
У КСО есть преимущества. Хотя он генерирует HTML по запросу, он не будет повторно отображать или обновлять всю страницу, как в случае с обычными HTML-страницами, что экономит много вычислительной мощности. Более того, благодаря рендерингу на стороне клиента компоненты пользовательского интерфейса можно использовать на нескольких страницах без необходимости каждый раз отправлять запросы, что повышает производительность на странице. В целом означает, что CSR может работать лучше, чем SSR.
По-прежнему существуют проблемы с рендерингом на стороне клиента, а именно двухволновая индексация, которая сохраняется внутри, и проблемы с кэшированием, возникающие, когда HTML не является частью исходного рендеринга, что означает, что браузеры не могут кэшировать HTML-структуру страницы.
В очень упрощенном примере разница между этими двумя типами рендеринга аналогична покупке нового офисного стула, вы можете либо купить готовый стул в магазине, что доставляет неудобства персоналу (рендеринг на стороне сервера), либо вы можете купить стул IKEA и сделать его самостоятельно, что требует больше времени и ресурсов (Визуализация на стороне клиента).
Динамический рендеринг
Динамический рендеринг — это гибридный метод, при котором рендеринг переключается между клиентской и серверной сторонами в зависимости от пользовательского агента.
Это чрезвычайно полезно для ресурсоемких веб-сайтов, которые не хотят ставить под угрозу производительность сайта. Имея возможность предоставить пользователям надлежащий рендеринг на стороне клиента со всеми преимуществами и предоставить статический HTML-контент для поисковых роботов, максимально быстро передавая как можно больше контента, вы получаете лучшее из обоих миров.
Вот еще одна диаграмма, показывающая, что происходит за кулисами.
Но разве это не маскировка? Ну нет, если обрабатываемый контент у всех одинаковый, то это не клоакинг. Если бы обслуживаемый контент был совершенно другим, то это было бы маскировкой. Единственные различия в содержании будут заключаться в уровне интерактивности, так как краулер получит статический HTML-документ, тогда как клиентский браузер получит всю кашу.
Проблемы с SEO в JavaScript и как их решить
При работе с JS-сайтом в качестве SEO-специалиста нередко возникают проблемы, вот некоторые из них, с которыми мы лично сталкивались в прошлом.
1. Проблемы с бесконечной прокруткой
бесконечная прокрутка не только выглядит круто, но и имеет некоторые преимущества по сравнению с традиционной нумерацией страниц. Проблема в том, что поисковые роботы не могут получить доступ ко всему контенту, поскольку они не могут взаимодействовать со страницами и, ну, прокручивать.
Чтобы решить эту проблему, необходимо будет реализовать некоторую параллельную разбивку на страницы со статическими ссылками, чтобы гарантировать, что весь контент может быть проиндексирован.
2. Проблемы со сканированием инструментов
Ваши инструменты не будут настроены для сканирования JS-сайтов, поэтому важно правильно их настроить! Здесь мы покажем, как настроить Screaming Frog SEO Spider для сканирования сайтов JavaScript.
во-первых, откройте паука и перейдите на вкладку конфигурации.
Ударьте паука и переключитесь на вкладку рендеринга.
По умолчанию рендеринг будет только в текстовом режиме, поэтому убедитесь, что он изменен на JavaScript, теперь вы сможете сканировать сайты JS и приступить к работе над своим техническим SEO!
Примечание: вы также можете обойти файлы robots.txt в настройках, если у вас все еще возникают проблемы со сканированием страниц.
3. Файл robot.txt блокирует ресурсы
иногда ваш файл robots может блокировать сканирование важных ресурсов, поэтому мы должны убедиться, что он поддерживает JS, вот стандартный ввод в файл, чтобы убедиться, что никакие ресурсы не заблокированы.
User-Agent: Googlebot
Allow: .js
(также сделал бы то же самое для CSS)
Allow: .css
4. Проблемы с рендерингом на стороне клиента
JS, отображаемый на стороне клиента, не может возвращать какие-либо ошибки сервера аналогично содержимому SSR, это еще одна причина, по которой динамический рендеринг предпочтителен для сайтов JavaScript.
5. Страницы не индексируются
Как мы видели, JavaScript в целом имеет проблемы с индексацией страниц при работе на CSR. Другой способ, которым страницы не индексируются, — это когда URL-адреса содержат #, важно очистить ваши URL-адреса от хэштегов!
www.gelocubed.com/#/services ❌
Следует использовать статические URL-адреса, иначе ваши страницы могут быть не проиндексированы.
Как вы можете видеть, JavaScript, хотя и поднимает игру веб-разработки, является настоящей головной болью для SEO-специалистов! Надеюсь, это даст вам некоторое представление о мире JavaScript SEO и о том, как работать с сайтами JavaScript.
вот еще несколько блогов на эту тему, которые дадут больше информации по этому вопросу!
Руководство по поисковой оптимизации Ahrefs JS
Руководство по поисковой оптимизации SEMrush JS
Лучшие SEO-практики ContentKing JS
Если у вас низкий уровень поискового трафика и вы хотите повысить свой рейтинг, свяжитесь с нами через Twitter, LinkedIn или через наш сайт сегодня!
