Как сделать 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.
Комментарии:
Как повысить результаты продаж в режиме цейтнота. Советы новому руководителю от специалистов Netpeak Group. Больше подробностей — в посте...
20 06 2025 2:43:28
Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....
19 06 2025 13:18:48
Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....
18 06 2025 1:35:24
SEO для цветочных магазинов с оплатой за трафик и полученные результаты...
17 06 2025 0:34:10
За каждым проектом стоят прежде всего люди. Как часто мы пользуемся сложными системами и не думаем о том, кто их создал и продолжает развивать? Интересно о том, кто и что стоит за «ПланФиксом». Читайте далее!...
16 06 2025 6:32:10
Изначально необходимо планировать продолжительное сотрудничество с агентством для достижения поставленных целей. В своей стратегии мы использовали сезонность, чтобы достичь максимальных результатов для клиента...
15 06 2025 1:11:27
Нам удалось увеличить количество органических показов на 63% и установок на 25%....
14 06 2025 22:34:59
Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...
13 06 2025 15:27:30
На что обращает внимание система и менеджеры Google при проверке сайта и аккаунта....
12 06 2025 8:46:12
Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...
11 06 2025 18:49:27
Алгоритм технической подготовки IP-адреса к массовым рассылкам...
10 06 2025 14:15:51
Особенности продвижения локального офлайн-бизнеса...
09 06 2025 6:39:43
Небольшая wiki о программатик-баинг и RTB. Объяснение алгоритма, обзор рынка, мнения экспертов....
08 06 2025 22:28:10
Что делать, когда код электронной торговли в одной валюте, а аккаунты Google ***ytics/Google Ads — в другой. И нужной валюты нет в списке возможных....
07 06 2025 20:26:37
Ярослав Легенчук поделился историей успешного «переезда» площадки IT-продукта из Рунета в страны ЕС...
06 06 2025 5:32:44
Как добиться 100% пользы от контекстных объявлений с помощью расширений...
05 06 2025 23:27:20
[SEO 2.0] — это продукт для бизнеса от Netpeak, он включает в себя принципиально новый подход к продвижению сайтов....
04 06 2025 14:40:41
Пpaктическая информация о том, что и куда нужно постить....
03 06 2025 23:57:19
Почти 3 миллиона клика в 24 тематиках в 15 городах Казахстана. Читайте новое исследование нашего аналитика....
02 06 2025 0:34:30
Контекстная реклама и ее эффективность: как долго длится, как измерить, что бывает, как заканчиваются деньги....
01 06 2025 23:51:31
Успешный блог помогает продавать товары и услуги, формировать сильный личный бренд, делиться своим опытом и задавать тренды. Осталось выбрать цель. Узнать как!...
31 05 2025 20:38:22
То, как вы читаете на мониторе или в смартфоне, значительно отличается от чтения книги или печатного журнала. Когда вы пишете текст для веба, очень важно знать об этой особенности....
30 05 2025 8:12:12
3D принтер — заработок миллионеров будущего! Тех, кто сейчас смог купить и начал заниматься ими или использует их в бизнесе, ждет объемный успех через каких-нибудь 3-5 лет....
29 05 2025 15:53:36
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
28 05 2025 22:55:26
Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....
27 05 2025 16:31:28
Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....
26 05 2025 0:57:21
Если в сетке сайтов есть интересный домен, его можно использовать для дополнительной монетизации, а не только для ссылок. В таком случае важно знать, как правильно отслеживать трафик таких доменов....
25 05 2025 22:50:56
Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....
24 05 2025 17:35:49
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
23 05 2025 15:53:44
Блиц-инструкция и рекомендации по созданию эффективных описаний для мобильных приложений...
22 05 2025 7:48:41
Сбор анкет до 16 декабря, публикация результатов в конце декабря...
21 05 2025 2:47:26
Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...
20 05 2025 7:40:21
Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....
19 05 2025 2:55:31
Суперспособности фрилансера: как понять свою прокрастинацию, распознать мошенников и решать проблемы, связанные с удалёнкой...
18 05 2025 13:34:54
Как быстро залить изображение, сделать красивую иллюстрацию, наложить надпись к любому тексту онлайн?...
17 05 2025 11:57:13
Разбираем на примерах коллабораций, подрядчиков из регионов и тендендерных площадок...
16 05 2025 19:29:31
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
15 05 2025 14:21:51
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
14 05 2025 1:17:43
Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....
13 05 2025 10:42:48
Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...
12 05 2025 21:51:17
Почему популярность электромобилей растет и как это связан с продажей углеродных квот...
11 05 2025 14:56:43
Интересный и важный документ, не пропустите. Для ранжирования используется сумма коммерческой и тематической релевантности. Уходя с головой в SEO, многие вебмастера забывают о пользовательских факторах. Узнайте больше об этом!...
10 05 2025 19:16:55
Основатель сервиса мобилографии EyeEm Рамзи Ризк рассказал об особенностях своего сервиса и будущем мобильных приложений....
09 05 2025 11:30:10
Что такое App Store optimization и как раскручивать мобильные приложения...
08 05 2025 4:47:39
Определение и настройка главного зеркала сайта в поисковых системах — первое, что нужно сделать перед раскруткой сайта...
07 05 2025 15:20:26
Разбираемся, как определить самые эффективные источники лидов....
06 05 2025 5:24:49
Что такое обратная связь, почему фидбек от клиентов важен и как его правильно собирать. Все, что нужно знать, чтобы получить отзыв от клиента....
05 05 2025 0:29:46
А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...
04 05 2025 2:30:15
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
03 05 2025 17:39:46
Если выполнить настройку не корректно, поисковик воспримет материалы как дубли контента....
02 05 2025 14:52:23
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::