Генератор мета-тегів Open Graph

Теги, з яких будується перегляд посилання

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

• og:title: заголовок у вигляді, в якому він має з’явитися в перегляді.
• og:type: чим є сторінка. website підходить для більшості сторінок, а article для допису в блозі. Протокол також визначає такі типи, як profile, book, video.movie та music.song.
• og:image: URL зображення, що представляє сторінку.
• og:url: канонічний URL, який протокол називає постійним ідентифікатором об’єкта.

Протокол також визначає необов’язкові теги, і генератор записує корисні з них: og:description, og:site_name та деталі зображення og:image:width, og:image:height і og:image:alt. Щодо альтернативного тексту протокол висловлюється прямо: якщо сторінка задає og:image, вона має задавати й og:image:alt, і цей текст описує те, що на зображенні, а не підпис до нього.

Що додає X: twitter:card

X читає й Open Graph. Його довідник з розмітки карток (документація для розробників X, зв’язана тут через Internet Archive, бо оригінальна сторінка тепер перенаправляє) перелічує запасний варіант для кожного тегу: twitter:title повертається до og:title, twitter:description до og:description, twitter:image до og:image, а twitter:image:alt до og:image:alt. Тож єдиний тег, який варто додати, це twitter:card, який обирає макет. Опустіть його, і той самий довідник каже, що X може повернутися до малої зведеної картки, навіть якщо ви хотіли велику:

• summary_large_image: зображення на всю ширину над заголовком. Сторінка картки з великим зображенням X зазначає, що для нього зображення підтримують співвідношення сторін 2:1 з мінімальними розмірами 300 × 157 і максимальними 4096 × 4096 пікселів, до 5MB, у форматі JPG, PNG, WEBP або GIF. SVG не підтримується.
• summary: менша картка з квадратним зображенням. Сторінка зведеної картки X зазначає, що зображення підтримує співвідношення 1:1, від 144 × 144 до 4096 × 4096 пікселів, і обрізається до квадрата на всіх платформах.

Той самий довідник перелічує картки app і player, яким потрібні додаткові поля для App Store чи відеоплеєра, тому тут вони не враховуються. Він також документує обмеження, які використовують наведені вище перевірки: 70 символів для заголовка, 200 для опису та 420 для альтернативного тексту.

Розміри зображень, які вказують платформи

• LinkedIn: його посібник про те, як зробити вебсайт придатним для поширення вимагає og:title, og:image, og:description та og:url і зазначає максимальний розмір файлу 5 МБ, мінімум 1200 × 627 пікселів і рекомендоване співвідношення 1.91:1.
• Meta: його найкращі практики поширення радять використовувати зображення щонайменше 1080 пікселів завширшки для екранів з високою роздільною здатністю та щонайменше 600 пікселів завширшки для показу рекламних посилань із зображеннями. Та сама сторінка вимагає og:image:width та og:image:height, щоб краулер міг одразу відрендерити зображення, не завантажуючи та не обробляючи його попередньо.

Зображення 1200 × 630 відповідає всім цим вимогам: воно щонайменше 1200 × 627 для LinkedIn, ширше за 1080 для Meta і має співвідношення 1.905:1, що в межах 5% від 2:1 у X’а.

Перевірте це й оновіть старі попередні перегляди

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

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

Чого цей інструмент не робить

Він не завантажує вашу сторінку чи ваше зображення, тож не може бачити, що насправді опубліковано, і попередній перегляд вище є текстовим ескізом, а не рендером. Він пише теги; ваш сайт усе одно має подавати їх у <head> сторінки, в HTML, який отримує краулер. Теги, додані пізніше за допомогою JavaScript, можуть так і не бути побачені. І він не пише картки app чи player, а також додаткові властивості, які визначають типи на кшталт book чи video.movie.

Якщо ви не хочете писати це вручну

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

Безкоштовні інструменти: Конструктор UTM-посилань · Генератор QR-кодів · Довідник розмірів для соцмереж

Поширені запитання

Які теги Open Graph обов'язкові?

Протокол Open Graph перелічує чотири обов'язкові властивості: og:title, og:type, og:image і og:url. og:description, og:site_name і теги ширини, висоти та alt для og:image необов'язкові, але їх варто додати.

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

Ні. Довідник з розмітки карток X зазначає, що twitter:title, twitter:description, twitter:image і twitter:image:alt повертаються до своїх відповідників og:. Варто додати тег twitter:card, який обирає макет картки.

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

LinkedIn просить щонайменше 1200 × 627 пікселів у співвідношенні 1.91:1 і менше 5 MB. Meta пропонує ширину щонайменше 1080 пікселів. Картка з великим зображенням у X підтримує 2:1 від 300 × 157 до 4096 × 4096. Зображення 1200 × 630 підходить для всіх трьох.

Чому моє посилання досі показує старе зображення після того, як я змінив теги?

Застосунок кешував старий скрейп. Проженіть URL через Sharing Debugger у Meta або Post Inspector у LinkedIn, щоб отримати його знову. LinkedIn зазначає, що дописи, які вже поширюють URL, зберігають старий попередній перегляд.

Чому лапки й амперсанди змінюються у результаті?

Вони екрановані як HTML, щоб тег лишався валідним. Заголовок на кшталт Tom & Jerry's "Sale" перетворюється на Tom & Jerry's "Sale" всередині атрибута content, а браузери й краулери зчитують його назад як оригінальний текст.

Чи завантажує інструмент моє зображення?

Ні. Нічого з того, що ви вводите, нікуди не надсилається, а URL зображення ніколи не завантажується, тому в попередньому перегляді показано заповнювач замість картинки.