Как HTML5 может помочь SEO

Целый ряд проблем в SEO может быть решён при помощи ряда новых технологий, являющихся частью стандарта HTML5. В этой статье рассказывается о решении пяти достаточно известных сложностей, связанных с поисковым продвижением.

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

Проблема 1: пагинация

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

Здесь вам могут помочь последовательные ссылки (sequential links). Согласно стандарту, последовательностью документов является такой набор документов, где у каждого из них есть предшествующий и последующий документы. Документ без предшествующего ему документа является началом последовательности, а документ без последующего ему является концом последовательности.

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

Вам всего лишь нужно добавить атрибуты rel следующим образом:

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

Проблема 2: структура страницы

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

Одна из особенностей HTML5 — набор дополнительных тегов, которые позволяют точнее разметить контент. В числе таких тегов — <section><header><footer><article><hgroup><aside><nav>.

К примеру,

превращается в

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

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

При помощи <section> вы делите содержимое на разделы, и каждому разделу даёте заголовок первого уровня, дополнительно размеченный тегом <header>.

Стилевое форматирование данных в этих новых тегах с помощью CSS отлично работает в Firefox, Chrome и Safari, но для пользователей IE вам придётся дополнительно установить небольшой JavaScript html5shiv. Полную справку по новым тегам в HTML5 вы можете получить здесь.

Проблема 3: внутренние поисковые страницы

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

HTML5 учитывает это и предлагает использовать атрибут rel следующим образом:

Таким образом вы сообщите поисковику больше информации о сути индексируемой им страницы. Кроме того, на внутренний поиск можно навесить ещё больше функционала с помощью набора технологий OpenSearch, поддерживаемых Firefox (с 2.0), Google Chrome и Internet Explorer (с 7.0). Эти технологии позволяют, в частности, интегрировать встроенный поиск по сайту в панель поиска браузера.

Проблема 4: микроформаты != schema.org

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

Проблема с не так давно объявленным проектом Schema.org, поддерживаемым Google, Bing и Yahoo, заключается в том, что предоставляемый им словарь полей метаданных несовместим с микроформатами и RDFa.

Если вы оптимизируетесь под Яндекс, вас это не должно особенно волновать, поскольку Яндекс использует микроформаты, а не Schema.org. Но, к счастью, даже если вы продвигаетесь под Google, это тоже не особенно большая проблема: компания заявила, что комбинация микроданных, микроформатов и RDFa не приведёт к пессимизации. Поэтому сейчас можно использовать несколько стандартов одновременно, а на будущее стоит следить за развитием событий.

Проблема 5: AJAX и URL

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

Частично проблема решается привязыванием вызовов AJAX к тегам <a>, чтобы поисковик смог проиндексировать вызываемый контент. Но в реальности это полумера, поскольку адрес полученного контента невозможно скопировать в буфер обмена, чтобы поделиться им через социальную сеть. А это, по сути, — упущенная выгода для оптимизатора.

Как несложно догадаться, HTML5 выручит и здесь, предоставив средства для динамического изменения URL в адресной строке браузера без перезагрузки страницы. Для этого используется history.pushState() и связанные с ним методы replaceState() и popState(). Вот небольшой пример использования этого метода:

Метод history.pushState() не только меняет URL на лету, но и записывает его в историю посещений браузера, так что пользователь может переходить по истории вперёд и назад.

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

Подведём итоги. Несмотря на то, что HTML5 ещё не очень распространён, популярные поисковики уже начинают учитывать некоторые его возможности, поэтому чем раньше вы начнёте их использовать, тем больше преимуществ вы получите перед конкурентами.

Публикация основана на материале статьи "Fixing SEO problems with HTML5", опубликованной в блоге Distilled.net.

Использование множественных карт сайта

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

Необходимость во множественных картах сайта возникает, главным образом, в том случае, когда речь идёт о сайте с большим количеством страниц и многоуровневой вложенностью. Если для такого сайта у вас всего одна карта, вам будет не так просто анализировать проблемы с индексацией страниц. Это связано с тем, что в панели веб-мастера (что Яндекс, что Google) вы будете видеть лишь общие данные (панель Google в этом смысле несколько более информативна).

Для разделения карты сайта на несколько существуют так называемые индексы: это корневой файл карты сайта, включающий ссылки на собственно карты сайта. Его рекомендуется размещать в корневом каталоге сайта на сервере.

Приведём простой пример индекса:

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

Существуют три распространённых подхода к разделению одной карты сайта на несколько:

1. Группирование страниц выполняется по количественному признаку: в каждой карте хранится не более определённого количества ссылок, скажем, ста или тысячи.
2. Страницы группируются по типу. Например: статические, продукты, блог
3. Ещё большее дробление: статические страницы, категории, подкатегории, локации, архив блога и т.д.

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

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

В статье использованы материалы публикации "Multiple XML Sitemaps: Increased Indexation and Traffic".