Немного банальностей о 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 веб-сайтами:
- Изоморфный (универсальный) SPA;
- Пререндеринг.
Дополнительные средства улучшения 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), то ни изоморфность, ни преререндеринг не требуются.
