Содержание
Казалось бы, что AJAX-технологии и JavaScript фреймворки – не лучшее решение для сайта. Но с каждым годом такие проекты встречаются гораздо чаще. И неудивительно, ведь в борьбе за внимание целевой аудитории нужно удивлять, и подобное решение может стать ключевым фактором, дающим превосходство над конкурентами. Но на деле, SPA сайт может стать огромной проблемой. Особенно по части продвижения в поисковых системах.
По сути своей, SPA (Single Page Application) одностраничным JS-приложением, которое запускается и работает с помощью браузера. И в отличие от «классических» сайтов, архитектура таких проектов базируется на рендернге страницы посредством обработки через «железо» пользователя.
Простыми словами, переходя на такой ресурс, вы запускаете приложение, написанное на языке JavaScritp, а уже оно, с использованием AJAX-технологий, динамически загружает все содержимое с серверов. Обработка же проходит на мощностях клиента, за счет чего пользование сайтом не требует перезагрузки страниц. Это позволяет существенно ускорить работу, а также улучшить User Expirience. И сильно мешает продвижению, поскольку подход к их оптимизации отличается от всего, к чему привыкли нынешние СЕО-специалисты.
Но это не значит, что SPA-проектам светит изгнание на задворки поисковой выдачи, а скорее наоборот – при грамотном подходе и хорошей оптимизации, такие сайты сильно превосходят своих «традиционных» конкурентов по целому ряду параметров. Потому команда SEO-отдела студии digital-маркетинга EcKit решила рассказать все, что нужно знать про одностраничные приложения, а также о том, как «подружить» их с поисковыми системами.
Плюсы SPA сайтов
Скорее всего, вы пользовались одностраничными сайтами-приложениями, даже не подозревая об этом. Речь идет о многих популярных сервисах Google – Переводчик, Карты, Gmail. Учитывая, что даже медиагигант использует технологию Single Page Application, что это именно то, за чем стоит будущее индустрии веб-разработки, важно упомянуть о достоинствах данной технологии. А именно:
- Доступность. Использовать такие сервисы можно практически с любого устройства, имеющего доступ к интернету и встроенный браузер;
- Скорость. Одна страница со всем необходимым экономит время на повторной загрузке информации, а также повышает производительность самого сайта;
- Отсутствие ограничений. В частности, связанных с памятью устройства, ведь все фреймворки, отвечающие за их работу, «подгружаются» с серверов один раз;
- Перспективность. SPA – технология с открытым кодом и большим комьюнити, постоянно развивающим это направление.
Принцип работы одностраничных приложений
Загрузка и рендеринг содержимого таких ресурсов имеет свой алгоритм:
- Запрос HTML-содержимого;
- Отправка JS-приложения в ответ;
- Скрипт определяет страницу и контент для отображения;
- AJAX «загружает» необходимое содержимое;
- Javascript обрабатывает полученные данные и выводит их на страницу браузера.
Такой подход позволяет исключить необходимость в постоянном обновлении всей страницы, загружая только необходимое содержимое, а следовательно – экономит много времени.
Какие могут быть минусы SPA сайтов
Поскольку мы стоим на заре развития технологии одностраничных сайтов-приложений, не удивительно, что у неё есть и минусы.
Во-первых, для работы с ними необходимо постоянное и стабильное интернет-соединение. И хотя сегодня проблем с этим практически нет, исключать сценарии с отсутствием интернет-подключения не стоит.
Во-вторых, большинство популярных поисковых систем обрабатывают исключительно HTML-код, игнорируя все встроенные Java-скрипты. А это уже создает трудности для СЕО-специалистов, поскольку подразумевает кардинально иной подход к раскрутке.
В-третьих, львиная доля пользователей все-таки отключают JS или ограничивают его работу инструментами браузера, что ограничивает доступ к одностраничным сайтам-приложениям до включения JavaScript вручную.
Конечно же, этот список можно продолжить и плохим качеством разработки из-за отсутствия опыта у девелоперов, однако в нашем случае на трех пунктах можно закончить, т.к. мы рассматриваем особенности самой технологии, а не «косяки» разработчиков.
SEO продвижение SPA сайтов
Одна из главных «проблем» в раскрутке подобных проектов заключается в их новизне. Ведь по состоянию на начало 2024 года, только поисковые боты Google умеют АДЕКВАТНО рендерить содержимое таких сайтов. Но лишь в случае, если их структура соответствует определенным правилам.
Раньше, это «обходилось» за счет создания HTML-копии, но с 2018 года роботы Гугла начали использовать исключительно рендеринг. Учитывая, что большинство сео-специалистов запрещают индексирование JS и CSS, претендовать на выход в топы выдачи сложновато, т.к. они просто не будут проиндексированы.
Но мы вполне можем «заставить» их делать свою работу и индексировать перспективные страницы на AJAX за счет:
- Команды «?_escaped_fragment_=», генерирующей HTML-копию (снимок) страницы по отдельному URL. Для этого необходимо использовать ссылки с хэшбенгами (#!) или прописать мета-теги для каждого раздела страницы;
- Выявлять роботов по user-agent’у и отдавать ему HTML-копию статической страницы. Доступно только для сайтов, использующих «традиционные» url без хэшей и хэшбенгов.
Рендеринг HTML-копий
Чтобы «подружить» ботов поисковиков с вашим SPA-сайтом придется научить последний «отрисовывать» статичные, отрендеренные версии страниц, а также расставить «дорожные знаки» для роботов. Реализовать подобный трюк можно:
- На своих серверах. Подходит для крупных проектов, располагающих собственными вычислительными мощностями;
- На аутсорсе. Подразумевает настройку копирования статичных HTML-версий страниц «на стороне»;
- Через изоморфный JavaScript, позволяющий «рендерить» страницу не только в браузере пользователя, а сразу на сервере.
Последний примечателен тем, что «выдает» пользователю классическую HTML-страницу с JS-приложением, «подгружая» динамические элементы после формирования копии. Но боты поисковиков получат именно то, что им нужно.
Обработка 404 страниц у SPA сайтов
Из-за специфики технологии SPA, подразумевающей рендеринг на стороне клиента, несуществующие страницы и «битые» ссылки, которые, по-хорошему, должны выдавать ошибку 404, будут отдавать код ОК – 200.
Потому, в первую очередь, при оптимизации нужно избавиться от этого недоразумения, внеся дополнительные доработки в код ответа. К счастю, многие разработчики фреймворков сумели избавиться от ошибки. Что не отменет факта её распространенности на уже существующих проектах.
Настройка Google Analytics для SPA сайта
Отдельный «гемморой» при оптимизации одностраничных сайтов-приложений – установить и настроить инструменты аналитики. Ведь для «классических» ресурсов, код выполняется при загрузке каждой страницы. Но из-за того, что контент подгружается динамически, Analytics не может обрабатывать каждый переход без дополнительной настройки счетчика под активацию каждый раз, когда движок меняет URL.
Настроить «Аналитику» можно двумя способами:
- Tag Manager и триггер «History». Для корректной работы Google Analytics на SPA-сайтах можно воспользоваться HTML5 History API, «активирующий» тег «Аналитик» при каждом обновлении в истории браузера;
- Ручная передача данных. Для обновления счетчика при изменении url можно задать команду «set», указав значение переменной «page», «привязывая» последующие обращение к формируемым ссылкам.
Итоги
Чтобы «подружить» SPA-сайт с SEO, достаточно использовать «традиционные» url, настроить изоморфный JavaScript или правильную генерацию HTML-копий продвигаемых страниц, исправить ошибку с заголовками несуществующих страниц при отдаче 404-го кода, а также настроить работу Google Analytics. В этом случае, одностраничный сайт-приложение станет не обузой, а ключевым конкурентным преимуществом в борьбе за топы поисковой выдачи и внимание аудитории.
