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

Сайт на Ajax: как отдельным страницам попасть в выдачу В последнее время в работе специалистов Netpeak Agency много сайтов, использующих
Статья будет полезна SEO-специалистам и владельцам сайтов, которые хотят перейти на Single Page Application, но не решаются, потому что SPA могут «поссориться» с поисковыми системами.
Что такое SPA
SPA (Single Page Application) — одностраничное JavaScript приложение, которое запускается и работает в браузере. В отличии от «традиционного» сайта, архитектура на SPA-сайтах построена так, что рендеринг страницы полностью происходит на стороне клиента, а не на стороне сервера.
В браузере пользователя запускается JavaScript-приложение, а все необходимое содержимое страниц динамически загружается с помощью AJAX. Навигация по сайту происходит без перезагрузки страниц. За счет такой архитектуры, SPA-сайты работают быстрее, чем «традиционные» сайты.
Рассмотрим детальнее, как происходит загрузка и рендеринг содержимого на SPA-сайтах:
- Пользователь запрашивает HTML содержимое сайта.
- В ответ приходит JavaScript-приложение.
- Приложение определяет, на какой странице находится пользователь, и какое содержимое ему нужно отобразить.
- С помощью AJAX пользователь получает необходимый контент: CSS, JS, HTML и текстовый контент.
- JavaScript-приложение обpaбатывает полученные данные и отображает их в браузере.
- При навигации по сайту обновляется не вся страница, а только необходимое содержимое.
Плюсы 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-страницы:
- Использовать «?_escaped_fragment_=».
- Отдавать роботу 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-копий страниц можно:
- Использовать рендеринг на своих серверах.
- Использовать рендеринг на аутсорсе.
- Использовать изоморфный 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, так и к пользователям, я рекомендую:
- Использовать «традиционные» URL.
- Использовать изоморфные приложения или рендеринг HTML-копий.
- Настроить правильную отдачу заголовка «404 Not Found».
- Настроить корректную работу Google ***ytics.
Комментарии:
Работа велась с конца августа прошлого года до конца декабря и включила в себя анализ рынка, конкурентов, целевой аудитории, поиск инсайта, разработку стратегии, подготовку медиаплана, создание промо-сайта и само проведение рекламной кампании, в котором б...
08 06 2026 1:50:11
Как настроить программу Obsidian для удобной и быстрой работы по системе Zettelkasten....
07 06 2026 15:35:43
Самопомощь по тревоге во время карантина и экономического кризиса...
06 06 2026 20:33:10
Какие регионы и тематики наиболее выгодно продвигать в каждом из представленных рекламных сервисов, где наибольшая доля мобильного трафика, и другая полезная статистика....
05 06 2026 9:48:41
Платные и бесплатные способы ускорить оптимизацию....
04 06 2026 20:34:14
Откуда берутся установки и стоит ли тратить деньги на покупку мотивов...
03 06 2026 6:51:10
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
02 06 2026 23:31:35
Особенности продвижения локального офлайн-бизнеса...
01 06 2026 6:55:13
Изначально необходимо планировать продолжительное сотрудничество с агентством для достижения поставленных целей. В своей стратегии мы использовали сезонность, чтобы достичь максимальных результатов для клиента...
31 05 2026 13:50:38
Заработок в четверть миллиона. Как многофункциональная SEO-платформа Serpstat из Netpeak Group стала самым продаваемым продуктом на AppSumo — пошаговая история-инструкция...
30 05 2026 20:26:49
Дизайн макета сайта должен полностью соответствовать представлениям о готовом ресурсе. Создать его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код...
29 05 2026 0:57:53
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
28 05 2026 16:49:18
Суперспособности фрилансера: как понять свою прокрастинацию, распознать мошенников и решать проблемы, связанные с удалёнкой...
27 05 2026 19:43:42
Объясняем по пунктам, как создать и правильно настроить DSA c таргетингом на фид и содержание сайта...
26 05 2026 19:18:20
О главном секрете поискового продвижения на основе исследования, которое проводилось в течение двух лет. Здесь отсеяны все проекты со слишком малой начальной посещаемостью и проекты с пробелами в аналитике. Узнайте больше, на чем строится рост трафика!...
25 05 2026 14:56:55
Реклама будет не настолько персонализирована, как сейчас....
24 05 2026 7:15:58
Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....
23 05 2026 8:37:56
Хороший пост с примерами продающих «Белых книг»....
22 05 2026 12:55:17
Как внедрить Business Intelligence для малого и среднего бизнеса....
21 05 2026 12:18:22
Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....
20 05 2026 16:54:25
Организаторам мероприятий, коллегам из PR-сферы и невестам о том, как делегировать важные мероприятия внешнему подрядчику...
19 05 2026 1:47:41
Рассказываем про маркетинговые техники продающих email рассылок...
18 05 2026 18:39:41
Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...
17 05 2026 7:39:56
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
16 05 2026 23:20:32
После обновления мессенджера появился нужный инструмент...
15 05 2026 20:55:51
SEO-специалист Константин Гайдук поделился с читателями блога постом о фишках работы линкбилдера с поиском Яндекс....
14 05 2026 14:43:12
В третьем квартале Netpeak внедрил множество крутых улучшений. Мы подробно расскажем о семи самых интересных новостях....
13 05 2026 13:44:22
Из нового исследования вы узнаете, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года...
12 05 2026 12:48:58
Персональная стратегия продвижения онлайн с помощью SEO и контекстной рекламы....
11 05 2026 20:46:14
Зачем амбициозным онлайн-проектам индивидуальные инструменты веб-аналитики....
10 05 2026 11:57:16
Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...
09 05 2026 7:51:43
Как анализировать конкуренты и делать правильные выводы для развития бизнеса....
08 05 2026 23:55:48
зеркальные нейроны и сознание. как они влияют на наше поведение?...
07 05 2026 2:10:52
Узнайте зарплату интернет-маркетологов с новым рейтингом от Serpstat....
06 05 2026 11:25:42
Как автоматизировать рутину в Google Таблицах с помощью Google Apps Script...
05 05 2026 15:19:56
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
04 05 2026 10:14:15
9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....
03 05 2026 18:21:47
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
02 05 2026 19:44:42
Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...
01 05 2026 22:27:47
Supplemental results, они же «сопли» или дополнительные результаты — страницы и документы сайта, которые не находятся в основном индексе Google...
30 04 2026 0:25:20
Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...
29 04 2026 12:56:24
Более строгие требования к таким ресурсам обуславливают свои подходы....
28 04 2026 0:42:30
Основатель фейсбука опубликовал на WIRED крутое интервью...
27 04 2026 22:34:38
Сотрудник Google расскажет о том, как присоединиться к протесту, не навредив сайту....
26 04 2026 8:46:30
Ссылки называются вечными, потому что их внедряют один раз и навсегда, но это не значит, что такие ссылки однажды не удалят (что поведет к потере трафика). Узнать больше!...
25 04 2026 7:35:53
Создание даже короткого ролика может стоить дорого. Поэтому можно использовать бесплатный инструмент Bumper Machine от Google....
24 04 2026 14:56:51
Какие шрифты бывают, для чего они предназначены, где найти самый подходящий шрифт и как его правильно использовать?...
23 04 2026 22:44:38
Сколько страниц на самом деле показывает и может перевести поисковик Google?...
22 04 2026 9:22:23
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
21 04 2026 0:44:29
Кейс о том, как написать большинству дилеров премиальных акустических систем в Европе и ничего не продать. И почему это кейс, а не антикейс....
20 04 2026 20:10:34
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::