Влияние javascript на продвижение сайта

В этой статье я расскажу какое оказывает влияние javascript на продвижение сайта!

Какое влияние оказывает javascript на продвижение сайта

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

Как работает Javascript

Вот краткое представление о JavaScript для тех, кто с ним совсем не знаком.

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

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

Рендеринг на стороне клиента и на стороне сервера

Есть две концепции, которые нужно упомянуть при разговоре о JavaScript. И очень важно понять различия между ними: рендеринг на стороне сервера и рендеринг на стороне клиента.

Традиционно, как и в случае со статическими HTML-страницами, код обрабатывается на сервере (рендеринг на стороне сервера). При посещении страницы Google-бот получает полный и «готовый» контент, поэтому ему не нужно ничего делать, кроме как загружать CSS-файлы и показывать информацию в вашем браузере.

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

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

Теперь давайте посмотрим, как можно избежать этих проблем.

Как проверить, что сайт читается правильно

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

Вот несколько вариантов, которые могут вам помочь.

1. Команда site:

Прежде всего, команда site: покажет, сколько страниц вашего сайта в настоящее время индексируется Google. Если многие из них еще не указаны в индексе, это может быть признаком проблем с внутренними ссылками (перелинковкой).

Во-вторых, вы можете проверить, проиндексировал ли Google и Яндекс ваш JavaScript-контент.

Для этого нужно найти определенную строку в тексте, которая не представлена в исходном HTML-коде и загружается только после выполнения JavaScript. После этого найдите эту строку в индексе Google, используя команду site:yourdomain.com.

Обратите внимание, что это не работает с командой «cache:», поскольку кэшированные версии страниц содержат только оригинальный, еще не отрендеренный код.

2. Chrome 41

В августе 2017 года в Google обновили «Руководство поиска» и объявили, что используют Chrome 41 для рендеринга. Это коренным образом изменило SEO, ведь теперь стало возможным проверить, как Google фактически отображает страницу, а не гадать и надеяться на лучшее.

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

3. Chrome DevTools

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

Самый быстрый и простой способ проверить, загружаются ли все JavaScript-элементы без каких-либо действий пользователя, — использовать Chrome DevTools:

1. Откройте ваш сайт в Chrome.
2. Откройте таблицу элементов в DevTools.
3. Посмотрите, как отображается ваша страница, просмотрев DOM фактической страницы, созданной браузером, убедитесь, что все важные навигационные и контент-элементы уже присутствуют там.

Я рекомендую проверить это и в Chrome 41. Это обеспечит уверенность в том, что робот Google технически способен увидеть все.

Конечно, вы также можете проверить это в своей текущей версии Chrome и провести некоторые сравнения.

4. Функция Fetch and Render в Google Search Console

Еще один полезный инструмент, который поможет представить, как Google отображает ваш веб-сайт, — функция Fetch and Render в Google Search Console.

Сначала вам нужно скопировать и вставить URL-адрес. Затем нажать Fetch and render и немного подождать. Это позволит вам увидеть, сможет ли робот Google обработать вашу страницу и увидеть связанные статьи, копии или ссылки.

Вы также можете использовать Mobile-Friendly Test от Google, который покажет вам ошибки JavaScript и код отображаемой страницы.

5. Анализ серверных логов

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

Существует множество аспектов, которые можно анализировать с помощью серверных логов. Например, вы можете проверить, посещает ли Googlebot ваши старые статьи: если нет, возможно, есть проблемы со ссылками, которые могут быть вызваны проблемами с JS.

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

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

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

Возможные проблемы рендеринга сайта

Даже если ваша страница отображается правильно в разделе Fetch and Render в Search Console, это не означает, что вы можете выдохнуть и расслабиться. Есть и другие проблемы, за которыми нужно следить.

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

1. Время ожидания

Хотя точное время ожидания не определено, говорят, что Google не может ждать скрипта дольше 5 секунд. Если скрипт загружается более 5 секунд, Google обычно не индексирует контент, который он создает.

Fetch and Render покажет, может ли Google прорендерить страницу, но эта функция ничего не скажет. Важно помнить, что Fetch and Render прощает гораздо больше, чем стандартный робот Google, поэтому вам нужно предпринимать дополнительные шаги, чтобы убедиться, что скрипты, которые вы используете, могут загрузиться менее чем за 5 секунд.

2. Ограничения браузера

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

Поэтому лучшим решением является загрузить браузер Chrome 41 (ту самую версию, которую Google использует для веб-рендеринга) и ознакомиться с ним. Проверьте лог консоли, чтобы увидеть, где возникают ошибки, чтобы ваши разработчики исправили их.

3. Контент, требующий пользовательского действия для загрузки

Мы уже говорили об этом, но это действительно стоит повторить: Google-бот не действует как пользователь. Он не нажимает на кнопки, не кликает «читать дальше», не открывает вкладки, не заполняет какие-либо формы… Он только читает и переходит.

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

Это особенно важно в отношении контента с кнопкой «читать дальше» и меню, например, вида «гамбургер».

Как помочь боту Google лучше рендерить сайт

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

Избегайте ссылок OnClick

Поисковые системы не считают onclick=»window.location=» обычными ссылками, а это значит, что в большинстве случаев они не будут ходить по такой навигации. И поисковики точно не будут относиться к ним как к сигналам о внутренней ссылке.

Исключительно важно, чтобы ссылки находились в DOM перед кликом. Вы можете проверить это, открыв «Инструменты разработчиков» в Chrome 41 и проверив, были ли уже загружены важные ссылки без каких-либо дополнительных действий пользователя.

Избегайте # в URL-адресах

Идентификатор фрагмента # не поддерживается и игнорируется роботами Google. Так что вместо использования URL-адреса вида example.com/#url, старайтесь работать с чистыми URL-адресами — example.com/url.

Уникальные URL-адреса для уникального контента

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

Не допускайте ошибок JavaScript

HTML прощает многое, а вот JavaScript — нет.

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

Чтобы проверить код и не допустить ошибок JavaScript, вы снова можете использовать Chrome DevTools и просмотреть вкладку «Консоль», чтобы узнать, какие ошибки возникли и в какой строке кода JavaScript.

Не блокируйте JavaScript в robots.txt

Блокирование JS-файлов — очень старый метод, но он применяется довольно часто. В некоторых CMS он иногда встречается по умолчанию. И хотя его целью является оптимизация бюджета обхода, блокировка JavaScript-файлов (и таблиц CSS) считается очень плохой практикой. Но не принимайте это на веру, вот что сам Google говорит по этой теме:

«Мы рекомендуем убедиться, что робот Google может получить доступ к любому встроенному ресурсу, который вносит значительный вклад в видимый контент вашего сайта или его макет …»

Поэтому не делайте ничего подобного:

• User-agent: *
• Disallow: /css
• Disallow: /js

Пререндер

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

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

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

Использовать это решение очень просто — вам просто нужно добавить промежуточное программное обеспечение или сниппет на свой веб-сервер.

Заключение

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

Вместо заключения

Хотите выйти в ТОП10 Яндекс и долго там оставаться? Продвигайте свои сайты и интернет-магазины исключительно белыми SEO методами! Не умеете? Могу научить! Тем, кто хочет разобраться во всех премудростях SEO, предлагаю посетить мои курсы по SEO обучению, которые я провожу индивидуально, в режиме онлайн по скайпу.

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

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