Сайт на 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.
Комментарии:
Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....
28 05 2023 11:33:12
Как мы создаем BI-решение для департамента поискового продвижения — первые шаги...
27 05 2023 13:25:33
Подборка онлайн-платформ и программ для работы с текстом и изображениями....
26 05 2023 15:11:19
Медиаплан для контекстной рекламы малого и среднего бизнеса — как составить медиаплан мечты для рекламных кампаний без ложного понимания, что автоматические сервисы могут корректно обработать сырые данные и выдать результат...
25 05 2023 11:15:32
Собирательный опыт сотрудников Netpeak. Мы изучали много всего в стиле «купить парковку в аэропорту Гатвика в Лондоне» и тому подобное. Но все, кроме описанного ниже, показалось сложным и ненадежным. Поэтому рассказываем про спокойные варианты....
24 05 2023 1:36:11
Последствия удаленки на уровне крупного бизнеса. Как сотрудники и топ-менеджмент не могут договориться. Спopные вопросы, ответы на которые ещё предстоит найти. Узнать больше....
23 05 2023 15:17:13
Для защиты конфиденциальной информации в организации вводят режим коммерческой тайны. Подписание NDA важно не только с сотрудниками, но и со сторонними компаниями, имеющими доступ к конфиденциальной информации...
22 05 2023 4:25:37
Открытие проверенных действий по увеличению продаж...
21 05 2023 15:57:37
Кейс в тематике «грузоперевозки»: как быстрое внедрение доработок помогло привлечь качественный трафик на новый сайт...
20 05 2023 8:25:54
Как визуализировать данные Google BigQuery в Power BI? Пошаговая инструкция от руководителя отдела веб-аналитики Netpeak Алексея Селезнева...
19 05 2023 4:56:58
Простая инструкция для новичков, как легко создать анимированные баннеры для рекламных кампаний с помощью бесплатного инструмента Google Web Designer. При создании баннера сервис предложит создать файл с нуля либо использовать шаблон. Узнайте обо всех возможностях!...
18 05 2023 10:35:14
Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....
17 05 2023 18:16:32
Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...
16 05 2023 20:30:26
Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....
15 05 2023 7:47:40
Небольшая wiki о программатик-баинг и RTB. Объяснение алгоритма, обзор рынка, мнения экспертов....
14 05 2023 19:52:49
В течение месяца нам удалось наладить рассылку с новой платформы....
13 05 2023 9:33:51
Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...
12 05 2023 4:20:52
Supplemental results, они же «сопли» или дополнительные результаты — страницы и документы сайта, которые не находятся в основном индексе Google...
11 05 2023 15:39:54
Не Google ***ytics единым...
10 05 2023 15:19:33
Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...
09 05 2023 18:35:29
Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....
08 05 2023 21:43:46
Как заинтересовать инвесторов, сколько времени это займет, а также стратегии поиска....
07 05 2023 4:26:42
79% владельцев смартфонов, если верить Google, используют их для покупок или заказов услуг. Это более двух миллиардов человек. Ничего удивительного, что даже Google запустил собственный сервис Call Tracking. Кому и зачем жизненно важно отслеживать звонки...
06 05 2023 14:46:26
Создание, установка и оптимизация title и мета-тегов keywords, description у сайта, построенного на системе Drupal...
05 05 2023 19:36:53
Интервью с основателем школы английского языка Progress...
04 05 2023 0:15:56
Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...
03 05 2023 14:22:32
Обзор главных преимуществ, которые дают облачные академии бизнесу....
02 05 2023 16:21:11
В помощь контент-маркетологам, редакторам, авторам и бизнесу: идеи, которые учитывают фактор SEO. Переупакуйте статьи, заметки, любые другие посты — угодите читателям и поисковикам. Узнать больше!...
01 05 2023 3:11:24
XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...
30 04 2023 3:27:57
K-pop заpaбатывает деньги: как и сколько...
29 04 2023 11:23:34
кмс Google: как достичь поставленной цели с помощью рекламы? Делимся советам по настройке КМС-кампаний....
28 04 2023 7:33:15
Топ doodle games от Google — от менее достойных к самым крутым....
27 04 2023 11:34:30
Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...
26 04 2023 19:25:12
Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...
25 04 2023 0:36:54
Как расширение от Netpeak может облегчить работу над важными SEO-задачами....
24 04 2023 1:38:44
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
23 04 2023 5:48:38
Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...
22 04 2023 21:39:36
На отклонение исходящих ссылок после загрузки файла может уйти достаточно много времени: от нескольких недель до нескольких месяцев...
21 04 2023 16:24:41
Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....
20 04 2023 18:11:17
Несколько полезных советов перед запуском. Tрaнcпорт и путешествия, ритейл, медиа и развлечения — тематики, в которых чаще используют мобильные приложения. Есть и другие факторы популярности приложений. Узнать!...
19 04 2023 11:41:42
Короткая история Serpstat — от сервиса «для своих» до международной SEO-платформы....
18 04 2023 1:24:17
Как разобраться в типах соответствия ключевых слов и определить, что минус-слова блокируют показы нужных ключевых слов....
17 04 2023 23:19:38
Когда и зачем нужно заказывать сбор семантического ядра, на какие этапы разбит процесс и какие результаты можно получить...
16 04 2023 21:19:56
Данные по 43 миллионам кликов в 27 тематиках и 391 городах страны...
15 04 2023 22:42:21
Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...
14 04 2023 2:56:39
Стив Рейсон назвал 20 уроков, которые BuzzSumo усвоил на пути к топу самых популярных сервисов для контент-маркетологов....
13 04 2023 6:26:45
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
12 04 2023 7:15:27
Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...
11 04 2023 2:37:38
Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....
10 04 2023 9:49:20
Google Data Studio: подробная инструкция и обзор возможностей...
09 04 2023 21:35:21
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
