Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
6900
How-to Читать 8 минут

Как оптимизировать SPA-сайты

Как SEO оптимизировать SPA-приложение
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — АНАЛИЗ
Инструкцию одобрил
Founder, CEO в Elit-Web
SPA-сайты обрели популярность благодаря упрощенной архитектуре и удобству для пользователя. Чтобы продвигать такие сайты-приложения, нужно правильно подавать страницы поисковым ботам параллельно с использованием стандартных SEO-инструментов.

Что такое SPA-приложения

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

При создании SPA-приложения используется всего один html-документ для обложки. Переменные составляющие подаются пользователю через определенную технологию: Ajax, HTML5, шаблонизатор или фреймворк для JavaScript.

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

Плюсы SPA-сайтов

  • Нет перезагрузки страницы при каждом нажатии и, соответственно, информация на странице не меняется полностью;

  • информация загружается быстрее из-за упрощенной структуры;

  • как и в обычных сайтах, каждая страница может существовать как отдельный элемент со своей структурой и функциями, а неисправность одной страницы не повлияет на весь сайт.

Минусы SPA-сайтов

  • Индексация ботами отличается от традиционной подачи в html-коде;

  • нужно досконально изучить JavaScript для создания;

  • SEO-оптимизация сайта проходит чуть сложнее, чем обычно;

  • для отображения в браузере должен быть включен модуль Java.

Из всех поисковых систем рендерить страницы SPA-приложений умеет только Google и Ask.com, использующий гугловские результаты выдачи. Но вам как оптимизатору нельзя забывать и об остальных поисковиках.

Для того, чтобы сайт был доступен в выдаче Яндекса, обязательно создавайте html-копии его страниц. Чтобы боты лучше сканировали страницы, добавьте параметр <meta name="fragment" content="!">.

До лета 2018 года этот метод действовал и для ботов Google. Но теперь они рендерят страницы напрямую. В этом случае вам достаточно использовать верный формат URL.

Как видят страницы SPA-сайты роботы Google

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

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

Чтобы проверить индексацию определенной страницы в Google, используйте оператор site. Для этого в режиме инкогнито введите в поисковой строке:
site: {site.com} «{fragment}»
Проиндексированная страница будет отображаться в поиске. Если информации не будет в выдаче, значит, страница не была просканирована ботом. Чтобы провести непосредственный анализ сайта, лучше сразу смотреть на DOM (Document Object Model). Для этого выделяете часть текста, нажимаете правой кнопкой мышки и выбираете «Посмотреть элемент» прямо в браузере.
Просмотр Document Object Model в браузере
Модель DOM используется для отслеживания динамических изменений на странице и представляет собой иерархию метатегов и текстовых строк. В этой структуре есть основные и дочерние узлы, которые доступны для изменений в приложении JavaScript. Например, есть определенная HTML-страница:
<!doctype html>
<html>
<head>
<title>Купить ноутбук с подсветкой в Москве</title>
</head>
<body>
<h1>Лучшие ноутбуки с подсветкой</h1>
<p>Приветствуем вас в нашем интернет-магазине.</p>
<p>Вы можете купить у нас ноутбук. Например,
<a href="http://site.ru">такой</a>.</p>
</body>
</html>
Ее структура будет выглядеть так:
Схема структуры HTML-страницы
Также скачайте браузер Chrome 41. Именно эту версию использует Google для рендеринга страниц. Время от времени полезно проанализировать ошибки в консоли этого браузера.

Если у вас на сайте есть скрытый текст под катом, используйте в ссылках параметр href и не полагайтесь только на onClick. Без указанного параметра страницы под катом будут скорее всего пропущены ботом. В URL не используйте стандартный хештег #, а просто замените его на хешбенг #! — тогда бот прочитает название страницы.
Было: https://site.com/#url  
Стало: https://site.com/#!url
Чтобы посмотреть на сайт со стороны ботов, зайдите в Google Search Console, найдите там параметры Fetch и Render («Получить» и «Отобразить»). Эта информация полностью соответствует реальности за исключением показателей timeout. Для робота они меньше, чем здесь может быть указано.
Отчет о страницах в Google Search Console

SEO-продвижение SPA-сайтов

Продвижение JavaScript-приложений проводите традиционным образом. Бывает, что ошибки индексации вовсе не связаны непосредственно с архитектурой сайта, а возникают по причине неправильных действий с точки зрения SEO. В данном случае помимо стандартных действий необходимо:
1
Оптимизировать скрипты на сайте, чтобы они читались проще и подгружались быстрее.
2
Избегать использования окон iFrame либо создавать отдельные URL с их содержанием.
3
При создании ссылок использовать формат, который предлагает статические URL помимо JavaScript. Это делается для того, чтобы страницу могли видеть все, включая пользователей без Java в браузере.
Если нужно сделать редирект — смело его используйте! Тестирования показывают, что бот способен прочитать редирект и перейти на нужную страницу. То есть редирект в JavaScript происходит аналогично 301 в html.

Для оптимизации вам также нужно доработать страницу 404. По стандарту в SPA-приложениях для несуществующих страниц выдается результат 200 ОК, что является некорректным. Ваша задача — сделать так, чтобы в заголовке страницы выдавалась ошибка 404.

Для регистрации вашего сайта в Google Analytics используйте Tag Manager и триггер History. Либо передавайте данные о каждой странице вручную через команду set и замены переменного значения на новое.

Как заставить ботов индексировать страницы

1
Использовать параметр «?_escaped_fragment=». На данный момент это не самый актуальный вариант.
2
Подавать html-копии ботам, определяя их через user-agent (Яндекс и другие поисковики увидят копии, а Google — оригинальные страницы).
3
Трансформировать сайт в изоморфное приложение JavaScript.
Создавать дубликаты страниц можно как на своем сервере, так и на стороннем. Первый вариант актуален для крупных проектов, второй — для средних и небольших с привлечением специализированных инструментов. Среди указанных способов оптимизации наилучшим считается третий вариант — создание изоморфного приложения. Его рекомендуют даже в Google:
Рекомендации по оптимизации SPA-сайтов от Google
Суть в том, что пользователи и боты изначально получают весь набор информации, к которой подгружаются скрипты Java. В результате пользователь видит динамические страницы, а боты получают их html-копии.

Заключение

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

Для оптимизации SPA-сайтов необходимо использовать стандартные инструменты по SEO и дополнительно представить URL в понятном виде для ботов.

На сегодняшний день только Google и Ask.com способны индексировать SPA-сайты в оригинальном виде. Для остальных поисковиков нужны html-копии страниц. В идеале пользователь использует функционал JavaScript, а боты считывают упрощенные и понятные дубликаты.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat" title = "Как оптимизировать SPA-сайты 16261788212027" />
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.85 из 5 на основе 12 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.