Коротка відповідь: щоб перевірити Open Graph онлайн, вставте адресу сторінки у безкоштовний Open Graph Debugger PromoPilot. Він прочитає всі теги og:* та Twitter Card, перевірить наявність та розмір картинки, оцінить повноту розмітки та покаже прев'ю посилання для Facebook, X (Twitter) та LinkedIn – плюс рекомендації, що додати. Реєстрація не потрібна. Нижче — які теги обов'язкові, який потрібен розмір og:image і як оновити прев'ю, що «застрягло».
Я 12 років роблю сайти, і питання «чому посилання в Telegram без картинки» чую від клієнтів частіше, ніж про позиції. Зазвичай, це п'ять хвилин роботи — якщо знати, де дивитися.
Що перевіряє Open Graph Debugger?
Коли ви вставляєте посилання на пост або повідомлення, майданчик заходить на сторінку і шукає теги Open Graph. Знайшла – малює акуратну картку. Не знайшла — бере будь-що або показує голу адресу. Інструмент перевіряє рівно те, що прочитають соцмережі.
| Що перевіряє | Що дивиться | Навіщо це бізнесу |
|---|---|---|
| Усі теги og:* | og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale | З них майданчики збирають заголовок, опис та картинку картки |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) читає свої теги, а за їх відсутності - частково og |
| Зображення OG | чи є картинка і якого вона розміру | Дрібна картинка перетворює картку на крихітну іконку збоку. |
| Оцінка повноти | скільки рекомендованих тегів заповнено | Швидкий орієнтир: чи все на місці |
| попередній перегляд по мережах | картки для Facebook, X та LinkedIn | Видно, як пост виглядатиме до публікації |
| Рекомендації | що додати чи виправити | Готовий список завдань для розробника або для вас |
Як перевірити Open Graph сторінки онлайн?
- Відкрийте Open Graph Debugger.
- Вставте адресу сторінки, якою збираєтеся ділитися: статті, товару, лендінг під рекламу. Натисніть кнопку «Перевірити».
- Пройдіть по списку тегів: які задані, які порожні, чи немає в og:url чужої або тестової адреси.
- Подивіться прев'ю кожної мережі: чи обрізаний заголовок, чи видно картинка, чи немає у ньому важливого тексту з обох боків.
- Додайте теги за рекомендаціями і перевірте сторінку знову.
Сторінка інструменту: поле для адреси, кнопка «Перевірити», список перевірок та FAQ.
Інструмент легкий: гостю вистачає денного ліміту, щоб перевірити всі шаблони сайту – головну, категорію, товар та статтю. Після безкоштовної реєстрації ліміт утричі більший.
Які помилки в Open Graph зустрічаються найчастіше?
Ось що я знаходжу майже на кожному другому сайті, і в якому порядку це робити.
- Немає og:image або він вказаний відносною адресою.
content="/img/cover.jpg"соцмережі не зрозуміють - потрібна повна адреса зhttps://. Без картинки охоплення посту помітно падає. - Зображення занадто маленьке. Логотип 200×200 перетворює картку на маленький квадрат збоку. Потрібна картинка 1200×630.
- Одна og:image на весь сайт. Кожна стаття та кожен товар у соцмережах виглядають однаково – з логотипом. Для блогу та каталогу картинка має підставлятися з головного фото сторінки.
- og:url веде на іншу адресу - на головну, на тестовий домен або на версію
http://. Майданчик може склеїти всі посилання в одну картку. - Ні twitter:card. Без нього часто показує маленьку картку. Для великої картинки потрібен
summary_large_image. - og:title дублює title з «купити» та брендом. У стрічці соцмережі виглядає як реклама; краще живий заголовок, як для посту.
Мінімальний правильний набір виглядає так:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">Як підготувати картинку для og:image?
Картинка — найпомітніша частина картки, і на ній найчастіше заощаджують. Декілька правил, яких я дотримуюся:
- Розмір 1200×630 та горизонтальна орієнтація. Квадратне фото товару соцмережа обріже зверху та знизу, і товар може виявитися без голови чи без підошви.
- Важливе – у центрі. Майданчики по-різному кадрують краї, а в мобільній стрічці картка ще й зменшується. Текст тримайте великим і подалі від країв.
- Мінімум тексту. Заголовок вже є під картинкою; на малюнку досить 3–6 слів чи зовсім без написів.
- Легкий файл. JPG або PNG розумної ваги завантажаться швидко, і майданчик не втратить картинку по таймууту.
- Своє зображення для кожної ключової сторінки. Для статей та товарів її зручно збирати автоматично: обкладинка статті чи головне фото товару.
Хороша перевірка – відкрити прев'ю у налагоджувачі на телефоні. Якщо без збільшення незрозуміло, про що посилання, картинку варто переробити.
Як оновити старе прев'ю після виправлення?
Часта історія: теги виправили, а соцмережа вперто показує стару картинку. Причина - кеш: майданчик запам'ятав прев'ю при першому шарингу. У Facebook допомагає повторний збір даних у Sharing Debugger, LinkedIn — Post Inspector, Telegram — бот @WebpageBot, якому відправляють посилання. Якщо нічого не допомогло, додайте до адреси нешкідливий параметр, наприклад ?v=2: для майданчика це нове посилання.
Порівняння: Open Graph Debugger та альтернативи
| Інструмент | Що безкоштовно | Обмеження | Кому підходить |
|---|---|---|---|
| PromoPilot - Open Graph Debugger | Всі og- та twitter-теги, розмір og:image, прев'ю для Facebook, X та LinkedIn, рекомендації | Не скидає кеш соцмереж | Перевірити сторінку до публікації в будь-яких соцмережах відразу |
| Sharing Debugger (Meta) | Прев'ю для Facebook та повторний збір даних | Тільки Facebook, потрібний вхід до облікового запису | Скинути старе прев'ю у Facebook |
| LinkedIn Post Inspector | Прев'ю для LinkedIn та оновлення кешу | Тільки LinkedIn, потрібен вхід | Тим, хто просувається до LinkedIn |
| Бот @WebpageBot в Telegram | Оновлення прев'ю посилання на Telegram | Тільки Telegram, теги не розбирає | Власникам Telegram каналів |
Висновок: офіційні налагоджувачі майданчиків потрібні, щоб скинути кеш, але кожен показує лише свою мережу. Щоб за один захід побачити всі прев'ю і список тегів, що відсутні, зручніше універсальний відладчик.
До речі, у PromoPilot 87 безкоштовних SEO-інструментів. Якщо ви ще не написали теги - у нашій серії є стаття про генератор мета-тегів, він збере блок Open Graph з прев'ю.
Чим відладник Open Graph відрізняється від аналізу мета-тегів?
Аналіз мета-тегів дивиться сторінку очима пошуковика: title, description, canonical, hreflang, а Open Graph - лише один із груп. Відладчик зосереджений на соцмережах: малює картки для різних майданчиків, перевіряє розмір картинки та дає рекомендації саме по прев'ю. Якщо посилання на ваш сайт активно розходяться в соцмережах та месенджерах, відладчик корисніший.
Обмеження в обох одне: вони читають HTML, який віддає сервер. Якщо теги підставляються скриптом у браузері, багато соцмереж їх не побачать - це потрібно лагодити на стороні сайту. Ще одна деталь: відладчик перевіряє теги, але не сам факт шарингу. Якщо сторінку закрито паролем, геоблокуванням або захистом від ботів, соцмережа може не отримати доступу до неї, навіть коли всі теги на місці.
Коли безкоштовний інструмент мало?
Налагоджувач покаже, що на сторінці немає og:image. Але якщо сторінок тисячі, картинки вручну не розставити. Фахівець потрібен, коли:
- у кожного товару чи статті має бути своя картинка прев'ю, зібрана автоматично;
- сайт віддає теги скриптом і соцмережі їх не бачать;
- ви запускаєте рекламу та розсилки, де кожне прев'ю впливає на вартість кліка;
- потрібна зв'язка сайт + Telegram -канал + автопублікація з правильними картками.
Що я можу зробити для вашого сайту?
Я Валерій Данюк, розробник та SEO-фахівець: 12 років, 200+ клієнтів. Прекрасне прев'ю посилання - це безкоштовне охоплення, і я налаштовую його на кожному проекті.
SEO та просування
- SEO-аудит сайту під ключ: перевіряю теги всіх шаблонів, налаштовую автоматичні картинки прев'ю і виправляю код.
Сайти та інтернет-магазини
- Перенесення магазину з Instagram на сайт - товари з правильними прев'ю, щоб ними було зручно ділитися.
- Лендінг для нового товару за вечір - кейс NordHarvest із готовою карткою для соцмереж.
- Сайт клініки пластичної хірургії з ІІ та заявками через Telegram.
- Сайт на 1001site: прев'ю для соцмереж та авто-публікація в Telegram налаштовуються автоматично.
Боти та автоматизація
- Telegram -бот з ІІ для інтернет-магазину соусів.
- QuestFlow - SaaS-конструктор Telegram -ботів з ІІ.
- Агенти електронної комерції замість чат-ботів.
Надішліть посилання, яке негарно виглядає в месенджері, мені в Telegram — скажу, якого тега не вистачає.
Підсумок
- Перевірка Open Graph онлайн показує, як посилання виглядає у Facebook, X та LinkedIn, і яких тегів не вистачає.
- Обов'язковий мінімум – og:title, og:type, og:image (1200×630, повна адреса) та og:url, плюс twitter:card.
- Після виправлення скиньте кеш майданчиків: Sharing Debugger, Post Inspector, @WebpageBot.
- Для каталогу та блогу картинки прев'ю повинні збиратися автоматично – як на 1001site.
Перевірте сторінку, якою збираєтеся поділитися, у безкоштовному Open Graph Debugger — до того, як пост побачать передплатники.
Джерела
- Сторінка інструменту Open Graph Debugger PromoPilot — список перевірок та FAQ.
- Протокол Open Graph (ogp.me) - обов'язкові та додаткові властивості.
- Sharing Debugger від Meta та LinkedIn Post Inspector – офіційні інструменти майданчиків.
