Социальные 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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.