Перевірка Open Graph
Вставте публічну URL-адресу - ми отримаємо її og:title, og:image, og:description та картку Twitter, саме так, як їх відобразять Slack, LinkedIn і X.
Як виправити прев'ю, яке не з'являється
- 01
Переконайтеся, що теги є саме на тій URL-адресі, якою діляться
Не на головній сторінці і не на версії за перенаправленням - а на точній URL-адресі, яку вставляють люди. Прев'ю зчитується з фінальної відповіді, тож тег, що існує лише на сторінці до перенаправлення, з тим самим успіхом може взагалі не існувати.
- 02
Зробіть зображення абсолютно доступним за адресою
og:image потребує повної https URL-адреси, яку сторонній може завантажити: без відносного шляху, без входу, без захисту від хотлінкінгу, без перенаправлення. Якщо ви не можете відкрити її у приватному вікні, платформа теж не зможе.
- 03
Дайте йому форму, якої очікують платформи
1200 на 630 пікселів - безпечний варіант за замовчуванням, це приблизно 1.91:1. Тримайтеся в межах кількох мегабайтів, використовуйте JPEG або PNG і розміщуйте будь-який текст із запасом від країв кадру, бо різні платформи обрізають різні краї.
- 04
Форсуйте повторне сканування, а не просто пробуйте ще раз
Кожна мережа кешує те, що отримала першого разу, включно з невдачею. Після виправлення скористайтеся власним дебагером платформи, щоб примусово оновити дані - інакше ви дивитиметеся на закешовану помилку і виправлятимете те, що ніколи не було зламано.
Що робить кожен тег
og:title і og:description
Заголовок і підзаголовок картки. Вони замінюють title сторінки та meta description саме для поширення, і це корисно: формулювання, що працює в пошуковій видачі, рідко працює у стрічці.
og:image
Тег, який найпомітніший і найчастіше ламається - майже завжди тому, що зображення недоступне, а не тому, що воно неправильне. Де можливо, вказуйте явну ширину і висоту - деякі платформи компонують картку ще до того, як зображення довантажиться.
og:url
Канонічна адреса того, чим діляться. Він об'єднує лічильники взаємодій, коли та сама сторінка розходиться з різними параметрами відстеження, тож тут має бути чиста URL-адреса, а не тегована.
twitter:card
Обирає між маленькою мініатюрою і великим зображенням. У всьому іншому X покладається на теги Open Graph, тож зазвичай це єдиний тег twitter:, який варто додавати.
Поширені запитання про прев'ю посилань
Чому моє посилання показує порожнє прев'ю?
У дев'яти випадках з десяти зображення недоступне - відносний шлях, приватний бакет або перенаправлення, яке засіб отримання не проходить. Решта випадків - сторінки, що рендерять свої теги через JavaScript, а більшість засобів отримання прев'ю його не виконують.
Як очистити закешоване прев'ю?
Через власний дебагер платформи, бо кожна тримає свій окремий кеш: Facebook Sharing Debugger, LinkedIn Post Inspector, валідатор карток X. Універсального очищення не існує, і просте повторне поширення посилання тут не допоможе.
Чи потрібні теги twitter:, якщо в мене вже є теги Open Graph?
Лише twitter:card, і лише якщо вам потрібне велике зображення. Заголовки, описи та зображення завжди беруться з відповідних тегів og:.
Чи впливає прев'ю на SEO?
Не напряму - теги Open Graph не є сигналами ранжування. Вони впливають на те, чи натиснуть на посилання, коли ним поділяться, а це інший показник, і часто значно більший.
Чому те саме посилання виглядає по-різному на кожній платформі?
Різні пропорції обрізки, різна довжина опису і різні кеші різного віку. Проєктуйте зображення так, щоб воно лишалося зрозумілим, навіть коли краї обрізано, а опис скорочено.