Сайт на 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.
Комментарии:
Реклама Facebook для вовлечения пользователей помогает привлечь внимание к приложению и удержать пользователей в условиях перенасыщенного рынка....
15 03 2025 13:21:50
Рассказываем о приемах, которые помогут вам заинтересовать читателей рассылки....
14 03 2025 23:18:59
Как построить самостоятельную комaнду и научиться спокойно делегировать...
13 03 2025 7:58:25
Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...
12 03 2025 22:28:59
79% владельцев смартфонов, если верить Google, используют их для покупок или заказов услуг. Это более двух миллиардов человек. Ничего удивительного, что даже Google запустил собственный сервис Call Tracking. Кому и зачем жизненно важно отслеживать звонки...
11 03 2025 3:56:48
Как исключить показы на нецелевых площадках в новом интерфейсе Google Ads. В конце статьи 30 000 минус-площадок, каналов YouTube, сайтов, приложений...
10 03 2025 2:12:28
Казахстанские реалии: данные по более 1 млн кликов в 23 тематиках и 15 городах....
09 03 2025 6:38:42
Что нужно сделать, чтобы ваши объявления показывались только заинтересованным клиентам? В первую очередь, подобрать ключевые слова, релевантные запросу потенциального клиента и ориентированные на пользователей с мотивацией совершить действие....
08 03 2025 2:26:42
Звук телефонного звонка важен и для пользователя интернета. Как точно рассчитать полученную прибыль и рентабельность инвестиций в рекламу...
07 03 2025 20:21:21
Подборка ненаучных наблюдений и ситуаций, в которых бывал каждый из нас...
06 03 2025 3:11:18
Всё что нужно знать про контекстную рекламу — Как выглядит, какая бывает, сколько стоит, популярные сервисы и др....
05 03 2025 22:39:47
Нужен ли вашему проекту редактор? Как правильно его выбрать и оценить на собеседовании, а затем и в процессе работы?...
04 03 2025 3:31:52
Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...
03 03 2025 15:34:30
В коробку [SEO 2.0] вместе с самим поисковым продвижением входят дополнительные ценности Netpeak: унифицированные действия по увеличению продаж, улучшения удобства работы и преимущества бренда Netpeak...
02 03 2025 22:16:19
Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...
01 03 2025 23:38:36
Проверенный способ для сбора базы данных. Метод, с помощью которого можно извлечь контактные данные, а именно: название точки, телефон, адрес, сайт., а потом высылать своё КП, промокоды для акции, сообщить о выходе товара, сделать спецпредложение...
28 02 2025 17:57:39
27 02 2025 7:49:40
Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...
26 02 2025 22:30:48
Список минус-слов для Google Рекламы для B2B сайтов....
25 02 2025 4:17:53
Создание репутации крутого специалиста — дело рук крутого специалиста....
24 02 2025 0:50:12
Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...
23 02 2025 14:18:19
Фубольный клуб. Как увеличить ROMI (возврат маркетинговых инвестиций) в рекламных кампаниях — рассказываем на примере киевского интернет-магазина «Динамо»...
22 02 2025 3:24:18
XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...
21 02 2025 5:47:23
Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...
20 02 2025 0:33:16
Как узнать срок хранения товаров в корзине и настроить ремаркетинг для завершения покупок...
19 02 2025 4:41:20
Персональная стратегия продвижения онлайн с помощью SEO и контекстной рекламы....
18 02 2025 5:16:20
Поговорим о soft skills, потому что именно они, исходя из моего опыта, помогают строить поистине сильные комaнды....
17 02 2025 8:41:46
И как с ними справиться. Рабочие инструкции для Chief Executive Office и менеджеров в целом. Давайте управлять комaндой и собой более эффективно и без выгорания. Узнать больше!...
16 02 2025 3:31:29
Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...
15 02 2025 0:38:20
Полезные советы для тех, кто делает контекст своими ручками :)...
14 02 2025 1:45:28
Отслеживание конверсий: покупка, подписка на рассылку, отправка контактных данных и другое....
13 02 2025 18:41:16
14 пунктов, которые помогут вам лучше изучить свой бизнес и подготовить эффективную SMM-стратегию...
12 02 2025 19:38:10
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
11 02 2025 14:58:23
Сортировка мусора, использование велосипедов вместо автомобилей, озеленение города... В Украине, как правило, так представляют экофрендли бизнес. Зарубежные компании идут дальше....
10 02 2025 2:48:53
Проверенные лайфхаки по платному трафику от спикеров и участников конференции 8P 2018...
09 02 2025 3:46:12
FAQ (frequently asked questions), HowTo и Q&A (questions and answers)....
08 02 2025 8:13:46
Интеграция видео в маркетинговую кампанию – решение, которое повысит ценность каждого посетителя сайта....
07 02 2025 20:48:35
Считаем SEO-эффект от нового дизайна сайта и работы над usability...
06 02 2025 3:48:15
Быстро разогнать рекламные кампании и получить рост конверсий при повышении CPA до 100%. Как этого добиться — читайте в новом кейсе....
05 02 2025 10:57:20
Самые популярные блоги Рунета по интернет-маркетингу — все RSS-фиды в одном месте...
04 02 2025 3:31:15
Платные и бесплатные способы ускорить оптимизацию....
03 02 2025 1:30:54
Гайд по типам рекламы в соцсетях для SMM-, PPC-специалистов, блогеров и владельцев бизнеса в зависимости от целей, которые вы ставите перед продвижением. С конкретными рекомендациями и примерами. Узнать больше!...
02 02 2025 16:30:28
Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...
01 02 2025 11:39:32
Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...
31 01 2025 0:58:19
10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....
30 01 2025 12:30:55
Что такое спарклайны, об организации прострaнcтва на рабочем листе и оптимизации времени на изучение данных в экселе и таблицах Google...
29 01 2025 7:29:32
Думаете, что почитать об онлайн-продвижении и диджитал-маркетинге? Вам сюда. Мы собрали топ интересных сайтов, блогов, каналов и пабликов...
28 01 2025 7:55:13
Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...
27 01 2025 20:23:58
General Data Protection Regulation (GDPR): ответы на вопросы....
26 01 2025 12:11:18
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
25 01 2025 0:23:41
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::