Как сделать 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.
Комментарии:
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
26 04 2024 16:27:13
Расскажу, как подобрать картинку на рабочий стол объявления в Рекламной сети Яндекса, и приведу небольшой кейс о том, как это делали мы для агентства путешествий...
25 04 2024 10:41:34
Твиттереть нужно правильно. Интересная аналитики и планирование твитов по времени...
24 04 2024 15:52:59
Мануал по созданию удобного планировщика повторяющихся действий....
23 04 2024 19:52:45
Мы решили узнать, как дорого обходятся рекламодателям клики по объявлениям в разных странах и тематиках, чтобы читателям блога было удобнее планировать бюджет на рекламные кампании....
22 04 2024 5:26:19
RFM — это аббревиатура слов Recency, Frequency, Money — новизна, частота, деньги. То есть считаем, как давно клиент купил товар в последний раз, сколько всего покупок он сделал и сколько денег принес нам за все время заказов....
21 04 2024 22:31:36
Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...
20 04 2024 20:19:51
Тестирования наличия важных тегов на целевых страница — бесплатный скрипт и алгоритм...
19 04 2024 19:31:18
Специалисты дропшиппинг-платформы делятся данными по самым продаваемым товарам на крупных онлайн-площадках. Информация для масштабирования бизнеса. Читать!...
18 04 2024 2:35:26
Данные по 22,4 миллионам кликов в 46 тематиках и 392 населенных пунктах страны — собрана статистика исключительно по проектам агентства Netpeak. Узнать больше!...
17 04 2024 20:14:32
Рынок мобильных приложений и его глобальные тренды из исследования App Annie...
16 04 2024 8:46:44
Лучшие маркетинговые и бизнес-фишки от Давида Брауна (Weblium), Владислава Флакса (OWOX), Александра Галкина (Competera), Люси Литерадо (Reply.io), Вадима Нехая (Depositphotos), Валерия Грабко (PromoRepublic), Игоря Дебатура (Uploadcare), Руслана Савчишин...
15 04 2024 2:32:14
Как Blizzard реализует тимбилдинг, мотивирует сотрудников и превращает офис в музей...
14 04 2024 9:13:30
Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....
13 04 2024 18:19:38
Об особенностях реализации интернет-проектов в Великобритании, России и Казахстане и фишках успешного ведения бизнеса онлайн мы побеседовали с Владимиром Меркушевым — руководителем интернет-проектов успешной казахстанской компании Kolesa.kz....
12 04 2024 9:12:28
Если у вас есть продукт, о котором миру стоит узнать, книга Pitch perfect придется вам очень кстати....
11 04 2024 2:42:21
Советы специалистов Netpeak: виды фильтров Google, что с этим делать и как снять ручные санкции Google....
10 04 2024 11:46:29
Прежде чем использовать феминитивы в коммуникации со своими клиентами и сотрудниками, убедитесь, что им это нужно и важно. Впрочем, ждите негатива при любом раскладе. Что с ним делать? Рассказываем....
09 04 2024 18:33:18
Перед нами стояла цель увеличить поисковый трафик и видимость, не охватывая новые города. Через 8 месяцев после старта сотрудничества сайт переносили на новый front-end. Узнать больше!...
08 04 2024 4:44:54
Делайте анализ ссылочной массы хотя бы раз в месяц — и будет вам счастье....
07 04 2024 6:19:22
Каждому бизнесу в интернете важно продумать систему оплаты для своих товаров или услуг. При этом следует учитывать объемы и нишу бизнеса. Узнать больше!...
06 04 2024 20:50:40
Работающие способы повысить эффективность рекламных кампаний...
05 04 2024 7:17:42
Ежеквартальное исследование Netpeak по стоимости клика...
04 04 2024 10:18:45
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
03 04 2024 23:10:21
Реклама мобильных приложений. Хотите показывать рекламу в играх? Вам сюда. Узнайте как правильно настроить показ рекламы на мобильных устройствах....
02 04 2024 0:25:18
Цель — трафик facebook. Делимся кейсом проекта «Мой город»....
01 04 2024 11:17:20
Об истории и значении поговорок и других фразеологических оборотов...
31 03 2024 16:41:13
Чем радовала, удивляла и шокировала таргетированная реклама в социальных сетях...
30 03 2024 8:21:30
Как определить, что SEO-продвижение не будет в тягость, что и кого читать начинающему специалисту...
29 03 2024 13:52:59
Забавные и полезные штуки от Google и как их найти...
28 03 2024 0:27:39
Как автоматизировать рутину в Google Таблицах с помощью Google Apps Script...
27 03 2024 21:14:32
Как найти релевантный сайт-донор для размещения своей ссылки...
26 03 2024 15:22:33
Учим правильно платить за верхние строчки показов объявления: настройка быстрых звонков из поисковых объявлений «Только номер телефона» Google Ads...
25 03 2024 7:52:11
Важно: понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Вот почему вам может быть полезно это исследование. Читать....
24 03 2024 9:46:29
И чем этот тип отслеживания событий отличается от Client-side. Узнать!...
23 03 2024 14:12:48
Как мы создаем BI-решение для департамента поискового продвижения — первые шаги...
22 03 2024 15:13:46
Со старта сотрудничества, рост видимости сайтов клиента вырос в 15 раз....
21 03 2024 6:19:50
Функционал для специалистов и новичков: как настраивать особые правила. Знания, которые помогают предотвратить грубые ошибки в рекламе товаров и услуг. Читать дальше!...
20 03 2024 4:49:36
Масштабируем кампанию в Google за счет управления конверсиями и работы с эффективными каналами продвижения....
19 03 2024 21:32:26
Как правильно оптимизировать страницы пагинации, чтобы не допустить проседание целевого трафика...
18 03 2024 15:44:43
Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....
17 03 2024 3:34:22
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
16 03 2024 14:27:45
Поиск крутых авторов и качественные тексты для блога об email-рассылке...
15 03 2024 10:26:35
Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...
14 03 2024 0:32:15
Как операторы поисковых запросов Google помогают при продвижении сайта и анализе конкурентов....
13 03 2024 9:17:25
Партнерская сеть, к которой нужно присоединиться уже сейчас....
12 03 2024 4:20:18
Советы и даже требования SEO-специалистов к разработчикам сайтов....
11 03 2024 11:21:27
Какой контент публиковать в Instagram, зачем ставить хештеги, какие активности интересны пользователям инсты, как ведут свой Инстаграм топовые бренды. Узнать больше!...
10 03 2024 19:28:34
Минусовки это не только про эстраду. Какой метод кросс-минусовки ключевых слов лучше?...
09 03 2024 3:21:37
Украинские реалии того, в каких тематиках трафик из Yandex.Direct дороже Google Ads. Новое исследование Алексея Селезнева....
08 03 2024 2:13:25
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::