SEO vs. React: Поисковые роботы умнее, чем вы думаете

Перевод
Автор оригинала Patrick Hund
Оригинал SEO vs. React: Web Crawlers are Smarter Than You Think
SEO vs. React: Поисковые роботы умнее, чем вы думаете

Многие люди до сих пор опасаются, что использование при разработке таких инструментов как React, Angular или Ember, может навредить вашему SEO.

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

Если HTML-код содержит всего пару мета-тегов и теги <script>, поисковая система будет считать, что ваша страница пустая и не станет вас ранжировать.

Я часто вижу как SEO-консультанты советуют генерировать страницу на сервере, чтобы поисковые роботы могли видеть HTML-код и индексировать его.

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

Верно ли утверждение, что "генерация страницы на стороне клиента, причиняет страдания вашему SEO"?

Исследование

1-wjgkguhaw5k-lrvpxpdmdw

Для начала, дисклеймер (Disclaimer - отказ от ответственности): Я ни в коем случае не SEO-эксперт, но читал немного на эту тему, и вот что я нашёл.

Вот анонс Google в блоге веб-мастеров датируемый октябрём 2015 года.

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

Есть ещё статья от Serach Engine Land, написанная в мае 2015 года:

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

SEO сигналы, которые находятся в DOM (заголовок страницы, мета-описание, канонические теги и т.д.) соблюдаются. Содержимое динамически добавленное в DOM, также индексируется. Кроме того, в некоторых случаях, сигналы в DOM могут иметь приоритет над противоречивыми заявлениями в исходном коде HTML. Это потребует больше работы.

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

Тестируем Preactjs.com

Недавно я написал в твиттере о придирках SEO-консультантов к моему любимому React. Чтобы быть точным, я в процессе перехода к Preact, легкой альтернативе React'а. После чего, я получил ответ от Jason Miller, одно из разработчиков Preact:

Помимо статьи из блога Search Engine Land, которую я процитировал выше, Jason дал ссылку на Google поиск для главной страницы, которая выглядит следующим образом:

1-bmlcgupoceo-m-mjh4semq

Эта страница полностью генерируется на стороне клиента и исходный код страницы это доказывает:

!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Preact: Fast 3kb React alternative with the same ES6 API. Components &amp; Virtual DOM.</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#673AB8">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/assets/app-icon-192.png" sizes="192x192">
<script>(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');</script>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/style.6bae35e4ff9d687cb418.css" rel="stylesheet">
</head><body>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');</script>
<script type="text/javascript" src="/bundle.a0afd09fd48712ed0f26.js"></script>
</body></html>

Если бы Googlebot не смог прочитать созданный Preact'ом HTML-код, то он ничего не отобразил бы, кроме мета-тегов.

И тем не менее, поисковая выдача при запросе site:preactjs.com выглядит следующим образом:

1-nbjy1kfpimrn2lspdsdkgg

Ещё одна статья написанная Andrew Farmer в марте 2016 года, предупреждает об отсутствии поддержки JavaScript поисковыми системами отличающимся от Google Engine:

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

Поэтому я решил попробовать тест Jason'а с другими поисковыми системами.

Bing

Предупреждения Andrew относительно Bing, выглядят весьма иллюзорными. Вот результаты поиска site:preactjs.com в поисковой системе Bing:

1-nbjy1kfpimrn2lspdsdkgg

Yahoo

И Yahoo результаты когда ищете site:preactjs.com:

1-tynb6bd-o3jqg-spmgveia

Duck Duck Go

Duck Duck Go результаты при поиске site:preactjs.com:

1-wjfxmyyzz_0w1q_1std4qa

Baidu

У китайского поисковика Baidu есть проблемы с preactjs.com. Вот его результаты при том же самом поиске:

1-lni0cw0zm42y-0uoyroscq

Yandex

От переводчика: У российского поисковика тоже не всё хорошо с обработкой JavaScript.

screenshot_1

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

  • Отображайте все компоненты, перед тем как делать что-то в асинхронном режиме;
  • Проверьте каждую из ваших страниц с помощью инструмента Fetch as Google, чтобы убедиться что Googlebot находит ваше содержимое;

Спасибо за чтение!

Комментарии

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