Оформление сниппета ссылки в социальных сетях

У каждой ссылки в социальных сетях есть описание. Обычно оно составляется автоматически, но не всегда это хорошо выходит. Лучше всего контролировать этот процесс. И чтобы упростить создание таких сниппетов, я подготовил эту форму. И ответил на часто задаваемые вопросы.

Параметры

URL:

Уникальный адрес страницы (абсолютный)

Заголовок:

Короткий заголовок, не больше 70 знаков

Описание:

2-4 предложения, не больше 200 знаков

Изображение:

Ссылка на изображение (абсолютная)

Использовать сниппет в: , , .

Код для сайта

Код необходимо вставить в <head></head>

Пример социального сниппета

<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website">

<meta property="og:url" content="https://simonenko.xyz/tools/snippet/">
<meta property="og:title" content="Сделай свой социальный сниппет">
<meta property="og:description" content="Инструмент для подготовки сниппетов в социальных сетях. Работает с Facebook, Twitter, ВКонтакте.">
<meta property="og:image" content="https://i.simonenko.xyz/logo.jpg">

Как это может выглядеть

Facebook Open Graph

проверить ссылку

Twitter Cards

ВКонтакте

Часто задаваемые вопросы

В документации Twitter написано, что нужно использовать другие теги. Такой код точно будет работать?: Основные данные передаются через Open Graph. Для Twitter конструктор дополнительно добавляет twitter:card. Окончательный вид карточки определяет социальная сеть.
Моё изображение не отображается, почему?: Требования к изображениям везде разные, но можно свести к следующему: изображения должны быть больше 200 пикселей, отношение сторон должно быть равным (квадратные), максимальный размер изображения не должен превышать 1 Мб.
Можно ли использовать несколько изображений?: Да, вы можете дублировать og:image столько, сколько вам нужно. Однако в социальной сети будет использовано одно изображение. Выбор этого изображения делает пользователь.
Моё описание не появляется в Twitter, почему?: Проверьте, что страница и изображение доступны без авторизации, а метатеги находятся в исходном HTML страницы. Затем вставьте ссылку в новую публикацию и проверьте предпросмотр.
Что знает социальная сеть про мою ссылку?: Для Facebook есть Sharing Debugger. В других сетях проверяйте предпросмотр ссылки при создании публикации.
Я хочу получать статистику по моим ссылкам в Facebook, как мне добавить id приложения?: Можно использовать следующий тэг: <meta property="fb:app_id" content="">
Мне нужно указать id приложения в ВКонтакте, как это сделать?: Можно использовать следующий тэг: <meta property="vk:app_id" content="">
Будет ли работать сниппет без социальных кнопок на сайте?: Да, будет.
Какие социальные кнопки лучше всего ставить?: На этом сайте доступны ссылка для Telegram и копирование адреса. Для них не нужно подключать сторонние виджеты.