Сайт на Ajax: как отдельным страницам попасть в выдачу
При создании сайта или приложения на Ajax игнорируется одна из основных сущностей интернета — веб-страница с отдельным URL. Вся информация на странице подгружается скриптом без обновления URL, то есть фактически поисковым системам нечего добавлять в индекс, кроме главной страницы. Это просто ад для поискового продвижения.
Та же проблема существует для одностраничных лендингов, созданных не на Ajax.
Конечно, напрашивается вопрос...
Зачем вообще создавать сайты на Javascript и Ajax?
Проекты на Javascript и Ajax проще в разработке. Они обеспечивают удобное и быстрое взаимодействие с пользователем благодаря использованию асинхронных запросов. Коды таких сайтов значительно короче из-за возможности повторного использования компонентов. Кроме того, в плюсы запишу быструю загрузку страниц и отсутствие ожидания связи с сервером.
Но вот с поисковой оптимизацией у таких сайтов настоящая беда, и чтобы исправить это придется запомнить несколько новых терминов :)
Что такое shebang/hashbang и причем тут SEO?
Shebang/hashbang — последовательность из символов #! в URL, которая позволяет поисковым системам сканировать и индексировать сайты и приложения, полностью созданные с помощью Ajax.
Суть метода: для каждой Ajax-страницы, которую необходимо проиндексировать, на сервере разместить HTML-версию.
По шагам:
Как настроить расширенную электронную торговлю с помощью Google Tag Manager 1. При запросе Ajax-страницы должен формироваться URL https://site.com/#!/hello-world. Включение восклицательного знака позволит узнать о наличии HTML-версии документа, а не просто якоря — закладки с уникальным именем на той же странице, как в случае с использованием простого #. Пример простой якорной ссылки можно увидеть на странице
2. Поисковый робот автоматически заменяет #! на ?_escaped_fragment_= и, соответственно, обращается к странице https://site.com/?_escaped_fragment_=hello-world — именно эта страница должна быть HTML копией Ajax-страницы сайта.
3. Ссылки на страницы с #! необходимо поместить в карту сайта. Это ускорит индексацию страниц.
4. Чтобы сообщить роботу об HTML-версии главной страницы, в код следует включить метатег . Этот метатег нужно использовать на каждой Ajax-странице.
Важно! В HTML-версии документа метатег размещать не следует: в этом случае страница не будет проиндексирована, потому что при наличии метатега на странице, поисковый робот делает обращение к серверу в поисках соответствующей страницы с фрагментом URL: ?_escaped_fragment_=. Саму страницу c метатегом он не индексирует.
5. Ссылка в результатах поиска направит пользователя на Ajax-версию страницы.
6. В файле robots.txt должны быть открыты все Javascript-файлы, а также файлы, отвечающие за обработку Ajax. Это очень важно для индексации.
Например:
На сайте maxcar.bg с помощью технологии hashbang реализована фильтрация в категориях сайта. Например:
В результате страницы попадают в индекс Google:
Как ускорить индексацию с помощью функции window.history.pushState() в HTML5
Это небольшая Javascript-функция в HTML5 History API. Кроме передачи других параметров, она позволяет изменить URL и Title, который отображается в браузере пользователя. Важно уточнить, что обращения к серверу или к новой странице при этом не происходит, что положительно влияет на скорость загрузки страниц.
Даже на сайте-одностраничнике можно создать любое количество таких URL и поместить их в XML-карту сайта, отправив ее на индексацию. Таким образом мы получим сколько угодно страниц с разным контентом.
У такого метода есть недостатки. Если в браузере отключен Javascript, пользователь не сможет увидеть содержимое страниц. Кроме того, у поисковых систем все еще могут возникать трудности при сканировании сайта с использованием Javascript, особенно если в реализации допущены ошибки.
Вот что пишет справка Google:
Многие веб-мастера уже оценили преимущества Ajax для повышения привлекательности сайтов за счет создания динамических страниц, которые выступают в роли функциональных веб-приложений. Но, как и Flash, Ajax может затруднить индексирование сайтов поисковыми системами, если эта технология реализована с ошибками. В основном Ajax вызывает две проблемы при использовании поисковых систем. Роботы поисковых систем должны «видеть» ваше содержание. Необходимо также убедиться, что они распознают правила навигации и следуют им.
Робот Googlebot хорошо подходит в тех случаях, когда нужно понять структуру HTML-ссылок, но он может допускать ошибки на тех сайтах, где для навигации применяется Javascript. Мы работаем над совершенствованием системы распознавания Javascript, но если вы хотите создать сайт, который смогут сканировать Google и другие поисковые системы, то ссылки на содержание лучше всего предоставлять на языке HTML.
То, что ранее выглядело как https://site.com/#page1, при применении функции push.State() будет выглядеть как https://site.com/page1.
Функция window.history.pushState() использует три параметра: data, title, url. Внедрение данной функции происходит следующим образом:
- Перед тем как приступить к внедрению функции, необходимо удостовериться, что сайт работает и с отключенным в браузере Javascript — контент должен отображаться даже в таком случае.
- Контент, который меняется на странице, должен размещаться на серверной части. При переходе по ссылкам должна подгружаться только контентная часть, а не HTML-страница целиком.
- Javascript должен перехватывать и записывать в параметр URL клики по любым внутренним ссылкам (элементы навигации и так далее), если они есть.
- Учитывая атрибуты ссылки, по которой кликнул пользователь (возможно, на href), Javascript / Ajax загружает соответствующий контент на страницу.
- При этом, если использовать привычные для поисковиков ссылки вида и обpaбатывать клики с помощью данной функции, можно значительно улучшить скорость загрузки без какого-либо негативного влияния на SEO.
Посмотреть, как это реализовано, можно на сайте html5.gingerhost.com.
Хорошо, допустим, разобрались.
Что делать, если сайт на Angular JS и React?
Чтобы ускорить индексацию сайтов на Angular JS и React, необходимо использовать один из описанных ниже методов:
- Вместо того, чтобы постоянно отдавать HTML-версию страницы с помощью ?_escaped_fragment_=, отдавать HTML-версию только при запросе поисковым роботом. Список ботов Google можно посмотреть здесь.
- Предоставлять сайт поисковым системам без предварительного рендеринга. Используйте функцию HTML5 History API для обновления URL-адреса в браузере без использования #!, создайте файл sitemap.xml со всеми каноническими URL-адресами и добавьте его в Google Search Console.
- Использовать ?_escaped_fragment_= без использования #!. Для этого необходимо добавить в код , не меняя при этом URL. Поисковые системы при наличии данного метатега будут искать соответствующую HTML-версию страницы на сервере.
Посмотрите результат.
Выводы
- Используйте последовательность из символов #! в URL для сайтов на Ajax, Javascript для улучшения индексации.
- Используйте Javascript-функции pushState() для лендингов, Ajax и Javascript-сайтов.
- Внедряйте методы для улучшения индексации сайтов на AngularJS и React.
Комментарии:
Трекер — система аналитики мобильного приложения с возможностью отслеживания источника установок. Рассмотрим бесплатные и платные решения для аналитики мобильных приложений....
23 07 2026 17:15:48
Красивый слог и сюжет должны быть в интеpaктивной оболочке, соответствующей времени. Проект Gutenbergz идет к созданию именно такой — идеальной истории для людей XXI века. О пути к этой цели, топе App Store и успехе на Kickstarter мы поговорили с руководи...
22 07 2026 12:17:41
Как настроить работу удаленной комaнды сотрудников и успевать выполнить все задачи...
21 07 2026 14:19:56
Узнайте, как пользоваться Инспектором и внутренними диаграммами Facebook, чтобы быть в лидерах своей ниши!...
20 07 2026 22:19:37
Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...
19 07 2026 7:41:29
Все, что нужно знать об UTM-метках: зачем использовать, как правильно сгенерить и анализировать....
18 07 2026 16:18:50
Что такое контекстная реклама? Настраиваем рекламу в поиске Google...
17 07 2026 6:38:55
Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...
16 07 2026 9:40:14
SEO для цветочных магазинов с оплатой за трафик и полученные результаты...
15 07 2026 3:52:11
Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....
14 07 2026 5:39:54
Готовые триггерные письма и сценарии позволяют быстро запустить триггеры после реализации технических заданий разработчиком....
13 07 2026 22:12:14
Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...
12 07 2026 16:58:50
Как специалисту сэкономить время для создания и оптимизации кампаний, проверки орфографии и другие фишки. Советы из пpaктики....
11 07 2026 13:39:33
Чем полезна вкладка Network в DevTools для SEO-специалиста...
10 07 2026 4:55:24
Признаки того, что магазин находится под фильтром и шаги по выводу из него...
09 07 2026 4:18:12
Расскажем в двух словах о всеми забытой функции «Анализ конкуренции»....
08 07 2026 2:57:31
Почти 3 миллиона клика в 24 тематиках в 15 городах Казахстана. Читайте новое исследование нашего аналитика....
07 07 2026 14:22:34
Как внедрить Business Intelligence для малого и среднего бизнеса....
06 07 2026 17:51:31
Как протестировать MVP мобильного приложения, получить обратную связь и сформировать гипотезы...
05 07 2026 5:34:31
Крауд-маркетинг предполагает взаимодействие с целевой аудиторией с помощью рекомендательных комментариев на форумах, сайтах вопросов и ответов, в блогах, на других площадках...
04 07 2026 21:31:15
Короткий интересный клип в Instagram — фишка маркетингового сезона 2015...
03 07 2026 19:21:42
Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....
02 07 2026 20:16:25
10 заданий, которые заставят пошевелить мозгами и придумать нестандартные решения. Используйте их (видоизмените, адаптируйте) под свой продукт или услугу. Создайте крутую кампанию, креатив или предложите это своей комaнде....
01 07 2026 9:50:43
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
30 06 2026 10:23:12
Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...
29 06 2026 9:44:57
Попасть в топ 3 — ваш предел мечтаний? Почему и когда это не принесет ожидаемых результатов, плюс другие не актуальные убеждения о PPC. Узнать больше!...
28 06 2026 19:38:11
Данные Google по 6 миллионам кликов 16 городах страны и данные Яндекс по 520 346 кликам, в 54 городах страны в 22 тематиках в обоих рекламных системах. Узнать больше!...
27 06 2026 6:21:36
Корзина интернет-магазина поможет повысить продажи, если ее функционал содержит: фото товара, кликабельное наименование товара, перечень способов оплаты. Узнать больше!...
26 06 2026 20:20:19
Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....
25 06 2026 13:41:37
Создаем фид товаров, настравиваем код и списки динамического ремаркетинга для интернет-магазинов в странах, где отсутствует Google Merchant Center....
24 06 2026 4:12:17
К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...
23 06 2026 6:58:36
Отслеживаем пропущенные, анализируем входящие и делаем выводы о том, как организовать работу менеджеров....
22 06 2026 17:14:23
Что такое обратная связь, почему фидбек от клиентов важен и как его правильно собирать. Все, что нужно знать, чтобы получить отзыв от клиента....
21 06 2026 11:40:13
О том, как сделать сайты интереснее и эффективнее. Гeймификация — применение игровых сценариев и элементов вне игровых контекстов. Это не про создание игр, это про поиск решений, которые помогут сделать любую работу интереснее. Читайте дальше!...
20 06 2026 8:15:11
Заказчик всегда приходит с идеей. В этой идее может быть все продумано до мелочей, а может быть только каркас. В любом случае мысли клиента следует систематизировать так, чтобы с ними было удобно работать....
19 06 2026 0:27:27
Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....
18 06 2026 7:55:51
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
17 06 2026 6:17:38
История для заказчиков, которые самостоятельно запускают рекламу...
16 06 2026 13:25:42
Как без проблем пересылать данные в Google Покупки....
15 06 2026 9:48:39
Обойдемся без теории, зато покажем пример SEO-аудита...
14 06 2026 10:56:53
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
13 06 2026 4:13:19
Алгоритм E-A-T теперь следит за экспертностью, авторитетностью и достоверностью контента. Что это значит?...
12 06 2026 23:39:58
Предположим, что оптимизация в аккаунте похожа на реальный мир и рассмотрим несколько примеров :)...
11 06 2026 2:17:43
Делимся итогами продвижения телеграм-канала «Артём Бородатюк» за 2021 год...
10 06 2026 5:21:40
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
09 06 2026 9:39:32
База самых распространенных CMS и модулей для их SEO-оптимизации....
08 06 2026 16:14:14
Как тратить на ставки меньше денег и почему вырастает цена за клик, а также о том, как ее сделать ниже. Плюс список факторов, которые влияют на ставку для первой страницы для ключевого слова...
07 06 2026 12:28:46
Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....
06 06 2026 6:32:50
Где и как разработчик может подобрать ответственных удаленщиков, как составить техническое задание, чем контролировать качество работы...
05 06 2026 1:34:21
Мануал по Microsoft Power BI — мощному инструменту для бизнес-аналитики. Освоив эту платформу, вы сможете с легкостью создавать понятные отчеты и обновлять их в режиме реального времени....
04 06 2026 23:53:57
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
