https://habr.com/post/418619/

• Поисковая оптимизация
• ReactJS
• JavaScript
• HTML
• CSS

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

Немного банальностей о SEO

Около 92% трафика приходит с первой страницы результатов запроса поискового сервера, причем 75% трафика приходится на первые пять веб-сайтов.
Google занимает более 90% рынка поисковых серверов.
Search Engine Optimization (SEO) — это процесс структуризации и организации сайта с целью увеличения объема и повышения качества его трафика путем повышения его положения и частоты появления в результатах поисковых серверов, фокусируясь на ключевых словах раскрывающих специфику сайта.
Главная цель SEO процесса — улучшать заметность сайта в интернете и увеличивать трафик сайта.

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

Это может показаться довольно простым, но, в случае сайтов построенных на React, это не всегда так.

React и SEO

Кратко о SPA

Одностраничное приложение или SPA — это веб приложение или веб-сайт, который взаимодействует с пользователем посредством динамического изменения текущей страниц, а не загрузки новых страниц с сервера. SPA работают быстро, т.к. большинство ресурсов (HTML+CSS+Scripts) загружаются только однажды на протяжении всего периода их жизни. Приложение получает и отдает только данные.
Одним из примеров технологии, которая может использоваться для создания SPA, является ReactJS, библиотека, которая хорошо оптимизирована для работы на пользовательских браузерах (больше здесь.)

Основные проблемы SPA с SEO

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

Google в октябре 2015 года сделал важное объявление о том, что его боты будут запускать JS файлы на веб-сайтах в случае предоставления им прав делать это. И, хотя это заявление звучит очень позитивно, а сами его поисковые боты становятся более совершенными, полагаться на их способность выполнять JavaScript рискованно. Google бот может отказаться от выполнения JavaScript по множеству причин (подробнее здесь):

• несоблюдения правила «золотых 5 сек» (подробнее здесь и здесь);
• невозможности сканирования сайта: системы Google должны быть способны просканировать сайт, учитывая его структуру (подробнее здесь);
• невозможности анализа сайта: системы Google не должны испытывать проблем в ходе анализа сайта с использованием технологий, используемых для формирования его страниц (подробнее здесь);
• ошибок в коде и пр.

Боты других поисковых серверов, таких как Yahoo, Bing, Baidu и др. не поддерживают JavaScript и видят страницы SPA пустыми.

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

Решения проблемы SEO для SPA веб-сайтов

Имется два главных способа решения SEO проблем стоящих перед SPA веб-сайтами:

1. Изоморфный (универсальный) SPA;
2. Пререндеринг.

Дополнительные средства улучшения SEO для React веб-сайтов:

• React Router v4: компонент для создания дружественных к SEO «rout»-ов в React приложениях;
• React Helmet: едва ли не самый важный компонент для обеспечения SEO React-приложений, дающий возможность управлять meta-тегами приложения и отличающийся простотой применения.

Как изоморфный React помогает с SEO?

Изоморфный React сайт автоматически определяет, отключен ли JavaScript на стороне клиента. Если JavaScript отключен, скрипт выполняется на сервере и результат (статический HTML+CSS) отсылается клиенту. В этом случае все необходимые для SEO атрибуты и контент присутствуют во время загрузки.
Если же JavaScript включен, изоморфный React сайт в простейшем случае может загружаться обычным образом, когда все рендерится в браузере, либо ухищренно: выполняется частичный рендеринг на стороне сервера, что значит, что только первый DOM рендеринг производится на сервере, а все последующие производятся непосредственно в браузере. Другими словами, браузер получает полностью отрендеренную первоначальную DOM и JavaScript, а когда состояние приложения изменяется — отвечает за все последующие обновления.

Считается, что изоморфное решение является лучшим методом решения SEO проблем SPA веб-приложений, но незадача, к сожалению, в том, что подобные решения для React SPA, на сегодняшний момент, трудно реализуемы:

• популярные React бойлерплейты, например create-react-app, react-boilerplate не поддерживают изоморфность. Dan Abramov, разработчик create-react-app:
  

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

• существующие изоморфные бойлерплейты сложны в освоении;
• существующие решения несовершенны:
  
  • зачастую код на сервере и на клиенте имеет много различий;
  • в случае практически полного совпадения кодовой базы, код становится медленным и склонным к сбоям.
  
  

  Похоже, многие разработчики поддержат мнение высказанное MrCheater в обсуждении статьи «Изоморфные React-приложения: производительность и масштабирование»:
  

  У темы «изоморфных веб-приложений» много ненавистников. Увы. Хотя легко понять почему, всё очень сложно программируется, сотни статей на эту тему, а на выходе всё равно у всех получается страшный клиент весом 3 мегабайта. Но когда-нибудь скоро все проблемы и подходы к их решению будут стандартизированы, и мы будем иметь легковесные изоморфные single page application.

  
  

  Решение проблемы SEO посредством пререндеринга

  
  

  Пререндеринг — это процесс предварительного рендеринга страниц веб-сайта с целью подготовки их к просмотру поисковым веб-ботом. Пререндер-сервис перехватывает запросы к веб-сайту, по «user-agent» запроса определяет тип клиента, и если запрос был сделан веб-ботом, сервис отсылает обратно предварительно отрендеренную кешированную статическую версию сайта. Если же запрос был сделан не поисковым веб-ботом, загружается обычная страница. Пререндеринг используется только для оптимизации работы с веб-ботами и, возможно, с устаревшими браузерами. Пререндер-сервисы, например Рrerender.cloud и ему подобные, используют «headless» браузеры, чаще всего Headless Chrome. Такой подход позволяет использовать для построения веб-сайта самые новые JavaScript фреймворки типа React, Ember, и Angular и не полагаться на серверный рендеринг.

  
  

  Достоинства пререндеринга:

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

  Недостатки пререндеринга:

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

  Пререндеры, где их взять

  
  

  Сообщество разработало значительное количество пререндеров: см., например, здесь.

  
  

  Среди многих вариантов представляется интересным OpenSource Prerender — опенсорсная версия пререндера используемого на сервисе prerender.io, которую можно имплементировать на собственном сервере поддерживающем Node.js.

  
  

  Еще один, интересный тем, что не требует наличия сервера, пререндер — Prerender SPA Plugin, который подключается путем простой модификации webpack.config.js, например к create-react-app или react-boilerplate. Процесс пререндеринга выполняется в процессе «билдинга» сайта и результат помещается в index.html.

  
  

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

  
  

  Здесь можно ознакомиться также и с практическим опытом работы с пререндерами.

  
  

  Особенно интересным представляется сервис Roast.io, предоставляющий услуги как CDN, так и пререндеринга (!). Сервис также автоматически (если таковые отсутствуют) добавляет «screenshot link unfurls» мета-теги, улучшающие отображение веб-сайта в в социальных сетях.
  Сервис расположен на AWS CDN, работает по HTTPS протоколу, настроен под SPA и React в частности, очень прост в использовании. Имеется опция бесплатного хостинга (10GB bandwidth, 500 pages SSR).

  
  

  Итак:

  
  

  Пререндеринг, будучи не идеальным решением, выглядит более предпочтительным для значительной части разработчиков React-приложений в силу того, что:
  

  • не требуется доработка кода приложения — можно без опасений использовать свой любимый бойлерплейт;
  • наличествует широкий выбор реализаций — «middleware», «webpack», «CDN+prerender», «opensource» и платных;
  • внедрение пререндеринга — простой процесс, особенно в случае «CDN+prerender» реализаций;
  • имеется серьезная поддержка со стороны Google в виде Headless Chrome;
  • уменьшаются затраты на разработку и поддержку приложения;
  • имеются опции бесплатного использования пререндер-веб-сервисов.

  
  Однако, нужно подумать об изоморфном (универсальном) варианте сайта, если:
  

  • веб-приложение отображает часто изменяющиеся данные;
  • веб-приложение содержит сотни страниц, ведь процесс пререндеринга можеть занять значительное время.

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