Как HTML5 может помочь SEO - 27 Июля 2011 - Блог - SEO Продвижение и оптимизация сайта

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

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

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

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

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

<a href="products.php?page=3">Предыдущая страница</a>
<a href="products.php?page=5">Следующая страница</a>

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

<a href="products.php?page=3" rel="prev">Предыдущая страница</a>
<a href="products.php?page=5" rel="next">Следующая страница</a>

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

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

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

<div id="myarticle">
 ...
</div>
<div id="extrafacts">
 ...
</div>

<article>
 ...
</article>
<aside>
 ...
</aside>

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

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

<section id="finance">
 <header>
 <h1></h1>
 </header>

 ...

 <footer>
 </footer>
</section>


<section id="entertainment">
 <header>
 <h1></h1>
 </header>

 ...

 <footer>
 </footer>

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

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

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

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

<a href="/search.php" rel="search">Поиск по сайту</a>

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

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

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

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

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

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

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

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

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

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

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

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