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