Про цей інструмент
Теги Open Graph (OG) керують тим, як сторінка відображається під час спільного використання на соціальних платформах. Facebook, LinkedIn, Slack, Discord та багато інших читають теги OG, щоб створювати картки попереднього перегляду. Без відповідних тегів OG спільні посилання виглядають непрацюючими — загальні піктограми, відсутні зображення, скорочені заголовки. З ними акції виглядають досконало, а показники кліків значно покращуються.
Стандартні теги OG: og:title (заголовок, показаний у попередньому перегляді), og:description (фрагмент тексту), og:image (зображення попереднього перегляду, ідеально 1200×630), og:url (канонічна URL-адреса), og:type (зазвичай «веб-сайт» або «стаття»). Зверху шар тегів карток Twitter: twitter:card, twitter:title, twitter:description, twitter:image. Більшість інструментів повертаються до OG, коли відсутні теги Twitter.
Цей генератор виробляє повний набір тегів OG і Twitter Card з ваших введених даних. Вставте отриманий HTML у <head> сторінки. Результатом є правильний попередній перегляд на всіх основних соціальних платформах.
Навіщо використовувати генератор тегів OG
Сторінки без тегів OG виглядають погано, коли ними ділиться. Порожнє зображення, загальна назва, відсутній опис — попередній перегляд погано конкурує зі сторінками з належним тегом у каналах. Для контент-маркетингу та обміну посиланнями це безпосередньо впливає на рейтинг кліків.
Рукописні теги OG повторюються. Для кожної сторінки потрібен свій набір. Генератор, який створює правильні теги з кількох вхідних даних, уникає помилок і пропущених властивостей, які порушують соціальні попередні перегляди.
Технічні деталі
Теги OG використовують атрибут meta властивості (а не ім’я): <meta property="og:title" content="..." />. Атрибут властивості потрібен для OG; деякі парсери приймають ім'я як запасний варіант, але властивість правильна.
Вимоги до зображення: 1200×630 пікселів для візуалізації Retina, співвідношення сторін 1,91:1. Теги og:image:width і og:image:height допомагають платформам правильно кешувати зображення. og:image:alt забезпечує доступність тексту.
Теги Twitter Card використовують атрибут name: <meta name="twitter:title" content="..." />. Twitter повертається до тегів OG, коли вони відсутні, тому добре налаштованого OG часто достатньо. Додавання twitter:card явно вибирає тип картки (summary_large_image є найпоширенішим).
Поширені запитання
- Чи можу я налаштувати згенерований результат?
- так Інструмент надає різні параметри налаштування, щоб пристосувати результат до ваших конкретних потреб. Налаштуйте параметри перед створенням або генеруйте повторно за допомогою інших параметрів.
- Чи можна використовувати створений вміст безкоштовно?
- так Усе, що ви створюєте за допомогою цього інструменту, ви можете використовувати в особистих, освітніх або комерційних цілях без будь-яких обмежень чи вимог до посилання.
- Для цього потрібен обліковий запис?
- Ні. Інструмент готовий до використання негайно без реєстрації, електронної пошти та реєстрації. Просто відкрийте сторінку та почніть генерувати.
- Чи зберігаються мої введені дані?
- так Уся обробка відбувається у вашому браузері. Ваші вхідні дані та згенерований вихід ніколи не надсилаються на зовнішній сервер.
- Чи можу я використовувати те саме зображення OG для кожної сторінки?
- Можливо, але неоптимально. Зображення для окремих сторінок перевершують загальні зображення для всього сайту для переходу. Використовуйте значення за замовчуванням для резервного варіанту, але створюйте зображення для кожної сторінки для важливого вмісту.
- Чи потрібна декларація розмірів зображення?
- Корисно, але не обов’язково. og:image:width і og:image:height дозволяють платформам кешувати зображення без повторної вибірки для визначення розмірів. Прискорює наступні акції.
- Мої дані завантажено?
- Ні. Генерація відбувається у вашому браузері.
- Як перевірити теги OG?
- Facebook Sharing Debugger, Twitter Card Validator та LinkedIn Post Inspector збирають і перевіряють кожен. Використовуйте їх після розгортання нових тегів OG.