Коротко
безкоштовний інструмент попереднього перегляду Open Graph показує, як посилання виглядатиме під час поширення у Facebook, X, LinkedIn і WhatsApp, ще до публікації. Введіть заголовок, опис, URL зображення, назву сайту та URL сторінки, перемикайтеся між чотирма мережами та читайте чек-лист: заголовок від 15 до 70 символів, опис від 55 до 200 символів і зображення 1200 × 630 пікселів. Потім скопіюйте ці значення у свої теги og:.
Хочете дізнатися більше? Запитайте
Попередній перегляд Open Graph відповідає на одне запитання: що побачать люди, коли хтось вставить ваше посилання в допис чи чат? Відповідь залежить від кількох мета-тегів у head сторінки. Протокол Open Graph, опублікований на ogp.me, перелічує чотири властивості, обов'язкові для кожної сторінки: og:title, og:type, og:image та og:url. Коли їх бракує, кожна платформа гадає, і здогад часто виявляється хибним зображенням або назвою пункту меню замість заголовка.
Що показує інструмент попереднього перегляду Open Graph?
Інструмент малює одну картку для поширення за раз, з окремою вкладкою для кожної мережі, і оновлює її під час друку. Кожна платформа розташовує ті самі теги по-різному, тому картка, що виглядає добре в одній мережі, може бути обрізана в іншій.
| Мережа | Що показує картка в інструменті | На що звертати увагу |
|---|---|---|
| Зображення, домен, заголовок і опис | Повна картка: враховується кожне поле | |
| X | Зображення із заголовком поверх нього, домен знизу | Слабке зображення приховує добрий заголовок |
| Зображення, заголовок і домен | Опис не показується, тож повідомлення має нести заголовок | |
| Бульбашка чату із зображенням, заголовком, описом і доменом | Картка мала: найважливіші перші слова заголовка |
Під карткою трирядковий чек-лист стає зеленим або червоним: довжина заголовка, довжина опису та наявність зображення. Якщо URL зображення не завантажується, картка показує порожній заповнювач, і саме так виглядає зламаний og:image у справжній стрічці.
Як користуватися інструментом крок за кроком?
- Введіть заголовок, який плануєте використати в og:title. Він може відрізнятися від тегу title сторінки: пишіть його для людини, що гортає стрічку, а не для результату пошуку.
- Додайте назву сайту (og:site_name) і опис (og:description).
- Вставте URL зображення: абсолютну адресу файлу, який ви вкажете в og:image, що починається з https://.
- Введіть URL сторінки: інструмент виокремлює домен, який показує кожна мережа.
- Перемикайте вкладки, щоб перевірити Facebook, X, LinkedIn і WhatsApp одну за одною, і виправляйте чек-лист, доки всі три рядки не стануть зеленими.
Нічого не надсилається й не зберігається: прев'ю малюється у вашому браузері, тож ви можете вільно тестувати неопубліковані сторінки та чернеткові зображення.
Які теги Open Graph потрібні сторінці?
Чотири обов'язкові за протоколом, і ще два роблять картку повною. Протокол Open Graph також вимагає, щоб сторінка з og:image вказувала og:image:alt, опис того, що показує зображення.
| Тег | Роль | Приклад значення |
|---|---|---|
| og:title | Заголовок картки | Безкоштовний інструмент попереднього перегляду Open Graph |
| og:type | Тип об'єкта: website, article, product… | article |
| og:image | Абсолютний URL зображення для прев'ю | https://example.com/og/cover.jpg |
| og:url | Канонічна адреса сторінки | https://example.com/guide |
| og:description | Одне-два речення під заголовком | Перегляньте, як виглядають ваші посилання, перш ніж ними ділитися. |
| og:site_name | Назва всього сайту | Приклад |
| og:image:alt | Опис зображення для людей, які його не бачать | Ноутбук із графіком продажів |
og:url має збігатися з канонічним URL сторінки, щоб поширення різних версій тієї самої адреси складалися на одному об'єкті. Щоб записати всі ці теги одразу, скористайтеся генератором мета-тегів і прочитайте нашу статтю глосарія про мета-теги, щоб зрозуміти різницю між SEO-тегами та соціальними тегами.
Який розмір зображення працює в усіх мережах?
1200 × 630 пікселів, співвідношення 1,91:1, працює в основних мережах. Meta просить зображення щонайменше 1200 × 630 пікселів для найкращого відображення на екранах високої роздільності й співвідношення якнайближче до 1,91:1, щоб уникнути обрізання; LinkedIn просить щонайменше 1200 × 627 пікселів з тим самим співвідношенням.
| Платформа | Рекомендований розмір | Мінімум | Максимальний розмір файлу |
|---|---|---|---|
| Facebook (Meta for Developers) | 1200 × 630 пікс., співвідношення 1,91:1 | 200 × 200 пікс.; 600 × 315 пікс. для великих дописів із посиланням | 8 МБ |
| LinkedIn (LinkedIn Help) | Співвідношення 1,91:1 | 1200 × 627 пікс. | 5 МБ |
| Google Discover (Google Search Central) | 16:9, шириною щонайменше 1200 пікс. | Понад 300000 пікселів загалом | Не вказано |
Тримайте об'єкт і будь-який текст у центрі зображення, адже деякі макети обрізають краї. Стисніть файл перед публікацією компресором зображень: легший файл швидше завантажується кожною мережею.
Якої довжини мають бути og:title та og:description?
Орієнтуйтеся на заголовок від 15 до 70 символів і опис від 55 до 200 символів. Це діапазони, які використовує чек-лист: нижче за них картка виглядає порожньою, вище більшість макетів обрізають текст трьома крапками, особливо на мобільних і в маленькій бульбашці WhatsApp.
- Ставте ключові слова на початок. У LinkedIn опис прихований, а в X заголовок розташований поверх зображення: початок заголовка має працювати самостійно.
- Не копіюйте мета-опис слово в слово. Сніпет пошуку відповідає на запит; картка для поширення має зупинити людину, що гортає стрічку. Складайте сніпети для пошуку за допомогою генератора мета-описів і попереднього перегляду видачі, а потім адаптуйте їх для соцмереж.
- Уникайте клікбейту. Картка, що обіцяє більше, ніж дає сторінка, приводить відвідувачів, які одразу йдуть.
Чи допомагають теги Open Graph SEO?
Не як фактор ранжування, але Google читає деякі з них. Google називає вміст og:title серед джерел, які він використовує для формування посилань-заголовків у результатах пошуку (Google, title links). Його система назв сайтів також враховує og:site_name після структурованих даних WebSite (Google, site names). А для Discover Google радить вказувати велике, показове зображення за допомогою розмітки schema.org або тегу og:image та уникати універсальних зображень, як-от логотип.
Непрямі ефекти теж важливі. Зрозуміла картка приносить більше кліків, коли вашою сторінкою діляться, а кожне поширення дає шанс бути прочитаним, процитованим і отримати посилання. Наша стаття глосарія про соціальні сигнали пояснює, що Google бере, а що не бере із соціальної активності.
Чому мережа досі показує старе прев'ю?
Тому що платформи кешують те, що прочитали вперше. Meta пояснює, що її краулер сканує й кешує метадані URL, коли ним діляться вперше, що зображення кешуються за їхнім URL і що оновлення зображення не оновлює прев'ю старих поширень. Щоб оновити сторінку, пропустіть її через Sharing Debugger і давайте новому зображенню нову назву файлу, а не перезаписуйте старе. LinkedIn пропонує таке саме оновлення у своєму Post Inspector.
Якщо зображення так і не з'являється, перевірте, що файл публічний: LinkedIn зазначає, що сайт, який блокує його краулер, або зображення в захищеній папці перешкоджають прев'ю.
Які помилки ламають картку для поширення?
- Відносний URL зображення, наприклад /img/cover.jpg. Мережі завантажують зображення ззовні вашого сайту й потребують повної адреси https://.
- Узагалі немає og:image. Мережа обирає будь-яке зображення зі сторінки, часто логотип чи іконку.
- Два теги og:title або og:image, додані одночасно темою та плагіном. Залиште по одному.
- Те саме зображення на кожній сторінці. Логотип на весь сайт робить кожне поширення однаковим; Google також радить уникати універсальних зображень для Discover.
- Теги, додані JavaScript після завантаження. Краулери соцмереж читають HTML, який повертає сервер; теги, вставлені пізніше, можуть так і не бути побаченими.
Як картки для поширення вписуються в контент-план?
Кожною опублікованою статтею десь поділяться: у розсилці, дописі LinkedIn, чаті команди чи відповіді на форумі. Планування картки разом зі статтею економить цикл виправлень після запуску. Генератор статей для блогу від Sorank пише статті з джерелами та обкладинкою й публікує їх на вашому сайті, а дашборд GEO / SEO потім відстежує трафік і згадки, які ці сторінки здобувають у Google та у відповідях ШІ.
Хороша картка для поширення: зображення 1200 × 630, зрозумілий заголовок і чесний опис, перевірені в кожній мережі перед публікацією. Перегляньте свою просто зараз, а потім ознайомтеся з тарифами Sorank, щоб публікувати контент, готовий до поширення, на autopilot.
