Не секрет, что социальные закладки стали популярны и все больше их можно увидеть на сайтах. Но одно дело поставить и потом можно просто кликом закинуть на свою страницу. Другое дело под каким дизайн она появится. Это отлично было бы, если идет название и краткое описание и также изображение материала, что мы закинули. И здесь нам пригодиться микро разметка, что поможет так сделать.
Код нужно прописывать перед тегом /head
1. Facebook и В контакте используют Open Graph protocol:
Код
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="http://www.site.com/logo.png" />
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
2. Для Twitter код выглядит так:
Код
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
3. Для Google+ так:
Код
<link rel="author" href="https://plus.google.com/Blogger777/"> - cсылка на профиль автора в Google+
<link rel="publisher" href="https://plus.google.com/+ScotchIo/"> - название сайта
<meta itemprop="name" content="Блог о разведении слоников"> - текст сниппета (до 40 символов)
<meta itemprop="description" content="Описание сайта"> - описание сайта
<meta itemprop="image" content="http://site.ru/pic/img.jpg"> - путь к файлу изображения
Инструменты для работы с микроразметкой:
1. Open Graph Object Debugger — сервис проверки микроразметки и очистки кэша урла для Facebook.
2. Очистка кэша страниц для Вконтакте.
3. Валидатор микроразметки Twitter Cards.
