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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Закрыть

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

Отменить
2181
How-to Читать 8 минут 3 января 2019

Как оптимизировать 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
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

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

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

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

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

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

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов