Новости

Как сделать красивое превью ссылки во ВКонтакте, 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. После этого блок можно скрыть — он не будет отображаться на странице, но картинка будет загружена на сервер и будет доступна по ссылке.

image



Twitter


У Twitter есть 2 варианта превью картинок: Summary Card или Summary Card Large.

Summary Card

image
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

image
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. Отдельный код прописывать не нужно. 

image

А еще у нас открыт набор на курсы
Tilda Start. Начало с 24 февраля ⟶
Tilda Pro. Начало с 24 февраля ⟶
Made on
Tilda