Генератор мета-тегов Open Graph онлайн для соцсетей

Инструмент генерирует мета-теги Open Graph для создания сниппетов в соцсетях, чтобы ссылки на сайт отображались правильно.

Заполните поля ниже, чтобы получить готовый код.

Основные Метаданные

Рекомендуемые размеры: 1200px x 630px; минимальные: 600px x 315px

Дополнительные Метаданные

Будет отображаться после заголовка.

Статейные Метаданные

Время в формате ISO 8601 (Сейчас: 2018-11-16T22:04:49+03:00)

Twitter

Минимальный размер 300px x 157px, максимальный 4096px x 4096px. Отношение сторон 2:1.

HTTPS ссылка на видео или iFrame плеер, например Youtube Embed.


Ваш сгенерированный код


<!-- Open Graph Generated: a.pr-cy.ru -->
<meta name="og:title" content="[[ ogTitle ]]">
<meta name="og:description" content="[[ ogDescription ]]">
<meta name="og:image" content="[[ ogImage ]]">
<meta name="og:url" content="[[ ogUrl ]]">
<meta name="og:site_name" content="[[ ogSiteName ]]">
<meta name="og:locale" content="[[ ogLocale ]]">
<meta name="og:video" content="[[ ogVideo ]]">
<meta name="fb:app_id" content="[[ fbAppId ]]">
<meta name="og:type" content="[[ ogType ]]">
<!-- Open Graph: Article -->
<meta name="og:author" content="[[ ogAuthor ]]">
<meta name="og:section" content="[[ ogSection ]]">
<meta name="og:published_time" content="[[ ogPublishedTime ]]">
<meta name="og:modified_time" content="[[ ogModifiedTime ]]">
<meta name="og:tag" content="[[ ogTags ]]">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="[[ ogDescription ]]">
<meta name="twitter:site" content="[[ ogTwitterPublisher ]]">
<meta name="twitter:creator" content="[[ ogTwitterCreator ]]">
<meta name="twitter:image:src" content="[[ ogTwitterImage ]]">
<meta name="twitter:player" content="[[ ogTwitterVideo ]]">

Что такое Open Graph?

Open Graph ­— это стандарт микроразметки для создания превью страниц сайтов в соцсетях.

Open Graph разработали специалисты Facebook, чтобы ссылки на сайты внутри соцсети отображались красиво и были информативными. Сейчас Open Graph поддерживают многие соцсети: Facebook, Twitter, Google+, ВКонтакте, Одноклассники и мессенджеры, например, Telegram и Skype.

Зачем использовать Open Graph?

Чтобы получить красивый сниппет сайта, в код страницы в теге <head> нужно вставить мета-теги Open Graph. Элементы микроразметки можно разделить на основные и дополнительные.

Основные:

Дополнительные элементы делают превью более информативным: можно добавить язык, контакты или адрес. О дополнительных элементах можно прочитать на сайте разработчика http://ogp.me/


Вопросы и ответы

У Twitter свои требования к сниппетам, нужны специальные теги?

Стандарт Open Graph поддерживают почти все соцсети, для Twitter в нашем инструменте есть специальные опции.

Как изменить сниппет после публикации?

Вы можете изменить описание или изображение после публикации на своей странице или в сообществе, если у вас есть права на его редактирование. Если изменить мета-теги на сайте, в соцсетях ранее опубликованные сниппеты не изменятся.

Почему не отображается картинка в сниппете?

У всех соцсетей свои требования к размерам изображений, возможно, ваше изображение не подходит по размеру или слишком много весит.

Можно ли использовать несколько изображений?

Можно, но при публикации будет отображаться только одно, вы можете выбрать его сами.

Как узнать, правильно ли отображается сниппет?

У некоторых соцсетей есть сервисы, позволяющие проверить корректность отображения сниппетов. Например, у Facebook, Twitter и Google+.

Влияет ли корректный сниппет для соцсетей на SEO?

Сниппеты в соцсетях влияют на поведенческие факторы: правильно оформленные ссылки получают больше лайков и переходов на сайт.

У меня сайт на готовой CMS, как правильно сделать сниппет?

У большинства популярных CMS есть наборы плагинов, позволяющих внедрить разметку Open Graph, не залезая в код.

В коде страницы нет ошибок, но Facebook показывает устаревшую или неверную информацию, что делать?

Используйте отладчик объектов OG Facebook, чтобы очистить кэш и добавить актуальную информацию. https://developers.facebook.com/tools/debug/og/object/

В коде страницы нет ошибок, но Вконтакте показывает устаревшую или неверную информацию, что делать?

Используйте pages.clearCache ВКонтакте, чтобы очистить кэш и добавить актуальную информацию. https://vk.com/dev/pages.clearCache

Если на сайте нет социальных кнопок, Open Graph будет работать?

Да, но мы рекомендуем установить на сайт социальные кнопки, чтобы посетители могли делиться вашим контентом в соцсетях.

Расскажите друзьям —
Поделиться
+1
Поделиться
Отправить