Сайт на 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.
Комментарии:
Проверка позиций: бесценный онлайн софт для SEO-специалистов :)...
19 07 2025 2:27:29
Тест, который проходят все соискатели. Никому не показывайте!...
18 07 2025 11:31:36
Подборка корпоративных медиа, попав на страницы которых, не хочется их покидать....
17 07 2025 6:23:47
К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...
16 07 2025 5:33:58
Нужно организовать конференцию с участием многих пользователей? Этот пост будет полезен, если до важного ивента есть хотя бы несколько дней в запасе....
15 07 2025 18:18:22
Как понять, что именно нравится подписчикам в вашей рассылке...
14 07 2025 1:54:46
В этом году часть пользователей предпочла вернуться к привычным покупкам в оффлайн-магазинах....
13 07 2025 23:44:32
Новые триггеры, разнообразие рассылок и обновленная форма подписки дали нужный результат....
12 07 2025 23:26:31
10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....
11 07 2025 6:10:18
Подбор правильного инструмента для визуализации данных может сэкономить время и ресурсы компании, а также повысить общую продуктивность маркетинга...
10 07 2025 9:16:53
Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...
09 07 2025 8:22:20
Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...
08 07 2025 12:49:29
Лучшие фишки от спикеров конференции 8P 2020. В конце каждой конференции спикеры 8P собираются за круглым столом, чтобы поделиться пpaктически применимыми советами, которые можно внедрить в свой проект и сразу почувствовать отдачу...
07 07 2025 7:21:24
Специалистам часто приходится проводить вебинары и для этого нужна адекватная площадка. В инсайдерском посте мы рассказываем, как выбирали подходящую платформу для проведения вебинаров и что из этого вышло....
06 07 2025 15:39:45
Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....
05 07 2025 15:33:50
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
04 07 2025 6:52:29
Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....
03 07 2025 11:47:30
Определение и настройка главного зеркала сайта в поисковых системах — первое, что нужно сделать перед раскруткой сайта...
02 07 2025 2:43:46
Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...
01 07 2025 4:13:45
Инструменты веб-мастера: что может заменить Google ***ytics?...
30 06 2025 13:40:55
29 06 2025 17:53:54
Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...
28 06 2025 19:10:43
Каковы интересы вашей аудитории, как люди находят ваш контент. Рассказываем обо всех возможностях от Search Console Insights....
27 06 2025 8:10:58
О том, как работают, празднуют, танцуют и в какой корпоративной культуре живут сотрудники корпорации Google. Этот пост развеет кое-какие мифы....
26 06 2025 21:20:37
Что же такое эти authority и чем они лучше и полезнее, к примеру, чем Page Rank?...
25 06 2025 23:57:44
Ошибка, которая может привести к полной потере контроля над вашим сайтом. Рассказываем, что это такое, какие могут быть причины поломки и как исправить. Узнать больше!...
24 06 2025 16:59:46
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
23 06 2025 22:55:33
У вас фирма с филиалами по всей стране? Короткий инструктаж по массовой загрузке адресов...
22 06 2025 12:18:47
Ошибки, которые допускают новички и теряют деньги, трафик, клиентов....
21 06 2025 22:54:20
Специалисты дропшиппинг-платформы делятся данными по самым продаваемым товарам на крупных онлайн-площадках. Информация для масштабирования бизнеса. Читать!...
20 06 2025 9:13:48
Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....
19 06 2025 20:22:54
Где искать информацию, как составить контент-план, писать тексты быстро и легко, а затем продвигать их. Собрали для вас подборку постов о разных этапах работы с контентом....
18 06 2025 18:55:59
89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....
17 06 2025 18:56:39
Шпаргалка по размерам креативов для всех, кто запускает рекламу в соцсетях...
16 06 2025 13:10:57
Как установить счетчик Метрики, грамотно настроить цели, сегменты и запустить рекламную кампанию по ретаргетингу в Яндекс.Директ...
15 06 2025 9:23:20
Языковой закон требует, чтобы общение бизнеса с клиентами шло на украинском языке, если нет просьбы о другом приемлемом варианте. Что это означает для РРС, читайте дальше....
14 06 2025 21:59:10
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
13 06 2025 19:10:14
В конце октября Яндекс начал открытое бета-тестирование новой версии Коммaндера. Я решила уже сейчас проверить все плюсы и минусы новой версии сервиса...
12 06 2025 14:46:16
А ещё у нас появилась новая стратегия SEO-продвижения для ниши доставки еды и продуктов....
11 06 2025 9:12:32
Как мы недооценили уровень конкуренции в нише, и как пришлось с этим бороться, чтобы принести пользу клиенту....
10 06 2025 9:23:12
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
09 06 2025 17:23:37
В этой статье я покажу пример визуальной работы с закладкой и пошагово разберу процесс их создания и применения для удобства визуализации данных...
08 06 2025 20:49:59
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
07 06 2025 5:35:28
В течение месяца нам удалось наладить рассылку с новой платформы....
06 06 2025 3:18:49
Примеры инновационных проектов. Нескучная рецензия на интересную книгу....
05 06 2025 18:47:29
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
04 06 2025 11:13:48
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
03 06 2025 13:51:11
Пpaктика в режиме «рейтинг онлайн». Новинка Google Рекламы — отчет «Статистика аукционов»....
02 06 2025 13:35:23
Современные платформы телефонии и коллтрекинга — это не только про звонки. С Ringostat вы узнаете, откуда пришел клиент, как менеджер ему ответил и какая реклама «принесла» деньги....
01 06 2025 23:13:16
Так называемый Humankindex (доброжелательный стиль управления) способствует инновациям в компании....
31 05 2025 6:31:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::