Как сделать 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 21:54:32
То, как вы читаете на мониторе или в смартфоне, значительно отличается от чтения книги или печатного журнала. Когда вы пишете текст для веба, очень важно знать об этой особенности....
25 04 2024 20:30:49
Какие шрифты бывают, для чего они предназначены, где найти самый подходящий шрифт и как его правильно использовать?...
24 04 2024 17:35:46
Быстрые ссылки и другие советы на тему того, как эффективно работать в Директ Коммaндере....
23 04 2024 2:12:32
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
22 04 2024 14:57:40
Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...
21 04 2024 7:43:47
С помощью этой шпаргалки вы легко распределите акценты и начнете последовательно внедрять маркетинговую стратегию по продвижению мобильного приложения...
20 04 2024 11:50:44
Краш-тест сервиса визуализации данных: выбираем задачу, источники, создаём отчет с помощью DataDeck. Бонус в конце — лаконичные списки преимуществ и недостатков этого инструмента и приятный подарок для дочитавших...
19 04 2024 18:19:29
Делимся фишками, которые облегчат работу как новичкам, так и специалистам....
18 04 2024 23:35:32
Алексей Селезнев проанализировал 29 млн кликов, и в этой статье вы прочитаете, как дорого обходятся рекламодателям клики в Google Ads....
17 04 2024 23:32:55
Если ваш сайт не приносит желаемых продаж, задумайтесь о смене формата. Этот кейс о том, как с качественным лендингом можно достигнуть желаемой цены за конверсию....
16 04 2024 8:49:45
Кейс продвижения YouTube-канала магазина товаров для рыбалки...
15 04 2024 12:49:48
Результаты кампании динамического ремаркетинга для соцсетей...
14 04 2024 20:34:52
Программа знаний и умений, чтобы стать Project Manager в агентстве интернет-маркетинга...
13 04 2024 17:40:36
Пора сделать так, чтобы мобильная версия сайта приносила прибыль....
12 04 2024 5:34:17
Встречайте Netpeak Spider 2.1 — программу, предназначенную для обнаружения и уничтожения ошибок внутренней оптимизации сайта. Мы хотим, чтобы 4 августа 2016 года запомнилось вам как «День кроулинга»!...
11 04 2024 3:44:54
Всё что нужно знать про контекстную рекламу — Как выглядит, какая бывает, сколько стоит, популярные сервисы и др....
10 04 2024 10:42:48
Качественные исходящие ссылки и исходящий мусор, который только вредит репутации сайта. Находим и отсеиваем....
09 04 2024 5:20:46
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
08 04 2024 16:27:14
Список минус-слов для Google Рекламы для B2B сайтов....
07 04 2024 0:45:30
Ноу-хау, интересные для бизнеса, которые вошли в ежегодный рейтинг журнала Time....
06 04 2024 3:59:51
Если в сетке сайтов есть интересный домен, его можно использовать для дополнительной монетизации, а не только для ссылок. В таком случае важно знать, как правильно отслеживать трафик таких доменов....
05 04 2024 21:33:11
Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...
04 04 2024 20:53:51
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
03 04 2024 15:22:12
Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...
02 04 2024 16:53:40
Делимся итогами продвижения телеграм-канала «Артём Бородатюк» за 2021 год...
01 04 2024 19:54:54
Прайс-менеджерам: покупаем и моделируем недостающие данные с помощью алгоритмов машинного обучения...
31 03 2024 17:14:21
Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...
30 03 2024 5:50:57
Facebook раскрывает алгоритм формирования новостной ленты...
29 03 2024 0:26:54
Нужно организовать конференцию с участием многих пользователей? Этот пост будет полезен, если до важного ивента есть хотя бы несколько дней в запасе....
28 03 2024 18:14:43
У нас на руках оказались все карты для создания собственного мини-рейтинга популярных сервисов email-рассылок....
27 03 2024 14:43:13
Как посты и ролики Reels становятся первыми в ленте, сториз, попадают в рекомендации. Instagram впервые напрямую рассказали о том, как оценивают контент....
26 03 2024 21:12:44
Будь мобильным — заливай видео на Youtube с телефона...
25 03 2024 16:45:44
Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....
24 03 2024 0:30:52
Как мы создаем BI-решение для департамента поискового продвижения — первые шаги...
23 03 2024 21:56:53
Минусовки это не только про эстраду. Какой метод кросс-минусовки ключевых слов лучше?...
22 03 2024 21:14:43
Как найти продавцов для маркетплейса с помощью рекламы в Google, Facebook, TikTok и Viber....
21 03 2024 6:33:28
Нам удалось увеличить количество органических показов на 63% и установок на 25%....
20 03 2024 8:14:30
Как сэкономить время, ресурсы, и сделать онлайн-маркетинг эффективнее с помощью языка R...
19 03 2024 15:35:59
10 заданий, которые заставят пошевелить мозгами и придумать нестандартные решения. Используйте их (видоизмените, адаптируйте) под свой продукт или услугу. Создайте крутую кампанию, креатив или предложите это своей комaнде....
18 03 2024 9:19:58
При встрече со сложностями, когда мозг говорит вам «стоп, у тебя не получится, не пытайся даже», победа достается тому, кто это предупреждение игнорирует....
17 03 2024 4:49:46
Узнайте зарплату интернет-маркетологов с новым рейтингом от Serpstat....
16 03 2024 5:18:21
Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...
15 03 2024 6:37:20
Как работают SEO-специалисты, что нужно знать о принципах работы алгоритмов Гугл, как продвигать мобильные приложения и каким образом может монетизироваться Телеграм. Узнать больше!...
14 03 2024 19:12:45
Популярные размеры баннеров. Найти самый топовый из джентльменского набора! Мы провели свое исследование....
13 03 2024 18:54:18
Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....
12 03 2024 21:19:21
зеркальные нейроны и сознание. как они влияют на наше поведение?...
11 03 2024 9:11:26
в поисках нового источника трафика расскажем о Pinterest — современной поисковой сети c акцентом на визуальном контенте...
10 03 2024 13:38:36
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
09 03 2024 5:11:45
Данные по 24 миллионам кликов в 24 тематиках и 391 городу...
08 03 2024 10:29:35
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::