Сайт на 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.
Комментарии:
Как купить дешевый трафик из Facebook? Образец работы со структурой рекламного аккаунта...
18 05 2026 3:33:34
Важно: понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Вот почему вам может быть полезно это исследование. Читать....
17 05 2026 0:51:38
Перевод статьи Никки Джиллиленд из Econsultancy об уроках для маркетологов про то, каким должно быть хорошее видео. Узнайте 4 правила эффективного видеоконтента прямо сейчас!...
16 05 2026 0:22:35
Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....
15 05 2026 14:17:36
Пример использования пакета google***yticsR от Марка Эдмондса...
14 05 2026 9:43:29
Суперспособности фрилансера: как понять свою прокрастинацию, распознать мошенников и решать проблемы, связанные с удалёнкой...
13 05 2026 0:48:23
Как настроить программу Obsidian для удобной и быстрой работы по системе Zettelkasten....
12 05 2026 4:23:51
Всё о крупной рыбе украинского интернет-маркетинга: компании, люди, кейсы в интервью с основателем Артёмом Бородатюком....
11 05 2026 2:30:52
Ссылки нужно не только наращивать, но и постоянно посещать и мониторить качество уже существующих....
10 05 2026 23:43:48
Какие возможности дает Chrome DevTools для SEO-оптимизации...
09 05 2026 0:48:37
Как правильно группировать ключевые фразы для релевантности рекламных кампаний...
08 05 2026 15:23:50
Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...
07 05 2026 7:54:44
Уроки, написанные понятным и доступным языком экспертами по контекстной рекламе, поисковому продвижению, SMM....
06 05 2026 0:13:27
Ringostat и Binotel. Сравнение главных сервисов для коллтрекинга в Украине...
05 05 2026 7:47:20
Примеры инновационных проектов. Нескучная рецензия на интересную книгу....
04 05 2026 18:33:53
Идеи, кейсы и советы от экспертов. Читайте и находите что-то для продвижения своего бизнеса. Нетривиальные идеи от признанных экспертов-пpaктиков! Рекомендуем каждому, что развивает или планирует свой бизнес в интернете!...
03 05 2026 3:33:24
Как прокачать свои знания и навыки использования GA, чтобы оптимизировать сайт и получать больше (намного больше, чем сейчас) трафика, конверсий, вовлечения. Больше!...
02 05 2026 14:50:33
Как найти релевантный сайт-донор для размещения своей ссылки...
01 05 2026 12:10:55
О методах поднять и расширить трафик рассказал руководитель internet-проекта Prom.ua Иван Портной....
30 04 2026 11:41:25
Какие шрифты бывают, для чего они предназначены, где найти самый подходящий шрифт и как его правильно использовать?...
29 04 2026 8:49:15
Наталья Воскобойникова из контент-студии WordFactory решила дать четкую хаpaктеристику потенциальному заказчику гостевых постов. Если хотя бы один ваш ответ на вопросы в этом посте отрицательный, стоит найти другие тактики продвижения своего проекта....
28 04 2026 17:28:23
Как настроить многокaнaльную модель атрибуции для своего бизнеса....
27 04 2026 13:14:55
Как GTM помогает настроить расширенную электронную торговлю (enhanced ecommerce)....
26 04 2026 11:58:47
Темная сторона лайков или правда о продвижении постов в Facebook...
25 04 2026 13:19:43
Подробно об оплате аккаунтов и налогообложении рекламы в Украине, России, Казахстане....
24 04 2026 11:37:42
Бухгалтерский мир Netpeak: цель, задачи, мотивация....
23 04 2026 18:59:38
Встречайте Netpeak Spider 2.1 — программу, предназначенную для обнаружения и уничтожения ошибок внутренней оптимизации сайта. Мы хотим, чтобы 4 августа 2016 года запомнилось вам как «День кроулинга»!...
22 04 2026 18:33:37
Много интересных фактов о работе мозга и новейших исследованиях социологии и психологии....
21 04 2026 17:22:15
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
20 04 2026 12:57:42
Как говорят легенды, на создание дизайна этих носочков Sammy Icon вдохновили рисунки на стенах храма Темпло Майор в древнем городе Теночтитлан. К сожалению, город сейчас разобрали перуанские строители, но память о нем осталась в киевских носках...
19 04 2026 11:23:14
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
18 04 2026 13:57:14
О видах мобильных версий, их плюсах и минусах, а также советы по аудиту....
17 04 2026 13:30:54
Простой способ отслеживания как внутренних, так и внешних битых ссылок. Узнать больше!...
16 04 2026 14:49:38
Грамотно оформленные метатеги презентуют сайт, помогают пользователям быстро найти нужную информацию, а поисковым системам — повысить ресурс в выдаче...
15 04 2026 2:41:23
Почему кого-то ругают за плохие тексты, а у кого-то из-за таких же текстов берет интервью Юрий Дудь? И другие особенности контента: авторское право, копирайтинг. Читать!...
14 04 2026 21:35:30
Зачем размещаться на AppSumo и как запустить продукт в 2021 году? Лайфхаки по размещению, личный опыт и результаты по проведенной кампании...
13 04 2026 12:50:26
Как с помощью Google Tag Manager отслеживать исходящие ссылки на сайте и загрузки файлов с него...
12 04 2026 23:57:27
Узнайте, как пользоваться Инспектором и внутренними диаграммами Facebook, чтобы быть в лидерах своей ниши!...
11 04 2026 5:28:20
Как проверить качество текста от копирайтера. Составляем техническое задания для копирайтера, проверяем уникальность, наличие ключевых слов, использование LSI, проводим семантический анализ текста....
10 04 2026 1:23:52
Деловой этикет в переписке с бизнес-партнерами, сотрудниками, клиентами. Как заручиться доверием, укрепить деловые отношение и мотивировать подчиненных. Узнать!...
09 04 2026 10:50:43
Как формируется цена на услугу онлайн-рекламы в специализированном агентстве, и на какие бюджеты предпринимателям стоит ориентироваться...
08 04 2026 13:20:37
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
07 04 2026 18:14:41
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
06 04 2026 5:43:21
SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...
05 04 2026 19:17:10
Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...
04 04 2026 13:48:30
Дропшип предполагает минимум затрат со стороны предпринимателя. Например, не нужно думать о логистике, держать склад. Можно минимизировать и траты на рекламу. Узнать как!...
03 04 2026 23:57:43
Программа действий, если захотелось удалить себя из ютуба, гугла и прочих социалок....
02 04 2026 10:49:22
Делимся советами по оптимизации рассылок. Важны новые форматы писем, предварительное тестирование, смена тем письма, ярче CTA. Все это в сочетании с понятностью и искренностью не заставит ждать хороший CTR...
01 04 2026 22:33:18
Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....
31 03 2026 11:44:34
Советы специалистам по контекстной рекламе. Технические сложности, которые возникают при работе с Google ***ytics: от ограничений интерфейса до ошибок настройки отслеживания и последующей недостоверности полученных данных, и решения для них...
30 03 2026 21:14:47
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
