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



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

Как добавить больше 10 филиалов в Google Business Profile

Как добавить больше 10 филиалов в Google Business Profile У вас фирма с филиалами по всей стране? Короткий инструктаж по массовой загрузке адресов...

29 05 2023 8:41:13

Скелеты в шкафу РСЯ: как эффективно построить рекламную кампанию?

Как создавать результативные кампании в Рекламной сети Яндекса...

28 05 2023 9:21:24

Увеличиваем органический трафик — дооптимизация страниц сайта

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

27 05 2023 15:41:51

Хакерская атака на постаматы: как человек становится заложником технологий

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

26 05 2023 23:19:14

Как получить отзывы от клиентов

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

25 05 2023 0:12:40

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

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

24 05 2023 19:15:36

Как работать с Open Graph

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

23 05 2023 19:47:38

AMP-письма: что это, чем полезны, примеры лучших писем

AMP-письма: что это, чем полезны, примеры лучших писем Как создавать интеpaктивные рассылки-сайты и чем они хороши...

22 05 2023 17:27:36

Как загрузить фото в Instagram с компьютера

В статье описан ручной и самый безопасный из существующих метод...

21 05 2023 5:19:42

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

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

20 05 2023 11:50:55

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

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

19 05 2023 4:13:55

Engagement Rate в email-маркетинге: что это, как посчитать и повысить

Engagement Rate в email-маркетинге: что это, как посчитать и повысить Определяем, кто из mail подписчиков предан вашему бренду по-настоящему....

18 05 2023 11:49:26

Контент-маркетинг на США: 51 публикация за 5 месяцев

Контент-маркетинг на США: 51 публикация за 5 месяцев Кейс: контент-маркетинг сервиса в США, или как SerpStat покорил англоязычный мир...

17 05 2023 13:38:33

Что делать, если трафик на сайт резко упал

Что делать, если трафик на сайт резко упал Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....

16 05 2023 11:57:27

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

Сколько стоил клик Google Ads и Facebook в Украине в первом квартале 2018 года Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...

15 05 2023 14:40:34

Как определить ключевую метрику LTV перед запуском Apple Search Ads

Как определить ключевую метрику LTV перед запуском Apple Search Ads Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....

14 05 2023 12:18:26

SEO-продвижение интернет-магазина строительных товаров в Украине — рост трафика на 121% и дохода на 413%

SEO-продвижение интернет-магазина строительных товаров в Украине — рост трафика на 121% и дохода на 413% Мы достигли поставленных на старте продвижения целей: вернули потерянный трафик, получили дальнейший рост видимости сайта и увеличили доход....

13 05 2023 21:32:22

Что такое robots.txt и зачем вообще нужен индексный файл

У каждого сайта в топе есть страница, о существовании которой знают только роботы и... SEO-специалисты. Это robots.txt или индексный файл....

12 05 2023 9:38:38

Как стать контент-маркетологом в Netpeak Group

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

11 05 2023 14:40:42

Как оценить новый канал трафика?

Как оценить новый канал трафика? Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...

10 05 2023 11:38:43

SEMRUSH. Шпионаж за конкурентами при раскрутке сайтов

SEMRUSH. Шпионаж за конкурентами при раскрутке сайтов Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...

09 05 2023 20:32:22

Как использовать возможности поиска для решения бизнес-задач

Как использовать возможности поиска для решения бизнес-задач О возможностях нестандартного использования поисковых систем для решения важных бизнес-задач...

08 05 2023 6:55:40

Инструкция по работе с ***ytics Intelligence: как найти общий язык с Google ***ytics

Инструкция по работе с ***ytics Intelligence: как найти общий язык с Google ***ytics Не можете найти нужны отчёт в Google ***ytics? Или хотите ускорить поиск нужных данных и отчётов. В помощь ⏩ Обзор к Google ***ytics Intelligence....

07 05 2023 3:47:22

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

Как превратиться в робота и повысить продуктивность — советы для CEO Нет прокрастинации! Советы для личной эффективности от руководителя двух стартапов...

06 05 2023 7:53:45

Как получить контакты клиентов в Facebook с помощью чат-бота ManyChat

Инструкция по интеграции рекламной кампании с чат-ботом...

05 05 2023 8:58:38

Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе

Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...

04 05 2023 3:24:11

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

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

03 05 2023 23:44:36

Как правильно составить NDA

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

02 05 2023 11:37:30

Об экономике контента

Об экономике контента Почему кого-то ругают за плохие тексты, а у кого-то из-за таких же текстов берет интервью Юрий Дудь? И другие особенности контента: авторское право, копирайтинг. Читать!...

01 05 2023 23:12:54

Как установить пиксель Facebook и Instagram — отслеживаем целевые действия

Как установить пиксель Facebook и Instagram — отслеживаем целевые действия Пиксель Facebook — инструмент аналитики рекламной системы, который можно использовать и для Instagram....

30 04 2023 19:22:33

Продвижение мобильных приложений: метрики успеха в Google ***ytics

Продвижение мобильных приложений: метрики успеха в Google ***ytics Как отслеживать эффективность мобильного приложения в онлайн-режиме....

29 04 2023 1:43:25

Как привлечь трафик на сайт: 15+ эффективных способов

Как привлечь трафик на сайт: 15+ эффективных способов Наконец-то вы создали сайт. Вы потратили усилия на дизайн, разработку, его наполнение. Но этого оказалось недостаточно, чтобы о вашем интернет- ресурсе узнали. Как же привлечь посетителей на сайт?...

28 04 2023 23:25:56

AMP-страницы: как собрать достоверные данные

AMP-страницы: как собрать достоверные данные Получаем реальную статистику эффективности использования AMP-страниц с помощью АМР Client ID API....

27 04 2023 14:37:29

Рост небрендового трафика на 99% — кейс интернет-магазина Vodafone Retail Ukraine

Рост небрендового трафика на 99% — кейс интернет-магазина Vodafone Retail Ukraine За 10 месяцев сотрудничества увеличили небрендовый на 99%, а общий трафик — в два раза. Рассказываем не только о результатах, но и подходе создания реалистичного прогноза SEO-продвижения сайта. Читать дальше!...

26 04 2023 13:14:28

Digital-маркетинг по формуле 8Р

Примеры новой концепции Digital-маркетинга по формуле 8Р...

25 04 2023 8:57:23

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

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

24 04 2023 8:16:32

5 советов для специалистов по контекстной рекламе

5 советов для специалистов по контекстной рекламе Полезные советы для тех, кто делает контекст своими ручками :)...

23 04 2023 7:12:30

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

Кейс по продвижению интернет-магазина медицинских товаров: ROMI 32% Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...

22 04 2023 4:45:52

Как правильно «закрывать» свой сайт

Как правильно «закрывать» свой сайт Сотрудник Google расскажет о том, как присоединиться к протесту, не навредив сайту....

21 04 2023 2:31:19

Беседа Netpeak с клиентом — отвечаем на вопрос «как оценить эффективность агентства»

Беседа Netpeak с клиентом — отвечаем на вопрос «как оценить эффективность агентства» Взяли интервью у нашего клиента — магазина климатической техники Mircli.ru. Поговорили о том, как клиенту и подрядчику лучше взаимодействовать....

20 04 2023 10:42:33

Как проверить сезонность спроса

Сезонность — повторяющиеся колебания трафика сайта в зависимости от различных внешних факторов....

19 04 2023 23:14:14

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

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

18 04 2023 16:31:52

Макс Бурцев (Arriba) про большие идеи для брендов

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

17 04 2023 7:59:20

Что такое макет сайта и для чего он нужен

Что такое макет сайта и для чего он нужен Дизайн макета сайта должен полностью соответствовать представлениям о готовом ресурсе. Создать его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код...

16 04 2023 16:35:29

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

Как мы сделали инструмент веб-аналитики для сайта Ecommerce Зачем амбициозным онлайн-проектам индивидуальные инструменты веб-аналитики....

15 04 2023 10:51:45

Первопроходцы в нише ремонта мобильных телефонов в Казахстане — история Satel.kz

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

14 04 2023 19:18:31

Рейтинг директоров по маркетингу среди ecommerce-проектов Казахстана

Рейтинг директоров по маркетингу среди ecommerce-проектов Казахстана Помимо полезного и качественного продукта, услуги, компании нужен мощный маркетинг. И возможно это только благодаря хорошему директору по маркетингу. Только так это работает. Кто лучшие в этой нише в Казахстане? Узнать!...

13 04 2023 15:34:28

Старт нового рейтинга зарплат Serpstat: как коронакризис повлиял на заработок интернет-маркетологов в 2020

Старт нового рейтинга зарплат Serpstat: как коронакризис повлиял на заработок интернет-маркетологов в 2020 Узнайте зарплату интернет-маркетологов с новым рейтингом от Serpstat....

12 04 2023 14:38:55

Кейс по SERM для DOM.RIA. Как работать с репутацией и за четыре месяца убрать негатив в топ-10.

Кейс по SERM для DOM.RIA. Как работать с репутацией и за четыре месяца убрать негатив в топ-10. Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....

11 04 2023 21:57:12

Как подобрать низкочастотные запросы и для чего это нужно

Низкочастотные, низкоконкурентные, Long Tail и другие термины, которые нужно знать и понимать....

10 04 2023 22:54:45

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