Сайт на Ajax: как отдельным страницам попасть в выдачу > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Сайт на Ajax: как отдельным страницам попасть в выдачу

Сайт на 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-версии документа, а не просто якоря — закладки с уникальным именем на той же странице, как в случае с использованием простого #. Пример простой якорной ссылки можно увидеть на странице «Как настроить расширенную электронную торговлю с помощью Google Tag Manager». Клик по ссылкам из блока ниже позволит перейти к нужной части статьи на той же странице:

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. Внедрение данной функции происходит следующим образом:

  1. Перед тем как приступить к внедрению функции, необходимо удостовериться, что сайт работает и с отключенным в браузере Javascript — контент должен отображаться даже в таком случае.
  2. Контент, который меняется на странице, должен размещаться на серверной части. При переходе по ссылкам должна подгружаться только контентная часть, а не HTML-страница целиком.
  3. Javascript должен перехватывать и записывать в параметр URL клики по любым внутренним ссылкам (элементы навигации и так далее), если они есть.
  4. Учитывая атрибуты ссылки, по которой кликнул пользователь (возможно, на href), Javascript / Ajax загружает соответствующий контент на страницу.
  5. При этом, если использовать привычные для поисковиков ссылки вида и обpaбатывать клики с помощью данной функции, можно значительно улучшить скорость загрузки без какого-либо негативного влияния на SEO.

Посмотреть, как это реализовано, можно на сайте html5.gingerhost.com.

Хорошо, допустим, разобрались.

Что делать, если сайт на Angular JS и React?

Чтобы ускорить индексацию сайтов на Angular JS и React, необходимо использовать один из описанных ниже методов:

  1. Вместо того, чтобы постоянно отдавать HTML-версию страницы с помощью ?_escaped_fragment_=, отдавать HTML-версию только при запросе поисковым роботом. Список ботов Google можно посмотреть здесь.
  2. Предоставлять сайт поисковым системам без предварительного рендеринга. Используйте функцию HTML5 History API для обновления URL-адреса в браузере без использования #!, создайте файл sitemap.xml со всеми каноническими URL-адресами и добавьте его в Google Search Console.
  3. Использовать ?_escaped_fragment_= без использования #!. Для этого необходимо добавить в код , не меняя при этом URL. Поисковые системы при наличии данного метатега будут искать соответствующую HTML-версию страницы на сервере.

Посмотрите результат.

Выводы

  1. Используйте последовательность из символов #! в URL для сайтов на Ajax, Javascript для улучшения индексации.
  2. Используйте Javascript-функции pushState() для лендингов, Ajax и Javascript-сайтов.
  3. Внедряйте методы для улучшения индексации сайтов на AngularJS и React.



Комментарии:

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна»

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна» Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....

28 05 2023 11:33:12

Выгружаем данные из Google ***ytics для 100+ проектов одновременно — кейс агентства Netpeak

Выгружаем данные из Google ***ytics для 100+ проектов одновременно — кейс агентства Netpeak Как мы создаем BI-решение для департамента поискового продвижения — первые шаги...

27 05 2023 13:25:33

40+ сервисов для работы с текстом — для копирайтеров, редакторов и других создателей контента

40+ сервисов для работы с текстом — для копирайтеров, редакторов и других создателей контента Подборка онлайн-платформ и программ для работы с текстом и изображениями....

26 05 2023 15:11:19

Что такое медиаплан в контекстной рекламе и как его составлять

Что такое медиаплан в контекстной рекламе и как его составлять Медиаплан для контекстной рекламы малого и среднего бизнеса — как составить медиаплан мечты для рекламных кампаний без ложного понимания, что автоматические сервисы могут корректно обработать сырые данные и выдать результат...

25 05 2023 11:15:32

Куда инвестировать во время и после кризиса

Куда инвестировать во время и после кризиса Собирательный опыт сотрудников Netpeak. Мы изучали много всего в стиле «купить парковку в аэропорту Гатвика в Лондоне» и тому подобное. Но все, кроме описанного ниже, показалось сложным и ненадежным. Поэтому рассказываем про спокойные варианты....

24 05 2023 1:36:11

Удаленная работа после пандемии — трудности Apple и Google

Удаленная работа после пандемии — трудности Apple и Google Последствия удаленки на уровне крупного бизнеса. Как сотрудники и топ-менеджмент не могут договориться. Спopные вопросы, ответы на которые ещё предстоит найти. Узнать больше....

23 05 2023 15:17:13

Как правильно составить NDA

Как правильно составить NDA Для защиты конфиденциальной информации в организации вводят режим коммерческой тайны. Подписание NDA важно не только с сотрудниками, но и со сторонними компаниями, имеющими доступ к конфиденциальной информации...

22 05 2023 4:25:37

93 шага к идеальному интернет-магазину — детальный чек-лист

93 шага к идеальному интернет-магазину — детальный чек-лист Открытие проверенных действий по увеличению продаж...

21 05 2023 15:57:37

Кейс по SEO-продвижению сайта в тематике грузовые перевозки — прирост конверсий в звонки в 4,41 раза

Кейс по SEO-продвижению сайта в тематике грузовые перевозки — прирост конверсий в звонки в 4,41 раза Кейс в тематике «грузоперевозки»: как быстрое внедрение доработок помогло привлечь качественный трафик на новый сайт...

20 05 2023 8:25:54

Как связать Microsoft Power BI и Google BigQuery

Как связать Microsoft Power BI и Google BigQuery Как визуализировать данные Google BigQuery в Power BI? Пошаговая инструкция от руководителя отдела веб-аналитики Netpeak Алексея Селезнева...

19 05 2023 4:56:58

Как сделать в Google Web Designer анимированные баннеры для рекламных кампаний

Как сделать в Google Web Designer анимированные баннеры для рекламных кампаний Простая инструкция для новичков, как легко создать анимированные баннеры для рекламных кампаний с помощью бесплатного инструмента Google Web Designer. При создании баннера сервис предложит создать файл с нуля либо использовать шаблон. Узнайте обо всех возможностях!...

18 05 2023 10:35:14

TikTok, Banda, Rocket, I am IDEA и McCann Kyiv — идеи для видеоконтента

TikTok, Banda, Rocket, I am IDEA и McCann Kyiv — идеи для видеоконтента Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....

17 05 2023 18:16:32

Культурный шок, Горько 3, или Зимний корпоратив Netpeak Group

Культурный шок, Горько 3, или Зимний корпоратив Netpeak Group Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...

16 05 2023 20:30:26

Как оценить эффективность рекламы в TikTok? Пиксель TikTok в помощь

Как оценить эффективность рекламы в TikTok? Пиксель TikTok в помощь Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....

15 05 2023 7:47:40

Как работает программатик-баинг

Небольшая wiki о программатик-баинг и RTB. Объяснение алгоритма, обзор рынка, мнения экспертов....

14 05 2023 19:52:49

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440%

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440% В течение месяца нам удалось наладить рассылку с новой платформы....

13 05 2023 9:33:51

13 неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2017

13 неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2017 Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...

12 05 2023 4:20:52

Что такое сопли (Google Supplemental) и как проверить сайт на их наличие

Что такое сопли (Google Supplemental) и как проверить сайт на их наличие Supplemental results, они же «сопли» или дополнительные результаты — страницы и документы сайта, которые не находятся в основном индексе Google...

11 05 2023 15:39:54

Slow-маркетинг — моя ласковая, нежная рутина

Slow-маркетинг — моя ласковая, нежная рутина Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...

09 05 2023 18:35:29

Как быстро найти ошибки SEO-оптимизации с помощью Netpeak Spider

Как быстро найти ошибки SEO-оптимизации с помощью Netpeak Spider Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....

08 05 2023 21:43:46

Как привлечь инвестиции cерии A — руководство для владельцев бизнеса

Как привлечь инвестиции cерии A — руководство для владельцев бизнеса Как заинтересовать инвесторов, сколько времени это займет, а также стратегии поиска....

07 05 2023 4:26:42

CEO of Ringostat Александр Максименюк: кому и зачем нужен Call Tracking

CEO of Ringostat Александр Максименюк: кому и зачем нужен Call Tracking 79% владельцев смартфонов, если верить Google, используют их для покупок или заказов услуг. Это более двух миллиардов человек. Ничего удивительного, что даже Google запустил собственный сервис Call Tracking. Кому и зачем жизненно важно отслеживать звонки...

06 05 2023 14:46:26

Обзор SEO модулей для DRUPAL

Обзор SEO модулей для DRUPAL Создание, установка и оптимизация title и мета-тегов keywords, description у сайта, построенного на системе Drupal...

05 05 2023 19:36:53

Анна Романишина о школе английского, тайм-менеджменте и продвижении

Анна Романишина о школе английского, тайм-менеджменте и продвижении Интервью с основателем школы английского языка Progress...

04 05 2023 0:15:56

Контекстная реклама интернет-магазина автотоваров — как снизить траты и увеличить ROMI на 772%

Контекстная реклама интернет-магазина автотоваров — как снизить траты и увеличить ROMI на 772% Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...

03 05 2023 14:22:32

Корпоративные академии. Как обучать сотрудников и клиентов в кризис и после него

Корпоративные академии. Как обучать сотрудников и клиентов в кризис и после него Обзор главных преимуществ, которые дают облачные академии бизнесу....

02 05 2023 16:21:11

10 рабочих способов повторного использования контента

10 рабочих способов повторного использования контента В помощь контент-маркетологам, редакторам, авторам и бизнесу: идеи, которые учитывают фактор SEO. Переупакуйте статьи, заметки, любые другие посты — угодите читателям и поисковикам. Узнать больше!...

01 05 2023 3:11:24

Что такое XML-feed: как его создать и отредактировать

Что такое XML-feed: как его создать и отредактировать XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...

30 04 2023 3:27:57

Мир К-pор: механика фанатских соцсетей — от популярности к монетизации

K-pop заpaбатывает деньги: как и сколько...

29 04 2023 11:23:34

Настраиваем эффективную рекламу в контекстно-медийной сети Google — шесть полезных советов

Настраиваем эффективную рекламу в контекстно-медийной сети Google — шесть полезных советов кмс Google: как достичь поставленной цели с помощью рекламы? Делимся советам по настройке КМС-кампаний....

28 04 2023 7:33:15

Лучшие дудл-игры от Google для обеденного перерыва

Лучшие дудл-игры от Google для обеденного перерыва Топ doodle games от Google — от менее достойных к самым крутым....

27 04 2023 11:34:30

Как динамическая подмена заголовка влияет на конверсии

Как динамическая подмена заголовка влияет на конверсии Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...

26 04 2023 19:25:12

Facebook ***ytics — подробное руководство по настройке

Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...

25 04 2023 0:36:54

Netpeak Agency SEO Tool: обзор и фишки для специалистов

Netpeak Agency SEO Tool: обзор и фишки для специалистов Как расширение от Netpeak может облегчить работу над важными SEO-задачами....

24 04 2023 1:38:44

Как сменить две бизнес-модели за три года — история бизнеса Naimi.kz

В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....

23 04 2023 5:48:38

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017 Советы от 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

Как анализировать личные расходы с помощью Airtable R и PowerBI

Как анализировать личные расходы с помощью Airtable R и PowerBI Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....

20 04 2023 18:11:17

Мобильное приложение для ecommerce — как правильно рассчитать ресурсы при разработке, чтобы повысить продажи

Несколько полезных советов перед запуском. Tрaнcпорт и путешествия, ритейл, медиа и развлечения — тематики, в которых чаще используют мобильные приложения. Есть и другие факторы популярности приложений. Узнать!...

19 04 2023 11:41:42

Serpstat 2.0: как внутренняя разработка выросла в All-in-One SEO Platform

Serpstat 2.0: как внутренняя разработка выросла в All-in-One SEO Platform Короткая история Serpstat — от сервиса «для своих» до международной SEO-платформы....

18 04 2023 1:24:17

Типы соответствия ключевых слов в Google Рекламе и Яндекс.Директ — подробная инструкция

Типы соответствия ключевых слов в Google Рекламе и Яндекс.Директ — подробная инструкция Как разобраться в типах соответствия ключевых слов и определить, что минус-слова блокируют показы нужных ключевых слов....

17 04 2023 23:19:38

Зачем заказывать сбор семантического ядра у агентства

Зачем заказывать сбор семантического ядра у агентства Когда и зачем нужно заказывать сбор семантического ядра, на какие этапы разбит процесс и какие результаты можно получить...

16 04 2023 21:19:56

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2018 года

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2018 года Данные по 43 миллионам кликов в 27 тематиках и 391 городах страны...

15 04 2023 22:42:21

Инфографика: как именно рулит контент

Инфографика: как именно рулит контент Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...

14 04 2023 2:56:39

Как BuzzSumo заработал $2,5 миллиона за первый год — growth-кейс для SaaS

Стив Рейсон назвал 20 уроков, которые BuzzSumo усвоил на пути к топу самых популярных сервисов для контент-маркетологов....

13 04 2023 6:26:45

Что такое Progressive Web Apps и какие возможности они открывают для вашего бизнеса

Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...

12 04 2023 7:15:27

Что такое админ-панель сайта и как туда попасть

Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...

11 04 2023 2:37:38

Что делать со старыми статьями в блоге

Что делать со старыми статьями в блоге Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....

10 04 2023 9:49:20

Как cделать красивую визуализацию в Google Data Studio — подробное руководство

Как cделать красивую визуализацию в Google Data Studio — подробное руководство Google Data Studio: подробная инструкция и обзор возможностей...

09 04 2023 21:35:21

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::