Сайт на 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.



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

Как создать HTML-карту сайта

Как создать HTML-карту сайта Как построить html-карту. Верстка карт New York Times, IMDb и Daily Mail в качестве примера...

14 07 2024 9:16:29

Праздничные рассылки: примеры триггерных рассылок к праздникам

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

13 07 2024 8:34:11

Длинные заголовки в Google Рекламе

Длинные заголовки в Google Рекламе После нехитрых манипуляций с текстом вторая строка оказывается в заголовке....

12 07 2024 23:54:43

Как сделать интеграцию Google Tag Manager с Яндекс.Метрикой

Как сделать интеграцию Google Tag Manager с Яндекс.Метрикой Подружим GTM и Метрику с минимальным вовлечением программиста....

11 07 2024 4:50:50

Как защитить аккаунт в Instagram от взлома

Безопасность Instagram — что делать, если заметили попытку взломщиков украсть аккаунт, и как вернуть аккаунт после взлома....

10 07 2024 9:23:59

MEGOGO, Google, Фокстрот и AIR Brands — как бренды создают эффективный видеоконтент

MEGOGO, Google, Фокстрот и AIR Brands — как бренды создают эффективный видеоконтент Бренды поделились инсайтами на ДиВи Конф — фишки от MEGOGO, Google, TikTok, Banda, McCann, I am IDEA, AIR Brands, Rocket и Фокстрот...

09 07 2024 1:59:18

Как создать фид динамического ремаркетинга для Facebook без программиста

Как создать фид динамического ремаркетинга для Facebook без программиста Бесплатно, быстро и безопасно. Но есть и минусы. Узнать больше!...

08 07 2024 9:23:33

Что нужно понимать в SEO-отчетах, чтобы оценить эффективность продвижения

Что нужно понимать в SEO-отчетах, чтобы оценить эффективность продвижения Всё об оценке эффективности SEO-продвижения с инструментами и рекомендациями...

07 07 2024 4:36:41

Как получить код ответа cервера для страниц сайтов прямо в доксе

Как получить код ответа cервера для страниц сайтов прямо в доксе Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....

06 07 2024 19:30:23

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

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

05 07 2024 22:57:38

10 расширений для Google Chrome в помощь SEO-специалистам

10 расширений для Google Chrome в помощь SEO-специалистам Отключение и удаление элементов, расширенные настройки, интересные дополнения и многое другое в нашем материале про мир SEO расширений....

04 07 2024 20:15:19

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

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

03 07 2024 16:40:40

Массовые изменения в Google Ads Editor

При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....

02 07 2024 7:42:13

5 примеров автосообщений для сайта

5 примеров автосообщений для сайта Как улучшить конверсию сайта: идеи для маркетологов...

01 07 2024 16:19:21

Как оценить новый канал трафика?

Как оценить новый канал трафика? Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...

30 06 2024 21:53:24

Всё, что вы хотели узнать про краудфандинг, но стеснялись спросить

Всё, что вы хотели узнать про краудфандинг, но стеснялись спросить Проведение краудфандинговых кампаний — это бизнес. Это отдельный и вполне серьёзный рынок с уймой заточенных под ваши нужды услуг. Раньше нужно было ждать, пока проект пройдет обязательную проверку сотрудником Kickstarter, сейчас можно запускать кампанию...

29 06 2024 9:41:25

Как редизайн повысил доход от SEO — кейс по юзабилити

Как редизайн повысил доход от SEO — кейс по юзабилити Считаем SEO-эффект от нового дизайна сайта и работы над usability...

28 06 2024 9:18:56

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255%

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255% Наибольшее количество онлайн транзакций было получено по брендовым запросам женского белья...

27 06 2024 2:27:58

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....

26 06 2024 14:26:10

Лучшие примеры ошибки 404

Лучшие примеры ошибки 404 Ошибка на странице 404 может выглядеть креативно. Страница не найдена и не может быть найдена, потому что она в розыске, утеряна, украдена ниндзей, путь заснежен и дороги дальше нет, а принцесса находится в другом замке. О чем это?...

25 06 2024 17:41:13

Бизнес-фреш: что такое digital и чем это отличается от SMM (продвижения в социальных сетях)

Бизнес-фреш: что такое digital и чем это отличается от SMM (продвижения в социальных сетях) «Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....

24 06 2024 3:55:38

Как небольшому медийному агентству выйти на новый уровень?

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

23 06 2024 13:26:30

Как запустить контекстную рекламу в Японии и не сойти с ума

Как вести успешную рекламную кампанию в Японии, не зная языка....

22 06 2024 22:25:50

Отчеты Google ***ytics — подробное руководство с объяснениями

Отчеты Google ***ytics — подробное руководство с объяснениями То, чего нет в справке — подробный обзор отчетов Google ***ytics: в режиме реального времени, по аудитории, источникам трафика, поведению, конверсии. Узнать больше!...

21 06 2024 21:39:56

Сайт загружается медленно: когда не нужно паниковать

О неправильных тpaктовках отчета по времени загрузки страниц сайта в ***ytics...

20 06 2024 18:13:43

Партнерство с Amazon — всё? Что делать после уменьшения партнерских выплат

Партнерство с Amazon — всё? Что делать после уменьшения партнерских выплат Amazon сократил комиссию для сайтов партнеров от 30% до 80% — что делать дальше? Мнение эксперта....

19 06 2024 13:19:26

5 вопросов: нужно ли вам статейное продвижение

Наталья Воскобойникова из контент-студии WordFactory решила дать четкую хаpaктеристику потенциальному заказчику гостевых постов. Если хотя бы один ваш ответ на вопросы в этом посте отрицательный, стоит найти другие тактики продвижения своего проекта....

17 06 2024 22:13:48

Почему трудоголики — не герои: ломаем стереотипы с «Rework»

Почему трудоголики — не герои: ломаем стереотипы с «Rework» «Rework» — одна из самых любимых книг нетпиковцев....

16 06 2024 17:41:10

Как работать с оператором «квадратные скобки» в Вордстат?

Как работать с оператором «квадратные скобки» в Вордстат? Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...

15 06 2024 7:35:45

CEO fuckups. Три ошибки опытных руководителей

И как с ними справиться. Рабочие инструкции для Chief Executive Office и менеджеров в целом. Давайте управлять комaндой и собой более эффективно и без выгорания. Узнать больше!...

14 06 2024 4:50:51

Как компании контролируют сотрудников в соцсетях. Три кейса

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

13 06 2024 13:17:25

Как составить техзадание и донести суть исполнителю

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

12 06 2024 22:26:29

Зачем нужен видеомаркетинг: инфографика

Зачем нужен видеомаркетинг: инфографика Видеомаркетинг должен стать обязательной частью рекламной онлайн-стратегии, и мы собрали несколько подтверждений этому в нашей инфографике....

11 06 2024 6:52:34

Какова длина идеального текста для Интернета?

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

10 06 2024 17:57:38

Кликбейт-заголовки — всё: почему лента Facebook станет лучше

Кликбейт-заголовки — всё: почему лента Facebook станет лучше Кликбейтинг в опасности. Если хочешь узнать методы работы антикликбейт-комaнды Facebook, просто нажми на этот заголовок...

09 06 2024 18:43:27

Как настроить Google Shopping — руководство для новичков

Как настроить Google Shopping — руководство для новичков Как создать аккаунт в Google Merchant Center, загрузить и изменить фид с информацией о товарах, — делимся тонкостями настройки кампаний шопинга...

08 06 2024 13:14:46

Мониторинг ошибок 404 с помощью специальных отчетов в Google ***ytics

Мониторинг ошибок 404 с помощью специальных отчетов в Google ***ytics Простой способ отслеживания как внутренних, так и внешних битых ссылок. Узнать больше!...

07 06 2024 23:11:32

Как увеличить продажи с помощью местных экспертов от Google — советы локальному бизнесу

Как увеличить продажи с помощью местных экспертов от Google — советы локальному бизнесу Информация для SEO- и PPC-специалистов, маркетологов и предпринимателей малого бизнеса...

06 06 2024 6:57:35

Оптимизация скорости сайта: как уменьшить время ответа сервера

Оптимизация скорости сайта: как уменьшить время ответа сервера Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...

05 06 2024 3:43:34

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

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

04 06 2024 6:16:58

Techtober: что показали Apple, Google и Samsung.

Techtober: что показали Apple, Google и Samsung. Apple, Google и Samsung — давайте вспомним новинки месяца....

03 06 2024 12:21:41

Таргетированная реклама — что это, принцип работы и как настроить правильно

Таргетированная реклама — что это, принцип работы и как настроить правильно Почти 4,5 млрд людей имеют аккаунты в соцсетях. Огромная и активная аудитория. Но как среди нее найти своего клиента? Поможет таргетированная реклама....

02 06 2024 9:31:36

SEO-среда: отcлеживание целей и настройка событий

SEO-среда: отcлеживание целей и настройка событий Настройка целей в Google ***ytics, а также отслеживание событий....

01 06 2024 20:14:37

Кейс по SMM в тематике «ресторанный бизнес»: «Угощение — каждому!»

Кейс по SMM в тематике «ресторанный бизнес»: «Угощение — каждому!» Cafe case. Знакомство аудитории с только что открывшимся заведением: online + offline....

31 05 2024 5:21:14

Что такое Netpeak Friends Day и почему его стоит посетить

Что такое Netpeak Friends Day и почему его стоит посетить А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...

30 05 2024 4:24:39

Топ 5 лучших вебинаров для онлайн-предпринимателей

Топ 5 лучших вебинаров для онлайн-предпринимателей Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...

29 05 2024 17:35:15

Новая услуга по созданию лендингов на Tilda

Новая услуга по созданию лендингов на Tilda Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...

28 05 2024 9:57:24

Как выбрать подрядчика для SEO и PPC: нанять агентство или создать инхаус-комaнду

Как выбрать подрядчика для SEO и PPC: нанять агентство или создать инхаус-комaнду Почему синергия штатных специалистов и рекламное дело агентства SEO/PPC выгодна бизнесу...

27 05 2024 3:20:21

Как добавить сайт в Google ***ytics, Яндекс.Метрику и LiveInternet — пошаговое руководство

Как добавить сайт в Google ***ytics, Яндекс.Метрику и LiveInternet — пошаговое руководство Как зарегистрировать и настроить новый сайт в сервисах веб-аналитики...

26 05 2024 11:48:35

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