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 вашої сторінки або об’єкт метаданих для сайту на Next.js. Після публікації мережі іноді ще кілька днів тримають старий попередній перегляд у кеші.

Нічого не надсилається на сервер

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

Схожі інструменти

Розробка

Декодер JWT

Перегляньте заголовок, корисне навантаження й дати JWT та перевірте його підпис.

Розробка

SVG у HTML

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