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

alexxlab

Содержание

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 в явном виде говорит о том, что нужно использовать ссылки только с дополнением #!:

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

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

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

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

Вывод

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

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

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

что это такое и его влияние на SEO

AJAX – это технология, позволяющая обращаться к серверу и не перезагружать при этом страницу. Обычно используется для динамической подгрузки содержимого странички, к примеру в интернет-магазинах или на маркетплейсах. С ее помощью пользоваться ресурсом становится удобнее, вырастает скорость взаимодействия. Аббревиатура расшифровывается как Asynchronous JavaScript and XML, из названия очевидно, что для работы технологии необходим JS.


История технологии

Идеи, отдаленно напоминающие AJAX, использовались в веб-разработке еще в 90-х годах. К ним можно отнести Remote Scripting – инструмент Microsoft для удаленного вызова серверных процедур с помощью клиентского скрипта. Механизм был придуман еще в 1998 году, а тег iframe, позволяющий встраивать один HTML-документ в другой, появился даже раньше – в 1996-м. Но эти способы не давали тех широких возможностей, которые обеспечила разработчикам технология AJAX. В 2005 году глава компании Adaptive Path Джесси Джеймс Гарретт написал книгу о принципе, который на тот момент использовали почтовые клиенты, дал ему название AJAX и подробно описал его работу. С тех пор технология стала инструментом широкого использования: она дает возможность работать с интернет-страницей как с обычным приложением, не обновляя ее. Это удобно и для владельца сайта, и для пользователя.

Принцип работы AJAX

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

Этапы. Понять, что такое AJAX и как он функционирует, поможет алгоритм действий – четкий список этапов его работы:

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


Обмен данными. Он происходит за счет объекта XMLHttpRequest, своеобразного буфера между сервером и браузером. К серверной части обращается POST- или GET-запрос. Первый используется для больших объемов данных, второй обращается к конкретному документу на сервере и передает как аргумент ссылку на страницу. После того как сервер получит запрос, он формирует ответ в формате XML или JSON.

  • XML сразу переводится в HTML;
  • в случае с JSON браузер запускает полученный код, создается объект JavaScript;
  • иногда ответ – простой текст, тогда он сразу же выводится на странице без лишних преобразований.

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

Преимущества технологии AJAX

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

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


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

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


Недостатки AJAX

Ни одна система не лишена недочетов и недостатков, и в случае с технологией динамической подгрузки основная сложность – оптимизация и связанные с ней факторы. Существует и еще несколько минусов.

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

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

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

Необходимость в JavaScript. Без включенного в браузере JavaScript технология просто не будет работать. JS поддерживают все современные браузеры, но, если пользователь решил отключить его выполнение, он не сможет нормально пользоваться сайтом. Это мешает и поисковым системам: из-за того что часть содержимого показывается только при выполнении запроса, поисковик не может ее проиндексировать.

Сложности с индексированием. Проблемы с SEO-продвижением – существенный недостаток технологии. Из-за того что часть контента доступна только после вызова AJAX, она не индексируется поисковиками: робот просто ее не замечает. В результате страдают показатели ранжирования и, следовательно, позиции.

Как снизить влияние AJAX на ранжирование

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

  • Ключевую часть, которая особенно важна для индексирования, лучше сделать статической и размещать в самом начале страницы.
  • Еще один прием – кеширование динамических страниц, что позволяет отображать их в качестве статических.
  • Вызывать AJAX лучше не событием onClick, а якорем.
  • Иметь на сайте sitemap.xml практически обязательно, это ускоряет и облегчает индексацию.

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

  • URL-адреса динамических страниц содержат в себе символ #. Их следует переписать, добавив после каждого восклицательный знак. Вот так: «#!».
  • После этого нужно прописать для каждой такой страницы HTML-версию, доступную по определенному адресу. Адреса создаются с помощью замены сочетаний «#!» на «?_escaped_fragment_=».
  • На каждой странице AJAX следует прописать метатег ‘ meta name=»fragment» content=»!» ‘.

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

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

При создании сайта или приложения на 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. Это очень важно для индексации.

Например:

На сайте 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.

То, что ранее выглядело как 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.

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

Что делать, если сайт на 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-версию страницы на сервере.

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

Выводы

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

Повлияет ли контент, загруженный AJAX, на SEO / поисковые системы?



интересно, влияет ли контент, динамически загружаемый AJAX, на SEO / способность поисковых систем индексировать страницу?

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

jquery ajax seo
Поделиться Источник Jiew Meng     21 июня 2010 в 10:58

7 ответов

  • Повлияет ли PHP включенный html контент на мой seo?

    Сегодня я покупаю небольшую систему CMS. С помощью этого CMS я могу превратить свой статический сайт в редактируемую страницу. Я должен вырезать контент, который хочу сделать редактируемым, и вставить его в админку. Скрипт сгенерирует новый html с этим содержимым. Чем я должен включить этот html в…

  • Получает ли загруженный контент AJAX «document.ready»?

    Вчера у меня была проблема, когда обработчик событий .on(‘click’) , который я назначал, работал неправильно. Оказывается, это потому, что я пытался применить этот .on(‘click’) до того, как этот элемент существовал в DOM, потому что он загружался через AJAX и, следовательно, еще не существовал,…


9

Год спустя…

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

http:/ / code.google.com / web/ajaxcrawling/

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

Правка: на сегодняшний день, 14 октября 2015 года, Google устарела от своей схемы обхода AJAX :

В 2009 году мы предложили сделать AJAX страницы ползучими. Тогда наши системы не могли визуализировать и понимать страницы, которые используют JavaScript для представления контента пользователям. … времена изменились. Сегодня, пока вы не блокируете Googlebot от обхода ваших файлов JavaScript или CSS, мы, как правило, можем визуализировать и понимать ваши веб-страницы, как современные браузеры.

H/T: @mark-bembnowski

Поделиться Jon z     27 июля 2011 в 16:07

Поделиться haoqiang     08 декабря 2015 в 02:57


2

Если у вас есть какой-то контент, загруженный запросом Ajax, то он загружается только агентами пользователей, которые запускают код Javascript.

Поисковые роботы обычно не поддерживают Javascript (или вообще не поддерживают).

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

Поделиться Pascal MARTIN     21 июня 2010 в 11:02

  • JavaScript загруженный внешний контент SEO

    Интересно, как лучше всего индексировать загруженный контент JavaScript поисковыми системами? Я знаю, что поисковые системы не выполняют JavaScript, но я больше думаю о прогрессивном зачаровании. Я создаю адаптивный веб-сайт, и на главной странице у меня будет несколько разделов о наиболее…

  • SEO и ajax ссылка на загруженный контент

    Мне нужна помощь, чтобы лучше понять SEO с загруженным контентом ajax. Здесь контекст: У меня есть single.php, где контент динамически генерируется (с базой данных php и xml) для каждого отдельного сообщения. Я загружаю контейнер этого single.php внутри моей страницы index.php через ajax. Вот…


2

Короткий ответ: это зависит.

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

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

Что касается вашего случая, когда у вас есть контент «constantly loading» — вы можете убедиться, что он проиндексирован, предоставив ссылки на поисковые агенты пользователей с поддержкой engines/non-js. Например, у вас может быть какой-то контент типа twitter, а в конце его-кнопка «Еще», которая ссылается на контент, начиная с последнего отображаемого элемента. Вы можете скрыть кнопку с помощью javascript, чтобы обычные пользователи никогда не знали, что она там есть, но искатели все равно проиндексируют этот контент (нажав на ссылку).

Поделиться Ramuns Usovs     21 июня 2010 в 11:12


1

Искатели не запускают JavaScript, так что нет, ваш контент не будет виден им. Вы должны предоставить альтернативный метод доступа к этому контенту, если хотите, чтобы он был проиндексирован.

Вы должны придерживаться того, что называется «graceful degradation» и «progressive enhancement». В основном это означает, что ваш сайт должен функционировать, а контент должен быть доступен, когда вы начинаете отключать некоторые технологии.

Создайте свой сайт с классической навигацией, а затем «ajaxify» его. Таким образом, он не только правильно индексируется поисковыми системами, но и удобен для пользователей, которые просматривают его с мобильных устройств / с отключенным JS / и т. д.

Поделиться Victor Stanciu     21 июня 2010 в 11:01

Поделиться ars265     24 июля 2012 в 14:50


1

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

Где-то в 2009 году Google выпустила свое предложение по ползучести AJAX. Вскоре после этого другие поисковые системы добавили поддержку этой схемы. На сегодняшний день, 14 октября 2015 года, Google устарела от своей схемы обхода AJAX :

В 2009 году мы сделали предложение сделать AJAX страниц ползучими. Тогда наши системы не могли визуализировать и понимать страницы, которые используют JavaScript для представления контента пользователям. … времена изменились. Сегодня, пока вы не блокируете Googlebot от обхода ваших файлов JavaScript или CSS, мы, как правило, можем визуализировать и понимать ваши веб-страницы, как современные браузеры.

Поделиться Mark Bembnowski     15 октября 2015 в 01:28

Похожие вопросы:


Скрытый контент div, учитывают ли поисковые системы этот контент или игнорируют его?

Возможный Дубликат : jQuery и SEO (скрытые div’s) Что делать, если я добавлю скрытый тег div внутри него какой-то текст контента, будут ли поисковые системы заглядывать в этот div? Пример:…


Прогрессивный рендеринг и SEO

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


Просматривает ли Google контент, загруженный через функцию загрузки jQuery?

Если у меня есть файл test1.html , содержащий некоторую информацию и test2.html , когда я использую .load(test1.html) Будут ли поисковые системы читать контент, загруженный с test1.html ?


Повлияет ли PHP включенный html контент на мой seo?

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


Получает ли загруженный контент AJAX «document.ready»?

Вчера у меня была проблема, когда обработчик событий .on(‘click’) , который я назначал, работал неправильно. Оказывается, это потому, что я пытался применить этот .on(‘click’) до того, как этот…


JavaScript загруженный внешний контент SEO

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


SEO и ajax ссылка на загруженный контент

Мне нужна помощь, чтобы лучше понять SEO с загруженным контентом ajax. Здесь контекст: У меня есть single.php, где контент динамически генерируется (с базой данных php и xml) для каждого отдельного…


Если я удалю базу данных mySQL на phpmyadmin, повлияет ли это на контент, загруженный на мой сервер ftp?

Если я удалю базу данных mySQL на phpmyadmin, повлияет ли это на контент, загруженный на мой сервер ftp? Связаны ли каким-то образом mySQL таблиц и FTP контента? Я использую wordpress для настройки…


Могут ли поисковые системы индексировать отдельные страницы в веб-приложении на базе JavaScript?

Веб-приложение, которое я создаю, имеет интерфейс с питанием JavaScript и извлекает данные с сервера с помощью AJAX. Все находятся на одном и том же page, но данные после хэштега в URL используются…


Как мне построить SEO дружественный сайт Ionic 5, который может генерировать HTML, а поисковые системы могут сканировать этот html

Мы разрабатываем веб — сайт в Ionic 5- Angular. Мы хотим, чтобы веб-сайт был SEO дружественным, чтобы поисковые системы могли легко сканировать веб-сайт. Обычно, если мы делаем вид источника ионного…

Индексирование сайта с динамической подгрузкой данных

Руководитель SEO-отдела агентства Nimax Олег Белов написал для «Нетологии» колонку о том, что делать сайтам с динамической подгрузкой данных, чтобы попадать в поисковики.

Последние годы разработчики сайтов уделяют больше внимания удобству интерфейсов: всё должно быть быстро, удобно и понятно. Но технологии, которые помогают создавать такие проекты, не всегда «дружат» с поисковыми системами. Иногда современные сайты либо отсутствуют в поиске «Яндекса» или Google, либо плохо ранжируются. Часто так бывает у сайтов с динамической подгрузкой данных. Давайте разберёмся, в чём сложность их индексации и как решить этот вопрос.  

Что такое динамическая подгрузка данных

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

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

  • Элемент обрабатывается JavaScript’ом, после запрос уходит на сервер, чтобы получить данные.

  • Сервер возвращает информацию, скрипт добавляет информацию на страницу без ее перезагрузки.

Таким образом, AJAX позволяет добавлять или обновлять контент на странице без её перезагрузки. Технология применяется в одностраничных сайтах-приложения (mail.google.com/  и yandex.ru/maps/), в различных интерактивных проектах (rambler-co.ru), а также на обычных сайтах для подгрузки информации в новостных блоках, листингах и других элементах на страницах (комментарии на livejournal.com/).

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

В чём сложность индексации AJAX-контента

Необходимое условие для индексации страниц сайта — наличие контента в коде в формате HTML. Особенность динамически подгружаемого контента в том, что в HTML-виде его в коде нет, он подгружается отдельно через JavaScript. Это приводит к двум проблемам:

  • Поисковый робот не видит контент, потому что его нет в HTML-коде. Из-за этого страницы могут не индексироваться.

  • Поисковые системы могут индексировать только главную страницу. Так получается, если разработчик использует символ «#» после доменного имени в URL-адресах: http://site.ru/#page-1 или http://site.ru/#page-2. Если адреса на сайте выглядят так, то в индекс поисковых систем будет попадать только главная страница.

Как решить проблему

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

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

  • Если адреса на сайте формируются с помощью «#», нужно заменить их на «#!» (хэшбэнг). То есть http://site.ru/#url → http://site.ru/#!url.

  • Если адреса имеют обычные ЧПУ без хэша, добавьте на динамические страницы мета-тег: 



При выполнении условий выше, робот будет запрашивать варианты страниц с параметром «?_escaped_fragment_=», по которым ему нужно отдавать HTML-снимки (HTML-копии страниц со всем контентом, загруженным после выполнения JavaScript). Чтобы создать HTML-снимки страниц обычно используют headless браузеры на стороне сервера. Например, PhantomJS или HtmlUnit.

Подробнее для разработчиков:

Когда робот попадёт на страницу с «#!» в URL-адресе или с мета-тегом , он запросит страницу с параметром «?_escaped_fragment_=»:

В итоге поисковый робот будет получать HTML-снимки всех страниц, которые и будут добавлены в индекс. Сайт будет участвовать в поиске на общих основаниях. В индексе поисковых систем при этом хранятся адреса без параметра «?_escaped_fragment_=».

Рекомендации для разработчиков:

Что делают поисковики для индексации динамического контента

В октябре 2015 года Google отозвал рекомендации по сканированию сайтов на AJAX. Теперь, если для Googlebot нет ограничений по чтению файлов JS и CSS, он отрисовывает и загружает контент в том же варианте, каким его видят пользователи у себя в браузере. Это значит, что сайты, использующие динамически подгружаемый контент, должны корректно индексироваться в Google, если роботу открыты служебные файлы.

Чтобы проверить, как выглядят страницы сайта для поискового робота Google, можно воспользоваться сервисом Search Console. В разделе «Сканирование» нужно выбрать «Посмотреть как Googlebot», ввести в соответствующую строку адрес страницы и нажать кнопку «Получить и отобразить». После обработки получить результат: посмотреть, как бот видит страницу и какие компоненты JS или CSS ему недоступны.


Вкладка «Сканирование»


Вкладка «Отображение»

В ноябре 2015 года Яндекс объявил о тестировании подобной технологии — использовании JS и CSS при сканировании сайтов.

Полезное почитать:

Нужно ли следовать новым рекомендациям Google?

Пока только Google способен индексировать сайты без получения полной HTML-копии страниц. Яндекс только тестирует такую возможность. Для всех остальных поисковых систем вариант остаётся прежний. Поэтому отказываться от HTML-копий страниц будет некорректным решением.

Индексирование страниц с подстановкой параметра «?_escaped_fragment_=» (когда происходит обращение к полной HTML-версии страницы) по-прежнему поддерживается и в Google. Если вы используете на сайте AJAX для подгрузки контента, ваш сайт будет по-прежнему корректно индексироваться в Google, если роботу отдаются страницы с «?_escaped_fragment_=».

Как использовать AJAX для нужд SEO

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

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

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

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

Как решить эти задачи

Для решения, конечно, можно использовать тег noindex, но он подходит только для Яндекса, другие поисковые системы его не воспринимают. В таком случае, вы можете подгружать дублирующийся контент динамически. Но остается проблема с Google’ом, т.к. он умеет исполнять JS-скрипты, а значит, контент все же проиндексируется. Для того, чтобы этого не произошло, ограничьте в фале robots.txt индексацию JS-файла, отвечающего за подгрузку контента. Это позволит скрыть нужную часть контента от поисковых роботов.

Итого

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

что это такое и зачем он нужен на сайте

AJAX Asynchronous JavaScript & XML – специальная технология взаимодействия с сервером, которая не требует выполнения перезагрузки. Она позволяет повысить скорость загрузки страниц веб–ресурса, поскольку нет необходимости обновлять их каждый раз. Наличие этой опции помогает сделать пользование сайтом для пользователя максимально комфортным.

История создания

Многие технологии, которые нашли свое применение в AJAX, появились больше 20 лет назад. Термин AJAX в первый раз прозвучал в 2005 году в статье Джесси Джеймса Гаррета, который является одним из создателей и главой Adaptive Path. В материале он впервые описал принцип создания приложений, который в тот период использовали в Google для своих сервисов карты и почты. Гаррет назвал эту технологию «прорывной» с точки зрения возможностей интернет-приложений. Он пояснил, что представляет собой AJAX, назвал эту технологию и указал на новую тенденцию. В конечном итоге это помогло поднять разработку сайтов и web-приложений на более высокий уровень. Именно благодаря этой технологии пользователи мобильных устройств могут видеть у себя на дисплее результаты «фонового» обмена данными между браузером и сервером.

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

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

Как функционирует система

Технология работы AJAX включает следующие этапы:

  1. 1 Юзер обращается к AJAX, чаще всего это происходит нажатием кнопки, предлагающей узнать более подробную информацию.
  2. 2 Сервис пересылает запрос на сервер вместе с сопутствующими данными. К примеру, может понадобиться загрузка какого-то файла или определенных сведений из базы.
  3. 3 Получив ответ из базы данных, сервер направляет его в браузер.
  4. 4 JavaScript получает ответ, расшифровывает и показывает пользователю.

Для обмена данных создается объект XMLHttpRequest, он выполняет посредническую функцию между сервером и браузером. Есть два типа запросов – GET и POST. GET обращается к документу на сервере, в качестве аргумента ему предоставляется URL веб–ресурса. Для обеспечения непрерывной работы запросов можно воспользоваться функцией JavaScript Escape обеспечить непрерывность запроса. Для больших объемов информации применяется POST.

Услуги, связанные с термином:

Индексирование сайтов на 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-странице необходимо прописать тег :

Пример:

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

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

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

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

Google :

Яндекс :

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

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

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

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

Google:

Яндекс:

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

Юля Залиховская

Руководитель отдела продаж

Узнайте о рекламе для вашего бизнеса!
Задайте Юле вопросы о продвижении сайта в интернете.

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

Вывод

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

Как: разрешить Google сканировать ваш контент AJAX

ОБНОВЛЕНИЕ: Теперь есть еще лучший способ решить проблему, которую я описал в этом посте. Я рекомендую вам обратить ваше внимание на мою новую публикацию на тему: Создание сканируемых и удобных для ссылок сайтов AJAX с помощью pushState ().

Оставлю этот пост для ностальгии!

Этот пост начинается с конкретной дилеммы, с которой часто сталкиваются оптимизаторы поисковых систем:

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

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

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

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

Основы

По сути, сайты, следующие этому предложению, должны предоставить две версии своего контента:

  1. Контент для пользователей с поддержкой JS по URL-адресу в стиле AJAX
  2. Контент для поисковых систем со статическим «традиционным» URL-адресом — Google называет это «снимком HTML»

Исторически сложилось так, что разработчики использовали часть URL-адресов « named anchor » на веб-сайтах на базе AJAX (это символ «решетка», # и текст, следующий за ним).Например, взгляните на эту демонстрацию — щелчок по пунктам меню меняет имя якоря и загружает контент на страницу на лету. Это здорово для пользователей, но пауки поисковых систем не могут с этим справиться.

Вместо использования хеша # новое предложение требует использования хеша и восклицательного знака: #!

#! Комбинация иногда называлась «хэшбэнгом» людьми, более увлеченными, чем я; Мне нравится звучание этого термина, поэтому я буду придерживаться его.

Hashbang Wallop: протокол сканирования AJAX

Как только вы используете хэшбэнг в URL-адресе, Google обнаружит, что вы следуете их протоколу, и интерпретирует ваши URL-адреса особым образом — они возьмут все, что находится после хэш-банга, и передадут его на сайт в качестве параметра URL-адреса. вместо. Имя, которое они используют для параметра: _escaped_fragment_

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

  • www.demo.com/#!seattle/hotels становится www.demo.com/?_escaped_fragment=seattle/hotels
  • www.demo.com/users#!name=rob становится www.demo.com/users ? _escaped_fragment_ = name = rob

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

Два предложения по статическим URL-адресам

На данный момент кажется, что Google возвращает статические URL-адреса в своем индексе — это имеет смысл, поскольку они не хотят навредить опыту пользователей, не использующих JS, отправив их на страницу, для которой требуется Javascript.По этой причине сайты могут захотеть добавить некоторый Javascript, который будет обнаруживать пользователей с поддержкой JS и переходить к «расширенной» версии AJAX страницы, на которую они попали.

Кроме того, вы, вероятно, не хотите, чтобы ваши проиндексированные URL-адреса отображались в поисковой выдаче с параметром _escaped_fragment_ в них. Этого можно легко избежать, разместив страницы «статической версии» с более привлекательными URL-адресами и используя переадресацию 301, чтобы направлять пауков от версии _escaped_parameter_ к более привлекательному примеру.

E.G .: В моем первом примере выше сайт может выбрать реализацию 301 редиректа с
www.demo.com?_escaped_fragment=seattle/hotels на www.demo.com/directory/seattle/hotels

Живой пример

К счастью для нас, на довольно большом веб-сайте уже есть отличная демонстрация этого предложения: новая версия Twitter.

Если вы являетесь пользователем Twitter, вошли в систему и используете Javascript, вы сможете увидеть мой профиль здесь:

Однако робот Googlebot распознает это как URL-адрес в новом формате и вместо этого запросит этот URL-адрес:

Разумно, Twitter хочет поддерживать обратную совместимость (и чтобы их индексированные URL-адреса не выглядели как мусор), поэтому они 301 перенаправляют этот URL-адрес на:

(И если вы вошли в систему как пользователь Twitter, последний URL-адрес фактически перенаправит вас обратно на первый.)

Другой пример, с бесплатно загружаемым кодом

Я установил демонстрацию этих практик в действии по адресу: www.gingerhost.com/ajax-demo

Не стесняйтесь поиграть и посмотреть, как ведет себя эта страница. Если вы хотите увидеть, как это реализовано с точки зрения «серверной части», нажмите ссылку для загрузки на этой странице, чтобы получить код PHP, который я использовал. (Примечание: я не разработчик; если кто-то обнаружит какие-либо явные ошибки, дайте мне знать, и я смогу их исправить!)

Дополнительные примеры, дополнительная информация

Витрина Google Web Toolkit придерживается этого предложения; экспериментирование с удалением hasbang оставлено в качестве упражнения для читателя.

Лучшее место для дальнейшего чтения по этой теме — определенно собственные справочные страницы Google. Они предоставляют информацию о том, как сайты должны работать, чтобы соответствовать этому предложению, и некоторые интересные советы по реализации, такие как использование серверных манипуляций с DOM для создания моментального снимка (хотя я думаю, что их внимание к этому «безголовому браузеру» вполне могло заставить людей от реализации этого раньше.)

В блоге Google Webmaster Central есть официальное объявление об этом, и Джон Мюллер предложил обсудить это на форумах WMC.

Между блогом Google, форумом и страницами справки вы должны найти все, что вам нужно, чтобы превратить ваши модные сайты AJAX во что-то, что может понравиться Google, а также вашим пользователям. Повеселись!

SEO-решения для страниц на основе AJAX

Загрузка контента по запросу с помощью AJAX (асинхронный Javascript и XML) или одностраничных приложений (SPA) на основе Javascript позволяет легко создавать быстрые, быстрые, настраиваемые и удобные для пользователя сайты. Эти динамические веб-страницы обеспечивают отличный пользовательский интерфейс и функциональность сайта.

Они позволяют загружать отдельные элементы на странице без необходимости обновления, создавая удобную страницу для клиентов. Например, Kayak.com загружает на страницу список цен и дат на основе ваших дат поиска:

Другие примеры включают бесконечную прокрутку, с которой мы все знакомы в Facebook или Twitter, а также розничные магазины электронной коммерции, такие как Uniqlo, которые позволяют прокручивать весь инвентарь мужчин на главной странице категории:

AJAX может негативно повлиять на SEO сайта

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

Различные состояния приложения AJAX обычно обозначаются в URL-адресе добавлением хэштега. Например, прокрутите текущую домашнюю страницу Flickr.com вниз; как вы можете видеть, хотя страница не обновляется, а URL-адрес остается относительно прежним, номер раздела страницы добавляется к URL-адресу по мере прокрутки вниз:

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

Доступные решения:

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

Использовать резервные страницы.

Это статические HTML-страницы, которые загружаются, если запрашивающий ресурс (поисковые роботы, старые браузеры, смартфоны и т. Д.) Не может проанализировать Javascript. Обычно это требует разработки сайта, который использует «прогрессивное улучшение», сайта, который отображает только столько кода, сколько может обработать браузер пользователя или бота.Один из способов добиться этого — использовать тег

Создавайте индексируемые «хэшбэги» страницы.

Google представил hasbang (#!) В 2011 году, который переводит ранее упомянутые URL-адреса хэштегов в индексируемые страницы с предварительно заданным состоянием. Однако этот вариант не пользуется популярностью среди оптимизаторов поисковых систем из-за увеличения времени разработки и отсутствия поддержки со стороны других движков и веб-сервисов.

Создайте общие URL-адреса, которые реплицируют текущее состояние UX.

Можно запрограммировать логику на стороне сервера, которая будет вызывать определенное состояние на любой странице; например, подумайте об общих URL-адресах YouTube, которые загружают определенный момент в видео.Затем эти настроенные URL-адреса можно сделать общедоступными, чтобы внешние ссылки на страницу указывали поисковым системам их индексировать. Опять же, время разработки не обязательно оправдывает преимущества.

Используйте функцию pushState.

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

Заключение

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

Рекомендуемый метод индексации содержимого AJAX в 2018 г .: Search Foresight публикует демонстрацию

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

Google впервые представил метод для облегчения обнаружения контента Ajax еще в 2009 году: это был так называемый метод «хеш-взрыва». Однако в 2015 году это решение было объявлено устаревшим, и в течение нескольких лет Google выступал за использование другого подхода в HTML 5, который использует потенциал метода JavaScript pushState.

Но все это очень технически, так как же вы поймете, как это работает, и как вы сможете показать разработчику, как хорошо писать код в Ajax, оставаясь при этом SEO-совместимым?

Демо-версия Search Foresight

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

  • загрузка содержимого страницы в Ajax
  • бесконечная прокрутка страницы

Как метод pushState делает страницу доступной для сканирования в Ajax?

Чтобы понять, как работает этот код на практике, просто нажмите вкладку «Нант» или «Париж» на демонстрационном сайте:

  • содержимое вкладки динамически изменяется после загрузки содержимого Ajax
  • URL страницы в панели навигации изменяется без перезагрузки страницы
  • SEO-теги изменяются динамически (заголовок, метаописание и т. Д.

Почему эти действия позволяют индексировать контент, загруженный с помощью Ajax? Поскольку Google интерпретирует изменения URL-адреса в браузере, созданные с помощью метода pushState (), как если бы он считывал URL-адрес новой страницы, перезагруженной обычным способом.

Метод был описан Google в этой статье:

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

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

Прокручивая страницу, вы заметите, что через некоторое время:

— загруженное содержимое вызывает изменение URL-адреса в строке URL-адреса браузера.

— теги изменяются динамически (в частности теги ссылок rel = [next / prev])

Хотите использовать вызовы Ajax и использовать технологию LA, рекомендованную Google? Затем просто дайте URL-адрес нашей демонстрации своей технической команде и попросите их вдохновиться (ультра-упрощенным) кодом, представленным в этой демонстрации.

Предупреждение: такой подход — не чудо, это просто более «элегантное» исправление. В 2018 году по-прежнему не рекомендуется создавать контент JavaScript на стороне браузера. Если поисковая оптимизация вашего сайта имеет для вас стратегическое значение, вам следует отказаться от фреймворков Ajax и JavaScript, генерирующих контент в браузере пользователя.

Напоминание: в мае 2018 года Google изменит свое поведение в отношении URL-адресов, содержащих #!

Со второго квартала 2018 года Google объявил о прекращении управления URL-адресами, содержащими «#! »По старой схеме сканирования Ajax.На практике это означает, что, когда поисковый робот встречает URL-адрес этого типа, он больше не будет искать альтернативную версию: тогда он будет стремиться сканировать страницу непосредственно в Ajax!

сканирование AJAX и Panda • Yoast

Йост де Валк

Йост де Валк — основатель и директор по продуктам Yoast. Он интернет-предприниматель, который незадолго до основания Yoast инвестировал и консультировал несколько стартапов. Его основная специализация — разработка программного обеспечения с открытым исходным кодом и цифровой маркетинг.

После того, как на этой неделе мы запустили наш первый тренинг по базовой SEO, пришло время расслабиться и расслабиться. Минут две. Следующей вехой является наш предстоящий выпуск Yoast SEO, который мы определили из-за огромного количества новых функций в нем, он будет называться Yoast SEO 3.0. К счастью, на этой неделе поисковые системы отнеслись к нам достаточно медленно, поэтому написать это резюме было легко. Когда я писал это, выяснилось, что я давал больше советов по работе с Google Panda, но я думаю, это никогда не может быть плохой вещью.

Google прекращает сканирование AJAX

Спустя несколько месяцев после намека на это Google прекратил поощрять людей использовать свои рекомендации по сканированию AJAX от 2009 года. Я должен сказать, что это сделано лучше, чем Google обычно обращается со своими API. Сайты, созданные с использованием методов 2009 года, в том числе с использованием так называемых URL-адресов _escaped_fragment, по-прежнему будут индексироваться, но Google рекомендует, чтобы при изменении (части) вашего сайта вам в них не требовалось.

У Google есть история отказа от поддержки API в слишком короткие сроки, чтобы обычные компании могли это сделать, так что на самом деле это довольно хороший жест.Что меня раздражает, так это то, что они не объявляют конкретную дату окончания. Все, что они говорят, это:

Если ваша текущая настройка работает нормально, вам не нужно немедленно что-либо менять. Если вы создаете новый сайт или реструктурируете уже существующий, просто избегайте использования URL-адресов _escaped_fragment_.

Некоторые корпоративные веб-сайты были созданы с использованием этой системы сканирования AJAX и не исчезнут и не будут изменены в ближайшие годы. Конкретная дата отсечения была бы очень полезна для таких сайтов, даже (или, может быть, даже: особенно), когда эта дата наступает на 2-3 года в будущем.

Google Panda: удаляйте контент правильно

Это было, если дьявол играл с этим. 6 октября я написал о Google Panda и о том, как мы предлагаем сайтам бороться с этим. В этот пост я включил совет по удалению некачественных страниц. Два дня спустя Гэри Ильес из Google в ответ на сообщение Дженнифер Слегг из SEM пишет в Твиттере:

@jenstar Мы не рекомендуем вообще удалять контент для Panda, а лучше добавлять больше материалов высокого качества @shendison

— Гэри «鯨 理» Иллис (@methode) 7 октября 2015 г.

Конечно, люди были сбиты с толку, потому что я сказал что-то «еще».Позже он пояснил, что после того, как на него оказали давление несколько оптимизаторов. Вот тогда и стало понятно , почему он сказал то, что сказал:

Твиттер @Marie_Haynes не подходит для этого обсуждения. мы видим, как слишком много людей режут добро. Осторожно обрезайте # defcon1

— Гэри «鯨 理» Иллис (@methode) 8 октября 2015 г.

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

Итак, как

сделать вы решите проблемы с Google Panda?

Я не хочу повторять то, что я сказал в этом посте о Google Panda, который вы должны прочитать, если вам это нравится, но давайте удостоверимся, что это хорошо понято. Устранение проблем с Google Panda на вашем сайте сводится к нескольким вопросам:

  1. Улучшайте контент, который недостаточно хорош, но может быть полезен.
  2. Удалите содержимое, которое никогда, никогда не будет полезно, или которое вы не можете поддерживать должным образом.
  3. Улучшите структуру своего сайта, чтобы можно было (легче) найти контент, который может быть полезен.

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

Вот и все, увидимся на следующей неделе!

Серия еженедельных обзоров SEO Joost

Поисковая оптимизация

| Дополнения

Как это работает

Надстройка для поисковой оптимизации генерирует уникальные URL-адреса (с помощью JavaScript) каждый раз, когда пользователь нажимает кнопку « Загрузить еще » или появляется новая страница.Затем URL-адреса могут быть отправлены в поисковые системы или предоставлены посетителям вашего сайта для немедленного доступа к загруженному контенту Ajax.

Внедрение удобных URL-адресов выполняется быстро и легко — просто установите для параметра seo значение true в шорткоде Ajax Load More, и ваши URL-адреса подкачки будут включены. От настраиваемых типов сообщений и настраиваемых таксономий до архивов категорий и тегов — вы можете добавлять URL-адреса для подкачки в любой ситуации.

Пример шорткода [ajax_load_more seo = " true " post_type = " портфолио " таксономия = " тип портфолио " taxonomy_terms = " design " posts_per_page 4 "]

Индексирование поисковой системой

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

Наряду с этим начальным запросом в том же элементе

Страничные URL-адреса

Когда пользователь запрашивает страничный URL-адрес (website.com/page/5/), только сообщения, относящиеся к текущей странице, отображаются в элементе

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

Примеры

По умолчанию

Общий шаблон домашней страницы (index.php), отображающий ваши самые последние сообщения.

Пейджинговая навигация

Превратите бесконечную прокрутку / загрузите больше функций в надежную систему навигации по страницам.

Блог

Шаблон целевой страницы блога, отображающий все сообщения.

Архив категорий

Отображение архивов категорий с URL-адресами глубинных ссылок.

Кнопка возврата

Надстройка SEO поддерживает состояние страницы, добавляя поддержку взаимодействия с кнопками «Назад» и «Вперед» и обновления страницы.

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

Попробуйте в нашем блоге

Постоянные ссылки

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

Вы можете настроить структуру постоянных ссылок WordPress, перейдя в «Настройки»> «Постоянные ссылки» в админке.

Сообщений на странице

Чтобы избежать ошибок «страница не найдена» (404) и других проблем, которые могут возникнуть на страницах категорий, тегов и других архивных / листинговых страницах, мы рекомендуем, чтобы значение параметра posts_per_page в вашем шорткоде Ajax Load More было таким же или большим, чем значение Страницы блога показывают не более настроек, определенных в админке WordPress — этот параметр находится в разделе «Настройки > чтение ».

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

Короткий код

Вы не всегда хотите, чтобы ваш контент генерировал URL-адреса подкачки. Чтобы обойти это, вы должны активировать надстройку SEO в каждом из ваших шорткодов ajax_load_more — это даст вам полный контроль над тем, где будет происходить пейджинг на вашем сайте.

Просто установите для seo значение true, и ваши URL-адреса подкачки будут реализованы автоматически — вы также можете установить значение seo при создании шорткода в конструкторе шорткодов.

Пример шорткода [ajax_load_more seo = " true " post_type = " post "]

Установка

При покупке этого дополнения вы получите электронное письмо с подтверждением / квитанцией о покупке. Ваша квитанция будет содержать прямую ссылку для загрузки вашей копии Ajax Загрузить еще: поисковая оптимизация и лицензионный ключ.

После загрузки надстройки загрузите распакованные файлы в каталог / wp-content / plugins / или посетите панель управления надстройками и загрузите загруженный файл .zip в разделе «Добавить новый».

Активация лицензии

Чтобы активировать надстройку и получать обновления непосредственно в панели управления надстройками WordPress, пользователям необходимо ввести лицензионный ключ, который был включен в квитанцию ​​о покупке.

Для активации лицензионного ключа:

  1. Посетите раздел Licenses в подключаемом модуле Ajax Load More.
  2. Введите ключ продукта и щелкните Активировать лицензию .
  3. Если индикатор состояния загорится зеленым, надстройка была успешно активирована (пример ниже).

Если вы не получили электронное письмо с подтверждением / квитанцией о покупке и лицензионный ключ, проверьте папку со спамом / нежелательной почтой и, если вы все еще не можете найти письмо, свяжитесь со мной по адресу darren [at] connekthq.com или воспользуйтесь формой поддержки продукта на Веб-сайт.

динамического контента с возможностью поиска и сканированием AJAX — Smashing Magazine

Об авторе

Зак Гроссбарт — инженер, дизайнер и автор.Он старший технический сотрудник и облачный архитектор в IBM. Он создает пользовательский интерфейс IBM Cloud … Больше о Зак ↬

Поиску Google нравятся простые веб-сайты, которые легко сканировать.Вам нравятся динамические веб-сайты, которые демонстрируют вашу работу и действительно популярны. Но поисковые системы не могут запускать ваш JavaScript. Эта классная процедура AJAX, которая загружает ваш контент, вредит вашему SEO.

Роботы Google с легкостью анализируют HTML; они могут извлекать документы Word, PDF-файлы и даже изображения из дальних углов вашего веб-сайта. Но для них контент AJAX невидим.

Дополнительная литература по SmashingMag:

Проблема с AJAX

AJAX произвел революцию в Интернете, но он также скрыл его содержимое. Если у вас есть учетная запись Twitter, попробуйте просмотреть исходный код страницы своего профиля. Там нет твитов — просто код! Почти все на странице Twitter создается динамически с помощью JavaScript, и поисковые роботы не могут ничего из этого увидеть. Вот почему Google разработал сканирование AJAX.

Поскольку Google не может получать динамическое содержание из HTML, вам потребуется предоставить его другим способом.Но есть две большие проблемы: Google не запускает ваш JavaScript и не доверяет вам.

Google индексирует всю сеть, но не использует JavaScript. Современные веб-сайты — это небольшие приложения, которые запускаются в браузере, но запуск этих приложений во время индексации слишком медленный для Google и всех остальных.

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

Google нужен способ, позволяющий предоставлять контент AJAX браузерам, одновременно предоставляя простой HTML сканерам. Другими словами, вам нужен один и тот же контент в нескольких форматах.

Два URL-адреса для одного и того же содержимого

Начнем с простого примера. Я участник проекта с открытым исходным кодом под названием Spiffy UI. Это платформа Google Web Toolkit (GWT) для REST и быстрой разработки. Мы хотели показать наш фреймворк, поэтому создали SpiffyUI.org с помощью GWT.

GWT — это динамический фреймворк, который помещает весь наш контент в JavaScript. Наш файл index.html выглядит так:

Все добавляется на страницу с помощью JavaScript, и мы контролируем наш контент с помощью хэш-тегов (я объясню почему чуть позже). Каждый раз, когда вы переходите на другую страницу в нашем приложении, вы получаете новый хэш-тег.Щелкните ссылку «CSS», и вы окажетесь здесь:

.
  http: //www.spiffyui.org#css

URL-адрес в адресной строке в большинстве браузеров будет выглядеть так:

  http://www.spiffyui.org/?css

Мы исправили это с помощью HTML5. Я покажу вам, как это сделать, позже в этой статье.

Этот простой хеш подходит для нашего приложения и делает его доступным для закладок, но не сканируется. Google не знает, что означает хэш-тег и как получить из него контент, но он предоставляет веб-сайту альтернативный метод для возврата контента.Итак, мы сообщаем Google, что наш хеш — это на самом деле код JavaScript, а не просто привязка на странице, добавляя восклицательный знак («взрыв»), например:

  http: //www.spiffyui.org#! Css

Этот хеш-удар является секретом всей схемы сканирования AJAX. Когда Google видит эти два символа вместе, он знает, что JavaScript скрывает больше контента. Это дает нам возможность вернуть полный контент, сделав второй запрос по специальному URL:

  http: // www.spiffyui.org?_escaped_fragment_=css

Новый URL заменил #! с ? _Экранированным фрагментом = . Использование параметра URL вместо хэш-тега важно, потому что параметры отправляются на сервер, тогда как хеш-теги доступны только для браузера.

Этот новый URL позволяет нам возвращать то же содержание в формате HTML, когда поисковый робот Google запрашивает его. Смущенный? Давайте посмотрим, как это работает, шаг за шагом.

Фрагменты HTML

Вся страница отображается на JavaScript.Нам нужно было преобразовать этот контент в HTML, чтобы он был доступен для Google. Первым шагом было разделение SpiffyUI.org на фрагменты HTML.

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

Добавление в закладки

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

Приложения

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

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

  http: //www.spiffyui.org#css

Когда пользователь снова обращается к этому URL-адресу, мы используем JavaScript для чтения хэш-тега и отправки пользователя на страницу, содержащую CSS.

Вы можете выбрать все, что хотите для своего хэш-тега, но постарайтесь сделать его читабельным, потому что пользователи будут на него смотреть.Мы даем наши хеш-теги, такие как css , rest и security .

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

  http: //www.spiffyui.org#! Css

Вы можете управлять всеми своими хэш-тегами вручную, но большинство фреймворков истории JavaScript сделают это за вас. Все подключаемые модули, поддерживающие HTML4, используют хэш-теги, и многие из них имеют параметры для создания закладок для URL-адресов.Мы используем History.js Бена Луптона. Он прост в использовании, имеет открытый исходный код и отлично поддерживает интеграцию истории HTML5. Мы поговорим об этом позже.

Обслуживание сниппетов

Хэш-тег делает приложение доступным для закладки, а щелчок делает его доступным для сканирования. Теперь Google может запрашивать специальные URL-адреса с экранированными фрагментами, например:

Когда сканер обращается к нашему уродливому URL, нам нужно вернуть простой HTML. Мы не можем справиться с этим в JavaScript, потому что сканер не запускает JavaScript в нем.Итак, все должно исходить от сервера.

Вы можете реализовать свой сервер на PHP, Ruby или любом другом языке, если он поддерживает HTML. SpiffyUI.org — это приложение Java, поэтому мы доставляем наш контент с помощью сервлета Java.

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

Получить контент для обслуживания сложно. Большинство приложений смешивают контент с кодом; но мы не хотим извлекать читаемый текст из JavaScript.К счастью, Spiffy UI имеет механизм создания шаблонов HTML. Шаблоны встроены в JavaScript, но также включены на сервер. Когда экранированный фрагмент ищет идентификатор css , нам просто нужно обслуживать CSSPanel.html .

Шаблон без стилизации выглядит очень просто, но Google просто нужен контент. Пользователи видят нашу страницу со всеми стилями и динамическими функциями:

Google получает только версию без стиля:

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

Связываем все вместе с помощью карты сайта

Карта нашего сайта сообщает сканеру, что доступно в нашем приложении. На каждом сайте должна быть карта сайта; Сканирование AJAX без него не работает.

Карты сайта — это простые XML-документы, в которых перечислены URL-адреса в приложении.Они также могут включать данные о приоритете и частоте обновления страниц приложения. Обычные записи для карт сайта выглядят так:

  
    http://www.spiffyui.org/ 
    26 июля 2011 г. 
    ежедневно 
    1.0

Наши записи для сканирования AJAX выглядят так:

  
    http://www.spiffyui.org/#!css 
    26 июля 2011 г. 
    ежедневно 
   <приоритет> 0.8

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

Вы можете написать карту своего сайта вручную, но есть инструменты, которые сэкономят вам много времени. Главное — правильно отформатировать карту сайта и отправить ее в Инструменты Google для веб-мастеров.

Инструменты Google для веб-мастеров

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

После проверки вы можете отправить карту сайта, и Google начнет индексировать ваши URL-адреса.

А потом подожди. Эта часть сводит с ума. Чтобы SpiffyUI.org правильно отобразился в поиске Google, потребовалось около двух недель. Я писал в справочных форумах полдюжины раз, думая, что он сломан.

Нет простого способа убедиться, что все работает, но есть несколько инструментов, которые помогут вам увидеть, что происходит.Лучшим из них является Fetch as Googlebot, который показывает вам, что именно видит Google, когда сканирует ваш сайт. Вы можете получить к нему доступ на своей панели инструментов в Инструментах Google для веб-мастеров в разделе «Диагностика».

Введите URL-адрес хеш-бэка со своего веб-сайта и нажмите «Получить». Google сообщит вам, была ли загрузка успешной, и, если да, покажет вам контент, который он видит.

Если «Просмотреть как Googlebot» работает должным образом, значит, экранированные URL-адреса возвращаются правильно.Но вам следует проверить еще несколько вещей:

  • Проверьте карту вашего сайта.
  • Попробуйте вручную использовать URL-адреса на карте вашего сайта. Обязательно попробуйте хэш-бэнг и экранированные версии.
  • Проверьте результаты поиска в Google для своего веб-сайта, выполнив поиск по запросу site: www.yoursite.com .

Создание красивых URL-адресов с помощью HTML5

Twitter оставляет хеш-фрагмент видимым в своих URL-адресах, например:

  http://twitter.com/#!/ZackGrossbart

Это хорошо работает для сканирования AJAX, но опять же, это немного некрасиво.Вы можете сделать свои URL-адреса красивее, интегрировав историю HTML5.

Spiffy UI использует интеграцию истории HTML5, чтобы преобразовать URL-адрес хеш-бэнг, как этот…

  http: //www.spiffyui.org#! Css

… в красивый URL-адрес вроде этого:

  http://www.spiffyui.org?css

История HTML5 позволяет изменить этот параметр URL-адреса, поскольку хэш-тег — единственная часть URL-адреса, которую вы можете изменить в HTML4. Если вы измените что-нибудь еще, перезагрузится вся страница.История HTML5 изменяет весь URL-адрес без обновления страницы, и мы можем сделать так, чтобы URL-адрес выглядел как угодно.

Этот более удобный URL-адрес работает в нашем приложении, но мы по-прежнему указываем его версию на карте сайта. И когда браузеры обращаются к URL-адресу hash-bang, мы меняем его на более приятный с помощью небольшого количества JavaScript.

Маскировка

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

Приложения для сканирования AJAX всегда показывают Google результаты, отличные от результатов для обычных браузеров, но это не маскировка, если фрагменты HTML содержат то же содержание, которое пользователь увидит в браузере. Настоящая загадка заключается в том, как Google может определить, скрывается ли веб-сайт или нет; сканеры не могут сравнивать контент программно, потому что они не используют JavaScript. Все это часть возможностей Google.

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

Хеш-банг — немного некрасиво, но он работает

Я инженер, и моя первая реакция на эту схему — «Фу!» Это просто неправильно; мы искажаем назначение URL-адресов и полагаемся на волшебные строки. Но я понимаю, откуда взялся Google; проблема крайне сложная. Поисковым системам необходимо получать полезную информацию из заведомо ненадежных источников: нас.

Хеш-фрагменты не должны заменять все URL-адреса в Интернете. У некоторых веб-сайтов были серьезные проблемы с URL-адресами хэш-бэга, потому что они полагались на JavaScript для обслуживания контента. Простые страницы не нуждаются в хэш-взломе, в отличие от страниц AJAX. URL-адреса выглядят немного некрасиво, но вы можете исправить это с помощью HTML5.

Дополнительная литература

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

Спасибо Кристен Райли за помощь с некоторыми изображениями в этой статье.

(al)

все основы, которые вам нужно знать в 2020 году

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

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

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

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

В этой статье вы увидите:

Приятного чтения!

Каковы наиболее важные концепции JavaScript и SEO?

Язык программирования JavaScript — один из наиболее часто используемых в мире — некоторые из лучших веб-сайтов, которые мы когда-либо посещали, были созданы с его использованием.Но каковы основные концепции, объединяющие обе дисциплины?

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

Однако есть способ подготовить веб-сайт, чтобы при запуске процесса сканирования и индексации Google мог его расшифровать.

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

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

А как это работает?

Во-первых, робот, обрабатывающий JavaScript, работает в три этапа:

  • Отслеживание
  • Обработка
  • Индексирование

При идентификации URL-адреса, содержащего этот язык, первая задача — убедиться, что пользователь разрешил идентификацию.

Для этого файл robots.txt читается, и, если он был авторизован, Google начинает обработку. Наконец, после анализа HTML он начинает индексироваться.

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

Какую роль JavaScript играет на веб-страницах в отношении SEO?

Чтобы ответить на этот вопрос, мы должны вернуться к AJAX, аббревиатуре асинхронного JavaScript и XML.

Этот метод был разработан для мобильных устройств и веб-сайтов. Его функция? Первоначально вносит изменения в контент, не загружая весь HTML .

Итак, это влияет на SEO? Ответ положительный! AJAX «обычно» — по словам представителей Google — может отображать и индексировать динамический контент, но это не всегда так, как . В конечном итоге это напрямую влияет на позиционирование в поисковых системах.

Теперь, на этом этапе, важно понять ограничения, которые Google имеет для обработки JavaScript.Например, большинство пользователей используют такие браузеры, как Chrome и Mozilla, среди прочих.

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

Для этого существуют собственные инструменты Google, такие как тест оптимизации или инструмент проверки URL в Search Console, в котором вы можете просматривать отображаемые функции и исключения, которые вы можете сделать для JavaScript или DOM (объектная модель документа).

Какие проблемы SEO возникают при неправильном использовании JavaScript?

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

Здесь мы показываем самые распространенные ошибки, которые вы можете совершить.

1. Пренебрегать HTML

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

Следовательно, все основные данные для Интернета должны быть созданы в HTML, чтобы их можно было быстро проиндексировать Google и другими поисковыми системами.

2. Неправильные ссылки

Любой специалист по SEO знает важность внутренних ссылок для позиционирования.

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

Для JavaScript и SEO, очень важно убедиться, что все ссылки установлены правильно .

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

3. Помешать Google случайно проиндексировать ваш JavaScript

Это может быть наиболее частой из трех проблем. Как мы уже упоминали, Google не может полностью отображать JavaScript.

Из-за этого многие веб-сайты могут совершать ошибку, включая теги «не индексировать» в HTML.

Вот почему, когда Google сканирует веб-сайт и читает HTML, он может найти этот тег и передать прямо .

Это предотвращает возвращение робота Google к запуску JavaScript, находящегося внутри исходного кода, что препятствует его правильному отображению.

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

Чтобы робот Googlebot и другие сканеры не работали правильно, важно понимать, как они работают, и, таким образом, улучшать SEO, способствуя позиционированию веб-страниц.

Что сделать, чтобы облегчить индексацию страниц JavaScript в Google?

Хотя это может показаться кратким изложением плохих новостей, не волнуйтесь!

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

Ниже приведены несколько советов, которые помогут вам достичь этого, не умирая при попытке. Продолжай читать!

Оптимизировать структуру URL

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

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

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

Задержка сайта Favor

Когда браузер создает DOM — интерфейс, который предоставляет стандартный набор объектов для использования и комбинирования HTML, XHTML и XML, — он может создать очень большой файл в HTML, вызывая задержку загрузки и, как следствие, значительную задержку для робота Googlebot. .

При прямом добавлении JavaScript в HTML значения подписываются, чтобы не синхронизировать менее важные элементы страницы; следовательно, можно сократить время загрузки, и JavaScript не будет препятствовать процессу индексации.

Часто тестируйте сайт

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

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

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

Каковы преимущества правильной настройки элементов JavaScript для SEO?

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

Наличие вариантов жизненно важно, если мы продолжим идти по этому пути. Если элементы JavaScript правильно настроены, у робота Google не возникнет проблем со сканированием вашего контента, запуском обработки HTML и, в конце концов, с его индексированием.

Тем не менее, вы должны принять во внимание рекомендации в этом посте. Это территория, которая до сих пор широко не используется профессионалами, поэтому Google еще не создал единую систему, позволяющую хорошо находить и читать JavaScript.

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

Но если ваш сайт работает медленно, ничего не окупится. Хотите знать, как скорость вашей страницы может повлиять на ваши продажи? Нажмите на изображение ниже и загрузите нашу инфографику бесплатно!

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *