Превью в соцсетях в SEO

Когда вы кидаете ссылку в мессенджер или соцсеть, под ней появляется карточка: картинка, заголовок, описание. Это превью ссылки. Соцсеть собирает его сама - из специальных мета-тегов на странице.

Если разметки нет, соцсеть возьмет что попало: первый попавшийся заголовок, случайную картинку или вообще пустую карточку. Это бьет по CTR из соцсетей: люди реже кликают по невзрачной ссылке.

За превью отвечают два стандарта: Open Graph (для Facebook, Telegram, VK, LinkedIn) и Twitter Cards (для X/Twitter). Оба задаются через мета-теги в head.

Open Graph

Основные OG-теги описывают объект страницы. Минимальный набор такой:

<head>
	<meta property="og:title" content="About">
	<meta property="og:description" content="Short text">
	<meta property="og:image" content="https://example.com/img.png">
	<meta property="og:url" content="https://example.com/about/">
	<meta property="og:type" content="website">
</head>

og:title - заголовок карточки. og:description - текст под ним. og:image - картинка превью. og:url - канонический адрес. og:type - тип объекта, обычно "website" или "article".

Для картинки важен размер: соцсети лучше всего показывают 1200 на 630 пикселей. Меньше - карточка может стать маленькой или без превью.

Тип "article" добавляет теги для статей:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-09-12T10:00:00+00:00">
<meta property="article:author" content="Ivan Ivanov">

Twitter Cards

У X/Twitter своя разметка. Она задает тип карточки и данные для нее:

<head>
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="About">
	<meta name="twitter:description" content="Short text">
	<meta name="twitter:image" content="https://example.com/img.png">
</head>

twitter:card задает вид превью. "summary" - маленькая картинка сбоку, "summary_large_image" - большая картинка сверху.

Если Twitter-тегов нет, X попробует взять данные из Open Graph. Но лучше прописать оба набора - так превью будет одинаково хорошим везде.

Как соцсеть собирает превью

Когда вы вставляете ссылку, соцсеть загружает страницу и ищет мета-теги в head. Дальше по приоритету: сначала свои теги, потом Open Graph, потом обычные title и description.

Именно поэтому title и description - не запасной вариант, а последний рубеж. Если OG-тегов нет, карточка будет собрана из них.

Проверить превью можно через отладчики: Facebook Sharing Debugger, Twitter Card Validator, а для Telegram - отправить ссылку в чат «Saved Messages». После правок кеш соцсети нужно сбросить.

Влияние на CTR

Превью - это первое, что видит человек в ленте. Карточка с картинкой, понятным заголовком и описанием собирает больше кликов, чем голая ссылка.

Поэтому og:title делают короче и цепляюще, чем title, а og:image - контрастной и читаемой в маленьком размере. Один и тот же текст в карточке и на странице - не обязателен.

Практические задачи

Расскажите, чем Open Graph отличается от Twitter Cards и почему часто прописывают оба набора.

Дана верстка:

<head>
	<title>About</title>
	<meta name="description" content="Short text">
</head>

Добавьте в head разметку Open Graph для страницы: заголовок, описание, картинку, канонический URL и тип "website".

Дана верстка:

<head>
	<meta property="og:title" content="About">
	<meta property="og:description" content="Short text">
	<meta property="og:image" content="https://example.com/img.png">
</head>

Добавьте Twitter Cards так, чтобы карточка показывала большую картинку сверху. Используйте те же данные, что и в Open Graph.

Дана верстка:

<head>
	<meta property="og:title" content="About">
	<meta property="og:image" content="https://example.com/logo.png">
</head>

Найдите ошибки, из-за которых превью в соцсетях будет плохим, и исправьте разметку.

Дана страница статьи. Добавьте Open Graph-разметку для типа "article" с датой публикации и автором.