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

Микроданные и микроформаты: оформим раздел “Контакты” правильноДа, речь пойдёт об использовании микроформатов на примере раздела “Контакты”. Что такое “микроформат” достаточно подробно и со ссылками описано в Википедии.

Переписывать содержимое Wikipedia бессмысленно, разумеется. Но полезные ссылки всё-таки приведу:

Как видно, утверждённых спецификаций микроформатов не так уж и много. Но сама идея, между тем, достаточно интересная и перспективная с точки зрения автоматизации и поисковых систем, как мне кажется. Посему применю на странице “Контакты” сайта турагентства мной любимой жены следующие микроформаты:

  • hCard – микроформат визитной карточки. Его я применю для контактных координат должностных лиц и самой организации в целом;
  • geo – микроформат географического расположения. Его я использую в визитной карте организации;
  • adr – микроформат адреса. Его я использую, опять-таки, в визитной карте организации;
  • также нам потребуется на странице контактов паттерн include.

Кстати, доступен черновик спецификации hAtom. Не вижу особых проблем в том, чтобы реализовать поддержку этого микроформата в теме wordpress. Но это пока так, мысли вслух… А микроформат hNews имеет смысл использовать в анонсах новостей организации, очень даже стоит. Одним словом, лиха беда начало. Стоит только начать, как выясняется, что имеет смысл всю тему переписать с целью поддержки микроформатов.

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

<p>
  ООО “Приятное путешествие” <br />
  тел.: +7 (816 2) <strong>68-55-11</strong>,
    <strong>68-55-10</strong> <br />
  <a class="avatarpop" href="mailto:mail@nice-tour.nov.ru" >
    mailto:mail@nice-tour.nov.ru
    <img src="http://www.gravatar.com/avatar.php?gravatar_id=7605a3f848d64f791c12973e42dfdd1b&amp;size=80" alt=" Контакты" title="Контакты" />
  </a> <br />
  Великий Новгород, проспект Александра Корсунова, 53/1, офис 2.12.
</p> 

Как это выглядит для читателя – видно на картинке сверху. А для поисковых систем – это не более, чем просто текст. А хочется то иного…

Для начала воспользуемся мастером. После применения мастера и мозгов получаем следующее:

<a rel="profile" href="http://microformats.org/profile/hcard" style="display:none;"></a>
<div class="vcard">
 <img style="float:left; margin-right:4px" src="http://www.gravatar.com/avatar.php?gravatar_id=7605a3f848d64f791c12973e42dfdd1b&size=128" alt="" class="photo" title="Приятное путешествие"/>
 <div class="org fn n">ООО "Приятное путешествие"</div>
 <a class="url" href="http://www.nice-tour.nov.ru">приятное-путешествие.рф</a>
телефон: <abbr class="tel" title="+78162685511">+7 (816 2) <strong>68-55-11</strong></abbr>, <abbr class="tel" title="+78162685510"><strong>68-55-10</strong></abbr>
e-mail: <a class="email" href="mailto:mail@nice-tour.nov.ru">mail@nice-tour.nov.ru</a>,
jabber: <a class="url" href="xmpp:mail@nice-tour.nov.ru">mail@nice-tour.nov.ru</a>
 <div class="adr"><span style="display:none;"><span class="country-name">Россия</span>, <span class="postal-code">173024</span>, </span><span class="locality">Великий Новгород</span>, <span class="street-address">проспект Александра Корсунова, 53/1, офис 2.12</span>.
 </div>
На карте: <abbr class="geo" title="58.547813;31.224494">31°13′28.18″ в. д. (31.224494), 58°32′52.13″ с. ш. (58.547813)</abbr>.
</div>

Результат приблизительно тот же, но – уже с применением микроформата hCard. Проверим результат с помощью сервиса Яндекса.

Микроданные и микроформаты: оформим раздел “Контакты” правильноОбратите внимание на ссылку перед самой структурой карты. В соответствии со спецификацией, мы должны указать профиль микроформата либо так, либо через тег link в заголовке (head) страницы. Я выбрал такой вариант. Также обратите внимание на то, как оформлен телефонный номер. В соответствии со спецификацией hCard мы должны следовать стандарту E.123 при оформлении телефонного номера, посему приходится разделять то, что видит человек, и то, что будет видеть парсер hCard, с помощью abbr. Результат, который увидит парсер Яндекса, справа на рисунке. Таким же путём мы оформляем и контактные координаты должностных лиц организации.

Однако, всё не так гладко. Привожу пример vcf (vCard), как оно должно быть:

BEGIN:VCARD
VERSION:2.1
N:Бетке;Сергей Сергеевич
FN:Сергей Сергеевич Бетке
ORG:Промышленная группа ГАРО, ЗАО
TITLE:Помощник генерального директора по инновационно-техническому развитию
TEL;WORK;VOICE:+7 (816 2) 940950
TEL;CELL;VOICE:+7 (963) 3311555
TEL;WORK;FAX:+7 (816 2) 940994
ADR;WORK:;;Большая Санкт-Петербургская, 64;Великий Новгород;;173003;Россия
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:=C1=EE=EB=FC=F8=E0=FF =D1=E0=ED=EA=F2-=CF=E5=F2=E5=F0=E1=F3=F0=E3=F1=EA=E0=
=FF, 64=0D=0A=C2=E5=EB=E8=EA=E8=E9 =CD=EE=E2=E3=EE=F0=EE=E4 173003=0D=0A=D0=
=EE=F1=F1=E8=FF
URL;WORK:http://www.novgaro.ru
BDAY:19761012
EMAIL;PREF;INTERNET:Sergey.S.Betke@novgaro.ru
REV:20110503T083843Z
END:VCARD

Итого видно, что и для телефонов будет правильным указать их тип, да и для адреса также не помешает. Да, и ещё одно наблюдение: vcf файл, который отдаёт и принимает Microsoft Outlook и другие продукты Microsoft – в ANSI кодировке, не в unicode. Рискну предположить, что поля могут быть и в явно указанной кодировке, как в случае поля LABEL.

Попробуем разобраться с кодировкой. Читаем выдержки из спецификации, на примере поля FN находим в RFC2426 (раздел 3.1.1) следующее:

To: ietf-mime-directory@imc.org

Subject: Registration of text/directory MIME type FN

Type name:FN

Type purpose: To specify the formatted text corresponding to the name of the object the vCard represents.

Type encoding: 8bit

Type value: A single text value.

Type special notes: This type is based on the semantics of the X.520 Common Name attribute. The property MUST be present in the vCard object.

Type example: FN:Mr. John Q. Public\, Esq.

Видим как раз то, что и пугает – 8bit. Но дальше идёт ссылка на семантику X.520. При этом при всё вижу следующие примеры:

BEGIN:VCARD
FN;CHARSET=WINDOWS-1251;ENCODING=QUOTED-PRINTABLE:=CF=F0=E8=E2=E5=F2
N;CHARSET=WINDOWS-1251;ENCODING=QUOTED-PRINTABLE:=CF=F0=E8=E2=E5=F2;;;
NOTE;CHARSET=WINDOWS-1251;ENCODING=QUOTED-PRINTABLE:=CF=F0=E8=E2=E5=F2
VERSION:2.1
END:VCARD

Как видно, явно указан набор символов (CHARSET), кодирование содержимого (ENCODING), и при этом требование по ANSI кодированию полей vCard выполнено. Однако, тогда возникают вопросы к сервисам формирования vCard файлов по hCard – они должны закодировать поля должным образом и указать кодировку, чего не имеем.

Сразу оговорюсь, что подобный формат прекрасно воспринимается продуктами Microsoft (в частности – Microsoft Outlook), но только в кодировке, установленной для профиля пользователя (в моём случае – windows-1251). Другими словами, плевать он хотел на указанный CHARSET, а вот ENCODING воспринимает корректно.

“Подстроиться”под MS Outlook в частности и несовершенные сервисы преобразования hCard в vCard не получилось – не задать в hCard уже закодированный текст, так что остаётся искать достойный сервис, который обеспечит кодирование на этапе преобразования hCard в vcf. На подобную проблему наткнулся и в форуме, но даже предложенное там решение не работает на Outlook 2003. Отсюда делаю выводы:

Уже после публикации статьи наткнулся на следующие полезные ссылки:

P.S. Кроме всего прочего, нашёл ещё один любопытный микроформат – pavatar. Да, это всего лишь альтернатива Gravatar, со своими плюсами и минусами. Плюсы – Ваш аватар расположен там, где Вы указали, но минус – для такого аватара необходим собственный ресурс, по url которого будет отдан правильный заголовок, указывающий на аватар. Для gravatar достаточно иметь адрес электронной почты…

Отзывы » (1)

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка