Блог про интернет-маркетинг для бизнеса

SEO

Как сделать SPA-сайты SEO-Friendly?

40
8

В последнее время в работе специалистов Netpeak Agency много сайтов, использующих AJAX-технологии, а также сайтов написанных на JavaScript фреймворках. Без дополнительной оптимизации они не готовы к продвижению в поисковых системах. Поэтому я детально опишу, что такое SPA-сайты, как они работают, и как можно сделать Single Page Application SEO-Friendly.

Статья будет полезна SEO-специалистам и владельцам сайтов, которые хотят перейти на Single Page Application, но не решаются, потому что SPA могут «поссориться» с поисковыми системами.

Что такое SPA

SPA (Single Page Application) — одностраничное JavaScript приложение, которое запускается и работает в браузере. В отличии от «традиционного» сайта, архитектура на SPA-сайтах построена так, что рендеринг страницы полностью происходит на стороне клиента, а не на стороне сервера.

В браузере пользователя запускается JavaScript-приложение, а все необходимое содержимое страниц динамически загружается с помощью AJAX. Навигация по сайту происходит без перезагрузки страниц. За счет такой архитектуры, SPA-сайты работают быстрее, чем «традиционные» сайты.Традиционные и спа-сайты

Рассмотрим детальнее, как происходит загрузка и рендеринг содержимого на SPA-сайтах:

  1. Пользователь запрашивает HTML содержимое сайта.
  2. В ответ приходит JavaScript-приложение.
  3. Приложение определяет, на какой странице находится пользователь, и какое содержимое ему нужно отобразить.
  4. С помощью AJAX пользователь получает необходимый контент: CSS, JS, HTML и текстовый контент.
  5. JavaScript-приложение обрабатывает полученные данные и отображает их в браузере.
  6. При навигации по сайту обновляется не вся страница, а только необходимое содержимое.

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

  • высокая скорость работы;
  • быстрая разработка;
  • создание версий для разных платформ на основе готового кода (desktop и mobile приложения).

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

  • JavaScript не обрабатывается большинством поисковых систем;
  • SPA-сайты не работают без включенного JS в браузере;
  • их нельзя анализировать на предмет ошибок популярными программами и инструментами (например, Netpeak Spider).

Популярные JavaScript фреймворки:

Какие поисковые системы индексируют SPA-сайты

На сегодняшний день только поисковый робот Google умеет рендерить содержимое SPA-сайтов, так как использует для рендеринга инструменты на базе Chrome 41. ASK.com использует выдачу Google. Для остальных поисковых систем необходимо наличие контента в коде в формате HTML.


Какие поисковые системы индексируют SPA сайты

Как настроить индексацию SPA-сайтов

Роботы Google и Yandex могут проиндексировать Single Page Application, если структура сайта соответствует определенным правилам. При этом, для Яндекса необходимо обязательное наличие полной HTML-копии страницы.

Для Google нужно использовать только правильный формат URL. Летом 2018 Google перестанет индексировать HTML-копии страниц, а будет использовать только рендеринг.

(!) Нельзя запрещать индексирование JS и CSS файлов для поисковых роботов Google. Ограничив их индексацию, Google не сможет проиндексировать содержимое SPA-сайтов.

Существует два способа «заставить» поисковых роботов индексировать AJAX-страницы:

  1. Использовать «?_escaped_fragment_=».
  2. Отдавать роботу HTML-копии определяя его по user-agent.

Использование «?_escaped_fragment_=»

Этот способ подразумевает генерацию HTML-копий страниц (снимков) по отдельному URL с использованием параметра «?_escaped_fragment_».

Использование URL c «#!»

Если адреса AJAX страниц формируются с помощью «#» (хеш), значит нужно заменить их на «#!» (хешбенг). Например, с https://example.com/#url на https://example.com/#!url.

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив в URL «#!», запросит снимок страницы. Он заменит «#!» на «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/?_escaped_fragment_=url.

Примеры адресов c «#!» и HTML-копий страниц:

  • https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page;
  • https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main;
  • https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index.

Использование «традиционных» URL

Если на сайте используются «традиционные» URL (https://example.com/url), необходимо указать на всех страницах мета-тег:

<meta name="fragment" content="!">

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив на странице мета-тег <meta name="fragment" content="!">, запросит HTML-копию страницы. Также добавит в URL параметр «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/url?_escaped_fragment_=

Для популярных фреймворков есть готовые решения, которые заменяют «#!» на «традиционные» URL, например, HTML5 mode для Angular.

(!) В HTML-копии документа мета-тег размещать не следует: в этом случае страница не будет проиндексирована.

(!) На страницах HTML-копий canonical должен либо отсутствовать, либо вести сам на себя.

Например, на странице https://example.com/home?_escaped_fragment_= должен быть указан следующий canonical:

<link rel="canonical" href="https://example.com/home?_escaped_fragment_=" />

 

Отдавать HTML-копии страницы по основному URL

Этот способ подходит для SPA-сайта с «традиционными» URL. В чем суть: поисковый робот, запрашивая страницу по основному URL, вместо динамической версии получает HTML-копию страницы.

Определить поискового робота можно по User-Agent. К примеру, по списку роботов Яндекса.

Рендеринг HTML-копий

Для того, чтобы поисковые системы смогли проиндексировать содержимое, необходимо реализовать создание HTML-копий страниц.

HTML-копии — это отрендеренные версии страниц SPA-сайта. Например, содержимое исходного кода страницы SPA-сайта выглядит так:

<html lang="ru">
<head>
   <title>Single Page Application</title>
   <meta name="fragment" content="!">
</head>
<body>
   <script type="text/javascript" src="/assets/js/app.min.js?554997697"></script>
</body>
</html>


А вот отрендеренная HTML-копия этой страницы:

<html lang="ru">
<head>
   <title>TITLE страницы</title>
   <meta name="keywords" content="ключевые слова">
   <meta name="description" content="Описание страницы ">
   <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=0,shrink-to-fit=no">
   <link rel="canonical" href="https://site.com/">
   <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon">
   <meta name="robots" content="index, follow">
   <link rel="stylesheet" type="text/css" media="screen" href="/style.css">
</head>

<body>
   <div>СОДЕРЖИМОЕ СТРАНИЦЫ</div>
</body>
</html>


Для создания HTML-копий страниц можно:

  1. Использовать рендеринг на своих серверах.
  2. Использовать рендеринг на аутсорсе.
  3. Использовать изоморфный JavaScript.

Существуют много готовых решений для рендеринга HTML-копий, поэтому, если вы используете популярный фреймворк (например, Angular), на внедрение HTML-копий страниц должно уйти всего несколько часов разработчика.

Рендеринг на своих серверах

Подходит для крупных проектов. Для рендеринга HTML-копий на своих серверах можно использовать следующие инструменты:

Рендеринг на аутсорсе

Подходит для небольших проектов. Для рендеринга HTML-копий на сторонних серверах можно использовать такие инструменты:

Изоморфный JavaScript

Изоморфный JavaScript позволяет выполнять рендеринг страницы как на сервере, так и в браузере пользователя. Таким образом, при первой загрузке страницы пользователь получает обычную HTML-страницу и JavaScript-приложение. Дальнейшая навигация по сайту для пользователя будет динамической, в то время как поисковые системы каждый раз будут получать HTML-версию страницы.

Такой подход к разработке сайта позволяет убить сразу двух зайцев: сайт получает все преимущества SPA-сайта и возможность продвижения в поисковых системах без дополнительных внедрений.

Обработка 404 страниц

Рендеринг страницы на SPA-сайтах происходит на стороне клиента, поэтому без дополнительных доработок код ответа несуществующей страницы будет 200 ОК.
Обработка 404 страниц

SPA-сайты должны корректно обрабатывать несуществующие страницы и отдавать в качестве заголовка страницы 404 ошибку.

Настройка Google Analytics

Стандартный код Universal Analytics выполняется при загрузке каждой новой страницы, а SPA-сайты подгружают контент динамически, «имитируя» переход между страницами. Для того, чтобы Google Analytics корректно обрабатывал переходы на страницах, необходимо сделать так, чтобы счетчик Universal Analytics активировался каждый раз, когда на сайте меняется URL.

Настроить Google Analytics для SPA-сайтов можно, используя Tag Manager и триггер «History» или — передавая данные вручную.

С помощью Tag Manager и триггера «History»

Использование HTML5 History API на SPA-сайтах позволяет настроить корректную работу счетчика Google Analytics в GTM с помощью триггера «History». Каждый раз при обновлении истории (смены URL, Title), тег Google Analytics будет активироваться повторно.

Для этого необходимо в настройках тега в качестве триггера указать дополнительный триггер:

Дополнительный триггер

Передача данных вручную

Каждый раз, когда в строке браузера меняется URL, необходимо передавать об этом информацию в Google Analytics.

Чтобы обновить счетчик, нужно использовать команду «set» и указывать новое значение переменной «page»:

ga('set', 'page', '/new-page.html');

Теперь все последующие обращения будут привязаны к новому URL. Чтобы передать информацию о просмотре страницы, нужно использовать команду «send» и указывать значение «pageview» сразу после обновления счетчика:

ga('send', 'pageview');

Более подробную информацию можно узнать в справке Google Analytics для одностраничных приложений.

Выводы

SPA-сайты — это настоящее и будущее, поэтому не нужно бояться брать в работу такие проекты. Single Page Application можно «подружить» с поисковыми системами. Чтобы ваш SPA-сайт был дружелюбен как к SEO, так и к пользователям я рекомендую:

  1. Использовать «традиционные» URL.
  2. Использовать изоморфные приложения или рендеринг HTML-копий.
  3. Настроить правильную отдачу заголовка «404 Not Found».
  4. Настроить корректную работу Google Analytics.
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (7)

  1. 0
    16 дней назад

    Здравствуйте, Александр.

    Наша команда разработала проект цветочного маркетплэйса Florier.by как SPA-приложение.

    Перед началом разработки запаслись теоретическими знаниями в области SEO-SPA. Релиз проекта вышел в декабре 2017 года. Но по истечении 4 месяцев мы видим, что площадка все еще плохо индексируется ботами. Google-бот проиндексировал толь 26 страниц из 300 (актуальный sitemap "скормили" ему еще 1,5 месяца назад).

    Всем ботам без исключения отдаем HTML-копии динамичных страниц.

    Может вы можете помочь советом?

    • 0
      Vitali Maisiuk
      13 дней назад

      Виталий, Добрый день!


      1. Если вы используете "#!" (Хешбенг), то указывать <meta name="fragment" content="!"> не нужно.
      2. Google перешел на рендеринг страниц. Поэтому, он сканирует содержимое не по адресу https://florier.by/?_escaped_fragment_=product/181/Buket-iz-sukhocvetov, а по основному адресу https://florier.by/#!product/181/Buket-iz-sukhocvetov
      3. Рендеринг страницы должен длиться не более 5 секунд. Официальных данных от Google нет, но наблюдается, что Google-bot сканирует содержимое которое было загружено в течении 5 секунд. У вас, эта цифра на страницах категорий в 3 раза больше. Поэтому, в индексе поисковых систем только карточки товаров.
      • 0
        Александр Шараевский
        11 дней назад
        Александр, большое спасибо за советы - завтра внесем изменения в проект и проанализируем поведение google-bot!
  2. 0
    22 дня назад
    А как выполнять сканирование сайта на ошибки? Если стандартные программы не работают.
    • 0
      Елена Воскобойник
      21 день назад

      Если используется "?_escaped_fragment_=" то можно брать карту сайта, добавлять ко всем URL этот префикс и запускать сканирование по списку URL.


      Если используется отдача копий по User-Agent, то можно запускать сканирование с нужным User-Agent.

  3. 1
    23 дня назад
    это вообще законно ?

Чтобы оставить комментарий, необходимо авторизироваться

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое