OG & Twitter Card Generator — Конструктор мета-тегів, аудитор і попередній перегляд
Створюйте готові для вставки мета-теги Open Graph і Twitter Card за формою або вставте наявний <head>, щоб перевірити його на відсутні теги, довжину заголовка/опису та коректність twitter:card — а потім перегляньте їх у справжніх стилізованих макетах карток-посилань Twitter/X, Facebook, LinkedIn і Discord.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Мета-теги Open Graph та Twitter Card визначають вигляд посилання тієї ж миті, коли воно з’являється в Slack, iMessage, твіті чи на каналі Discord — заголовок, опис і зображення, вибрані з <head> сторінки, а не те, що платформа випадково витягне з видимого тексту. Це і конструктор, і аудитор, а не просто заповнювач шаблону. У режимі BUILD заповніть заголовок, опис, URL зображення, канонічну URL-адресу, тип контенту й тип картки Twitter, і він сформує точний блок тегів <meta property="og:..."> та <meta name="twitter:...">, готовий для вставки у <head> вашої сторінки, пропускаючи порожні поля замість створення пустих тегів.
У режимі AUDIT вставте наявну розмітку <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 — і позначається, якщо значення інше; а дублікати тегів (те саме властивість задекларована двічі, напрочуд поширена помилка копіювання-вставки) вказуються за назвою.
Розміри зображень обробляються чесно: цей інструмент не може перевірити фактичний розмір вашого зображення в пікселях без його завантаження і свідомо ніколи цього не робить, що відповідає політиці цього сайту про відсутність зовнішніх запитів. Якщо ваш HTML уже визначає og:image:width та og:image:height, ці задекларовані числа перевіряються на відповідність загальноприйнятому мінімуму 1200×630; якщо ні, ви отримуєте чітку рекомендацію замість надуманого проходження чи помилки. Обидва режими відображають ті самі чотири макети попереднього перегляду посилань — Twitter/X (перемикається між компактним макетом мініатюри «summary» і повношироким макетом «summary_large_image» залежно від значення twitter:card), Facebook, LinkedIn і Discord — кожен справді стилізований відповідно до типографіки й макетних угод цієї платформи, а не просто один і той самий блок із різним логотипом, і кожен чітко позначений як ілюстративне наближення для планування, оскільки реальні платформи з часом змінюють вигляд своїх попередніх переглядів, а цей інструмент ніколи не завантажує і не сканує їх для перевірки.