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

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

Twitter

twitter card
Твиттер поддерживает несколько вариантов оформления:
  • 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
Полную документацию по оформлению других типов карточек можно найти на официальном сайте: https://dev.twitter.com/cards/overview

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

pinterest card
Все три социалки (и скорее всего не только они) поддерживают 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"/>
Официальный дебаггер от Facebook: https://developers.facebook.com/tools/debug/
Официальный валидатор от Pinterest: https://developers.pinterest.com/rich_pins/validator/

Google+

google+ card
Большой брат использует 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">
Вот вам дебаггер от гугла: https://developers.google.com/structured-data/testing-tool/

Итоги

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


Возврат к списку