В мае 2009 года люди в Google начали включать обширные фрагменты информации в свои SERPS. Это 17 месяцев на разработку, и, честно говоря, кажется, что большинство сайтов все еще не в моде. Это позор, так как использование богатых фрагментов может значительно повысить вероятность того, что кто-то нажмет на список вашего сайта, когда будет выполнять поиск.
На данный момент богатые фрагменты довольно просты. Например, если вы ищете фильм, вы наверняка увидите, что некоторые результаты поиска содержат информацию под ним, прямо на странице результатов. Это возможно, потому что владельцы этих сайтов разметили рецензируемую информацию на своих страницах, используя определенный заранее заданный формат, называемый микроформатом . На самом деле существует целый ряд элементов, которые можно пометить в микроформате. Другие элементы, которые могут быть помечены более семантически, чтобы улучшить способ, которым поисковые системы читают и индексируют ваш сайт:
- hCard: используется для обозначения людей, мест, предприятий и организаций.
- hCalendar: используется для маркировки событий.
- hReview: Это довольно очевидно — оно используется для обозначения отзывов, которые затем отображаются в качестве звездных оценок в поисковой выдаче.
Ни один из этих микроформатов не является очень сложным; они просто полагаются на несколько соглашений в отношении классов, применяемых к определенным элементам разметки, и способов их размещения. Однако давайте рассмотрим пример реализации каждого из них и посмотрим, как выглядит код.
Для создания этого примера разметки я использовал набор создателей микроформатов, доступных на сайте microformats.org, чтобы упростить этот процесс.
hCard
Итак, мы знаем, что формат hCard используется для людей, мест и организаций. Поля, обычно связанные с форматом hCard:
- Собственное имя
- Второе имя
- Фамилия
- организация
- улица
- город
- состояние
- Почтовый индекс
- Страна
- Телефон
- Эл. адрес
- URL
- URL фотографии
- AIM имя
- YIM Screenname
- Jabber Screenname
- Теги
Пример фрагмента разметки, включающего эти поля:
<div id="hcard-Kristen-Lee-Holden" class="vcard">
<img style="float:left; margin-right:4px"
src="author.jpg"
alt="photo of Kristen"
class="photo"/>
<span class="fn n">
<span class="given-name">Kristen</span>
<span class="additional-name">Lee</span>
<span class="family-name">Holden</span>
</span>
<div class="org">Sitepoint Pty. Ltd.</div>
<a class="email" href="mailto:kristen.holden@sitepoint.com">kristen.holden@sitepoint.com</a>
<div class="adr">
<div class="street-address">48 Cambridge Street</div>
<span class="locality">Melbourne</span>,
<span class="region">Victoria</span>,
<span class="postal-code">3056</span>
<span class="country-name">Australia</span>
</div>
<div class="tel">90908200</div>
<div class="tags">
<a href="http://kitchen.technorati.com/contacts/tag/seo guru">seo guru</a>
<a href="http://kitchen.technorati.com/contacts/tag/marketing dude">marketing dude</a>
</div>
</div>Довольно простая структура и реализация, не так ли? Помните, что паук поисковой системы использует эти имена классов для расшифровки смысла контента, поэтому они должны быть точными. Но как только вы изменили свою CMS для вывода правильно отформатированной разметки, ваша работа завершена. И именно поэтому трудно понять, почему многие веб-сайты до сих пор не используют этот микроформат для правильной маркировки информации.
hReview
Далее идет формат hReview. Это то, что я считаю наиболее полезным микроформатом, используемым в настоящее время с точки зрения эксперта по SEO. Наличие положительного набора отзывов и звездного рейтинга, отображаемого в результатах поиска, значительно повышает доверие и рейтинг кликов у ваших посетителей.
Поля, которые используются в формате hReview:
- имя
- URL
- URL фотографии
- Тип (продукт, бизнес, событие, место, человек, веб-сайт, URL)
- Рейтинг
- Резюме
- Описание
- Дата пересмотра
- рецензент
Самый простой способ показать вам, как это выглядит при реализации в виде кода, — показать вам пример. Итак, вот один из них, который я собрал на основе вымышленного обзора готовящегося к выпуску SitePoint SEO Business Guide:
<div class="hreview" id="hreview-The-definitive-business-guide-for-seo-professionals-">
<h2 class="summary">The definitive business guide for SEO professionals</h2>
<abbr class="dtreviewed" title="2008-10-05T08:01+10:00">Oct 5, 2008</abbr>
by <span class="reviewer vcard"><span class="fn">Joe Blogs</span></span>
<span class="type" style="display: none; ">product</span>
<img alt="photo of 'SEO Business Guide'" src="http://www.sitepoint.com/seo1.jpg" class="photo">
<div class="item">
<a class="fn url" href="http://www.sitepoint.com/seo1">SEO Business Guide</a>
</div>
<blockquote class="description">
<p><abbr title="5" class="rating">★★★★★</abbr>
This book was amazing. It helped me to learn the basics of SEO and then how to apply them in a practical and easy to read ways.</p>
</blockquote>
<span class="version"style="display: none; ">0.3</span>
</div>
hCalendar
Наконец, давайте рассмотрим краткий пример полей, содержащихся в формате hCalendar. hCalendar очень похож на два предыдущих формата; его поля:
- Резюме
- Место расположения
- URL
- Дата начала
- Дата окончания
- Часовой пояс (в GMT)
- Описание
- Теги
Вот как будет выглядеть реализация hCalendar при использовании гипотетического события запуска для нового SEO Business Guide:
<div class="vevent" id="hcalendar-SEO1-Book-Launch">
<a class="url" href="http://www.sitepoint.com/seo1">
<abbr class="dtstart" title="2010-11-05T09:00+10:0000">November 5th 9am</abbr>,
<abbr class="dtend" title="2010-11-06T09:00+10:00">9am 2010</abbr> :
<span class="summary">SEO1 Book Launch</span>
at <span class="location">Collingwood, Melbourne</span>
</a>
<div class="description">
The official launch of the SEO business guide from sitepoint!
</div>
<div class="tags">Tags:
<a rel="tag" href="http://eventful.com/events/tags/seo%20book">seo book</a>
<a rel="tag" href="http://eventful.com/events/tags/seo%20business%20guide">seo business guide</a>
<a rel="tag" href="http://eventful.com/events/tags/awesome%20seo%20book">awesome seo book</a>
</div>
</div>
Эта информация, очевидно, лучше всего будет извлекаться динамически из базы данных вашего сайта.
Для получения дополнительной информации о микроформатах, о которых я рассказывал в этом посте, вы не найдете ничего лучше, чем получить их изо рта лошади на сайте microfomats.org:
http://microformats.org/wiki/hreview3
http://microformats.org/wiki/hcard
http://microformats.org/wiki/hcalendar
Вы также можете прочитать сообщение о запуске Google здесь, чтобы увидеть официальное слово об этих новых богатых фрагментах.
Итак, для всех вас, разработчиков, реализовать эти форматы для контента вашего сайта очень просто. Это почти не требует дополнительной работы над вашим повседневным форматированием, необходимым для вывода HTML. Структурирование веб-сайтов для использования микроформатов сегодня даст вам явное преимущество для различных аспектов местного SEO в будущем.
Карты, календари и другие более интегрированные результаты поиска уже используют эти форматы. Фактически, только вчера я прочитал отличный пост в блоге SEO от The Sea, посвященный последней заявке на патент Google для автоматической вставки GoogleMaps на веб-сайты. Это значительно облегчит жизнь мобильным пользователям. А благодаря таким компаниям, как Facebook, Yelp, Digg и Twitter, которые поддерживают различные микроформаты, очень велика вероятность, что со временем их полезность возрастет еще больше.
Возможно, что еще более важно, это безболезненный способ дать SEO-специалистам в вашей организации некоторую любовь с минимальными затратами времени на разработку!