Разработка любого сайта в последнее время это не только стандартная верстка и соответствие стандарту HTML5+CSS3, но и использование стандартов OpenGraph и Schema.org для взаимодействия с социальными сетями.
С момента запуска нашего модуля Crosstopus для 1С-Битрикс нам стали поступать вопросы от прямых и потенциальных клиентов на тему: «Нужна ли какая-то подготовка сайта прежде чем начинать работать с модулем?».
Именно настройка OGи Schema.org требуется для того, чтобы наш модуль начал работать на полную катушку.
Начнем с OpenGraph.
Это самый простой способ научить сайт дружить с Facebookи другими сетями использующими данный стандарт. У нас на сайте это сделано таким образом:
<?
$APPLICATION->AddHeadString('<meta property="og:title" content="'.$arResult["NAME"].'" />',true);
$APPLICATION->AddHeadString('<meta property="og:type" content="article" />',true);
$APPLICATION->AddHeadString('<meta property="og:image" content="http://mit24.ru'.$arResult["PREVIEW_PICTURE"]["SRC"].'" />',true);
$APPLICATION->AddHeadString('<meta property="og:url" content="http://mit24.ru/articles/'.$arResult["CODE"].'.html" />',true);
$APPLICATION->AddHeadString('<meta property="og:site_name" content="Мастерская информационных технологий"/>',true);
$APPLICATION->AddHeadString('<meta property="og:description" content="'.$arResult["PREVIEW_TEXT"].'"/>',true);
?>
Мы добавили данный набор строк непосредственно в шаблон компонента с детальным выводом материала. По порядку здесь – Название, Тип материала, Изображение (об этом можно прочитать на сайте Антона Долганина, требования и возможные ошибки), URL, Название сайта и Краткое описание материала.
Конечно данный код непосредственно можно прописать в шаблон сайта, в область head, тогда он будет присутствовать на каждой странице. Выглядеть это будет примерно так:
<meta property="og:title" content="<?=$var1?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="<?=$var2?>" /> <meta property="og:url" content="<?=$var3?>" /> <meta property="og:site_name" content="Мастерская информационных технологий"/> <meta property="og:description" content="<?=$var4?>"/>
Где переменные varнеобходимо заменить на свои, которые будут соответствовать конкретным параметрам страницы.
Переходим к Schema.org
Хоть этот способ и сложнее, но он универсальнее и гораздо полезнее не только для постинга в социальные сети, но и для поисковой выдачи. Опять же на примере нашего сайта:
<article itemscope itemtype="http://schema.org/Article" > <img itemprop="image" border="0" src="" alt="" title="" /> <h4 itemprop="name"><a itemprop="url" href="">Название материала</a></h4> <p itemprop="author">Павлов Александр</p> </article>
Очень главное соответствовать требованиям стандарта Schema.org. Важно понимать, что для различных типов данных есть свои схемы (смотрим вкладки Microdata):
- http://schema.org/Product - товар
- http://schema.org/Offer - торговое предложение
- http://schema.org/Article - статья
Смысла переписывать документацию данной микроразметки нет, так как она достаточно исчерпывающая и понятная, содержит массу примеров, которые более наглядны и не требуют особых знаний английского языка.
Обратите внимание на то, что есть четкая и обязательная структура верстки микроразметки. Если ее строго не следовать, то при разработке шаблона можно получить ошибки валидации и не получить совершенно никакого эффекта от разметки.
Проверить валидность написанной микроразметки можно с помощью сервиса Яндекса - https://webmaster.yandex.ru/microtest.xml