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



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

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

Как быстро увеличить продажи — мнения руководителей отделов продаж Как повысить результаты продаж в режиме цейтнота. Советы новому руководителю от специалистов Netpeak Group. Больше подробностей — в посте...

20 06 2025 2:43:28

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

Как собрать миллион подписок на рассылку за год: советы от BuzzFeed Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....

19 06 2025 13:18:48

TikTok, Banda, Rocket, I am IDEA и McCann Kyiv — идеи для видеоконтента

TikTok, Banda, Rocket, I am IDEA и McCann Kyiv — идеи для видеоконтента Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....

18 06 2025 1:35:24

Кейс по продвижению интернет-магазина цветов: ROMI 187%

Кейс по продвижению интернет-магазина цветов: ROMI 187% SEO для цветочных магазинов с оплатой за трафик и полученные результаты...

17 06 2025 0:34:10

Интервью с Дмитрием Гончаренко, руководителем SaaS-системы управления проектами «ПланФикс»

Интервью с Дмитрием Гончаренко, руководителем SaaS-системы управления проектами «ПланФикс» За каждым проектом стоят прежде всего люди. Как часто мы пользуемся сложными системами и не думаем о том, кто их создал и продолжает развивать? Интересно о том, кто и что стоит за «ПланФиксом». Читайте далее!...

16 06 2025 6:32:10

Кейс по SEO-продвижению магазина сантехники, садовой техники, электроинструментов: ROMI 4157%

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

15 06 2025 1:11:27

Как с помощью ASO увеличить количество бесплатных установок на 25% — кейс monobank

Как с помощью ASO увеличить количество бесплатных установок на 25% — кейс monobank Нам удалось увеличить количество органических показов на 63% и установок на 25%....

14 06 2025 22:34:59

Комикс о проверке гипотез и человеческом факторе

Комикс о проверке гипотез и человеческом факторе Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...

13 06 2025 15:27:30

Почему Google Merchant Center может заблокировать аккаунт

Почему Google Merchant Center может заблокировать аккаунт На что обращает внимание система и менеджеры Google при проверке сайта и аккаунта....

12 06 2025 8:46:12

Как настроить автоматические правила в Facebook? Подробное руководство

Как настроить автоматические правила в Facebook? Подробное руководство Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...

11 06 2025 18:49:27

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка Алгоритм технической подготовки IP-адреса к массовым рассылкам...

10 06 2025 14:15:51

Кейс МегаДом. Как сдать в аренду 1200 кв. м торговых площадей в условиях пандемии

Кейс МегаДом. Как сдать в аренду 1200 кв. м торговых площадей в условиях пандемии Особенности продвижения локального офлайн-бизнеса...

09 06 2025 6:39:43

Как работает программатик-баинг

Небольшая wiki о программатик-баинг и RTB. Объяснение алгоритма, обзор рынка, мнения экспертов....

08 06 2025 22:28:10

Конвертируем валюту с помощью Google Tag Manager

Что делать, когда код электронной торговли в одной валюте, а аккаунты Google ***ytics/Google Ads — в другой. И нужной валюты нет в списке возможных....

07 06 2025 20:26:37

Как переселить стартап в Кpaков: советы от Ярослава Легенчука

Как переселить стартап в Кpaков: советы от Ярослава Легенчука Ярослав Легенчук поделился историей успешного «переезда» площадки IT-продукта из Рунета в страны ЕС...

06 06 2025 5:32:44

Как повысить CTR объявлений с помощью расширений

Как добиться 100% пользы от контекстных объявлений с помощью расширений...

05 06 2025 23:27:20

[SEO настоящего] под микроскопом

[SEO настоящего] под микроскопом [SEO 2.0] — это продукт для бизнеса от Netpeak, он включает в себя принципиально новый подход к продвижению сайтов....

04 06 2025 14:40:41

Отделяем мух от котлет в контент-маркетинге

Отделяем мух от котлет в контент-маркетинге Пpaктическая информация о том, что и куда нужно постить....

03 06 2025 23:57:19

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

Сколько стоил клик Яндекс.Директ и Google Ads в Казахстане в четвертом квартале 2017 года Почти 3 миллиона клика в 24 тематиках в 15 городах Казахстана. Читайте новое исследование нашего аналитика....

02 06 2025 0:34:30

Постэффект контекстной рекламы

Постэффект контекстной рекламы Контекстная реклама и ее эффективность: как долго длится, как измерить, что бывает, как заканчиваются деньги....

01 06 2025 23:51:31

Как успешно вести блог в Instagram

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

31 05 2025 20:38:22

Какова длина идеального текста для Интернета?

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

30 05 2025 8:12:12

3D-печать в Украине — как стать миллионером

3D принтер — заработок миллионеров будущего! Тех, кто сейчас смог купить и начал заниматься ими или использует их в бизнесе, ждет объемный успех через каких-нибудь 3-5 лет....

29 05 2025 15:53:36

Как бренды по-злому шутят в рекламе

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

28 05 2025 22:55:26

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

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

27 05 2025 16:31:28

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....

26 05 2025 0:57:21

Как отслеживать трафик PBN-сайтов

Как отслеживать трафик PBN-сайтов Если в сетке сайтов есть интересный домен, его можно использовать для дополнительной монетизации, а не только для ссылок. В таком случае важно знать, как правильно отслеживать трафик таких доменов....

25 05 2025 22:50:56

Что такое скрам — инструкция для новичков

Что такое скрам — инструкция для новичков Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....

24 05 2025 17:35:49

Как передать данные из Google ***ytics в таблицы с помощью GTM

Как передать данные из Google ***ytics в таблицы с помощью GTM Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...

23 05 2025 15:53:44

Как подготовить описание приложения в GooglePlay? Шпаргалка

Как подготовить описание приложения в GooglePlay? Шпаргалка Блиц-инструкция и рекомендации по созданию эффективных описаний для мобильных приложений...

22 05 2025 7:48:41

Сколько получают интернет-маркетологи? Обновленный рейтинг зарплат специалистов

Сколько получают интернет-маркетологи? Обновленный рейтинг зарплат специалистов Сбор анкет до 16 декабря, публикация результатов в конце декабря...

21 05 2025 2:47:26

Прием антисептика внутрь, парень-микрофончик и открыть рот за $9: реклама в соцсетях в феврале 2021

Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...

20 05 2025 7:40:21

Бесплатные обратные звонки — модель freemium в действии

Бесплатные обратные звонки — модель freemium в действии Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....

19 05 2025 2:55:31

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

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

18 05 2025 13:34:54

Как делать картинки для соцсетей в Canva

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

17 05 2025 11:57:13

Как бизнесу сэкономить на digital-услугах в кризис: 6 рабочих способов

Как бизнесу сэкономить на digital-услугах в кризис: 6 рабочих способов Разбираем на примерах коллабораций, подрядчиков из регионов и тендендерных площадок...

16 05 2025 19:29:31

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

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

15 05 2025 14:21:51

Трудности с рекламными инструментами Facebook — что может пойти не так

Трудности с рекламными инструментами Facebook — что может пойти не так Объявление или кабинет блокируют из-за эмоджи. Что делать?...

14 05 2025 1:17:43

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

Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....

13 05 2025 10:42:48

Гонитесь за гарантией и прозрачностью в SEO-услугах? А их нет!

Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...

12 05 2025 21:51:17

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

Как растёт рынок электромобилей и почему экология здесь не главное: на примере Honda Почему популярность электромобилей растет и как это связан с продажей углеродных квот...

11 05 2025 14:56:43

Коммерческое ранжирование Яндекса (перевод)

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

10 05 2025 19:16:55

Рамзи Ризк про EyeEm и будущее мобильных приложений

Основатель сервиса мобилографии EyeEm Рамзи Ризк рассказал об особенностях своего сервиса и будущем мобильных приложений....

09 05 2025 11:30:10

Что такое ASO и как правильно продвигать мобильное приложение

Что такое App Store optimization и как раскручивать мобильные приложения...

08 05 2025 4:47:39

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

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

07 05 2025 15:20:26

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

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

06 05 2025 5:24:49

Фидбек от покупателей: о чем, зачем и как спрашивать

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

05 05 2025 0:29:46

Что такое Netpeak Friends Day и почему его стоит посетить

Что такое Netpeak Friends Day и почему его стоит посетить А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...

04 05 2025 2:30:15

Продвинутый подход к работе с аудиториями Facebook

Продвинутый подход к работе с аудиториями Facebook В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...

03 05 2025 17:39:46

Как настроить языковую версию сайта

Если выполнить настройку не корректно, поисковик воспримет материалы как дубли контента....

02 05 2025 14:52:23

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