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



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

Платиновые правила продающего видеоконтента на YouTube

Платиновые правила продающего видеоконтента на YouTube Каким правилам нужно следовать, чтобы создать эффективный рекламный ролик?...

14 04 2024 11:43:48

Как сделать покупателя более платежеспособным и нарастить объемы продаж в eCommerce

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

13 04 2024 3:24:11

Правила работы с отзывами клиентов — памятка для брендов

Правила работы с отзывами клиентов — памятка для брендов От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...

12 04 2024 21:35:47

Что такое триггер в маркетинге

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

11 04 2024 15:26:39

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...

10 04 2024 9:45:12

Как вывести сайт из-под фильтра Яндекса за накрутку поведенческих факторов

Как вывести сайт из-под фильтра Яндекса за накрутку поведенческих факторов Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...

09 04 2024 9:21:48

Основные виды контента и правила оформления в зависимости от вида

Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...

08 04 2024 15:36:52

Сервис оплаты частями уменьшает количество брошенных корзин в интернет-магазине

Сервис оплаты частями уменьшает количество брошенных корзин в интернет-магазине Благодаря сервисам оплаты частями у покупателей появляется возможность покупать товары и услуги по выгодным ценам. А у бизнеса — увеличивать объем продаж....

07 04 2024 19:20:49

Изменение поведения: факторы влияния

Изменение поведения: факторы влияния Формула изменения поведения Фогга и два красочных примера инсайде....

06 04 2024 9:42:43

Импорт офлайн-конверсий Google Рекламы. Подробный инструктаж

Импорт офлайн-конверсий Google Рекламы. Подробный инструктаж Крутые площадки для нового инструмента: контекстщикам на заметку!...

05 04 2024 9:52:59

Три уровня оптимизации рекламной кампании в Google Ads

Предположим, что оптимизация в аккаунте похожа на реальный мир и рассмотрим несколько примеров :)...

04 04 2024 12:16:58

Кейс по рекламе в прайс-агрегаторах в тематике «гаджеты и аксессуары»: ROMI 869%

Кейс по рекламе в прайс-агрегаторах в тематике «гаджеты и аксессуары»: ROMI 869% Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....

03 04 2024 19:58:13

Инсайты Google Business Profile: от настройки до оптимизации

Инсайты Google Business Profile: от настройки до оптимизации Как зарегистрироваться и пользоваться аккаунтом в Google Business Profile: руководство для интернет-маркетологов и владельцев бизнеса...

02 04 2024 6:56:32

Закрытый софт Netpeak для проверки позиций под кодовым названием «Камасутра»

Закрытый софт Netpeak для проверки позиций под кодовым названием «Камасутра» Проверка позиций: бесценный онлайн софт для SEO-специалистов :)...

01 04 2024 6:22:51

Как настроить таргетинг для рекламы в Instagram и Facebook

Как настроить таргетинг для рекламы в Instagram и Facebook Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...

31 03 2024 10:51:50

Карантин и удаленная работа — опыт Netpeak

Карантин и удаленная работа — опыт Netpeak Как настроить эффективную удаленную работу: комментарии топ-менеджмента Netpeak с плюсами и минусами, личными инсайтами и рекомендациями. А также перспективы развития удаленки в комапнии. Читать дальше!...

30 03 2024 6:56:22

Кейс по контекстной рекламе портала-каталога организаций: как оптимизация целевых страниц повлияла на поведенческие факторы

Кейс по контекстной рекламе портала-каталога организаций: как оптимизация целевых страниц повлияла на поведенческие факторы Портал-каталог организаций и его продвижение. В этом кейсе мы детальнее остановимся на выгодах для проекта от синергии усилий клиента и агентских специалистов по контекстной рекламе...

29 03 2024 3:23:19

Посиделки в офисе. Детские игры, чтобы разнообразить рабочие будни

Посиделки в офисе. Детские игры, чтобы разнообразить рабочие будни По следам «Игры в кальмара». Небольшая подборка ностальгических комaндных игр, которые могут прижиться в вашем офисе....

28 03 2024 5:25:43

AMP Google: что нужно знать об ускоренных мобильных страницах

Обновление от Google, запущенный в октябре 2015 года. Это просто веб-страницы, но в их основе находится AMP HTML, формат для максимального ускорения загрузки на телефонах...

27 03 2024 13:35:23

Создание простой темы для WordPress

Простые пошаговые советы о том, как самому сделать верстку шаблона Wordpress. От вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна. Узнать больше!...

26 03 2024 13:17:58

Спарта, поза гирлянды и микрочип: реклама июня-2021

Спарта, поза гирлянды и микрочип: реклама июня-2021 Чем удивляла, радовала и смешила реклама в социальных сетях в июне 2021 года...

25 03 2024 10:44:26

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

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

24 03 2024 14:38:54

Как найти упущенную семантику: кейс сервиса Serpstat (ex. Prodvigator)

Как найти упущенную семантику: кейс сервиса Serpstat (ex. Prodvigator) Упущенная семантика — это ключевые фразы, которые успешно используют в SEO и PPC ваши основные конкуренты, но не используете вы. Как найти упущенную семантику? Читайте кейс сервиса Prodvigator....

23 03 2024 17:47:32

Кейс Videonabliudenie.eu: рост количества звонков на 107% за 6 месяцев

Кейс Videonabliudenie.eu: рост количества звонков на 107% за 6 месяцев Повышение эффективности продаж через звонки с помощью call tracking....

22 03 2024 7:41:40

Digital стратег Даша Шигаева о работе, отчетах и киборгах

Digital стратег Даша Шигаева о работе, отчетах и киборгах Работа — рекламировать. Интервью с директором по стратегии агентства Smartica/Skykillers....

21 03 2024 8:53:46

Как провести четкую онлайн-трaнcляцию — кейс конференции MozCon

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

20 03 2024 17:43:21

Как сэкономить время специалиста при работе с крупным проектом — на примере OLX

Как сэкономить время специалиста при работе с крупным проектом — на примере OLX Убираем человеческий фактор при сборе отчетов по контекстной рекламе...

19 03 2024 16:33:55

Как выучить английский: советы специалистов Netpeak Group

6 лайфхаков из опыта специалистов Netpeak Group: пpaктические советы о том, как погрузиться в англоязычную среду в комфортном для себя ритме и объеме. Читайте далее....

18 03 2024 12:36:10

Синтаксис, виды и параметры UTM-меток — как правильно отследить трафик

Синтаксис, виды и параметры UTM-меток — как правильно отследить трафик UTM-метки позволяют эффективно отслеживать источники трафика. Но составлять их нужно правильно. Как именно, давайте разбираться....

17 03 2024 10:38:13

Digital-маркетинг по формуле 8Р

Примеры новой концепции Digital-маркетинга по формуле 8Р...

16 03 2024 16:24:28

Кто есть кто в комaнде проекта?

Кто есть кто в комaнде проекта? Всё, что нужно знать заказчикам услуг о внутренней кухне PM-специалистов...

15 03 2024 19:43:30

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com Вывод информационного сайта из-под алгоритмического YMYL фильтра Google...

14 03 2024 18:16:50

Как быстро перенести кампании из Google Рекламы в Директ

Как быстро перенести кампании из Google Рекламы в Директ Как перенести рекламные кампании из адвордс в директ, используя только Google Editor и Директ Коммaндер? Делимся быстрым и эффективным методом...

13 03 2024 9:42:21

Всемогущая функция Query — подробное руководство

Как пользоваться одной из самых важных функций Google Таблиц — подробное руководство по Query...

12 03 2024 3:10:31

Тактики видеомаркетинга — как покорить алгоритм YouTube

Тактики видеомаркетинга — как покорить алгоритм YouTube Отмена видео-сниппетов в выдаче Google, удаление страницы с тегами и инструмента подсказки ключевых слов в YouTube — все события последних месяцев свидетельствуют: Google всерьёз взялся за видеохостинги и решил изменить правила игры для видеомаркетинга в...

11 03 2024 11:44:34

Как написать follow up, чтобы от него был результат?

Памятка для всех, кому важно сохранить детали переговоров....

10 03 2024 17:34:28

Кейс по продвижению интернет-магазина детской обуви: ROMI 135%

Кейс по продвижению интернет-магазина детской обуви: ROMI 135% Покажем, как продвигать сайты, продающие детскую обувь...

09 03 2024 21:32:48

Google по Монтессори, или Разворот от каверзных интервью

Google по Монтессори, или Разворот от каверзных интервью Правильно задать вопрос или сфоримулировать ответ на собеседовании это еще далеко не все. Рецензия на книгу Ласло Бока «Работа рулит»...

08 03 2024 19:33:26

Как использовать видео для увеличения онлайн-продаж

Как использовать видео для увеличения онлайн-продаж 12 идей для видеоконтента и расскажем, где их лучше размещать, чтобы зрители стали клиентами. Как использовать видео для повышения продаж? Длинный, но все равно неполный список форматов. Читайте дальше и предлагайте свои варианты!...

07 03 2024 5:37:38

«Покажи свою работу»: рассказ сооснователя и управляющего партнера агентства Netpeak

«Покажи свою работу»: рассказ сооснователя и управляющего партнера агентства Netpeak Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...

06 03 2024 15:53:26

Посадочные страницы: инструкция по повышению эффективности

Статья Оливера Гарднера посвящена различным аспектам оптимизации посадочных страниц: дизайну, контексту, созданию кнопки действия...

05 03 2024 16:45:29

50 самых ужасных сайтов

Лихие девяностые и самые ужасные сайты интернета: образцы, примеры, оформление....

04 03 2024 0:10:23

Двенадцать веселых докладов TED Talks на различные темы

Двенадцать веселых докладов TED Talks на различные темы Идеи, достойные распространения. Какие доклады TED Talks повлияли на нетпиковцев....

03 03 2024 1:47:47

Как стать SEO-специалистом

Как стать SEO-специалистом Как стать востребованным сео оптимизатором: 35+ ссылок для обучения и совершенствования своих знаний, а также советы...

02 03 2024 21:40:49

Как бизнесу бороться с финансовыми мошенниками

Как бизнесу бороться с финансовыми мошенниками Чтобы обезопасить себя и своих клиентов, используйте технологию 3D Secure. Больше рекомендаций — в статье....

01 03 2024 15:25:22

Как получать деньги из YouTube

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

29 02 2024 22:25:57

Как объединять данные при создании отчета в Data Studio

Как объединять данные при создании отчета в Data Studio В статье коротко о способах объединения данных из разных источников для создания отчётов...

28 02 2024 13:53:41

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

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

27 02 2024 4:43:57

Как привлечь трафик на сайт: 15+ эффективных способов

Как привлечь трафик на сайт: 15+ эффективных способов Наконец-то вы создали сайт. Вы потратили усилия на дизайн, разработку, его наполнение. Но этого оказалось недостаточно, чтобы о вашем интернет- ресурсе узнали. Как же привлечь посетителей на сайт?...

26 02 2024 14:53:58

6 эффективных приемов работы в Директ Коммaндере

6 эффективных приемов работы в Директ Коммaндере Быстрые ссылки и другие советы на тему того, как эффективно работать в Директ Коммaндере....

25 02 2024 20:55:40

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