Как сделать SPA-сайты SEO-Friendly? > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


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

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

< >

Сайт на Ajax: как отдельным страницам попасть в выдачу В последнее время в работе специалистов 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-приложение обpaбатывает полученные данные и отображает их в браузере.
  6. При навигации по сайту обновляется не вся страница, а только необходимое содержимое.

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

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

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

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

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

Истории бизнеса и полезные фишки

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

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


Оптимизация индексации SPA-сайтов

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

Для 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, а робот Яндекса, обнаружив на странице мета-тег , запросит 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 Applicationtitle> <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 ОК.

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

Настройка Google ***ytics

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

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

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

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

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

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

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

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

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

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

ga(\\\'send\\\', \\\'pageview\\\') ;

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

Выводы

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

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



Комментарии:

Наука быть счастливым: бесплатный онлайн-курс от профессора из Йеля

Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...

29 09 2022 19:24:42

Раскрыт секрет гарантированного роста трафика из поиска, или Серебряная пуля SEO

Раскрыт секрет гарантированного роста трафика из поиска, или Серебряная пуля SEO О главном секрете поискового продвижения на основе исследования, которое проводилось в течение двух лет. Здесь отсеяны все проекты со слишком малой начальной посещаемостью и проекты с пробелами в аналитике. Узнайте больше, на чем строится рост трафика!...

28 09 2022 5:27:34

Как настроить отслеживание событий в Google ***ytics 4

Как настроить отслеживание событий в Google ***ytics 4 Подробное руководство по настройке отслеживания событий в GA4...

27 09 2022 6:39:23

Как быстро и без страданий сделать главную страницу сайта — MVP-подход

Как быстро и без страданий сделать главную страницу сайта — MVP-подход По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их....

26 09 2022 7:56:20

Метрики вовлеченности — ER или ERR? Как считать Engagement rate в Instagram и Facebook

Метрики вовлеченности — ER или ERR? Как считать Engagement rate в Instagram и Facebook Простой и понятный разбор двух формул для расчета коэффициента вовлеченности...

25 09 2022 15:27:59

93 шага к идеальному интернет-магазину — детальный чек-лист

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

24 09 2022 2:18:30

Что делать со старыми статьями в блоге

Что делать со старыми статьями в блоге Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....

23 09 2022 11:29:49

Небольшие IT компании

Небольшие IT компании Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...

22 09 2022 7:34:34

Как работает видеореклама — FAQ для заказчика

Как работает видеореклама — FAQ для заказчика Узнайте, подходят ли видеоролики для продвижения вашего бизнеса, и будет ли рентабельной видеореклама в YouTube...

21 09 2022 18:25:23

Почему для пользователей разных устройств нужны разные стратегии контекстной рекламы — кейс

Почему для пользователей разных устройств нужны разные стратегии контекстной рекламы — кейс Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....

20 09 2022 10:38:59

Что такое URL — как создать корректный адрес сайта

Что такое URL — как создать корректный адрес сайта Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...

19 09 2022 13:27:57

Как перенести кампании в Google Рекламу и Яндекс.Директ — подробное руководство для новичков

Как перенести кампании в Google Рекламу и Яндекс.Директ — подробное руководство для новичков Не хотите настраивать объявление в Google Рекламе и Яндекс.Директ по отдельности? Узнайте, как сделать экспорт кампании и сэкономить время....

18 09 2022 9:20:57

Почему я уволился из SEO-агентства

Почему я уволился из SEO-агентства Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...

17 09 2022 19:39:39

Как использовать регулярные выражения в Google ***ytics и Google Tag Manager

Как использовать регулярные выражения в Google ***ytics и Google Tag Manager Как поможет Regex Engines в работе с Google ***ytics и преимущества использования Regex в Диспетчере тегов Google. Узнать больше....

16 09 2022 8:49:22

Почему в США зарплаты СЕО приводят к дополнительным налогам?

Почему в США зарплаты СЕО приводят к дополнительным налогам? Как борьба с зарплатным неравенством становится трендом...

15 09 2022 14:20:55

Масштабный редизайн блога UniSender — рост органического трафика

Масштабный редизайн блога UniSender — рост органического трафика Как за полгода обновить корпоративный блог, зачем это может быть нужно. О том, как начинали с сегментации, внедряли SEO-рекомендации, оптимизировали ЧПУ, трaнcлитерацию, пагинацию и структуру блога вплоть до конкретной работы со статьями, рейтингами и их страницами...

14 09 2022 9:43:51

Личный кабинет клиента Netpeak 2.0

Личный кабинет клиента Netpeak 2.0 Личный кабинет на сайте: что нового во внешнем виде, внутренностях и отчетах, функционале и юзабилити, автоматизации работы с оплатами, интернет-представительстве клиента и для специалистов. Узнайте больше!...

13 09 2022 22:50:41

Как мы продвигали приложение в Instagram и получили CPI в два раза ниже, чем в Facebook

Как мы продвигали приложение в Instagram и получили CPI в два раза ниже, чем в Facebook Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...

12 09 2022 0:26:58

Внутренние факторы ранжирования — как сделать сайт понятным для поисковых систем

Внутренние факторы ранжирования — как сделать сайт понятным для поисковых систем Краткая инструкция для новичков. Структура сайта, внутренняя перелинковка, юзабилити, контент, оптимизация тегов и заголовков, HTTPS, скорость загрузки сайта, mobile friendly и другие. Узнать больше!...

11 09 2022 18:14:13

Как быстро подобрать темы для информационных статей

Как быстро подобрать темы для информационных статей Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...

10 09 2022 23:38:46

Обновление Яндекс.Директ Коммaндер — обзор бета-версии

Обновление Яндекс.Директ Коммaндер — обзор бета-версии В конце октября Яндекс начал открытое бета-тестирование новой версии Коммaндера. Я решила уже сейчас проверить все плюсы и минусы новой версии сервиса...

09 09 2022 16:26:39

Декабрьский апдейт от Google — влияние на YMYL-сайты

Декабрьский апдейт от Google — влияние на YMYL-сайты Свежесть и актуальность контента — главные уроки из Google December 2020 Core Update. Почему — читайте в статье....

08 09 2022 8:55:19

Как я работаю: рассказ PPC-специалиста

Как я работаю: рассказ PPC-специалиста Как специалисту с нуля обучиться контекстной рекламе и совмещать работу с хобби...

07 09 2022 14:23:16

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць Как подготовиться и сделать из интервью полноценную историю, которая будет интересна аудитории...

06 09 2022 10:20:54

10 лучших книг о маркетинге

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

05 09 2022 4:43:46

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...

04 09 2022 19:33:10

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

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

03 09 2022 1:43:15

Аналитический инструмент для сервиса заказа билетов — контролируем бюджеты сотен мероприятий в реальном времени

Аналитический инструмент для сервиса заказа билетов — контролируем бюджеты сотен мероприятий в реальном времени Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...

02 09 2022 8:56:17

Как эффективно использовать Network в Chrome DevTools

Как эффективно использовать Network в Chrome DevTools Чем полезна вкладка Network в DevTools для SEO-специалиста...

01 09 2022 18:15:32

Как отслеживать клики по телефонным номерам

Как отслеживать клики по телефонным номерам Быстрый и бесплатный способ настройки целей через Google Tag Manager....

31 08 2022 11:34:30

Поведенческая аналитика — что мешает клиенту сделать заказ

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

30 08 2022 17:55:10

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года Ежеквартальное исследование Netpeak по стоимости клика...

29 08 2022 7:26:51

Как загрузить статистику рекламных кампаний из API Facebook с помощью языка R

Как загрузить статистику рекламных кампаний из API Facebook с помощью языка R Хотите качественно руководить рекламной кампанией в Facebook? Как подключиться к API Facebook и получение статистики в R — рассказывает Алексей Селезнев....

28 08 2022 19:14:40

16 отчетов Яндекс.Метрики для анализа сайта и аудитории

16 отчетов Яндекс.Метрики для анализа сайта и аудитории Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....

27 08 2022 13:31:22

Как повысить продажи брендовых украшений на 8-е марта. Кейс Pandora

Как повысить продажи брендовых украшений на 8-е марта. Кейс Pandora Стратегия продвижения, благодаря которой удалось снизить стоимость заявки от покупателей. Рассказываем об особенностях проведения акций в нише. Узнать больше!...

26 08 2022 6:42:20

Инструменты для веб-аналитики

Инструменты для веб-аналитики Инструменты веб-мастера: что может заменить Google ***ytics?...

25 08 2022 17:19:31

Чек-лист SMM-стратегии: готовимся к продвижению в соцсетях

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

24 08 2022 3:13:34

Почему мы играем или не играем в игры

Почему мы играем или не играем в игры Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....

23 08 2022 3:37:33

Кейс по продвижению интернет-магазина детской обуви: ROMI 135%

Кейс по продвижению интернет-магазина детской обуви: ROMI 135% Покажем, как продвигать сайты, продающие детскую обувь...

22 08 2022 0:35:16

A/B тестирование в email-маркетинге: что это, типы, и топ идеи для сплит тестирования

Как понять, что именно нравится подписчикам в вашей рассылке...

21 08 2022 9:45:36

Как продвигать премиум-продукты — аутрич кейс бренда High-End акустики Copra

Как продвигать премиум-продукты — аутрич кейс бренда High-End акустики Copra Кейс о том, как написать большинству дилеров премиальных акустических систем в Европе и ничего не продать. И почему это кейс, а не антикейс....

20 08 2022 9:46:49

Что такое XML-feed: как его создать и отредактировать

Что такое XML-feed: как его создать и отредактировать XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...

19 08 2022 1:53:49

Что такое SEO и зачем нужна поисковая оптимизация

Что такое SEO и зачем нужна поисковая оптимизация Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...

18 08 2022 21:38:31

Как работают платежные системы для интернет-магазинов

Как работают платежные системы для интернет-магазинов Каждому бизнесу в интернете важно продумать систему оплаты для своих товаров или услуг. При этом следует учитывать объемы и нишу бизнеса. Узнать больше!...

17 08 2022 3:46:36

Правила работы с отзывами клиентов — памятка для брендов

Правила работы с отзывами клиентов — памятка для брендов От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...

16 08 2022 2:53:45

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255%

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255% Наибольшее количество онлайн транзакций было получено по брендовым запросам женского белья...

15 08 2022 19:44:36

Массовые изменения в Google Ads Editor

При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....

14 08 2022 13:45:51

Вакцинация от Covid-19 в Украине: как организовать для сотрудников офиса

Вакцинация от Covid-19 в Украине: как организовать для сотрудников офиса Оставить заявку на горячей линии МОЗ — это только вершина айсберга. Необходимо провести опрос среди сотрудников компании. И не один. А ещё подготовить несколько помещений для вакцинации и отдыха. Узнать больше!...

13 08 2022 12:57:52

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ Как использовать автостратегии для экономии рекламного бюджета...

12 08 2022 7:23:19

Кто есть кто в комaнде проекта?

Кто есть кто в комaнде проекта? Всё, что нужно знать заказчикам услуг о внутренней кухне PM-специалистов...

11 08 2022 6:24:10

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::