meta property og type content website что это

1.234
-1.234
1.2e3
-1.2e3
7E-10

Обсуждение и поддержка

Вы можете обсудить протокол Open Graph в группе Facebook или в группе Google. В настоящее время протокол применяется в Facebook (смотрите их документацию), Google (смотрите их документацию) и mixi. Протокол был опубликован в IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp и многих многих других.

Реализованные проекты

Сообщество с открытым исходным кодом(Open Source) разработало ряд парсеров и издательских инструментов. Сообщите в Facebook, если вы создали что-то подобное!

Протокол Open Graph изначально была создана Facebook и вдохновлен Дублинское ядро, link-rel canonical, Microformats и RDFa. Описание спецификации доступно на этой странице, в соответствии с Open Web Foundation Agreement, Version 0.9. Этот сайт является Open Source. Последнее обновление 20 Октября, 2014

Источник

Микроразметка ​Open Graph: что это и как настроить

В статье:

Микроразметка — это способ оптимизации семантики сайта, который позволяет роботам идентифицировать тип информации на странице и лучше структурировать ее в сниппетах выдачи или в соцсетях. Основные преимущества использования микроразметки — информативность сниппета, привлекательность для пользователей и поисковых роботов. Прямого влияния на SEO нет, но за счет внедрения микроразметки можно улучшить поведенческие факторы сайта.

О видах микроразметки и ее настройке для «Яндекс» и Google читайте в статье.

Кнопки «Поделиться в соцсетях» на сайте

Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.

Кнопки для репостов в социальные сети

Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.

Поделиться пином с рецептом

Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.

Проблема с добавлением ссылки в социальную сеть

Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.

Неправильное отображение сниппета

Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.

Протокол Open Graph от Facebook

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

Зачем нужен Open Graph

Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

Разберемся, как настроить микроразметку для страницы.

Ключевые мета-теги Open Graph

Разберем основные теги:

Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.

Настройка через json-ld:

Пример микроразметки страницы с помощью Open Graph

Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:

Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:

Сервисы для работы и плагины Open Graph

Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.

Составить код разметки Open Graph автоматически

Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Пример работы сервиса

Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:

Пример работы парсера

Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:

Сервис проверки Open Graph

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

Фрагмент работы инструмента

Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.

Фрагмент анализа инструментом

Источник

Микроразметка Open Graph

Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях.

Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях.

Стандарт Open Graph был разработан Facebook. Сейчас Open Graph используют Facebook, Яндекс, Вконтакте, Google+, Twitter, Pinterest и др. В Яндексе микроформат используется для передачи данных в Яндекс.Видео.

Принцип работы микроразметки

Сайт самостоятельно подгружает картинку (или картинки), описание и заголовок с ссылки, которую вы вставили в социальную сеть. Это позволяет кратко ознакомится с материалом, который предоставлен по ссылке. Как итог, вам не нужно придумывать описание для ссылки и добавлять изображения к публикации.

Результат внедрения микроразметки Open Graph

Также будет выглядеть публикация при нажатии на кнопки «поделиться в соц. сетях».

Основные теги Open Graph

Это не весь список тегов. Полный список тегов можно посмотреть на официальном сайте Open Graph.

Основные теги сейчас используются для всех социальных сетей. Также есть отдельные настройки для каждой соц. сети отдельно (Вконтакте, Facebook, Twitter, Google+, Mail).

Описание основных тегов

OG:TITLE

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

OG:DESCRIPTION

OG:TYPE

Используется для определения типа объекта. В зависимости от контента на странице может принимать значения:

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

OG:IMAGE

Используется для определения изображения у объекта. Является массовым тегом – можно использовать несколько раз, в публикации можно будет выбрать нужное изображение. Обычно используется как постер к публикации в соц. сетях.

Для тега можно также установить детальные настройки для каждого изображения:

Означает, что на странице несколько изображений. первое изображение имеет размер 300×300, среднее изображение имеет неопределенные размеры, а последнее имеет высоту 1000 пикселей.

Дополнительные опциональные настройки изображений:

OG:URL

Используется для обозначения ссылки на объект. Обычно выступает в роли дубликата URL страницы. Ссылка не должна содержать прочие GET-параметры, без которых можно обойтись.

Пример микроразметки Open Graph для статьи блога

Пример краткой микроразметки Open Graph:

Пример микроразметки Open Graph для товаров или услуг

Пример краткой микроразметки Open Graph:

Проверка микроразметки Open Graph

Проверить микроразметку можно вручную или воспользоваться автоматизированными сервисами:

Источник

Что такое разметка Open Graph и как ее внедрить без программиста

«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.

Разбираемся, что это за разметка и как ее самостоятельно настроить.

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

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

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

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

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Синтаксис разметки Open Graph

Полная документация по разметке Open Graph доступна в нескольких источниках:

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Обязательные свойства

Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.

Опциональные свойства

Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Публикуете много видео? Используйте Open Graph

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

Больше информации об этом — в справке Яндекса.

В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

С помощью плагинов

Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).

По ссылкам ниже можно найти плагины для вашей CMS:

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

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

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Как проверить корректность разметки Open Graph

Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:

Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.

Также есть отдельный инструмент для проверки микроразметки для Твиттера.

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.

Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.

Источник

Микроразметка Open Graph

Микроразметка Open Graph – это один из способов привлечь новых пользователей на сайт. При этом оптимизируя его для поисковых роботов.

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

Зачем нужна микроразметка

Многие сайты размещают иконки социальных сетей, чтобы пользователи могли делиться их сайтом или продуктом. Но без использования микроразметки записи, которые вы разместите у себя в социальных сетях, будут выглядеть непривлекательно и не структурировано.

Например, нужно вывести с сайта заголовок страницы и первое фото. Будет “заголовок – Купить машину audi”, а фото могло быть “заказать пиццу”. Не используя разметку, запись будет выбирать любой заголовок и картинку. Поэтому микроразметка помогает репостам, смотреться красиво и структурировано.

Что можно сделать с помощью Open Graph

Пример с использованием Open Graph:

Протокол также работает с рекомендациями из Яндекс.Видео и помогает качественнее подобрать нужный вам контент.

Где используется

Open Graph используется во многих мессенджерах:

Синтаксис разметки

Синтаксис микроразметки заключается в наборе мета-тегов, которые указывают мессенджерам как отобразить контент на вашей страничке, блоге.

Прочитать официальную документация можно на русском и английском языке:

Отличная возможность почитать документацию рекомендованную от самих мессенджеров facebook, twitter, pinterest

Используется в разметке, в разделе так же прописываются теги. Вместе с тегом, должны идти атрибуты property и content. У атрибута property есть несколько необходимых свойств.

Обязательные свойства

Чтобы микроразметка работала требуется прописать в начале разметки документа:

Обязательные свойства микроразметки Open Graph:

Размеры картинок

У мессенджеров есть свои требования к размещению картинок. Самый верный способ, под каждую используемую соц-сеть создавать новое изображение с нужными размерами. Выбираем 2 соцсети vk и facebook. Заранее готовим 2 картинки и указываем их отдельно:

Facebook соцсеть будет использовать тег fb:image, а остальные не будут взаимодействовать. Так же происходит работа и с другими соцсетями.

Еще один способ, заключается в общем размере для всех социальных сетей. Укажем ширину и высоту картинки для Facebook:

В остальных мессенджерах картинка будет обрезана в соответствии с нужными размерами соцсети.
Здесь нужно быть осторожными, если на картинке есть важный текст.

Опциональные свойства

Кроме обязательных свойств, так же имеются опциональные свойства, мы рекомендуем использовать:

Изображение с примером под цифрой 4, вы увидите отображение описания:

Код страницы с внедренной разметкой Open Graph:

Open Graph мета-теги

Настройки микроразметки заключаются в теге с атрибутом “property” и “content”

Основные мета теги, подробнее о каждом вы могли видеть выше:

Типы контента

Дополнением микроразметки, является описание типов данных, которые можно указать в теге “og:type” и выбрать любую рубрику для контента.

Категории для контента:

Что необходимо указать в микроразметке?

В разметке необходимо указать все соцсети, которые вы будете использовать в качестве “поделиться” для качественного отображения информации. Указать все обязательные теги, а также дополнительные теги:

og:locale — задает язык и регион в формате «язык_РЕГИОН».

Стандартный язык и регион «en_US».

Если вам нужно задать видео или аудио. Теги для этих целей:

Что влияет на позиции кроме микроразметки?

Микроразметка сайта увеличивает оптимизацию приблизительно на 30%. Но сейчас, речь пойдёт уже о прямой настройке SEO – специалистов. На стадии разработки сайта, необходимо задать базовые вещи, даже дизайнеру. Это проработка заголовков, списков, ссылок в тексте и т.д. Далее, написание кода верстальщиками. Это один из ключевых моментов, когда не привлекая seo-специалиста, можно оптимизировать сайт. Общие правила для seo – вёрстки:

Узнай больше о seo-вёрстке.

Микроразметка Open Graph для CMS

Микроразметка Open Graph в CMS создаётся двумя способами. Либо делаете всё вручную, либо при помощи плагинов, что значительно ускорит ваш процесс разработки.

Микроразметка open graph для JOOMLA состоит из набора следующих плагинов:

Плагин содержит в себе гибкую настройку и возможность просмотреть исходный код на git hub. А так же имеет кэширование данных.

Для cms WORDPRESS микроразметки, отлично подойдёт плагин “ Open Graph ”.

Как внедрить микроразметку на сайт

Внедрение микроразметки на сайт может происходить 2 способами:

Вручную

Чтобы разместить микроразметку на сайт, требуется:

Плагины

Быстрый способ добавить разметку Open Graph на свой сайт. Даже, если вы не знаете код. Плагины, которые вы можете использовать мы уже описывали выше. Суть всех плагинов одна и та же, выбор за вами.

Open Graph в других социальных сетях

Снова повторюсь, что микроразметка применяется не только в 2-3 соцсетях, но и широко распространены и на других платформах.

Facebook

Карты Twitter

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

twitter:card — Тип карты, который может быть одним из «summary», «summary_large_image», «app» или «player».>

Google+

Для Google+ идеальным вариантов пойдёт базовая разметка с использованием тегов

Pinterest

В данной соцсети есть множество типов контента, называется — Rich Pins, подробное руководство по каждой тематике

Источник

Вам также может понравиться

Урок мудрости: почему грязного и вода не очистит, чистый в огне не сгорит

Привет, друзья! Сегодня мы с вами поговорим о замечательной

Поговорка ‘Кто не работает, тот и не ест’: Зачем нужно учиться и трудиться

Привет, дорогие дети! Сегодня я хочу рассказать вам

Загадочная поговорка: Имеющий дойную корову всегда будет иметь сметану

Дорогие дети, сегодня мы поговорим о загадочной поговорке «

Поговорим о поговорке: почему давшему быка на убой не дали для поджарки и легкого

Привет, дорогие дети! Сегодня мы поговорим о забавной