HedgieTools

Предпросмотр ссылки в соцсетях

Посмотрите, как будет выглядеть ссылка на вашу страницу в Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord или Pinterest, исправьте то, что обрезается, и скопируйте готовые теги Open Graph.

1. Данные вашей страницы

Заполните форму или импортируйте данные из кода страницы.

0 / 60
0 / 155
Тип страницы
Изображение для соцсетей

JPG, PNG, WebP или GIF. Выбранное изображение используется только для предпросмотра: для кода укажите также его адрес в интернете.

2. Предпросмотр

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

Google

Eexample.comhttps://example.com › …
Заголовок страницыЗдесь появится описание страницы.

Facebook

example.comЗаголовок страницыЗдесь появится описание страницы.

X

Заголовок страницы
С сайта example.com

LinkedIn

Заголовок страницыexample.com

WhatsApp

Заголовок страницыЗдесь появится описание страницы.example.com
https://example.com10:24

Slack

example.comЗаголовок страницыЗдесь появится описание страницы.

Discord

example.comЗаголовок страницыЗдесь появится описание страницы.

Pinterest

Заголовок страницыEexample.com

Pinterest показывает изображение целиком, без обрезки. Вертикальное изображение (2:3, например 1000 × 1500 px) занимает там больше места, но на других платформах будет обрезано.

3. Проверки и код

Что исправить, а затем теги, которые нужно вставить на страницу.

  • ПроблемаНет заголовкаБез заголовка каждая соцсеть придумает его сама на основе страницы.
  • ПроблемаНет описанияСоцсети возьмут фрагмент текста со страницы, и часто не самый удачный.
  • ПроблемаНет изображенийПо ссылкам без изображения кликают гораздо реже. Подготовьте изображение 1200 × 630 px.
  • Можно улучшитьНет адреса страницыТег og:url задает официальный адрес страницы, чтобы все репосты учитывались вместе.

Вставьте его в раздел head вашей страницы.

Заполните форму, чтобы получить код.

О предпросмотре ссылки в соцсетях

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

Пусть ваши ссылки выглядят красиво

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

Правильная длина

Google обрезает заголовок примерно после 60 символов, а описание — после 155. Изображение 1200 × 630 пикселей (1,91:1) хорошо смотрится везде: держите главное в центре, так как некоторые платформы его обрезают. Pinterest предпочитает вертикальные изображения.

Готовый код для вставки

Скопируйте HTML-теги для раздела head вашей страницы или объект metadata для сайта на Next.js. После публикации соцсети иногда несколько дней хранят старый предпросмотр в кеше.

Ничего не отправляется на сервер

Предпросмотр создается в вашем браузере. Ваши изображение и тексты никуда не отправляются. Единственный запрос — к адресу изображения, который вы вводите, и его делает ваш браузер.

Похожие инструменты

Разработка

Декодер JWT

Прочитайте заголовок, полезную нагрузку и даты JWT и проверьте его подпись.

Разработка

SVG в HTML

Конвертируйте SVG в HTML, JSX и React.