Готовим сайт к кросспостингу

Разработка любого сайта в последнее время это не только стандартная верстка и соответствие стандарту 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):

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

Обратите внимание на то, что есть четкая и обязательная структура верстки микроразметки. Если ее строго не следовать, то при разработке шаблона можно получить ошибки валидации и не получить совершенно никакого эффекта от разметки.

Проверить валидность написанной микроразметки можно с помощью сервиса Яндекса - https://webmaster.yandex.ru/microtest.xml

Дата: 11.03.2015

Поделитесь статьей со своими друзьями в социальных сетях.


Назад к списку статей