Продвижение – непростая задача. Ее решение может потребовать колоссальных усилий, наличия определенных навыков у исполнителей (СЕО-специалистов и разработчиков), что в конечном итоге выльется в финансовые затраты, которые должен будет нести заказчик.
В материале публикации представлена информация о том, как относительно быстро и недорого сделать сайт на React дружественным к поисковым системам, приведены распространенные проблемы и способы их преодоления.
Основные сведения о СЕО: что это
SEO – процесс, предполагающий грамотную структуризацию и продуманную организацию ресурса, целью чего является повышение уровня и качества трафика посредством улучшения позиции и частоты выдачи в поиске по тем или иным запросам. Ключевая задача раскрутки сайта на Реакт – обеспечение заметности веб-ресурса в сети и увеличение трафика.
Потому как функционирование поисковых ботов основано на принципах кеширования контента и автоматизации его обработки, крайне важно, чтобы все элементы на них были представлены способом, обеспечивающим удобоваримость для машинного чтения.
СЕО-продвижение, таким образом, предполагает:
- повышение производительности;
- обеспечение высокой релевантности ключевикам;
- обеспечение ресурса средствами, способствующими пониманию контента ботами.
Обычно оптимизация – стандартный, пусть и трудоемкий процесс, но в случае с React задача в некотором смысле усложняется.
Ближе к делу
Чаще всего библиотека Реакт используется для подготовки одностраничников, хотя может быть задействована и для разработки более масштабных проектов. Сути дела это не меняет.
Создание одностраничного сайта на React.JS и его последующая оптимизация – непростая задача. Далее примеры проблем представлены с привязкой к особенностям функционирования одностраничников (SPA – Single Page Application), но следует понимать, что они характерны и для многостраничных.
Что такое React
Это библиотека JavaScript с открытым исходным кодом. Она применяется для разработки пользовательских интерфейсов. Часто ее применяют для создания лендингов и мобильных приложений. Плюсы:
- относительно высокая скорость;
- простота;
- масштабируемость.
Нередко библиотеку задействуют параллельно с прочими, например, с Redux и другими.
Какие могут возникнуть проблемы
Любое одностраничное приложение – это в некотором смысле скрипт, работающий в обозревателе. Если поисковик по объективной или субъективной причине не может исполнять скрипты, получение достоверной картины о содержании сайта и его индексация становятся невозможными.
Боты поисковиков (и Яндекс, и Гугл) могут отказаться от исполнения конкретного скрипта JS по ряду причин:
- невозможность выполнения в течение пяти секунд. Часто роботы Google отказываются сканировать одностраничные сайты, построенные скриптами JS, если они не выполняются за 5 секунд. Однако иногда и Yandex не оказывается лучше;
- слишком сложный код. Создавая сайт на Реакте самостоятельно впервые, не обладая достаточным опытом, что следует учитывать, можно допустить ошибку, сделав код слишком сложным. Поисковые роботы, сталкивающиеся с этим, могут не до конца просканировать его и просто «пойти» дальше;
- неудобоваримые принципы организации, нечитаемая структура страниц (для «машин»);
- ошибки в коде.
Справка: некоторые поисковые системы, например, Yahoo, Bing и не только, не видят страницы SPA вообще.
Как исправить ошибки и избавиться от проблем с СЕО
Есть два способа:
- Создание универсального сайта.
- Подготовка к просмотру поисковым системам.
Улучшить положение дел можно и с помощью дополнительных средств. Примеры:
- использование компонента Router v. 4. С его помощью можно создать хорошо оптимизированный технически сайт;
- использование компонента Helmet, одного из самых важных в контексте React, обеспечивающего управление тегами.
Первый способ предполагает функционирование в режиме, определяющем в реальном времени, отключен ли скрипт на стороне клиента. Если да, то он будет выполнен средствами сервера. Все важные с точки зрения продвижения атрибуты и элементы содержимого будут доступны во время загрузки. Если скрипт активен, называемый изоморфным сайт будет либо загружаться обычно, либо частично на стороне сервера.
Иными словами, нужно обеспечить роботам видимость важного с точки зрения оптимизации контента и атрибутов во время очередного обхода.
Но и в данном случае могут возникнуть проблемы. Примеры:
- отличие кода на сервере от кода на клиенте;
- идентичность кодовой базы может сказываться на скорости работы, что приводит к невыполнению правила пяти секунд.
Решение – предварительная подготовка к сканированию ботами. Способ предполагает использование специальных сервисов (например, Prerender.cloud). Они перехватывают запросы, устанавливают принадлежность видов клиентов. Если запрос сгенерирован машиной, в ответ будет направлена подготовленная SEO-версия контента. В ином случае в качестве ответа будет выдана обычная страница.
Плюсы подхода:
- сервисы для подготовки реализуют все операции со скриптами и выдают статичные HTML;
- есть возможность использовать современные веб-инструменты;
- в некоторых случаях модификация кода уже запущенных ресурсов не требуется;
- есть возможность снизить расходы на поддержку сайта.
Есть и минусы:
- предварительная подготовка не подходит для страниц с непостоянным содержимым;
- нельзя использовать сервисы для страниц, где могут храниться персональные данные пользователей.
Справка: владельцы ресурсов с часто обновляющимся содержимым, где важна свежесть контента, не могут рассчитывать на поддержку JavaScript. Дело в том, что, например, в Гугл индексация иногда проходит в 2 этапа: сначала один бот анализирует содержимое без JS, а уже после приходит второй, поддерживающий Java Script. Слишком частое обновление контента может стать причиной того, что боты негативно будут воспринимать содержимое в целом.
Заказать услугу по SEO-продвижению сайтов на React
Нужна помощь? Обращайтесь! Мы проанализируем ресурс, при необходимости доработаем его и займемся внутренней, а также внешней оптимизацией. Гарантируем результат.
Услуги по продвижению в поисковых система стоят в Digital-агентстве Elmark от 18 тысяч рублей. Цена будет озвучена после консультации с СЕО-специалистом и аудита.