Кратко
бесплатный инструмент предпросмотра Open Graph показывает, как ссылка будет выглядеть при публикации в Facebook, X, LinkedIn и WhatsApp, ещё до того, как вы её опубликуете. Введите заголовок, описание, URL изображения, название сайта и URL страницы, переключайтесь между четырьмя сетями и читайте чек-лист: заголовок от 15 до 70 символов, описание от 55 до 200 символов и изображение 1200 × 630 пикселей. Затем скопируйте эти значения в ваши теги og:.
Хотите узнать больше? Спросите
Предпросмотр Open Graph отвечает на один вопрос: что увидят люди, когда кто-то вставит вашу ссылку в публикацию или чат? Ответ даёт несколько метатегов в head страницы. Протокол Open Graph, опубликованный на ogp.me, называет четыре свойства, обязательных на каждой странице: og:title, og:type, og:image и og:url. Когда их нет, каждая платформа гадает, и догадка часто оказывается неверным изображением или подписью из меню вместо заголовка.
Что показывает инструмент предпросмотра Open Graph?
Инструмент рисует по одной карточке публикации с вкладкой для каждой сети и обновляет её по мере ввода. Каждая платформа по-разному располагает одни и те же теги, поэтому карточка, которая нормально выглядит в одной сети, в другой может быть обрезана.
| Сеть | Что показывает карточка в инструменте | На что обратить внимание |
|---|---|---|
| Изображение, домен, заголовок и описание | Полная карточка: важно каждое поле | |
| X | Изображение с заголовком поверх него, домен внизу | Слабое изображение скрывает хороший заголовок |
| Изображение, заголовок и домен | Описание не показывается, поэтому смысл должен нести заголовок | |
| Пузырь чата с изображением, заголовком, описанием и доменом | Карточка маленькая: важнее всего первые слова заголовка |
Под карточкой чек-лист из трёх строк становится зелёным или красным: длина заголовка, длина описания и наличие изображения. Если URL изображения не загружается, карточка показывает пустую заглушку, именно так выглядит неработающий og:image в настоящей ленте.
Как пользоваться инструментом шаг за шагом?
- Введите заголовок, который планируете использовать в og:title. Он может отличаться от тега title страницы: пишите его для человека, который листает ленту, а не для результата поиска.
- Добавьте название сайта (og:site_name) и описание (og:description).
- Вставьте URL изображения, абсолютный адрес файла, который вы укажете в og:image, начиная с https://.
- Введите URL страницы: инструмент выделит домен, который показывает каждая сеть.
- Переключайте вкладки, чтобы по очереди проверить Facebook, X, LinkedIn и WhatsApp, и исправляйте чек-лист, пока все три строки не станут зелёными.
Ничего не отправляется и не сохраняется: превью рисуется в вашем браузере, поэтому вы можете свободно тестировать неопубликованные страницы и черновики изображений.
Какие теги Open Graph нужны странице?
Четыре обязательны по протоколу, и ещё два делают карточку полной. Протокол Open Graph также требует, чтобы страница с og:image указывала og:image:alt, описание того, что показано на изображении.
| Тег | Роль | Пример значения |
|---|---|---|
| og:title | Заголовок карточки | Бесплатный инструмент предпросмотра Open Graph |
| og:type | Тип объекта: website, article, product… | article |
| og:image | Абсолютный URL изображения для превью | https://example.com/og/cover.jpg |
| og:url | Канонический адрес страницы | https://example.com/guide |
| og:description | Одно-два предложения под заголовком | Посмотрите, как выглядят ваши ссылки, прежде чем делиться ими. |
| og:site_name | Название всего сайта | Пример |
| og:image:alt | Описание изображения для людей, которые его не видят | Ноутбук с графиком продаж |
Значение og:url должно совпадать с каноническим URL страницы, чтобы репосты разных версий одного адреса суммировались на одном объекте. Чтобы написать все эти теги сразу, воспользуйтесь генератором метатегов и прочитайте нашу статью глоссария о метатегах, где объясняется разница между SEO-тегами и социальными тегами.
Какой размер изображения подходит для всех сетей?
1200 × 630 пикселей, соотношение сторон 1,91:1, подходит для основных сетей. Meta просит изображения не менее 1200 × 630 пикселей для лучшего отображения на экранах высокого разрешения и соотношение, максимально близкое к 1,91:1, чтобы избежать обрезки; LinkedIn просит не менее 1200 × 627 пикселей с тем же соотношением.
| Платформа | Рекомендуемый размер | Минимум | Максимальный размер файла |
|---|---|---|---|
| Facebook (Meta for Developers) | 1200 × 630 px, соотношение 1,91:1 | 200 × 200 px; 600 × 315 px для крупных публикаций со ссылкой | 8 МБ |
| LinkedIn (Справка LinkedIn) | Соотношение 1,91:1 | 1200 × 627 px | 5 МБ |
| Google Discover (Google Search Central) | 16:9, шириной не менее 1200 px | Более 300000 пикселей в сумме | Не указан |
Располагайте объект и любой текст в центре изображения, потому что некоторые макеты обрезают края. Сожмите файл перед публикацией с помощью компрессора изображений: более лёгкий файл быстрее загружается любой сетью.
Какой длины должны быть og:title и og:description?
Ориентируйтесь на заголовок от 15 до 70 символов и описание от 55 до 200 символов. Именно эти диапазоны использует чек-лист: ниже них карточка выглядит пустой, выше большинство макетов обрезает текст многоточием, особенно на мобильных устройствах и в маленьком пузыре WhatsApp.
- Ставьте ключевые слова в начало. В LinkedIn описание скрыто, а в X заголовок находится поверх изображения: начало заголовка должно работать само по себе.
- Не копируйте метаописание слово в слово. Поисковый сниппет отвечает на запрос; карточка публикации должна остановить человека, который листает ленту. Составляйте поисковые сниппеты с помощью генератора метаописаний и предпросмотра выдачи, а затем адаптируйте их для соцсетей.
- Избегайте кликбейта. Карточка, обещающая больше, чем даёт страница, приводит посетителей, которые сразу уходят.
Помогают ли теги Open Graph SEO?
Не как фактор ранжирования, но Google читает некоторые из них. Google называет содержимое og:title среди источников, которые он использует для построения заголовков ссылок в результатах поиска (Google, заголовки ссылок). Его система названий сайтов также учитывает og:site_name после структурированных данных WebSite (Google, названия сайтов). А для Discover Google рекомендует указывать крупное, репрезентативное изображение с помощью разметки schema.org или тега og:image и избегать шаблонных изображений, например логотипа.
Косвенные эффекты тоже важны. Понятная карточка приносит больше кликов, когда вашей страницей делятся, и каждый репост это шанс быть прочитанным, процитированным и получить ссылку. Наша статья глоссария о социальных сигналах объясняет, что Google берёт и чего не берёт из активности в соцсетях.
Почему сеть всё ещё показывает старое превью?
Потому что платформы кешируют то, что прочитали в первый раз. Meta объясняет, что её краулер считывает и кеширует метаданные URL при первой публикации, что изображения кешируются по их URL и что обновление изображения не обновляет превью старых публикаций. Чтобы обновить страницу, пропустите её через Sharing Debugger и давайте новому изображению новое имя файла, а не перезаписывайте старое. LinkedIn предлагает такое же обновление через свой Post Inspector.
Если изображение так и не появляется, проверьте, что файл общедоступен: LinkedIn отмечает, что сайт, блокирующий его краулер, или изображение в защищённой папке мешают показу превью.
Какие ошибки ломают карточку публикации?
- Относительный URL изображения, например /img/cover.jpg. Сети загружают изображение снаружи вашего сайта и требуют полный адрес https://.
- Отсутствие og:image вообще. Сеть выбирает любое изображение на странице, часто логотип или значок.
- Два тега og:title или og:image, добавленные одновременно темой и плагином. Оставьте по одному.
- Одно и то же изображение на каждой странице. Общий для сайта логотип делает все репосты одинаковыми; Google также советует не использовать шаблонные изображения для Discover.
- Теги, добавленные JavaScript после загрузки. Краулеры соцсетей читают HTML, который возвращает сервер; теги, добавленные позже, могут вообще не быть замечены.
Как карточки публикации вписываются в контент-план?
Каждой опубликованной вами статьёй где-нибудь поделятся: в рассылке, в посте LinkedIn, в командном чате или в ответе на форуме. Если планировать карточку вместе со статьёй, после запуска не придётся делать лишний круг исправлений. Генератор статей для блога Sorank пишет статьи с источниками и обложкой и публикует их на вашем сайте, а дашборд GEO и SEO затем отслеживает трафик и упоминания, которые эти страницы приносят в Google и в ответах ИИ.
Хорошая карточка публикации это изображение 1200 × 630, понятный заголовок и честное описание, проверенные в каждой сети до публикации. Посмотрите превью своей карточки прямо сейчас, а затем ознакомьтесь с тарифами Sorank, чтобы публиковать контент, готовый к репосту, на autopilot.
