","err_audit_input_required":"Спершу вставте HTML із вашими мета-тегами.","mockups_heading":"Як це виглядатиме як превʼю посилання","mockups_disclaimer":"Ці чотири картки — стилізовані наближення реального оформлення превʼю посилань кожної платформи, створені лише для планування — це не жива вивантажена копія чи знімок екрана Twitter/X, Facebook, LinkedIn чи Discord, і платформи можуть згодом змінити власний інтерфейс превʼю.","mockup_twitter_heading":"Твіттер / X","mockup_facebook_heading":"Facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"Розбрат","mockup_image_alt":"Зображення превʼю посилання","mockup_no_image":"Зображення не надано","mockup_no_image_short":"Немає зображення","domain_default_fallback":"example.com","audit_missing_title":"Відсутній og:title — без нього більшість платформ показують загальний або порожній заголовок.","audit_missing_description":"Відсутній og:description — картка превʼю не матиме тексту опису.","audit_missing_image":"Відсутній og:image — більшість платформ не покажуть зображення або підставлять перше зображення, знайдене на сторінці.","audit_missing_url":"Відсутній og:url — без нього поширення альтернативних URL (з UTM-мітками, AMP-версіями тощо) можуть не об'єднуватися в канонічну сторінку.","audit_title_too_long":"og:title містить {length} символів — понад позначку в ~{max} символів, де більшість платформ обріже текст.","audit_title_long":"og:title містить {length} символів — понад позначку в ~{max} символів, де деякі платформи вже починають обрізати текст, хоча деінде він може відображатися повністю.","audit_title_ok":"og:title містить {length} символів — у безпечному діапазоні для більшості платформ.","audit_description_too_long":"og:description містить {length} символів — понад позначку в ~{max} символів, де більшість платформ обріже текст.","audit_description_long":"og:description містить {length} символів — понад позначку в ~{max} символів, де деякі платформи вже починають обрізати текст.","audit_description_ok":"og:description містить {length} символів — у безпечному діапазоні для більшості платформ.","audit_url_not_absolute":"Значення og:url \"{value}\" не є абсолютним http(s) URL — тут має бути повний канонічний URL сторінки.","audit_image_not_absolute":"Значення og:image \"{value}\" не є абсолютним http(s) URL — більшість платформ вимагають повністю кваліфікований URL зображення.","audit_image_dims_small":"Задекларовані og:image:width/height — {w}×{h}, що менше за широко рекомендований мінімум 1200×630 для превʼю посилань.","audit_image_dims_ok":"Задекларовані og:image:width/height — {w}×{h}, що відповідає широко рекомендованому мінімуму 1200×630.","audit_image_dims_unparseable":"og:image:width/og:image:height присутні, але не є дійсними числами.","audit_image_dims_unknown":"og:image:width/og:image:height не оголошено — фактичні розміри в пікселях неможливо перевірити без завантаження зображення, а цей інструмент навмисно цього ніколи не робить, заради приватності. Рекомендований мінімум: 1200×630.","audit_twitter_card_missing":"Немає тегу twitter:card — Twitter/X зазвичай підставить відповідні теги og:, але явний twitter:card надійніший.","audit_twitter_card_invalid":"Значення twitter:card \"{value}\" не входить до чотирьох значень, які приймає валідатор карток Twitter: summary, summary_large_image, app, player.","audit_twitter_card_ok":"twitter:card має значення \"{value}\" — дійсне значення.","audit_large_image_needs_image":"twitter:card має значення summary_large_image, але не знайдено ні og:image, ні twitter:image — цьому типу картки потрібне зображення для коректного відображення.","audit_twitter_title_fallback":"Не встановлено twitter:title — Twitter/X використає og:title як запасний варіант.","audit_twitter_description_fallback":"Не встановлено twitter:description — Twitter/X використає og:description як запасний варіант.","audit_twitter_image_fallback":"Не встановлено twitter:image — Twitter/X використає og:image як запасний варіант.","audit_duplicate_tag_item":"\"{tag}\" оголошено {count} рази — фактично діятиме лише останній, який розбере більшість платформ."};
⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Генератор OG і Twitter Card — конструктор, аудитор і перегляд мета-тегів

Складіть готові до вставки мета-теги Open Graph і Twitter Card за допомогою форми, або вставте наявний <head>, щоб перевірити відсутні теги, довжину заголовка/опису та коректність twitter:card — а потім перегляньте результат у справді по-різному стилізованих макетах карток Twitter/X, Facebook, LinkedIn і Discord.

Buy Me a Coffee at ko-fi.com
Опрацювання... 0%
Читання вхідних даних
Складання/перевірка тегів
Побудова превʼю
Готово

Результат

Мета-теги Open Graph і Twitter Card визначають, як виглядає посилання в ту саму мить, коли його вставляють у Slack, iMessage, твіт чи канал Discord, — заголовок, опис і зображення, обрані власним <head> сторінки, а не тим, що платформа випадково вихопить із видимого тексту сторінки. Цей інструмент водночас і конструктор, і аудитор, а не проста заготовка-шаблон. У режимі СКЛАДАННЯ заповніть заголовок, опис, URL зображення, канонічний URL, тип контенту й тип картки Twitter, і інструмент складе точний блок тегів <meta property="og:..."> і <meta name="twitter:...">, готовий для вставки у <head> вашої сторінки, пропускаючи будь-яке поле, яке ви залишили порожнім, а не генеруючи порожні теги без вмісту.

У режимі АУДИТУ вставте наявну розмітку <head> або весь HTML сторінки, і інструмент розбере його за допомогою вбудованого в браузер DOMParser, щоб витягти кожен наявний мета-тег og: і twitter:, а потім запустить перевірки, які справді мають значення: чотири зазвичай обов'язкові теги (og:title, og:description, og:image, og:url) позначаються, якщо їх немає; og:title вимірюється відносно приблизно 60-символьної позначки, де деякі платформи починають обрізати текст, і приблизно 90-символьної позначки, де це роблять майже всі; og:description вимірюється відносно діапазону приблизно 155-200 символів, який допускає більшість платформ, перш ніж обрізати текст; twitter:card звіряється з реальними чотирма значеннями, які приймає валідатор карток Twitter, — summary, summary_large_image, app, player, — і позначається, якщо там щось інше; а дубльовані теги (той самий property, оголошений двічі — на диво поширена помилка копіювання) називаються поіменно.

Розміри зображення отримують чесне ставлення: цей інструмент не може перевірити фактичний розмір вашого зображення в пікселях без його завантаження, і навмисно ніколи цього не робить, дотримуючись політики цього сайту не робити зовнішніх запитів. Якщо ваш HTML уже оголошує og:image:width і og:image:height, ці задекларовані числа звіряються із широко рекомендованим мінімумом 1200×630; якщо ні — ви отримуєте чітку пораду замість вигаданого результату «пройдено» чи «провалено». Обидва режими показують одні й ті самі чотири макети попереднього перегляду посилання — Twitter/X (перемикається між компактним превʼю "summary" та повноширинним макетом "summary_large_image" залежно від значення twitter:card), Facebook, LinkedIn і Discord — кожен по-справжньому перестилізований під власні типографічні й макетні конвенції цієї платформи, а не одна й та сама коробка з іншим логотипом, і кожен чітко позначений як ілюстративне наближення для планування, адже реальні платформи з часом змінюють оформлення превʼю, а цей інструмент ніколи не завантажує й не сканує їх, щоб це перевірити.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Режим СКЛАДАННЯ генерує og:title, og:description, og:image, og:url, og:type, og:site_name і відповідні теги twitter:card/twitter:site/twitter:title/description/image, пропускаючи будь-яке порожнє поле, з копіюванням готового блока в один клік.
  • Режим АУДИТУ витягує кожен мета-тег og:/twitter: із вставленого HTML через вбудований у браузер DOMParser, позначає відсутні обов'язкові теги (og:title/description/image/url), дублікати тегів і недійсні значення twitter:card.
  • Поради щодо довжини спираються на реальні загальновживані пороги: og:title — приблизно 60 символів, після яких деякі платформи починають обрізати текст (до приблизно 90 у найпоблажливіших), og:description — приблизно 155-200 символів.
  • Показує картку Twitter/X у правильному макеті залежно від оголошеного типу — компактну картку "summary" з маленьким квадратним превʼю або повноширинний макет "summary_large_image" — поряд із превʼю Facebook, LinkedIn і Discord.

Наші переваги

✓ Два реальні інструменти в одному: режим СКЛАДАННЯ, що генерує точний HTML-код тегів og: і twitter: за формою, і режим АУДИТУ, що розбирає вставлений HTML і знаходить та оцінює наявні теги.
✓ Справжня перевірка, а не косметичний чекліст: відсутні обов'язкові теги, довжина og:title/og:description порівнюється з реальними лімітами, за якими платформи обрізають текст, а twitter:card звіряється з чотирма реально дозволеними значеннями.
✓ Чесність щодо того, що неможливо перевірити офлайн: розміри зображення в пікселях — лише орієнтовна порада, якщо в HTML немає og:image:width/og:image:height, адже цей інструмент навмисно ніколи не завантажує ваше зображення — заради приватності.
✓ Чотири по-справжньому різні макети платформ (шари summary й summary_large_image для Twitter/X, Facebook, LinkedIn, Discord), побудовані з одного й того самого заголовка/опису/зображення, чітко позначені як ілюстративні.

Сценарії використання

  • • Публікуючи новий допис блогу з правильними соціальними картками: заповніть заголовок, опис і URL розміщеного зображення обкладинки, згенеруйте блок тегів og:/twitter: і вставте його прямо в <head> сторінки.
  • • Перевірте <head> наявної посадкової сторінки після міграції CMS, щоб знайти відсутній og:image, надто довгий og:title, який обріжеться на деяких платформах, або залишковий недійсний twitter:card.
  • • Порівняйте, як той самий заголовок і зображення виглядають у компактній картці summary Twitter/X проти повноширинного макета summary_large_image, перш ніж обрати тип twitter:card.