Как сделать 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.



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

5 способов повысить продажи с помощью социальных доказательств

5 способов повысить продажи с помощью социальных доказательств Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....

16 04 2026 2:26:22

Измеряем прирост базы подписчиков, как это делают email-маркетологи

Измеряем прирост базы подписчиков, как это делают email-маркетологи Разбираемся, как определить самые эффективные источники лидов....

15 04 2026 22:30:27

Кейс по таргетированной рекламе в тематике «одежда, обувь, аксессуары»: ROMI 348%

Кейс по таргетированной рекламе в тематике «одежда, обувь, аксессуары»: ROMI 348% Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....

14 04 2026 23:16:40

Запросы not provided — как получить больше информации

Запросы not provided — как получить больше информации Отслеживаем в статистике Google ***ytics посетителей пришедших через защищенное соединение в поиске Google....

13 04 2026 17:27:18

Как Octopus Events и Netpeak организовали офлайн-конференцию летом 2020-го — кейс

Как мы проводили самую летнюю конференцию в условиях постлокдayна, пандемии и неизвестности....

12 04 2026 20:19:29

Лучшие программы для редактирования подкастов

Лучшие программы для редактирования подкастов Подкаст — это аудиозапись в повествовательном, музыкальном, юмористическом формате. Создается с целью рекламы, увеличения потока посетителей на сайт и роста почитателей определенного продукта...

11 04 2026 18:26:45

Как настроить божественные списки ремаркетинга с помощью GTM

Как настроить божественные списки ремаркетинга с помощью GTM Несколько фишек Google Tag Manager, чтобы сделать продвинутые списки ремаркетинга....

10 04 2026 18:16:49

Рычаги управления людьми

Рычаги управления людьми Эта книга рекомендована к прочтению решительно всем :)...

09 04 2026 18:58:10

Apple тайно рекламирует приложения в гугле? Что это значит.

Apple тайно рекламирует приложения в гугле? Что это значит. Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....

08 04 2026 22:51:36

Восемь советов успешного запуска рекламной кампании в myTarget

Восемь советов успешного запуска рекламной кампании в myTarget Делимся фишками, которые облегчат работу как новичкам, так и специалистам....

07 04 2026 0:25:20

Long-tail SEO — как продвигаться по низкочастотным запросам и зачем это нужно

Long-tail SEO — как продвигаться по низкочастотным запросам и зачем это нужно Относящиеся к низкочастотным long-tail запросы при правильном подходе могут стать эффективным инструментом для увеличения трафика. Рассказываем почему, а главное — как....

06 04 2026 14:13:19

Кейс по email-маркетингу для интернет-магазина подарков — ROMI 100%

Кейс по email-маркетингу для интернет-магазина подарков — ROMI 100% Direct way. Как вложить 200 у.е. и получить 800 у.е....

05 04 2026 1:39:53

Кейс: учим поисковый движок распознавать грамматические ошибки

Кейс: учим поисковый движок распознавать грамматические ошибки Что поможет написать объявление без грамматических ошибок? В недрах агентства Netpeak рождается новый полезный сервис...

04 04 2026 6:15:37

Бесплатное и платное обучение в сфере интернет-маркетинга: SEO, контекстная реклама, язык R

Бесплатное и платное обучение в сфере интернет-маркетинга: SEO, контекстная реклама, язык R Обучение SEO, PPC, курс по изучению языка R, академии Netpeak Software, Serpstat и другие. Список обновляется....

03 04 2026 2:32:30

Как написать письмо с благодарностью

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

02 04 2026 16:29:13

Как улучшить показатель качества в Google Ads

Как улучшить показатель качества в Google Ads Раскрываем тайны показателя качества в рекламе гугл с помощью API...

01 04 2026 4:50:30

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

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

31 03 2026 16:17:47

IOS 14: Что это значит для рекламодателей Facebook

IOS 14: Что это значит для рекламодателей Facebook Реклама будет не настолько персонализирована, как сейчас....

30 03 2026 11:20:50

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....

29 03 2026 4:46:48

Группировка ключевых фраз для рекламных кампаний — подробный обзор методов

Группировка ключевых фраз для рекламных кампаний — подробный обзор методов Как правильно группировать ключевые фразы для релевантности рекламных кампаний...

28 03 2026 21:31:58

Уроки Google ***ytics — как добавить новый сайт в Google ***ytics

Уроки Google ***ytics — как добавить новый сайт в Google ***ytics Как настроить Google ***ytics и как открыть вход другому пользователю: подробный урок....

27 03 2026 10:27:25

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

Как настроить ретаргетинг в Яндекс.Директ — подробное руководство для новичков Как установить счетчик Метрики, грамотно настроить цели, сегменты и запустить рекламную кампанию по ретаргетингу в Яндекс.Директ...

26 03 2026 6:58:50

Как перейти на HTTPS за 12 часов и сохранить трафик

Как перейти на HTTPS за 12 часов и сохранить трафик Как перенести сайт с http на https и сохранить трафик, потратив минимум времени....

25 03 2026 1:22:35

Как продвигать видео YouTube в Google Рекламе

Как продвигать видео YouTube в Google Рекламе Есть восхитительная возможность продвинуть видео на YouTube с минимальными финансовыми потерями!...

24 03 2026 2:35:22

Кейс по привлечению платного трафика в тематике «оптовая торговля одеждой»: ROMI 345%

Кейс по привлечению платного трафика в тематике «оптовая торговля одеждой»: ROMI 345% О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...

23 03 2026 18:26:45

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов И уж если бумага стерпит все, интернет — тем более, а значит онлайн-исповедальне быть! И не только ей......

22 03 2026 21:23:22

Что такое Netpeak Group? Все, что нужно знать

Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....

21 03 2026 4:15:37

Как линкбилдер работает с поиском Яндекс

Как линкбилдер работает с поиском Яндекс SEO-специалист Константин Гайдук поделился с читателями блога постом о фишках работы линкбилдера с поиском Яндекс....

20 03 2026 9:24:25

Продвижение мобильного приложения — шпаргалка для строителей воронок продаж

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

19 03 2026 23:42:31

Как узнать покупателя в лицо: сегментируем аудиторию и моделируем персоны

Как узнать покупателя в лицо: сегментируем аудиторию и моделируем персоны Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...

18 03 2026 1:19:44

Контекстная реклама недвижимости на Кипре — в 5 раз больше лидов за 3 месяца

Контекстная реклама недвижимости на Кипре — в 5 раз больше лидов за 3 месяца Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...

17 03 2026 1:33:28

Влияние ссылок из социалок на ранжирование в поисковиках

Влияние ссылок из социалок на ранжирование в поисковиках Выдержка из интервью Дэнни Салливаном с представителями компаний Google и Bing...

16 03 2026 18:42:49

Как настроить воронку продаж через Google Tag Manager

Как настроить воронку продаж через Google Tag Manager Устраняем причины, по которым пользователи покидают сайт без покупки....

15 03 2026 23:40:58

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

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

14 03 2026 18:17:33

Номер телефона в формах — как помочь пользователю оставить номер на сайте

Номер телефона в формах — как помочь пользователю оставить номер на сайте Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...

13 03 2026 7:31:43

Статистика и аналитика аккаунта в Twitter — полезные инструменты

Статистика и аналитика аккаунта в Twitter — полезные инструменты Твиты, реплаи, ретвиты - как сделать правильные выводы из активности в Twitter? Об этом читайте в нашем посте....

12 03 2026 23:50:13

Как не слить бюджет при запуске контекстной рекламы

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

11 03 2026 8:33:39

Как мы снизили стоимость лида для клининга ковров в Эмиратах на 60%

Как мы снизили стоимость лида для клининга ковров в Эмиратах на 60% Услуга уровня элит-класса в конкурентной нише и не в самом простом для продвижения регионе. Рассказываем, как привели целевой трафик по минимальной цене. Узнать!...

10 03 2026 15:47:50

Дизайн email-рассылки: как мотивировать подписчиков

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

09 03 2026 14:44:40

Как с помощью разнообразия контент-плана увеличить доход от рассылок — кейс fatline.com.ua

Как с помощью разнообразия контент-плана увеличить доход от рассылок — кейс fatline.com.ua Новые триггеры, разнообразие рассылок и обновленная форма подписки дали нужный результат....

08 03 2026 6:56:25

Геотаргетинг: 10 способов увеличить охват целевой аудитории

Геотаргетинг: 10 способов увеличить охват целевой аудитории Как увеличить охват целевой аудитории ресторана или магазина с помощью рекламы на мобильных и сверхточного геотаргетинга...

07 03 2026 1:46:36

Как создать рассылку push-уведомлений. Чек-лист эффективной рассылки от Notix

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

06 03 2026 12:52:14

Почему не стоит покупать в Черную пятницу

Почему не стоит покупать в Черную пятницу Ежегодно в конце ноября начинается ажиотаж вокруг «огромных» скидок на Черную пятницу. Во всем мире этого дня ждут и готовятся покупать выгоднее. Но так ли это на самом деле?...

05 03 2026 4:26:59

Как выбрать редактора для корпоративного сайта

Как выбрать редактора для корпоративного сайта Нужен ли вашему проекту редактор? Как правильно его выбрать и оценить на собеседовании, а затем и в процессе работы?...

04 03 2026 7:57:23

Функции вычисляемых полей Google Data Studio

Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....

03 03 2026 8:23:53

Кейс: как спасти проект и увеличить органический трафик на 109% за 6 месяцев

Кейс: как спасти проект и увеличить органический трафик на 109% за 6 месяцев Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....

02 03 2026 1:25:41

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

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

01 03 2026 6:37:37

PPC-атавизмы — пять подходов, которые утратили актуальность

PPC-атавизмы — пять подходов, которые утратили актуальность Отличная работа SEO-специалистов прошлого, породила касту PPC-специалистов настоящего, которые все еще ориентируются на публикации из 2017, ведь они все еще в ТОПе выдачи....

28 02 2026 21:33:39

Как работать с оператором «квадратные скобки» в Вордстат?

Как работать с оператором «квадратные скобки» в Вордстат? Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...

27 02 2026 16:55:29

Big Data SEO — как заставить большие данные работать на ваш бизнес

Big Data SEO — как заставить большие данные работать на ваш бизнес Решение для поискового продвижения крупных проектов (от 300 000 страниц)....

26 02 2026 3:20:41

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