В необходимости внедрения микроразметки меня убедили мои последние опыты с так называемыми SMO сервисами. Дело в том что при клике на кнопки, составление описания для расшариваемой страницы соц. сети берут на себя. Далеко не всегда в сниппет попадает то что нужно. Особенно часто были проблемы с картинками, fb мог подставить всё что угодно вплоть до аватарок комментаторов. Исправить ситуацию поможет микроразметка.
Что из себя представляет микроразметка.
Микроразметка помогает социальным сетям и поисковикам составлять описание страницы. Достигается это следующим образом. В разметку страницы внедряются специальные атрибуты тегов. В зависимости от выбранной микроразметки такие атрибуты могут находиться в теле документа <body> явно указывая что содержится в тегах или в разделе <head> описывая содержимое страницы так же как это делают мета теги description или keywords. На данный момент существует несколько вариантов микроразметки. Нас интересуют те что помогут в работе с соц. сетями.
Open Graph
Самая распространённая в рунете разметка - Open Graph. Разработана в Facebook и отлично работает с популярными рунетовскими сетями twitter, Google+, Facebook и конечно же Вконтакте.
Использует синтаксис RDFa, размещается в дополнительных тегах <meta> в <head> страницы. Обязательно должны присутствовать четыре свойства:
og:title - название объекта
og:type - тип объекта
og:image - URL изображения объекта
og:url - канонический URL объекта
В зависимости от типа объекта могут быть доступны дополнительные свойства. Например для страницы с описанием человека мы можем указать пол, имя и прочие личные данные, а на странице с описанием фильма актёров, режиссера и продолжительность.
Пример разметки для страницы сайта
<meta property="og:type" content="article" />
<meta property="og:title" content="Здесь пишем заголовок" />
<meta property="og:description" content="описание страницы" />
<meta property="og:url" content="канонический адрес страницы" />
<meta property="og:image" content="адрес картинки которая будет в описании страницы в соц. сети" />
Микроразметка для twitter - Twitter Cards.
Twitter Cards позволяет создавать расширенные твиты - карточки. Содержимое карточки зависит от того какой тип вы выберете. Доступно семь видов карточек. Для постов самое оно будет Summary Card или для тех кто хочет картинку побольше Summary Card with Large Image.
Для Twitter Cards вся разметка, так же как и в Open Graph, располагается в тегах <meta>. Обязательно должны присутствовать title и description. Тип карточки определяется через twitter:card. По умолчанию выбирается тип summary.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@webonlife">
<meta name="twitter:title" content="Заголовок до 70 символов">
<meta name="twitter:description" content="короткое описание до 200 символов">
<meta name="twitter:image" content="адрес картинки">
Если на сайте уже есть Open Graph то некоторые данные могут быть использованы в Twitter Cards. Это касается заголовка, описания и адреса картинки. Благодаря этому можно избежать дублирующих описаний.
Чтобы ваши карточки работали кроме разметки на сайте нужно чтобы сайт одобрили. Для этого переходим по адресу https://dev.twitter.com/docs/cards/validation/validator. На вкладке Validate & Apply вводим адрес страницы c разметкой. Если все размечено правильно жмём на кнопку Request Approval. Заполняем форму и ждём ответа. У меня на проверку ушло две минуты. Для каждого типа карточек нужно заново проходить проверку.
Микроразметка и Drupal.
Для подключения Open Graph и Twitter Cards нам нужен модуль Meta Tag, который скорее всего уже стоит на вашем сайте. Если нет то прочитайте сперва пост о модуле Meta Tag. Единственное что нужно сделать это перейти на страницу модулей и в разделе поисковая оптимизация включить Metatag: Open Graph и Metatag: Twitter Cards. После переходим Конфигурация → Поиск и метаданные → Мета-тег и настраиваем автозаполнение. Также как и мета теги, данные для микроразметки теперь будут доступны при добавлении/редактировании контента где мы сможем переопределить некоторые значения.
- Войдите, чтобы оставлять комментарии
Отлично, какраз то, что я
Отлично, какраз то, что я искала! Хотя конечно Вордпресс несколько отличается, но думаю принцип похож. Ужасно надоело то, что при нажатии кнопочек вылазит непонятно что :) Теперь надо поработать, чтобы картинки появлялись нужные. Спасибо за труд, репост во все соцсети ;)
Для wordpres наверняка есть
Для wordpres наверняка есть свои модули, главное правильно настроить.
Забыл написать что в Twitter карточка не отображается в FireFox.
Совсем недавно я сделала
Совсем недавно я сделала такую разметку у себя на сайте. Пока что сильного эффекта я не заметила, но надеюсь он будет.
У меня такая микроразметка
У меня такая микроразметка отсутствует. Но так как важность социальных сетей нельзя отрицать, я обязательно сделаю такую разметку.
Обязательно внедрим в наше
Обязательно внедрим в наше готовое решение, благодарим за материал.