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



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

7 признаков хорошего отдела по работе с клиентами

7 признаков хорошего отдела по работе с клиентами Структура того, чем обладают сотрудники департаментов работы с клиентами лучших компаний....

27 02 2024 0:56:13

Обзор трех новых типов микроразметки schema.org

Обзор трех новых типов микроразметки schema.org FAQ (frequently asked questions), HowTo и Q&A (questions and answers)....

26 02 2024 12:17:15

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

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

25 02 2024 17:57:36

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...

24 02 2024 16:23:24

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com Вывод информационного сайта из-под алгоритмического YMYL фильтра Google...

23 02 2024 22:38:45

Краткое руководство по системному управлению проектами в PPC

Краткое руководство по системному управлению проектами в PPC Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...

22 02 2024 10:57:17

Что такое релевантные страницы?

Что такое релевантные страницы? И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....

21 02 2024 10:51:35

10 полезных приемов работы в Редакторе AdWords

10 полезных приемов работы в Редакторе AdWords Как специалисту сэкономить время для создания и оптимизации кампаний, проверки орфографии и другие фишки. Советы из пpaктики....

20 02 2024 5:38:17

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

Что такое логическая структура сайта и зачем она нужна Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....

19 02 2024 0:27:26

Как делать цепляющую email-рассылку: советы экспертов

Как делать цепляющую email-рассылку: советы экспертов Рассказываем про маркетинговые техники продающих email рассылок...

18 02 2024 21:53:29

17 тезисов о том, как инвестировать в интернет-маркетинг

17 тезисов о том, как инвестировать в интернет-маркетинг Артем Шевченко (Epicentr), Михаил Рогальский (Monobank), Максим Дмитров (BSH Hausgeräte), Андрей Чумаченко (Netpeak) и другие участники конференции 8Р о том, как они рассчитывают инвестиции в интернет-маркетинг....

17 02 2024 20:39:57

Как руководителю построить сильную комaнду и не сойти с ума

Как руководителю построить сильную комaнду и не сойти с ума Есть 3 качества грамотного руководителя: самоорганизованность, скорость. четкость. А еще — уйма фишек организации рабочих процессов, которые применяют в Netpeak. Узнать!...

16 02 2024 9:16:13

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

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

15 02 2024 20:12:59

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

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

14 02 2024 17:16:12

Что такое показатель отказов и как его снизить

Что такое показатель отказов и как его снизить Влияет ли значение показателя отказов на ранжирование сайта в поисковых системах и стоит ли переживать из-за высоких показателей отказов? Узнать больше....

13 02 2024 16:27:52

Как работать с задачами — советы от Netpeak

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

12 02 2024 23:46:17

Сколько стоил клик по рекламе Ads, Директ и Facebook в Украине во втором квартале 2017

Сколько стоил клик по рекламе Ads, Директ и Facebook в Украине во втором квартале 2017 Я исследовал 23 миллиона кликов из Украины в Google Ads, Facebook, Директ и структурировал данные по 19 тематикам...

11 02 2024 12:22:56

Диагностика фидов — как быстро обнаружить и исправить ошибки программистов

Диагностика фидов — как быстро обнаружить и исправить ошибки программистов Распространенные ошибки в XML-фидах Google и Яндекс, CSV-фидах и как исправить их своими силами. Используем Notepad++, отладчик ленты Facebook и Excel. Узнать больше!...

10 02 2024 13:51:28

Кейс по контекстной рекламе в тематике «языковые курсы»

Кейс по контекстной рекламе в тематике «языковые курсы» Филиалы курсов в Таллине, Москве, Днепропетровске. Оказывается, нельзя так просто взять и посчитать ROMI (возврат маркетинговых инвестиций) в этой тематике....

09 02 2024 2:34:15

Креативное SEO: нестандартные методы продвижения для всех типов сайтов

Креативное SEO: нестандартные методы продвижения для всех типов сайтов Правильное продвижение сайта и нестандартные предложения по привлечению трафика...

08 02 2024 10:59:22

Как не терять звонки даже с двумя сотрудниками в call-центре

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

07 02 2024 13:53:18

Как запустить рекламу на Reddit — руководство для новичка

Как запустить рекламу на Reddit — руководство для новичка 330 миллионов активных пользователей и 14 миллиардов просмотров в месяц. Хорошо бы там запускать рекламные кампании....

06 02 2024 19:27:33

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

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

05 02 2024 4:54:52

Как получить рентабельность кампаний 400%, используя таргетированную рекламу в Facebook — кейс Secunda

Как получить рентабельность кампаний 400%, используя таргетированную рекламу в Facebook — кейс Secunda Все дело в формате объявлений Instant Experience с подключенным каталогом товаров. Нет, не только в нем. Узнать больше!...

04 02 2024 19:53:48

Как получить код ответа cервера для страниц сайтов прямо в доксе

Как получить код ответа cервера для страниц сайтов прямо в доксе Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....

03 02 2024 0:55:27

Фокус, обучение, контроль — три кита развития бизнеса. Хасан Исламов об истории Chocofamily

Фокус, обучение, контроль — три кита развития бизнеса. Хасан Исламов об истории Chocofamily Хасан Исламов о развитии Chocofamily, крупнейшего интернет-холдинга Казахстана....

02 02 2024 9:11:12

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

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

01 02 2024 10:38:15

Как подключить API Google Search Console к Google Таблицам

Как подключить API Google Search Console к Google Таблицам Новая инструкция, которую можно применять к любым задачам в Google Таблицах....

31 01 2024 9:35:31

Внутренняя кухня SEO: как починить А/В-тестирование в Google ***ytics с помощью Google Tag Manager. Кейс UniSender

Внутренняя кухня SEO: как починить А/В-тестирование в Google ***ytics с помощью Google Tag Manager. Кейс UniSender О проблеме с передачей данных об A/B-тестах в Google ***ytics...

30 01 2024 6:20:17

Как сделать разработчикам приятно — опыт Netpeak

Как сделать разработчикам приятно — опыт Netpeak Отличный способ мотивации, который мы попробовали и вам рекомендуем....

29 01 2024 4:14:26

Что такое SEO и зачем нужна поисковая оптимизация

Что такое SEO и зачем нужна поисковая оптимизация Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...

28 01 2024 1:56:23

Гeймификация: игровые сценарии для развития бизнеса

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

27 01 2024 22:37:54

10 ошибок молодого бизнеса в Instagram

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

26 01 2024 10:30:27

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать 82% малых бизнесов тонут как раз из-за проблем с денежными потоками (по данным исследований U.S. Bank, 2020). Как предприниматели попадают в кассовые разрывы и что делать в таких ситуациях, разберем в этой статье....

25 01 2024 17:26:46

Сколько стоил клик в Google Ads в Украине во втором квартале 2020 года — исследование Netpeak

Эти данные пригодятся в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Читать!...

24 01 2024 10:34:51

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

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

23 01 2024 20:58:13

Корпоративная культура Blizzard: как выглядит офис гeйм-гиганта и зачем сотрудникам дарят мечи и перстни

Как Blizzard реализует тимбилдинг, мотивирует сотрудников и превращает офис в музей...

22 01 2024 22:25:19

На что ориентироваться при составлении бюджета на рекламу

На что ориентироваться при составлении бюджета на рекламу Что делать перед составлением рекламного бюджета — инструкция для предпринимателей...

21 01 2024 21:52:47

Стадии формирования комaнд по Брюсу Такмену

Стадии формирования комaнд по Брюсу Такмену Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....

20 01 2024 4:27:45

Семь улучшений Netpeak: пять стратегий по контекстной рекламе, три по SEO и три новых курса Академии блога

Семь улучшений Netpeak: пять стратегий по контекстной рекламе, три по SEO и три новых курса Академии блога Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....

19 01 2024 22:58:57

Как настроить Google Shopping — руководство для новичков

Как настроить Google Shopping — руководство для новичков Как создать аккаунт в Google Merchant Center, загрузить и изменить фид с информацией о товарах, — делимся тонкостями настройки кампаний шопинга...

18 01 2024 17:14:26

Блоги, каналы и паблики об интернет-маркетинге — читательский рейтинг

Блоги, каналы и паблики об интернет-маркетинге — читательский рейтинг Думаете, что почитать об онлайн-продвижении и диджитал-маркетинге? Вам сюда. Мы собрали топ интересных сайтов, блогов, каналов и пабликов...

17 01 2024 19:53:42

Как делать email-рассылку без попадания в спам и что делать, если это случилось

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

16 01 2024 3:11:23

Обзор Netpeak Checker 2.1 — мультифункционального инструмента для массового анализа и сравнения сайтов

Обзор Netpeak Checker 2.1 — мультифункционального инструмента для массового анализа и сравнения сайтов Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....

15 01 2024 3:28:30

Как собрать ключевые запросы в Key Collector

Как собрать ключевые запросы в Key Collector Сбор ключевых запросов с помощью программы Кей Коллектор: показываем и рассказываем пошагово с демонстрацией процесса настройки с сервисом Яндекс.Вордстат. Читать дальше!...

14 01 2024 6:30:48

Как стать хорошим SMM-специалистом

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

13 01 2024 21:26:12

Звуковые уведомления в Facebook основаны на аккорде Fmaj7, ноты которого — FACE

Звуковые уведомления в Facebook основаны на аккорде Fmaj7, ноты которого — FACE История от первого лица про звуковые сигналы в Facebook....

12 01 2024 20:50:36

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

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

11 01 2024 1:17:26

8 секретов крутых заголовков для 1000 репостов в соцсетях

8 секретов крутых заголовков для 1000 репостов в соцсетях Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....

10 01 2024 9:46:23

Реклама в Telegram — кому она нужна. Мнение эксперта

Реклама в Telegram — кому она нужна. Мнение эксперта 160 символов — размер рекламного сообщения, 2 млн евро — минимальный бюджет для запуска. Уже интересно?...

09 01 2024 11:53:10

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