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



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

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

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

16 04 2026 8:11:29

Как наполнять контент-план — мнения редакторов

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

15 04 2026 19:40:43

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

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

14 04 2026 2:16:54

16 советов для продуктового бизнеса от спикеров конференции SaaS Nation

16 советов для продуктового бизнеса от спикеров конференции SaaS Nation Истории бизнеса и советы от Игоря Жаданова (Readdle), Александра Галкина (Competera) и Рагнара Саас (Pipedrive)...

13 04 2026 6:41:52

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce Аналитики из SalesForce уже в четвертый раз опубликовали исследование о приоритетах, составе комaнд и распределении бюджетов ведущими маркетологами мира...

12 04 2026 16:40:35

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...

11 04 2026 12:21:30

Once upon a time… 22 правила сторителлинга от Pixar

Как рассказывать истории...

10 04 2026 5:46:39

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....

09 04 2026 20:49:26

Мир К-pор: механика фанатских соцсетей — от популярности к монетизации

K-pop заpaбатывает деньги: как и сколько...

08 04 2026 20:54:44

Cколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2017

Cколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2017 Казахстанские реалии: данные по более 1 млн кликов в 23 тематиках и 15 городах....

07 04 2026 4:26:17

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

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

06 04 2026 0:24:37

Бизнес-фреш: Дэвид и Кестрел Ли о «нешелковом» пути западных брендов к сердцам пользователей в Китае

Бизнес-фреш: Дэвид и Кестрел Ли о «нешелковом» пути западных брендов к сердцам пользователей в Китае Покупать в Китае. Как брендам покорить сердца и кошельки китайских пользователей...

05 04 2026 9:13:25

«Лучший питч — продукт, клиенты и доходы». Интервью с Виталием Гончаруком о маркетинге Augmented Pixels

«Лучший питч — продукт, клиенты и доходы». Интервью с Виталием Гончаруком о маркетинге Augmented Pixels СЕО of Augmented Pixels рассказал нам о принципах ведения бизнеса в Украине и США, о ненужности бизнес-планов и креативных питчей, а также о способе стать лучшим программистом...

04 04 2026 11:50:25

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми Клиенты возвращаются к хорошему сервису, который начинается с понятного интерфейса на сайте, продолжается в общении с вежливым сотрудником и заканчивается в общении с воспитанным курьером или менеджером в пункте самовывоза. Что ещё? Читайте!...

03 04 2026 6:13:25

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

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

02 04 2026 18:57:44

Сeкc и эpoтика, магия, тренер-олень, и даже ребус! Апрельская реклама с блоком 18+

Чем шокировала, радовала и удивляла реклама в социальных сетях и контекстная в Google в апреле 2021 года...

01 04 2026 7:26:47

Топ-50 кейсов в блоге Netpeak

Топ-50 кейсов в блоге Netpeak Кейсы с наибольшим количеством комментариев, репостов, оценок и дочитываний; по контекстной рекламе, поисковому продвижению, аналитике, SMM и другие. Узнать больше!...

31 03 2026 1:40:56

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

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

30 03 2026 8:14:29

Сторителлинг как маркетинговый приём

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

29 03 2026 5:13:41

Как анализировать эффективность рекламы в Google ***ytics? Часть первая: персональные сводки

Как анализировать эффективность рекламы в Google ***ytics? Часть первая: персональные сводки Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...

28 03 2026 21:35:13

Что такое Дія City и почему компании поддерживают проект?

Что такое Дія City и почему компании поддерживают проект? Основные законы приняты. Что это значит?...

27 03 2026 2:12:35

Особенности SEO-продвижения сайтов медицинской тематики

Особенности SEO-продвижения сайтов медицинской тематики Более строгие требования к таким ресурсам обуславливают свои подходы....

26 03 2026 22:13:28

Как объединить несколько целей в одну кастомную конверсию Facebook с помощью Google Tag Manager

Как объединить несколько целей в одну кастомную конверсию Facebook с помощью Google Tag Manager Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....

25 03 2026 22:42:31

«Чёрная пятница» для интернет-магазинов США и Рунета

«Чёрная пятница» для интернет-магазинов США и Рунета Игроков интернета России, Уанета и Казнета зарубежные сайты coблaзняют семизначными результатами продаж во время «черной пятницы» и «киберпонедельника»....

24 03 2026 12:14:17

Как мы делаем SEO-аудит интернет-магазина — пошаговый мануал

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

23 03 2026 15:17:50

Как активизировать подписчиков по Франку Керну

Как активизировать подписчиков по Франку Керну Как превратить неактивных подписчиков в вовлеченную аудиторию....

22 03 2026 22:32:16

Что такое tone of voice и как использовать голос бренда в соцсетях

То, как мы разговариваем, важно не только в жизни, но и в соцсетях. Зачем нужен tone of voice и как сделать, чтобы ваш голос отличался от других и был эффективен? Читайте наш гайд....

21 03 2026 19:47:28

Чем наш PPC-отдел круче остальных?

Чем наш PPC-отдел круче остальных? Мария Гoлyб устала отвечать на вопрос «Какие преимущества PPC-отдела в Netpeak?» и решила написать об этом пост....

20 03 2026 0:34:39

Бизнес в Китае: история и реалии мирового лидера Tencent

Бизнес в Китае: история и реалии мирового лидера Tencent Tencent — китайская компания, мировой лидер в сфере игр. Все о создании компании, доходах, прибыли, инвестициях. Особенности ведения бизнеса в Китае — в пересказе статьи Паки Маккормик. Читать дальше!...

19 03 2026 8:21:18

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...

18 03 2026 12:55:26

Как продвигаться в Instagram, если у вас B2B-бизнес

Как продвигаться в Instagram, если у вас B2B-бизнес Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....

17 03 2026 23:29:24

Как быстрее создавать рекламные кампании для Google Ads и Директ с помощью API Serpstat

Как быстрее создавать рекламные кампании для Google Ads и Директ с помощью API Serpstat Как автоматически формировать и выгружать готовые рекламные кампании для Яндекс.Директ и Google Ads со структурой «одна группа объявлений — один key»...

16 03 2026 7:36:28

Дополнительные функции Zoom

Дополнительные функции Zoom Как обойти «Зал ожидания» и другие неочевидные фишки...

15 03 2026 10:43:47

Какую роль играют запахи?

Какую роль играют запахи? Аромамаркетинг. Почему В Нью-Йоркских магазинах Samsung пахнет медовой дыней, в British Airways — луговыми травами. Что мы знаем о восприятии нами сенсорной информации, а конкретно — ароматов. Читать дальше!...

14 03 2026 10:50:41

Какой таргетинг выбрать для объявлений в Google Ads

Какой таргетинг выбрать для объявлений в Google Ads Большинство рекламодателей знают и используют только 4-5 видов таргетинга, а остальные оставляют без внимания. А ведь правильно подобранная аудитория — это один из залогов успеха рекламной стратегии. Поэтому обязательно тестируйте новые таргетинги...

13 03 2026 0:38:32

Атрибуция Facebook: для чего нужна и как настроить

Атрибуция Facebook: для чего нужна и как настроить Как отслеживать конверсии при многокaнaльном взаимодействии покупателя с вашим сайтом? Читайте далее...

12 03 2026 12:24:22

Продвижение музыки в интернете

Продвижение музыки в интернете Раскрутка музыки онлайн: способы, методы, нюансы и примеры...

11 03 2026 11:54:13

Как узнать сколько стоит ваш сайт

Как узнать сколько стоит ваш сайт На что обратить внимание при покупке интернет-ресурса, какие факторы влияют на цену и что помогает определить качество сайта? Ответы на все эти вопросы в статье. Читать!...

10 03 2026 4:16:45

Как настроить счетчик Яндекс.Метрики

Как настроить счетчик Яндекс.Метрики Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....

09 03 2026 5:43:59

Аудит мобильной версии сайта — подробное руководство

Аудит мобильной версии сайта — подробное руководство О видах мобильных версий, их плюсах и минусах, а также советы по аудиту....

08 03 2026 4:16:15

LSI-текст или SEO-текст — выживет только один

LSI-текст или SEO-текст — выживет только один Специалисты, занимающиеся seo копирайтингом, рассказывают об использовании LSI: определение текста, кол во символов, подсчет слов онлайн...

07 03 2026 11:34:39

Демографический таргетинг в Google Ads

Демографический таргетинг в Google Ads Отныне мы можем настраивать показы рекламы на мужчин и женщин определенной возрастной группы....

06 03 2026 8:42:52

Сниппеты в выдаче Google –– что изменилось? Исследование Serpstat

Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....

05 03 2026 1:22:47

35 ошибок при А/В-тестировании

35 ошибок при А/В-тестировании Опыт контент студии WordFactory и 14 экспертов интернет-маркетинга....

04 03 2026 8:29:31

Кто такой ASO-специалист и чем выгодно освоить эту новую профессию в 2022 году

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

03 03 2026 10:24:43

Page Authority & Domain Authority

Page Authority & Domain Authority Что же такое эти authority и чем они лучше и полезнее, к примеру, чем Page Rank?...

02 03 2026 3:44:53

Редакционная политика Netpeak Journal — как писать так, чтобы вас хотели читать, а не править

Редакционная политика Netpeak Journal — как писать так, чтобы вас хотели читать, а не править Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...

01 03 2026 16:35:12

Как вывести сайт из-под фильтра Яндекса за накрутку поведенческих факторов

Как вывести сайт из-под фильтра Яндекса за накрутку поведенческих факторов Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...

28 02 2026 21:45:38

Реклама для интернет-магазина техники — запуск видеокампаний TrueView for Shopping и TrueView for Action

Реклама для интернет-магазина техники — запуск видеокампаний TrueView for Shopping и TrueView for Action Как рекламировать смартфоны в YouTube — советы крупному бизнесу по настройке и запуску эффективной рекламы. Важно: корректный анализ результатов. Узнайте как его сделать!...

27 02 2026 3:29:12

Как правильно создавать UTM-метки

Как правильно создавать UTM-метки Все, что нужно знать об UTM-метках: зачем использовать, как правильно сгенерить и анализировать....

26 02 2026 21:42:20

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