Социальные meta-теги

Социальные сети надолго закрепились в нашей жизни. У меня нет ни одного знакомого, кто хотя бы раз в день, да не зашел бы проверить новости и написать пару сообщений. Во всем мире каждый день миллионами отправляются твиты, сообщения и делаются репосты. Все это делает Вконтакте, Facebook, Twitter и др. замечательными рекламными площадками. И было бы глупо ими не пользоваться. Я говорю не про платную рекламу (или любую другую услугу). Каждый может сделать ссылку у себя на стене или твитнуть в ленту. Но вот вопрос, как сделать, чтоб эти ссылки корректно обрабатывались социалками? В этой статье мы рассмотрим наборы meta-тегов, которые поддерживают популярные социальные сети и узнаем какие ресурсы позволяют проверять их корректность.

Ну что, начнем по порядку.

Twitter

Твиттер поддерживает несколько вариантов оформления:

  • Summery Card: стандартный вид, включающий заголовок, описание, иконку и ссылку на аккаунт твиттера;
  • Summery Card with Large images: тоже, что и предыдущий, только с большими изображениями;
  • Photo Card: карточка, состоящая только из изображения;
  • Gallery Card: коллекция изображений;
  • App Card: описание мобильного приложения с ссылкой на скачивание;
  • Player Card: поддерживает видео/аудио;
  • Product Card: оптимизирована под информацию о продукте.

Давайте рассмотрим стандартный вариант.

<meta name="twitter:card" content="summary">

Обязательное. Тип карточки. Для теста мы выбрали summery card

<meta name="twitter:site" content="@flickr" />

Обязательное. Имя пользователя в twitter

<meta name="twitter:title" content="Small Island Developing States Photo Submission" />

Обязательное. Заголовок. 70 символов

<meta name="twitter:description" content="View the album on Flickr." />

Обязательное. Описание страницы

<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

Необязательное. Изображение.

После того, как вы внесли изменения в шаблон сайта, я очень рекомендую проверить, правильно ли twitter понимает вашу разметку. Для этого есть специальный инструмент на офф сайте: https://cards-dev.twitter.com/validator

Вконтакте, Facebook, Pinterest

Все три социалки (и скорее всего не только они) поддерживают Open Graph protocol (http://ogp.me/). Ну что ж, даже лучше: убьем трех зайцев. Вот пример заполнения.

<meta property="og:type" content="profile"/> 
<meta property="profile:first_name" content="Имя"/>
<meta property="profile:last_name" content="Фамилия"/>
<meta property="profile:username" content="Ник"/>
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="https://website.com/image250X250.png"/>
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
<meta property="og:see_also" content="http://www.website.com"/> <meta property="fb:admins" content="Facebook_ID"/>

Google+

Большой брат использует Shema.org (https://schema.org/). Официальный мануал достаточно большой, стандарт поддерживает множество вариантов семантической разметки. Вот что рекомендуется заполнять для Google+:

<link rel="author" href="https://plus.google.com/D1maS91/">

Ссылка на профиль автора

<link rel="publisher" href="https://plus.google.com/+ScotchIo/">

Название сайта.

<meta itemprop="name" content="Языков Дмитрий - Веб-разработчик">

Описание сайта

<meta itemprop="description" content="Описание сайта">

Путь до файла с изображением.

<meta itemprop="image" content="http://ydmitriy.ru/pic/img.jpg">

Итоги

В целом, ничего сложного. Проблема только в том, что социальные сети используют разные стандарты разметки, что немного замедляет работу. Для удобства отладки есть специальные неофициальные сервисы вроде http://socialdebug.com/ и http://smo.knowem.com/, которые позволяют проводить отладку разметки сразу для всех популярных сайтов, что немного упрощает разработку.


Originally published at ydmitriy.ru.