• Главная
Главная » Продвижение » Сайт на ajax и продвижение

Поисковые системы и сайты на ajax. Сайт на ajax и продвижение


Продвижение сайта на AJAX

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии Ajax судьба будет веселее.

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии AJAX судьба будет веселее.

При раскрутке сайта, сделанного c использованием AJAX, возникают проблемы индексации.

Означает ли это, что нужно отказываться от новых технологий? Вовсе нет. Давайте разбираться.

Что такое AJAX и зачем его используют?

Как работает «обычный» сайт:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Старая страница пропадает. Пользователь видит белый лист.
  4. Начинает отрисовываться новая страница.
  5. Переход к п. 1.

Как работает сайт на AJAX:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Меняется определенный фрагмент страницы.

На AJAX-странице встроена программа на JavaScript, которая умеет загружать с сервера небольшие порции данных, и показывать их в нужных местах.

Плюсы

  • Почти мгновенная загрузка без мелькания «белого» окна.
  • Снижается нагрузка на сервер.
  • «Бесшовный» пользовательский опыт. Плавный переход от одной странице к другой. Пользователь хочет оставаться на сайте, а не уйти за чаем / в соц. сеть.

Минусы

  • Сайт — это не текст, а программа. Поисковые роботы хотят видеть текст.
  • При отключенном JavaScript (пусть это редкость), пользователь видит пустую страницу.
  • Многократно возрастает сложность проектирования и разработки. Сайт на AJAX стоит дороже.

Пример

Самый впечатляющий пример — это социальная сеть ВКонтакте.

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

Вы слушаете музыку — и вдруг приходит сообщение. Можно спокойно перейти на другую страницу, а плеер так и будет играть.

Всё потому что никакой перезагрузки не происходит. Специальный JavaScript умеет переформатировать страницу, и возникает ощущение, будто мы куда-то перешли.

 

Как заставить сайт индексироваться

Раньше поисковики игнорировали сайты на AJAX. Теперь есть несколько способов успешно проиндексироваться и попасть в поисковую выдачу.

1. Способ от Яндекса (и для Яндекса)

С мая 2012 года Яндекс предлагает «фирменный» (то есть работающий только для него) способ индексации AJAX-ресурсов: http://help.yandex.ru/webmaster/robot-workings/ajax-indexing.xml.

Чтобы им воспользоваться, нужно:

  1. Переписать ссылки в приложении. Если они содержат решетку, нужно добавить после неё восклицательный знак. Например:http://www.example.com/#blog > http://www.example.com/#!blog

    В поисковой выдаче эти сайты выглядят так:

    Сайты на JavaScript в выдаче Яндекса

  2. Отдавать поисковому роботу AJAX-фрагменты по GET-параметру ?_escaped_fragment_.Например, фрагмент AJAX-страницы с адресом «#!blog», нужно продублировать по адресу /?_escaped_fragment_=blog.
  3. На аякс-страницах прописать мета-тег:<meta name="fragment" content="!">
  4. В Яндекс.Метрике (если вы ей пользуетесь) включить обработку адресов с хэшем (то есть с «решеткой»):

Передайте вашему программисту инструкции:

Плюсы способа

Это официальный способ, который 100% работает с поисковой системой Яндекс.

Минусы

  • Требует серьезных вложений в программирование.
  • Другие поисковики не научатся понимать ваш сайт.
 

2. Способ от сторонних сервисов

Так как AJAX шагает по планете, появились сервисы, которые «переведут» ваш сайт. Для поисковых роботов он будет не AJAX-программой, а обычным сайтом с текстовыми страничками.

Вот 3 подобных сервиса:

К сожалению, только сервисы только западные.

Плюсы

  • Доступность «из коробки»: ничего не нужно изобретать или программировать. От программиста требуется лишь установка.
  • Бесплатность для небольших сайтов.

Минусы

  • Платно (в валюте) за большие объемы.
  • Черный ящик: как это работает — тайна, покрытая мраком. Есть риск отказа сервиса, с которым нужно мириться.

 

3. «Серединный путь»

Способ, родившийся задолго до того, как поисковики научились хоть как-то понимать AJAX.

Принцип

Показываем обычный сайт, который затем перехватывает управление.

JavaScript-программа соседствует с «классическим» кодом, который полностью отрисовывает страницу на сервере.

И здесь нам на помощь может прийти тег <noscript> — брат-близнец тега <script>. Он устанавливается специально для поисковых роботов, а также для пользователей пользователям, у которых отключены скрипты.

Если у пользователя (или робота) нет возможности воспроизвести JavaScript-программу, показывается содержимое <noscript>.

Пример

http://html5.gingerhost.com/seattle — сайт сначала обычный текст, а клики по ссылкам обрабатывает JavaScript.

Плюсы

  • Универсальность.
  • Можно внедрить на существующий сайт (как на классический, так и на AJAX-сайт).

Минусы

  • Двойная работа: нужно написать как «классический» сайт, так и JavaScript-обвязку для работы через AJAX. Удорожание разработки сайта.
  • Усложнение внутренней логики. Удорожание поддержки.

 

А как дела в Google?

Google давно работает над тем, чтобы индексировать AJAX-страницы.

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

Именно поэтому лучше позволять поисковым роботам индексировать все ресурсы: не только страницы, но и скрипты.

 

Кейс: успешная индексация сайта на JavaScript и Flash

В далеком 2006 году «Тойота Екатеринбург Восток» создали изумительный сайт.

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Проблема

Продвижение оказалось проблематичным, так как сайт был сделан на полностью «нетекстовых» технологиях: JavaScript и Flash. То есть поисковые роботы видели лишь программный код вместо ожидаемых текстов.

Решение

Был использован способ №3 (двух других пока ещё не было): для каждой страницы изготовили «подложку» внутри <noscript> — и показывали пользователям сайт «во всей красе», а поисковикам — только текстовое содержимое.

Результат: 3-я позиция в Яндексе по запросу «Тойота» по всей России (тогда была ещё общая федеральная выдача без деления на регионы).

 

Вывод

Описанные методы добиваются одного: чтобы поисковый робот видел обычный текст.

Если ваш AJAX-сайт предоставляет информацию для робота в наиболее понятном для них виде, вы получаете:

  • сайт, приятный для пользователя (ведь, вы этого добивались, когда решили использовать AJAX),
  • индексацию поисковиками.

Эта статья поможет вам, когда AJAX решит войти в вашу жизнь.

Сохраните её у себя в Facebook, кликом по ссылке«Поделиться» (внизу слева):

promoexpert.pro

SEO + AJAX: как им ужиться?

Почему это важно

Сегодня в сети все чаще можно встретить не только отдельные страницы, свёрстанные при помощи технологии AJAX, но и целые сайты, использующие этот способ вывода контента. Это продиктовано тем, что AJAX набрал большую популярность среди web-разработчиков как более современный и совершенный путь решения сложных задач динамического вывода контента и его визуализации.

Однако, несмотря на свою прогрессивность, данная технология весьма нелюбима в профессиональной среде SEO-специалистов из-за ряда особенностей, о которых мы поговорим ниже. Хотим не просто обозначить те проблемы, которые могут возникнуть у AJAX-сайтов в контексте продвижения, но и расскажем о поиске компромиссных путей их решения.

Причины популярности технологии AJAX среди разработчиков

Одной из основных тенденций в разработке юзер-ориентированых сайтов, является их физическое ускорение. Во внимание берётся всё: время загрузки страницы, элементов на ней, скорость реакции на взаимодействие, совершаемое пользователем. При этом любая технология, которая позволяет качественно ускорить любую из составляющих сайта или отдельных его страниц, сразу после появления взлетает на пик популярности у веб-разработчиков. Это объясняется весьма просто: умея создавать более быстрые и удобные для пользователей сайты, вы получаете преимущество перед конкурентами.

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

AJAX же позволяет динамически изменять содержание страницы без полной перезагрузки, т.е. пользователю нет необходимости ждать, пока сайт «замер» в ожидании ответа от сервера. Простой пример прикладного использования: вы пишете письмо или текстовое сообщение какому-нибудь пользователю и хотите прикрепить к нему фото, картинку или видеоролик. Процесс загрузки ролика, как правило, не очень быстрый и в обычной ситуации вам пришлось бы ждать, пока он завершится, чтобы продолжить писать. С технологией AJAX вы можете параллельно набирать текст, не дожидаясь окончания загрузки. Удобно? Безусловно. И это лишь маленький бытовой пример, в то время как специалист по юзабилити сможет привести таких примеров сотни. Все эти факторы и обусловили то, что AJAX стал востребован и популярен как у разработчиков, так и у рядовых пользователей.

Однако у любой медали есть две стороны. Предоставляя определенные преимущества, AJAX накладывает и ряд ограничений, с которыми нужно считаться.

Плюсы и минусы использования AJAX для формирования страниц

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

Плюсы использования:

  • Экономичность. Ввиду того, что при запросе AJAX-страницы серверу нет необходимости заново «перегружать» весь контент и повторно генерировать всю страницу, а только часть ее (ту, которая изменяется/подгружается AJAX-скриптом), происходит значительная экономия web-трафика и снижается количество запросов-обращений на сервер.
  • Снижение серверной нагрузки. Данное преимущество вытекает из первого, когда за счет снижения количества запросов, посылаемых на сервер, снижается и нагрузка. Это особенно актуально на крупных сайтах, где количество генерируемых запросов пользователями может стать серьезной проблемой, ставящей под угрозу работоспособность.
  • Ускорение загрузки страницы. Отсутствие необходимости в перезагрузке страницы, позволяет добиться того, что конечный пользователь, значительно быстрее увидит результат своего взаимодействия с интернет-ресурсом.

В то же время AJAX может в буквальном смысле «похоронить» всю работу SEO-специалиста при некорректном использовании. Поэтому  о минусах использования данной технологии говорят обычно именно оптимизаторы.

Минусы использования:

  • Страницы сайта не индексируются поисковыми системами. Это одна из основных проблем использования AJAX. Особенно она актуальна, если принимается решение о реализации динамической подгрузки содержимого на уже оптимизированных сайтах. Некорректное использование может привести к тому, что проиндексированные страницы, которые и создают трафик, просто исчезнут из результатов поиска.
  • Искажение данных статистики. Так как поисковые системы перестают «видеть» AJAX-страницы, данные от счетчиков, установленных на них, передаются некорректно. Для крупных ресурсов, особенно работающих в нише e-commerce, это такая же большая потеря, как и исчезновение посадочных страниц из выдачи.

Из-за этих существенных минусов долгое время AJAX был неким «табу» среди оптимизаторов. Однако сегодня есть достаточно простое и логичное решение, которое может убрать негативный эффект от использования данной технологии и прийти к разумному компромиссу между SEO-специалистом, владельцем сайта, разработчиком и конечным пользователем. То есть, в полной мере использовать вышеперечисленные плюсы AJAXи избавиться от недостатков.

Как показать поисковику, где находится контент страницы на AJAX?

Основной проблемой AJAX является то, что поисковая система не может проиндексировать содержимое динамической страницы. Но для выполнения SEO-задач необходимо каким-то образом предоставить поисковому роботу возможность увидеть этот контент.

На данный момент существует несколько вариантов, как это сделать:

1.   Использование HIJAX (устаревший способ)

Это решение подразумевает использование специальной технологии под названием HIJAX (названа разработчиком, который ее придумал). Суть ее заключалется в том, что одновременно с вызовом AJAX-функции происходит переход по статической ссылке с параметром. Таким образом пользователь получает страницу с динамическим содержимым, а робот, игнорирующий вызов функции, попадает на статическую html-страницу. Выглядит это примерно так:

foo 32

Где, ="ajax.html?foo=32"  – это статическая ссылка для поискового бота, а 'ajax.html#foo=32' – это параметр для вызова AJAX-кода.

В данном случае статическая страница – это «html-слепок» (копия) динамической страницы, которую видит пользователь.

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

2.   Использование знака «!» как указателя для поисковой системы в URL-адресе (актуальный способ)

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

Теперь для того, чтобы указать поисковому боту на то, что AJAX-страница имеет статический «html-слепок», достаточно добавить в URL восклицательный знак. Выглядит это следующим образом:

http://www.example.com/#stranica – стандартная «ссылка» на AJAX-страницу

http://www.example.com/#!stranica – модифицированный формат «ссылки» на AJAX-страницу

В таком случае как только робот встретит в URL-адресе #!, он запросит у сервера «html-слепок» страницы, который сможет проиндексировать. В то же время пользователю будет показана AJAX-страница.

Единственным условием является то, что «html-слепок» страницы должен быть доступен для поискового бота по URL-адресу, где #!, заменен на ?_escaped_fragment_=.

http://www.example.com/#!stranica – «ссылка» на AJAX-страницу

http://www.example.com/?_escaped_fragment_=stranica – ссылка на html-версию страницы

При использовании данного способа в кэше поисковой системы будет храниться html-версия страницы, доступная по «уродливому», как его называет Google, URL-адресу с ?_escaped_fragment_=, но на выдаче вид ссылки на сайт будет сохранен, то есть в нем будет стоять #!.

Такой способ решения проблем рекомендован для применения системой Yandex, о чем можно прочесть в официальном руководстве данной поисковой системы.

Некоторые дополнительные особенности

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

1. ЧПУ-адреса страниц. В стандартном виде, как было описано в примере выше, адреса страниц все равно получаются не очень красивыми, хоть Googleи называет их prettyURL. То есть, в них все равно будут присутствовать символы #!. Однако эту проблему можно обойти, присвоив стандартные статические ЧПУ (человекопонятные URL-адреса) страницам, использующим AJAX. Единственное, что нужно учесть: при этом способ имплементации «html-слепка» будет отличаться.

Для страницы вида:

http://www.example.com/stranica

«html-слепок» должен находиться по адресу:

http://www.example.com/stranica?_escaped_fragment_=

Т.е. значение параметра будет пустым, но в код самой страницы (в теге <head>) необходимо добавить строку:

 

В «html-слепке» данного тега быть недолжно, иначе он не проиндексируется.

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

2. Формирование файла Sitemap.xml. Поисковая система Yandex в своем руководстве «Помощь Вебмастеру» говорит следующее: «Ссылки, содержащие #!, также можно использовать в карте сайта», подразумевая, что можно использовать и ссылки на «html-слепки», т.е., содержащие ?_escaped_fragment_=. В то же время Google в явном виде говорит о том, что нужно использовать ссылки только с дополнением #!:

00

«Подводные камни» при использовании AJAX

Несмотря на кажущуюся понятность и простоту предложенных методов оптимизации AJAX-страниц, под которой подразумевается их доступность поисковым ботам, есть несколько моментов, о которых стоит задуматься перед внедрением технологии, особенно на работающих сайтах.

К ним можно отнести следующие:

  • Непрогнозируемые последствия для ранжирования. Если нужно, например, для тысячи однотипных товаров поменять URL-адреса, организовав их вывод посредством AJAX, то даже при настройке постраничных 301 редиректов, ресурс может сильно «качнуть» в поисковой выдаче. Вероятность таких последствий непрогнозируемая, так как планируемые изменения не идут в разрез с требованиями поисковых систем. Но на примере ряда сайтов, можно утверждать, что проблемы вполне вероятны. В данном случае можно рекомендовать только постепенное внедрение, разбитое на несколько итераций.
  • Неясный механизм расчета скорости загрузки страницы. Данный параметр является косвенным фактором ранжирования сайта поисковыми системами, однако его влияние достаточно велико. В случае с AJAX-страницами не ясно, на основании загрузки какой из версий производится расчет скорости загрузки – версии для пользователей или html-версии для поискового робота, а значит, на данный параметр сложнее повлиять. Единственной рекомендацией тут может быть следующая: делать максимально быстрыми обе версии.

Вывод

Сегодня использование AJAX уже не является табу для поисковой оптимизации. Более того, при правильном подходе вы можете использовать данную технологию так же эффективно, как и простой html, но при этом получить ряд дополнительных преимуществ, которые дает AJAX.Основной плюс – это возможность строить более быстрые и удобные пользовательские интерфейсы.

Однако стоит помнить, что SEOшники не зря настороженно относятся к данной технологии. При некорректном использовании, без соблюдения требований поисковых систем, AJAX может привести к плачевным последствиям в виде серьезных потерь органического трафика и в ранжировании. Прежде чем «выкатывать» какую-либо из AJAX-разработок на основной домен, стоит удостовериться в том, сделана ли она в соответствии с одним из двух рассмотренных в статье способов. А также проверить, как поисковые боты «видят» данное изменение, например, при помощи инструмента «Посмотреть как Googlebot».

Оба описанных в данной статье способа решения возможных проблем являются рабочими – их использование протестировано на реальных проектах и доказало свою эффективность. Но начиная с октября 2015 года, поисковая система Google не рекомендует использовать описанные в этой статье технологии индексирования AJAXстраниц, о чем было официально написано в блоге GoogleWebmasterCenterBlog. Вместо этого, система предлагает следовать принципам «ProgressiveEnhancement» при создании сайтов, что позволит роботам Google лучше интерпретировать динамический контент – в текущий момент система в состоянии самостоятельно распознать его без дополнительной настройки, интерпретируя .jsи .css. Несмотря на это, описанные нами механизмы полностью поддерживаются поисковой системой и остаются стабильно рабочими до сегодняшнего дня.

promodo.ua

как отдельным страницам попасть в выдачу — Netpeak Blog

При создании сайта или приложения на Ajax игнорируется одна из основных сущностей интернета — веб-страница с отдельным URL. Вся информация на странице подгружается скриптом без обновления URL, то есть фактически поисковым системам нечего добавлять в индекс, кроме главной страницы. Это просто ад для поискового продвижения.

Та же проблема существует для одностраничных лендингов, созданных не на Ajax.

Конечно, напрашивается вопрос...

Зачем вообще создавать сайты на Javascript и Ajax?

Проекты на Javascript и Ajax проще в разработке. Они обеспечивают удобное и быстрое взаимодействие с пользователем благодаря использованию асинхронных запросов. Коды таких сайтов значительно короче из-за возможности повторного использования компонентов. Кроме того, в плюсы запишу быструю загрузку страниц и отсутствие ожидания связи с сервером.

Но вот с поисковой оптимизацией у таких сайтов настоящая беда, и чтобы исправить это придется запомнить несколько новых терминов :)

Что такое shebang/hashbang и причем тут SEO?

Shebang/hashbang — последовательность из символов #! в URL, которая позволяет поисковым системам сканировать и индексировать сайты и приложения, полностью созданные с помощью Ajax.

Суть метода: для каждой Ajax-страницы, которую необходимо проиндексировать, на сервере разместить HTML-версию.

По шагам:

1. При запросе Ajax-страницы должен формироваться URL  http://site.com/#!/hello-world. Включение восклицательного знака позволит узнать о наличии HTML-версии документа, а не просто якоря — закладки с уникальным именем на той же странице, как в случае с использованием простого #. Пример простой якорной ссылки можно увидеть на странице «Как настроить расширенную электронную торговлю с помощью Google Tag Manager». Клик по ссылкам из блока ниже позволит перейти к нужной части статьи на той же странице:

Клик по ссылкам из блока ниже позволит перейти к нужной части статьи на той же странице

2. Поисковый робот автоматически заменяет #! на ?_escaped_fragment_= и, соответственно, обращается к странице http://site.com/?_escaped_fragment_=hello-world — именно эта страница должна быть HTML копией Ajax-страницы сайта.

3. Ссылки на страницы с #! необходимо поместить в карту сайта. Это ускорит индексацию страниц.

4. Чтобы сообщить роботу об HTML-версии главной страницы, в код следует включить метатег <meta name="fragment" content="!">. Этот метатег нужно использовать на каждой Ajax-странице.

Важно! В HTML-версии документа метатег размещать не следует: в этом случае страница не будет проиндексирована, потому что при наличии метатега на странице, поисковый робот делает обращение к серверу в поисках соответствующей страницы с фрагментом URL: ?_escaped_fragment_=. Саму страницу c метатегом он не индексирует.

5. Ссылка в результатах поиска направит пользователя на Ajax-версию страницы.

6. В файле robots.txt должны быть открыты все Javascript-файлы, а также файлы, отвечающие за обработку Ajax. Это очень важно для индексации.

Например:

В файле robots.txt должны быть открыты все Javascript-файлы, а также файлы, отвечающие за обработку Ajax

На сайте maxcar.bg с помощью технологии hashbang реализована фильтрация в категориях сайта. Например:

На сайте maxcar.bg с помощью технологии hashbang реализована фильтрация в категориях сайта

В результате страницы попадают в индекс Google:

В результате страницы попадают в индекс 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.

То, что ранее выглядело как http://site.com/#page1, при применении функции push.State() будет выглядеть как http://site.com/page1.

Функция window.history.pushState() использует три параметра: data, title, url. Внедрение данной функции происходит следующим образом:

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

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

Функция window.history.pushState

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

Что делать, если сайт на 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_= без использования #!. Для этого необходимо добавить в код <meta name="fragment" content="!">, не меняя при этом URL. Поисковые системы при наличии данного метатега будут искать соответствующую HTML-версию страницы на сервере.

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

Поисковые системы при наличии данного метатега будут искать соответствующую HTML-версию страницы на сервере

Выводы

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

netpeak.net

Индексирование сайтов на ajax, как настроить правильное сканирование ajax-сайтов

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

Основная проблема заключается в том что у сайтов на Ajax все url-адреса страниц реализованы через хеш тег #. Как мы уже знаем страницы с # не индексируются поисковыми системами. Следовательно поисковые системы не могут обнаружить динамически генерируемый контент на сайте.

Как решить эту проблему и сделать так чтобы сайт на Ajax корректно индексировался и ранжировался в соответствии со своей релевантностью — мы разберем в этой статье.

Для начала нужно ознакомиться с рекомендациями поисковых систем :Справка ЯндексСправка Google

Рассмотрим оптимизацию ajax сайта на примере:

1. Для начала необходимо переписать ссылки в URL. Если они содержат решетку (#) — нужно поставить после неё восклицательный знак (!).

http://www.keragros.com/#sertifikat-keramogranit-cf/c1pry → http://www.keragros.com/#!sertifikat-keramogranit-cf/c1pry

2. HTML-версия каждой AJAX-страницы должна быть доступна по адресу, в котором сочетание «#!» заменено на GET параметр «?_escaped_fragment_=»

http://www.keragros.com/#!sertifikat-keramogranit-cf/c1pry →http://www.keragros.com/?_escaped_fragment_=sertifikat-keramogranit-cf/c1pry

?_escaped_fragment_=sertifikat-keramogranit-cf/c1pry

3. На AJAX-странице необходимо прописать тег :

<meta name="fragment" content="!">

meta name="fragment" content="!">

Пример:

http://www.keragros.com/#!sertifikat-keramogranit-cf/c1pry

Поисковые системы и сайты на ajax

4. Для ускорения индексации страниц сайта можно сформировать полную карту сайта в формате .xml. Ссылки на страницы сайта можно указывать с фрагментом #!, это не будет проблемой для индексации.

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

Для этого необходимо выполнить сравнение ajax-версии страницы и сохраненной копии. В качестве теста возьмем страницу http://www.keragros.com/#!rulyef-keramogranit-rostov/cafl.

Google :

4

Яндекс :

Поисковые системы и сайты на ajax

Страницы корректно индексируются поисковыми системами, весь контент есть в сохраненной копии.

Как делать не нужно

Также хотелось бы привести пример сайта, где не выполнены рекомендации поисковых систем по сканированию сайтов на Ajax. Сайт, используя который, можно легко подобрать предметы интерьера — http://indoor.kiev.ua/. Удобный интерфейс, интересная задумка проекта, качественные изображения и креативный подход.

Но все эти достоинства не увидят поисковые системы, так как не могут просканировать страницы данного ресурса :

Google:

Поисковые системы и сайты на ajax

Яндекс:

Поисковые системы и сайты на ajax

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

Вывод

Продвижение сайтов на ajax отличается лишь внедрением дополнительных рекомендаций поисковых систем по корректному сканированию страниц сайта. Никаких проблем со сканированием/индексированием/ранжированием не будет.

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или воспользуйтесь ссылкой, чтобы сообщить нам.

inweb.ua

Продвижение сайтов на «Ajax» - SEO блог Сидаша

Опубликовано: 13.03.2015 | Рубрика: Статьи и пресс-релизы

Продвижение сайтов на «Ajax»

Для чего предназначена система «Ajax»?

Это изобретение подняло функционирование интернет-страниц на совершенно новый уровень. Если при работе с обычной страницей вы щелкаете ссылку и получаете новую страницу, то «Ajax» предполагает изменение отдельного сектора страницы.

Чтобы увидеть, как именно это происходит, откройте VK. Если Вы хотите ответить на сообщение или послушать музыку, вам вовсе не обязательно уходить со страницы, с которой вы работаете в данный момент.

«Ajax» позволяет не только быстро и удобно пользоваться ресурсом, но и существенно снизить нагрузку на сервер.

Главный недостаток ресурсов, работающих по этому принципу (на JavaScript), заключается в сложностях работы с поисковыми роботами. Дело в том, что поисковик ориентируется на текстовое содержание, в то время как сайт представляет собой программу. Из-за этого значительно усложняется не только разработка, но и оптимизация сайтов.

Сегодня проблема индексирования страниц «Ajax» может потребовать определенных трудозатрат, но в целом она решаема. По сравнению с ситуацией, господствовавшей ранее, наблюдается существенный прогресс. Еще сравнительно короткое время назад поисковики вообще никак не реагировали на сайты «Ajax». Система находила не текст, а программный код. Теперь существует несколько способов позволить сайту попасть в поисковую выдачу.

«Яндекс» дает возможность сделать страницу индексируемой при помощи включения в URL-код сочетания «#!». Естественно, что каждая страница ресурса должна быть снабжена HTML-версией. При этом необходимо учесть ряд нюансов: необходима доступность HTML-версии с включением особого параметра: «?_escaped_fragment_=». Значение параметра при этом следует оставлять незаполненным. Главная страница требует включения мета-тега.

Этот способ официально предлагается самим «Яндексом» и поэтому работает безотказно в 100% случаев. Однако другие поисковики все равно не поймут вашей страницы. Поэтому необходимо взвесить все «за» и «против» – подумать, являются ли огромные затраты на программирование оправданными.

Поскольку «Ajax» стремительно набирает популярность, появились ресурсы, которые сделают вашу страницу доступной для поисковых систем в текстовом виде. С одной стороны, пользование этими серверами не требует затрат на программирование. С другой, это зарубежные серверы, принцип работы которых неизвестен. Кроме того, бесплатно воспользоваться ими может только малая страница, в то время как за массивный ресурс придется заплатить немалые средства в валюте.

Еще один способ – продублировать JavaScript обычным скриптом. Если поисковик или отдельный пользователь не в состоянии отобразить текстовое содержание «Ajax», то он автоматически перенаправляется на страницу классического образца. Способ достаточно удобный, но затратный по усилиям и финансовым вливаниям. Он фактически требует двойной работы от программиста: нужно создать как обычный ресурс, так и сопровождение с JavaScript, чтобы обеспечить возможность функционировать через «Ajax».

sidash.ru

Продвижение сайта на AJAX

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии Ajax судьба будет веселее.

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии AJAX судьба будет веселее.

При раскрутке сайта, сделанного c использованием AJAX, возникают проблемы индексации.

Означает ли это, что нужно отказываться от новых технологий? Вовсе нет. Давайте разбираться.

Что такое AJAX и зачем его используют?

Как работает «обычный» сайт:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Старая страница пропадает. Пользователь видит белый лист.
  4. Начинает отрисовываться новая страница.
  5. Переход к п. 1.

Как работает сайт на AJAX:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Меняется определенный фрагмент страницы.

На AJAX-странице встроена программа на JavaScript, которая умеет загружать с сервера небольшие порции данных, и показывать их в нужных местах.

Плюсы

  • Почти мгновенная загрузка без мелькания «белого» окна.
  • Снижается нагрузка на сервер.
  • «Бесшовный» пользовательский опыт. Плавный переход от одной странице к другой. Пользователь хочет оставаться на сайте, а не уйти за чаем / в соц. сеть.

Минусы

  • Сайт — это не текст, а программа. Поисковые роботы хотят видеть текст.
  • При отключенном JavaScript (пусть это редкость), пользователь видит пустую страницу.
  • Многократно возрастает сложность проектирования и разработки. Сайт на AJAX стоит дороже.

Пример

Самый впечатляющий пример — это социальная сеть ВКонтакте.

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

Вы слушаете музыку — и вдруг приходит сообщение. Можно спокойно перейти на другую страницу, а плеер так и будет играть.

Всё потому что никакой перезагрузки не происходит. Специальный JavaScript умеет переформатировать страницу, и возникает ощущение, будто мы куда-то перешли.

 

Как заставить сайт индексироваться

Раньше поисковики игнорировали сайты на AJAX. Теперь есть несколько способов успешно проиндексироваться и попасть в поисковую выдачу.

1. Способ от Яндекса (и для Яндекса)

С мая 2012 года Яндекс предлагает «фирменный» (то есть работающий только для него) способ индексации AJAX-ресурсов: http://help.yandex.ru/webmaster/robot-workings/ajax-indexing.xml.

Чтобы им воспользоваться, нужно:

  1. Переписать ссылки в приложении. Если они содержат решетку, нужно добавить после неё восклицательный знак. Например: http://www.example.com/#blog > http://www.example.com/#!blog

    В поисковой выдаче эти сайты выглядят так:

    Сайты на JavaScript в выдаче Яндекса

  2. Отдавать поисковому роботу AJAX-фрагменты по GET-параметру ?_escaped_fragment_.Например, фрагмент AJAX-страницы с адресом «#!blog», нужно продублировать по адресу /?_escaped_fragment_=blog.
  3. На аякс-страницах прописать мета-тег: <meta name="fragment" content="!">
  4. В Яндекс.Метрике (если вы ей пользуетесь) включить обработку адресов с хэшем (то есть с «решеткой»):

Передайте вашему программисту инструкции:

Плюсы способа

Это официальный способ, который 100% работает с поисковой системой Яндекс.

Минусы

  • Требует серьезных вложений в программирование.
  • Другие поисковики не научатся понимать ваш сайт.
 

2. Способ от сторонних сервисов

Так как AJAX шагает по планете, появились сервисы, которые «переведут» ваш сайт. Для поисковых роботов он будет не AJAX-программой, а обычным сайтом с текстовыми страничками.

Вот 3 подобных сервиса:

К сожалению, только сервисы только западные.

Плюсы

  • Доступность «из коробки»: ничего не нужно изобретать или программировать. От программиста требуется лишь установка.
  • Бесплатность для небольших сайтов.

Минусы

  • Платно (в валюте) за большие объемы.
  • Черный ящик: как это работает — тайна, покрытая мраком. Есть риск отказа сервиса, с которым нужно мириться.

 

3. «Серединный путь»

Способ, родившийся задолго до того, как поисковики научились хоть как-то понимать AJAX.

Принцип

Показываем обычный сайт, который затем перехватывает управление.

JavaScript-программа соседствует с «классическим» кодом, который полностью отрисовывает страницу на сервере.

И здесь нам на помощь может прийти тег <noscript> — брат-близнец тега <script>. Он устанавливается специально для поисковых роботов, а также для пользователей пользователям, у которых отключены скрипты.

Если у пользователя (или робота) нет возможности воспроизвести JavaScript-программу, показывается содержимое <noscript>.

Пример

http://html5.gingerhost.com/seattle — сайт сначала обычный текст, а клики по ссылкам обрабатывает JavaScript.

Плюсы

  • Универсальность.
  • Можно внедрить на существующий сайт (как на классический, так и на AJAX-сайт).

Минусы

  • Двойная работа: нужно написать как «классический» сайт, так и JavaScript-обвязку для работы через AJAX. Удорожание разработки сайта.
  • Усложнение внутренней логики. Удорожание поддержки.

 

А как дела в Google?

Google давно работает над тем, чтобы индексировать AJAX-страницы.

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

Именно поэтому лучше позволять поисковым роботам индексировать все ресурсы: не только страницы, но и скрипты.

 

Кейс: успешная индексация сайта на JavaScript и Flash

В далеком 2006 году «Тойота Екатеринбург Восток» создали изумительный сайт.

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Проблема

Продвижение оказалось проблематичным, так как сайт был сделан на полностью «нетекстовых» технологиях: JavaScript и Flash. То есть поисковые роботы видели лишь программный код вместо ожидаемых текстов.

Решение

Был использован способ №3 (двух других пока ещё не было): для каждой страницы изготовили «подложку» внутри <noscript> — и показывали пользователям сайт «во всей красе», а поисковикам — только текстовое содержимое.

Результат: 3-я позиция в Яндексе по запросу «Тойота» по всей России (тогда была ещё общая федеральная выдача без деления на регионы).

 

Вывод

Описанные методы добиваются одного: чтобы поисковый робот видел обычный текст.

Если ваш AJAX-сайт предоставляет информацию для робота в наиболее понятном для них виде, вы получаете:

  • сайт, приятный для пользователя (ведь, вы этого добивались, когда решили использовать AJAX),
  • индексацию поисковиками.

Эта статья поможет вам, когда AJAX решит войти в вашу жизнь.

Сохраните её у себя в Facebook, кликом по ссылке«Поделиться» (внизу слева):

novosibirsk.promoexpert.pro

Как делать удобные ajax-сайты / Хабр

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

Сразу скажу, что существуют такие web-приложения, которые лишены указанных ниже недостатков (например, Gmail, Хабрахабр). Но это — счастливые исключения, лишь подтверждающие правила.

1. Трудность навигации

Прежде всего, состояние. Тот, кто читал «Психбольницу в руках пациентов» Купера, знает, о чем речь. Складным ножом легко пользоваться потому, что у него всего два состояния: раскрыт и сложен. А в случае же с сайтом вы имеете очень большое количество состояний. И если к неопределенности в плане ссылок мозг еще привыкает со временем — пользователь знает, что он находится на одной странице, и всего его действия ограничены ею одной, что сказывается на относительной легкости моделировании различных состояний по страницам — то с аяксом такого не происходит.

Довольная Гаечка наконец-то нашла нормальный ajax-сайт! Однако этот факт совершенно не заботит типового программиста. Потому что мозг программиста настолько мощный, что ему под силу моделировать все состояния в голове. К чему же это приводит?

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

Решением является такое применение аякса, когда пользователю предоставляются «виртуальные» страницы, когда функционал так группируется, что есть некие логические центры, откуда идет множество аякс-запросов, связанных одной ответственностью. К примеру, в Gmail это явно видно: вот список писем, вот страница письма, а вот страница настроек.

Но это только вершина айсберга. Рассмотрим более конкретные баги и недоработки.

2. Сброс состояния при закрытии

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

Невозможность отправить другу, или добавить страницу в избранное. Разработчик не позаботился использовать никакие признаки состояния, в котором находится аякс-приложение, в URL. И чтобы отправить другу ссылку в аське, нужно еще написать текст в стиле «нажми туда, пойди сюда, кликни это», чуть ли не скринкаст снять. Ясно, что если вдруг случайно выключился свет, то те же самые действия пользователю придется проделать снова, что ужасно бесит и сильно снижает ядро аудитории сайта.

Отдельно отмечу формы, которые не запоминают введенные данные, показывая сообщений о неверном заполнении. Это просто трындец, господа. Запомните, главный закон — DRY — работает для пользователя в первую очередь. Пользователь должен делать минимум кликов, и не должен ничего делать дважды. Плюс автосохранение в важных формах is a must, если речь идет об админках приложений.

Решением является добавление к URL каких-нибудь маркеров, возвращающих приложение к нужному состоянию, например, ajaxsite.ru/#myStateInfoGoesHere

3. Неработающие кнопки навигации

Так как в первом пункте мы уже поняли, что пользователи привыкли и в силу работы мозга, и в силу истории развития интернета думать страницами, то неработающие кнопки назад/вперед, которые так бесили во флэш-сайтах, восстали из пепла после постепенного умирания flash в аякс-сайтах. Ничто так не раздражает, когда ты зашел на какой-то нереальный раздел 100500го уровня навигации, и нет кнопки вроде «вернуться к списку» на самой странице от разработчика, и вдруг обнаруживаешь — «Back», которая спасала еще со времен Netscape (классный был браузер), не работает!

Кнопки «назад» и «вперед» должны работать. Я закрываю сразу такой сайт, где это правило не работает, потому что во второй раз делать миллион кликов не хочу — в гугле ждет по списку следующий сайт (ваш конкурент с нормальными, адекватными программистами, которые сами тестят свой сайт глазами пользователей).

4. Тормоза

Недавно я зашел на сайт одного стартапа, который реализовал мою давнюю идею. И был очень недоволен — с айпада грузился очень медленно, во многом благодаря тому, что каждый из мелких элементов административного интерфейса подгружался аяксом. Кликаю раскрыть список — и он грузится… Если бить страницу на миллион мелких страниц, нужно знать, что нередко это может приводить к ее медленной работе. Особенно если разработчик не позаботился посылать параллельные запросы к серверу и каждый микроэлемент сделал аяксом.

Количество аякс-блоков на странице должно быть ограничено разумным числом.. Подгрузить следующую страницу результатов в таблицу, когда для генерации шапки, меню и тд выполняется много запросов к БД — разумно. А вот в случае с конфигурацией, когда у вас вкладки и внутри дерево настроек, каждую вкладку грузить аяксом, каждый попап, каждый элемент дерева (фанаты ExtJS в первую очередь стоят) — это зло, однозначно, господа.

5. Неочевидность происходящего на странице

Ушла в прошлое нижняя строка браузера, в которой когда-то мы писали с помощью манипуляций над window.status бегущую строку. Эх, было время в 2000х, когда это называлось не аяксом, а DHTML, и применялось в меру, и сайт javascript.internet.com и dynamicdrive.com с туториалами знал каждый второй, и на JS писали, понимая, а не тупя над тормозами без знания внутренностей фреймворков, как делают новички, пишущие о виртуозном владении JavaScript.

Но я отвлекся :)

Только половина сайтов сообщают, как Google Docs, что они что-то там сохраняют или загружают, с помощью надписей или всем приевшегося рисуночка с крутящимися полосками. Сейчас ситуация уже лучше, а раньше ты работал с сайтом, и вдруг у тебя пропадало текущее окно и вылезало ОНО, на что ты нажал минуту назад (привет server-side тормозам).

Сообщайте пользователю о процессе загрузки чего-либо, чтобы он был готов к изменениям на странице.

6. Неверное применение AJAX

Очень часто применяется модный эффект. К примеру, подгрузка по мере скролла контента вместо традиционного paging. Paging обладает миллиардом преимуществ — и ссылку можно дать, и понятно где ты находишься. А когда ты скроллил фотки вконтакте, закрыл случайно и открыл shift+ctrl+T — изволь скроллить по-новой.

Ну и самый распространенный косяк — это когда модный эффект, применный к месту, усложняется. Знаете, как раздражает, когда кликаешь «подгрузить еще» каждые 10 сообщений, водя мышку туда-сюда, вместо того, чтобы просто скроллить. И просто потому, что программист поленился и не сделал подгрузку при скролле.

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

7. Отсутствие поддержки клавиатуры

Тоже очень бесит. Во-первых, формы не отправляются по нажатию Enter (к чему приучает десктопный интерфейс). Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц, не работают (привет Гуглу, Яндекс красавчеги). Внезапно вылезший модальный попап не пропадает при нажатии Escape.

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

Общая идея проектирования ajax-приложения

Я думаю, вы сами без труда найдете еще десяток примеров. А если нет, и вы, как и я — программист и вам легко работать с вашим приложением, помните о своих настоящих пользователях. Попробуйте посмотреть на приложений их глазами.

Вам в помощь наука. Мозг, как известно, при весе в 1/50 тела в момент предельной нагрузки потребляет до 25% всей энергии организма. Посему он стремиться всячески свести свою работу к минимуму. Именно поэтому, а вовсе из-за непонятной психологам, не знающим биологию есть прокрастинация. Поэтому мы ленивы и поэтому нам нравится все простое и не нравится все, что требует лишних энергетических затрат.

Следовательно, измеряйте количество кликов для выполнения основных user stories на вашем сайте, количество движений мышкой, количество нажатий клавиш, и всячески минимизируйте эти числа. Тупо и методично. Тут можно похвалить Гугл — зацените, вы вводите текст, а он уже начинает искать и показывать результаты. Круто сделано.

Напишите в комментариях ваши примеров раздражающих моментов в аякс-приложениях и сайтах, и образцовые сайты.

upd. из комментариев:

lesha_penguin 8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

Например, в интернет-магазине невозможность открыть одновременно два товара для сравнения/выбора в двух вкладках. За такое хочется убивать.

alienator Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

Еще: если какая-то информация используется для построения нескольких блоков на странице, но надо обновлять их все. Один известный банк не сразу допер, что если пользователь нажал кнопку «Обновить остаток» в заголовке конкретного счета, то не мешает полученный остаток обновить и в списке счетов в левой колонке.

mib Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

А при загрузке явоскрипта — клики по этим линкам перехватываются, и с сервера забирается только аякс-контент, а не вся страничка.

habr.com

Смотрите также