Как сделать красивое превью ссылки во ВКонтакте, Twitter, Telegram
В код страницы можно добавить специальные параметры (метаданные), которые помогут социальным сетям сформировать красивое отображение ссылки при публикации в посте.
В Тильде вы можете добавить картинку, заголовок и описание только для Facebook. Для этого откройте Настройки страницы → Facebook&SEO → Задать специальные метаданные. Для Facebook нужно загрузить картинку разрешением 1200x630px.
У ВКонтакте, Twitter, Telegram другие требования к метаданным и размерам картинок. Рассказываем, как сформировать красивое превью ссылки для каждой социальной сети с помощью небольшого кода.
Все фрагменты кода мы будем добавлять в HEAD страницы. Нужно зайти: Настройки страницы → Дополнительно → HTML-код для вставки внутрь head.
ВКонтакте
Требования к картинкам в ссылках для VK — от 537x240 px и выше с сохранением пропорций. Лучше использовать картинку размером 1074x480 px.
Код для вставки в HEAD:
<meta property="vk:image" content="url-картинки" />
Как получить url картинки
1. Загрузите картинку в любой блок, например, IM01 из категории «Изображение»
2. Откройте «Контент» блока и кликните на конец URL картинки — картинка откроется в соседней вкладке
3. Скопировать прямой URL картинки из адресной строки браузера и добавить в код
4. После этого блок можно скрыть — он не будет отображаться на странице, но картинка будет загружена на сервер и будет доступна по ссылке.
Twitter
У Twitter есть 2 варианта превью картинок: Summary Card или Summary Card Large.
Summary Card Summary Card
Для картинки нужно использовать квадрат от 120х120px (Лучше 500x500px).
Код для Summary Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Краткое описание страницы">
<meta name="twitter:image" content="Ссылка на изображение">
Summary Card Large Summary Card Large
Для картинки нужно использовать прямоугольник от 280х150 px. Но можно использовать тот же бейдж, что и для facebook.
Код для Summary Card Large:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Краткое описание страницы">
<meta name="twitter:image" content="Ссылка на изображение">
Telegram
Телеграм без проблем отображает метаданные для Twitter. Отдельный код прописывать не нужно.
