Чому превью вашого посилання виглядає неправильно і як це виправити за допомогою Open Graph

Ви надсилаєте посилання на свою нову цільову сторінку, а превью показує без картинки, заголовок головної сторінки або банер з двох кампаній тому. Сама сторінка в порядку. Превью будується з чогось іншого: кількох рядків коду в <head> сторінки, які більшість людей ніколи не бачить.

У цій статті розглянуто шість причин, що стоять за більшістю зламаних превью, у порядку, в якому їх варто перевіряти. Якщо хочете, щоб теги написали за вас, безкоштовний генератор Open Graph створить їх, правильно екранує і перевірить за обмеженнями, наведеними нижче.

Як створюється превью посилання

Коли посилання вставляють у пост або повідомлення, застосунок надсилає на сторінку краулер. Краулер читає теги <meta> у <head> і на їх основі малює картку. Ці теги походять з протоколу Open Graph, який називає чотири обов'язкові:

• og:title: заголовок сторінки так, як він має виглядати в картці.
• og:type: тип сторінки, зазвичай website або article.
• og:image: зображення.
• og:url: канонічна URL-адреса сторінки, яку протокол називає її постійним ідентифікатором.

Додайте og:description, і картка готова. Повний мінімальний набір виглядає так:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Причина 1: теги відсутні

Без тегів og: кожен застосунок змушений покладатися на те, що знайде інше на сторінці, наприклад <title> або перше зображення, а вибір залежить від самого застосунку. Тому одне й те саме посилання може виглядати нормально в одному місці і зламано в іншому. Виправлення полягає в тому, щоб задати чотири обов'язкові теги плюс опис на кожній сторінці, якою люди, імовірно, ділитимуться, а не лише на головній. Сторінка товару, якою поділилися з тегами головної сторінки, покаже картку головної сторінки.

Причина 2: URL зображення відносний

Це легко пропустити, бо сторінка у вашому власному браузері виглядає нормально. content="/images/og.jpg" працює для браузера, який уже відкрив ваш сайт, але краулер перебуває поза ним. Вказуйте повну адресу, що починається з https:// і вашого домену. Те саме стосується og:url.

Причина 3: зображення має неправильний розмір або пропорції

Кожна платформа вказує, чого хоче, і вони збігаються щодо широкого зображення:

• LinkedIn у своєму посібнику зі створення сайту, яким можна ділитися, пише, що зображення має бути щонайменше 1200 × 627 пікселів, рекомендовано 1.91:1 і не більше 5 МБ.
• Meta у своїх найкращих практиках поширення рекомендує зображення шириною щонайменше 1080 пікселів для екранів з високою роздільною здатністю і щонайменше 600 пікселів для показу реклами з посиланням у вигляді зображення.
• Велика картка зображення X підтримує співвідношення 2:1 від 300 × 157 до 4096 × 4096 пікселів, менше 5 МБ, у форматах JPG, PNG, WEBP або GIF, і не підтримує SVG, згідно з її документацією для розробників (оригінальна сторінка тепер перенаправляє, тому це посилання веде через Internet Archive).

Один розмір підходить для всіх трьох: 1200 × 630. Він відповідає мінімуму LinkedIn 1200 × 627, ширший за 1080 від Meta, а його співвідношення 1200 ÷ 630 = 1.905 лежить у межах 5% від 2:1 у X. Квадратне або високе зображення буде обрізано до широкої картки, тож тримайте важливу частину в центрі. Калькулятор співвідношення сторін показує, що лишається при обрізанні по центру.

Вказуйте розміри також у тегах. Meta просить og:image:width і og:image:height, щоб її краулер міг відобразити зображення одразу, а не завантажувати й обробляти його спочатку. Її посібник для веб-майстрів формулює це просто: вкажіть висоту й ширину, щоб зображення завантажувалося коректно вже при першому поширенні сторінки.

Причина 4: теги додає JavaScript

Деякі конструктори сайтів і односторінкові застосунки додають мета-теги вже після завантаження сторінки, у браузері. Краулер, який читає HTML, що надсилає ваш сервер, може ніколи не виконати цей код і тому не побачить тегів. Перевірте код сторінки (View Source, а не інспектор, який показує сторінку після виконання скриптів). Якщо тегів немає у вихідному коді, краулер, імовірно, теж їх не побачить. Виправлення належить до налаштувань вашого сайту або серверного шаблону.

Причина 5: спеціальні символи зламали тег

Заголовок із подвійними лапками, наприклад Єдиний "лише" льон, який вам потрібен, обриває атрибут content="..." раніше, і решта заголовка губиться. Символи, важливі всередині атрибута, потрібно екранувати: " стає ", & стає &, а < стає <. Браузери і краулери повертають їх до початкових символів під час читання тегу. Генератор робить це за вас, і це наполовину причина ним скористатися.

Причина 6: застосунок запам'ятав стару версію

Ви виправили теги, поширили посилання знову, а стара картка все ще на місці. Це кеш. Застосунки зберігають те, що вже зібрали, і повторно використовують це. Обидві великі мережі дають інструмент, щоб попросити свіжу версію:

• Facebook: вставте URL в Sharing Debugger від Meta. Її посібник для веб-майстрів каже, що він показує, які теги зібрав краулер, з помилками або попередженнями, і запускає нове зчитування. Найкращі практики Meta додають, що зібраний вміст інакше оновлюється за стандартним 24-годинним періодом.
• LinkedIn: пропустіть URL через Post Inspector. Сторінка довідки LinkedIn чітко пояснює обмеження: оновлення змінює превью лише для нових постів. Пости, які вже містять URL, зберігають старе превью.

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

Тег twitter:card: один рядок, а не чотири

X також читає Open Graph. Її довідник з розмітки карток перелічує резервне значення для кожного тегу: twitter:title бере og:title, twitter:description бере og:description, twitter:image бере og:image, а twitter:image:alt бере og:image:alt. Тож повторювати все не потрібно. Єдиний рядок, який варто додати, це twitter:card: summary_large_image для повноширинного зображення або summary для малого квадратного. Якщо його пропустити, той самий довідник каже, що X може показати малу картку-підсумок, тому велике зображення іноді з'являється як мініатюра. Той самий довідник обмежує заголовок 70 символами, опис 200, а alt-текст 420.

Перевірка за п'ять хвилин перед запуском

1. Перегляньте код сторінки і знайдіть теги og:. Усі чотири обов'язкові плюс опис.
2. Перевірте, що og:image і og:url починаються з https://.
3. Відкрийте URL зображення окремо в браузері. Воно має завантажитися, розміром 1200 × 630 або близьким до цього.
4. Вставте URL в Sharing Debugger і Post Inspector та перегляньте картки.
5. Тільки після цього діліться.

Де тут Hermoso

Hermoso є AI-агентом для маркетингу: він досліджує реклами, які вже працюють на вашому ринку, створює брендовані зображення та відеорекламу, планує публікації у ваших власних акаунтах і запускає платні кампанії в ваших рекламних кабінетах. Добре превью посилання робить ці пости вартими кліку. Hermoso працює у веб-застосунку або всередині Claude, ChatGPT і Cursor через свій MCP-сервер.

Часті запитання

Чому моє посилання не показує зображення у Facebook або LinkedIn?

Зазвичай тег og:image відсутній, використовує відносний шлях замість повної адреси https:// або посилається на занадто мале зображення. LinkedIn вимагає щонайменше 1200 × 627 пікселів. Після виправлення проженіть URL через Sharing Debugger від Meta або Post Inspector від LinkedIn, щоб вони завантажили його знову.

Який розмір має бути у зображення Open Graph?

1200 × 630 пікселів працюють у великих мережах. Це відповідає мінімуму LinkedIn 1200 × 627 при приблизно 1.91:1, ширше за 1080 пікселів, які рекомендує Meta, і близько до співвідношення 2:1, яке X підтримує для великих карток із зображенням.

Як оновити превью посилання в LinkedIn?

Виправте теги на сторінці, а потім введіть URL у Post Inspector від LinkedIn. Оновлене превью застосовується лише до нових постів. Пости, які вже містять посилання, зберігають старе превью.

Чи потрібні теги twitter:, якщо є og:?

Лише twitter:card. X бере og:title, og:description, og:image і og:image:alt, якщо версій twitter: немає.