Что такое OpenGraph и как его настроить?

Что такое OpenGraph и как его настроить?

С развитием распространения интернета не стояли на месте поисковые системы и социальные сети. Эти вещи с каждый годом становятся все более взаимосвязаны. Например, SEO и SMM, стоит только посмотреть на различные издательства Republic, Cossa, VC.

Часто встречали такое, что когда копируете ссылку в определенную социальную сеть: Facebook, VK, Twitter, Одноклассники ссылка заменяется на какой-либо подставляемый заголовок, текст и картинку. Но откуда он берется? Сегодня я поведую вам об этой тайне.

Что такое Open Graph?

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

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

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

Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?

OpenGraph Вконтакте

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

Open Graph во Вконтакте

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

Open Graph как использовать?

Итак, чтобы вашу страницу смогли считывать социальные сети необходимо добавить определенные мета-теги. Эти мета-теги будут размещаться в разделе <head></head> и теге <meta>. Давайте разберем базовую Open Graph разметку, то есть 4 основных атрибута для каждой страницы.

  • og:title – в атрибуте указывается заголовок страницы, который вы хотите видеть при отображении в превью социальных сетей;
  • og:type – атрибут указывает тип объекта: страницы или видео. В зависимости от типа, можно задать другие свойства которые могут быть необходимы;
  • og:description – Краткое описание вашей страницы или видео. Чем-то напоминает Meta-tag description, но без символьных ограничений;
  • og:image — URL-адрес изображения, которое можно указать самостоятельно просто добавить в этот атрибут ссылку;
  • og:url — URL-адрес страницы, который использоваться в качестве постоянного ID.

Дополнительные атрибуты Open Graph

Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.

  • og:audio — URL звукового файла, который относится к описываемому объекту;
  • og:determiner — слово, которое должно быть перед названием объекта в предложении. Оно может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать;
  • og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US;
  • og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта;
  • og:site_name — название сайта, на котором размещена информация об объекте;
  • og:video — URL видео файла, который относится к описываемому объекту.

<meta property=»og:audio» content http://site.com/intro.mp3"»>http://site.com/intro.mp3&quot; />

<meta property=»og:description» content=»Directed by Christopher Nolan. With Matthew McConaughey, Anne Hathaway, Jessica Chastain, Mackenzie Foy. A team of explorers travel through a wormhole in space in an attempt to ensure humanity’s survival..» />

<meta property=»og:determiner» content=»a» />

<meta property=»og:locale» content=»en_GB» />

<meta property=»og:locale:alternate» content=»fr_FR» />

<meta property=»og:locale:alternate» content=»es_ES» />

<meta property=»og:site_name» content=»IMDb» />

<meta property=»og:video» content http://site.com/trailer.mp4"»>http://site.com/trailer.mp4&quot; />

Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:

Open Graph СМИ Republic

Популярное издательство Republic тоже не обходит социальные сети. Мне понравилось, что ребята подходят отдельно к оформлению в соцсетях. Помимо микроразметки они используют еще картинку с текстом, благодаря чему кликабельность может увеличиться в 2, а то и более раз. Все-таки людям свойственно обращать внимание на большие заголовки, вспомните газеты, журналы, где писали большими печатными буквами так же и тут.

Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.

Как проверить Open Graph?

Здесь все просто – рассмотрит 2 самых популярных способа.

Проверяем вручную

Проверка OpenGraph

Для этого заходим на сайт, где мы хотим проверить разметку OpenGraph и нажимаем “Посмотреть исходный код” или в Google Chrome это клавиши CTRL+U. Мы попадем в код страницы, далее нам необходимо нажать CTRL + F и написать в появшейся строке 3 символа: “og:”, где og – означает Open Graph. Нам подсветятся значения если они используются на сайте.

Использование сервиса Open Graph Check

OpenGraph Checker

Упрощу вам работу, есть сайт Open Graph Check (Загуглите сами если нужно). Перейдя на главную страницу сайта вам необходимо всего лишь вставить ссылку в поле и нажать далее и сервис автоматически выдаст вам все теги Open Graph, которые используются на сайте.

Аналоги Open Graph

Микроразметка Schema.org и OpenGraph

Помимо Open Graph существует много других микроразметок данных. Разберем самые популярные виды микроразметок:

  • Микроформаты (Microformats.org). Данный вид разметки по большей части используется для определённых нужд (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Минус разметки Microformats –сложное внедрение, поэтому этот словарь применяется сегодня все реже;
  • Schema.org – вид микроразметки, который активно используется в поисковых системах Google и Яндекс. Плюс такой разметки в том, что она содержит более миллиона характеристик и свойств.

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

Заключение:

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

Так что не ленитесь, все в ваших руках! Успехов вам в настройке Open Graph и продвижении ваших ресурсов!

Что такое «Open Graph» и как его подключить к Вордпресс

Сейчас уже сложно представить разработку сайта без его оптимизации под социальные сети. К сожалению, многие под этой процедурой подразумевают лишь установку стандартных виджетов соцсетей. А этого часто недостаточно.

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

Оптимизация сайта под социальные сети

Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

  1. Повышение ссылочной популярности;
  2. Упрощение добавления контента с сайта в социальные сети;
  3. Привлечение входящих ссылок;
  4. Обеспечение экспорта и распространения контента;
  5. Поощрение создания сервисов, использующих наш контент.

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

Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».

Пиши, сокращай. Как создавать сильный текст

Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.

Как я уже говорил выше, социальная оптимизация большинства сайтов обычно ограничивается установкой виджетов «Поделиться» Фейсбука, ВКонтакте и Твиттера — это верный ход, но этого часто мало. Появилось много сторонних сервисов, которые существенно упростили эту процедуру. Например, блок «Поделиться» Яндекса и многие другие. К сожалению, социальные сети не всегда корректно распознают расшариваемый контент. И очень часто необходимо программно уточнять его тип и характеристики. Чтобы после репоста, публикация в социальных сетях выглядела интересно.

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

Сначала как должен.

Как должен выглядеть репост в Фейсбуке

Как должен выглядеть репост ВКонтакте

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

А вот как не должен расшариваться контент.

Как не должен расшариваться контент на Фейсбуке

Как не должен расшариваться контент ВКонтакте

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья — она должна быть соответствующе оформлена, если это медиаконтент — он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.

Протокол Open Graph

Open Graph — это протокол социальной адаптации веб-контента, разработанный компанией Facebook. Open Graph позволяет присвоить любому веб-объекту ряд метаданных, по которым социальные сети смогут интерпретировать его как свой внутренний объект.

Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.

Основные метаданные Open Graph

  • og:title — название объекта, заголовок;
  • og:type — тип объекта, в зависимости от которого задаются другие свойства;
  • og:image — URL-адрес изображения;
  • og:url — канонический URL-адрес объекта.

Дополнительные метаданные Open Graph

  • og:audio;
  • og:description;
  • og:determiner;
  • og:locale;
  • og:locale:alternate;
  • og:site_name;
  • og:video.

Структурированные свойства

Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.

С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me .

Подключение Open Graph

Open Graph подключается к HTML-страницам так же как и любые другие метатеги.

Для статичных страниц так, например:

Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

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

    — рекомендую; .

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

  • og:title;
  • og:type;
  • og:url;
  • og:site_name;
  • og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.

Как проверить правильность подключения Open Graph

Можно воспользоваться дебаггером Open Graph на Facebook for developers и протестировать видимость публикаций краулерами Facebook.

Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, беру на поддержку, делюсь опытом в блоге и соцсетях (ссылки ниже, подпишитесь)

Здравствуйте. Установлен Yoast seo, он выводит микроразметку, но откуда-то берутся еще 3:

В итоге при репосте подхватывается неверная информация из этих полей. Искал через поиск в файлах темы и «og:» и разные другие варианты, отключал/включал плагины соц. сетей. Никак не могу найти. Откуда они там?

Только для фейсбучной статистики
Если не пользуетесь ей — можно не добавлять

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

Наполняете интересным контентом свой ресурс и собираетесь поделиться лучшими материалами в Facebook, Вконтакте и далее по списку? Проверьте, готов ли к этому сайт. Один из обязательных пунктов — наличие микроразметки Open Graph.

Зачем вашему сайту Open Graph

Если вы разместили на странице кнопки шеринга, вы наверняка предполагаете, что материал будут репостить:

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

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

Разметка (протокол) Open Graph позволяет контенту, которым вы делитесь в социальных сетях, выглядеть привлекательно. Например, вот так:

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

Репост в Facebook — статья с внедренной разметкой

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

Репост во ВКонтакте — статья с внедренной разметкой

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

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

Ссылка в Facebook с сайта без OG-разметки

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

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

Так выглядит пост, если Фейсбук не находит картинку

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

Картинка взята из шапки — она не соответствует формату и была обрезана, а в анонс «вытащили» фрагмент из рекламного текста рассылки

Некорректная или рандомная картинка, отсутствующее или нерелевантное материалу описание — этого можно избежать с внедрением на сайт Open Graph.
Протокол изначально был создан для Facebook, но сейчас его также используют ВКонтакте, Pinterest, Twitter, LinkedIn, Telegram, мессенджеры (WhatsApp, Viber, Slack) и др.

Разметка Open Graph повышает привлекательность вашего контента в соцсетях, а значит — это один из пунктов в рамках стратегии SMM-продвижения и контент-маркетинга. Кроме того, протокол позволяет создавать блоки рекомендуемого контента в Google AdSense, если вы используете эту платформу для монетизации сайта:

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

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

Официальная информация от разработчиков протокола, его описание, руководство по использованию и ссылки на реализации — на ruogp.me (на русском языке). В более сжатой и доступной форме все это изложено в справке Яндекс.Вебмастера.

Есть и отдельные руководства для:

Инструменты PromoPult для рекламы в соцсетях: все каналы в одном кабинете, минимальные бюджеты, все делают штатные специалисты системы, вам нужно только дать вводные.

Основные метатеги

Теги Open Graph объясняют соцсетям, какая информация содержится на странице. Корректно заполненные поля позволят сформировать привлекательный вид поста в ленте.

  • og:title — заголовок материала.

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

  • og:image — url-адрес изображения, которое будет в анонсе (его может не быть на самой странице материала).

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

У Twitter, Facebook и ВКонтакте разные требования к размеру изображений. Чтобы картинка в посте отобразилась корректно, можно прописать параметры для каждой соцсети отдельно, используя дополнительные теги vk:image, fb:image, twitter:image — каждая соцсеть в первую очередь обработает «свой» тег. Минус такого решения — придется подготовить отдельную картинку под каждую соцсеть.

Второй вариант — воспользоваться дополнительными метаданными width (ширина в пикселях) и height (высота в пикселях), которые позволят задать один размер для всех соцсетей. В примере указан размер изображения для Facebook. Другие соцсети будут обрезать эту картинку под свои требования.

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

Пост в Facebook — полная картинка

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

Пост ВКонтакте — обрезанная картинка

  • og:description — текст анонса. В Фейсбуке и ВКонтакте сейчас он практически не отображается. Но стоит заполнять его — хотя бы ради Телеграма.

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

Репост в Фейсбуке

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

Репост в Телеграме

  • og:type — тип основного контента на странице. Глобальные типы: музыка (music), видео (video), статья (article), книга (book), профайл (profile), сайт (website).
  • og:url — адрес ссылки на страницу.
  • og:site_name — согласно документации, должно отображаться название (псевдоним) сайта. Но в Фейсбуке, например, отображается URL.

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

Фейсбук: используется сокращенный URL

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

Телеграм: используется site_name

О дополнительных метатегах и массивах (тегах с несколькими элементами) можно подробнее прочитать на официальном сайте протокола или в справке Яндекса.

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

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

Видео в Open Graph

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

  • og:video — путь к видеоплееру или видеофайлу;
  • og:image — url-адрес заставки видео;
  • ya:ovs:upload_date — дата загрузки;
  • ya:ovs:adult — признак контента с ограничением 18+ (имеет два значения — «true» и «false»);
  • video:duration — длительность в секундах с округлением до целого числа;
  • og:type — категория видео (фильм, эпизод сериала, клип, выпуск ТВ-шоу, прямая трансляция);
  • og:video:type — доступные для формата видео кодеки.

Два способа внедрить Open Graph

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

Для ручной разметки:

  • в открывающем теге <html> добавьте префикс, который укажет на использование протокола Open Graph:
  • разместите нужные теги Open Graph между тегами <head> </head>.

Плагины Open Graph для популярных CMS

    . . . . . .
  • В конструкторе сайтов Tilda встроена оптимизация под соцсети.

Рассмотрим внедрение разметки Open Graph для сайта на WordPress на примере плагина All in One SEO Pack. В разделе Управление модулями активируем модуль «Социальные мета»:

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

Модуль будет активен для настройки:

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

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

Для того, чтобы настроить Open Graph для отдельной записи или страницы, в консоли выберите вкладку «Социальные настройки»:

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

В ней заполните метатеги в соответствии с содержанием материала. На этой же вкладке есть возможность воспользоваться отладчиком от Facebook.

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

Не забудьте сохранить изменения, нажав на кнопку «Обновить».

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

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

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

Есть три способа проверить правильность внедрения разметки:

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

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

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

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

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

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

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

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

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

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

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

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

отображение превью в соцсетях примерНеправильное отображение сниппета

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

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

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

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

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

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

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

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

Протокол Open Graph состоит из мета-тегов, их интегрируют в html-код страницы в .

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

  • og:title – название материала;
  • og:description – описание материала, заполнять не обязательно;
  • og:image – ссылка на картинку, которая должна сопровождать материал;
  • og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
  • og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице 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:

    или «Yoast SEO» для WordPress; для Joomla;
  • «Open Graph Meta» для Opencart.

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

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

проверка микроразметки на странице статьиФрагмент работы инструмента

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

проверка наличия микроразметки на сайтеФрагмент анализа инструментом

Что такое Open Graph и как применять его для веб-сайта?

OpenGraph

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

Что такое Open Graph?

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

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

Зачем это нужно?

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

Хорошее превью подталкивает людей к тому, чтобы остановить внимание на вашем контенте и в конечном счете перейти к нему с помощью клика.

Что произойдет при отсутствии превью?

Большинство социальных сетей по умолчанию создают превью для вашего контента. Чаще всего результат получается не очень хорошим.

Для примера рассмотрим мой веб-сайт colbyfayock.com:

Пример простой Twitter-карточки

Название страницы и ее описание отображены верно, однако внешне это не самый заманчивый твит в ленте.

Сравните его с превью другого поста и увидите совсем другую историю:

Пример Twitter-карточки с крупным изображением

Так что же произойдет при отсутствии тэгов Open Graph? Ничего плохого, но вы не сможете воспользоваться преимуществами некоторых функций, которые помогают выделить ваш контент среди множества других материалов, размещенных в интернете.

Основы Open Graph

Четыре основных тэга Open Graph, которые необходимы для каждой страницы: og:title , og:type , og:image и og:url . Они должны быть уникальными: тэги вашей домашней страницы должны отличаться от тэгов страницы-поста в блоге.

Анатомия Twitter-карточки с тэгами Open Graph

Разберемся, что обозначает каждый из перечисленных тэгов:

  • og:title : Название вашей страницы. Как правило, то же самое, что и тэг веб-страницы <title> , если только вы не хотите представить ее как-то по-другому.
  • og:type : “Тип” вашего веб-сайта. В следующем разделе я объясню подробнее, но вообще стандартный “тип” — это “веб-сайт”.
  • og:image : Здесь должна находиться ссылка на изображение, которым вы хотите репрезентировать ваш контент. Это должно быть изображение высокого разрешения, которое будет использоваться в лентах социальных сетей.
  • og:url : Здесь должен находиться URL-адрес текущей страницы.

На сайте тэг нужно поместить в <head> вместе с прочими метаданными. Используемый тэг будет тэгом <meta> и должен соответствовать следующему образцу:

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

Тип веб-сайта в Open Graph

Протокол open graph имеет несколько вариантов “типа” веб-сайта, которые он поддерживает. Они включают в себя такие типы, как веб-сайт (website), статья (article) или видео (video).

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

Как и в отношении всего прочего, здесь к каждой странице стоит подходить отдельно. Таким образом, если ваша домашняя страница — это “веб-сайт”, у вас всегда может быть другая страница с типом “видео”.

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

Но если перейти к посту в блоге, то будет уже иначе:

Наиболее распространенные типы веб-страниц в Open Graph вы можете найти на https://ogp.me/#types.

Некоторые другие тэги Open Graph, которые также стоит добавить

Хотя как правило вам будет вполне достаточно основных тэгов, вот еще несколько примеров:

  • og:description : Описание вашей страницы. Точно так же, как в случае og: title , его содержимое может быть аналогично тэгу сайта <meta type=“description”> , если только вы не хотите представить его по-другому.
  • og:locale : Если вы хотите локализовать свои тэги, то, вероятно, имеет смысл включить сюда язык ресурса. Формат — language_TERRITORY , где по умолчанию используется en_US.
  • og:site_name : Название всего веб-сайта, где размещен ваш контент. Если вы находитесь на странице блог-поста, у вас может быть title , где используется название этого конкретного поста, тогда как в site_name будет находится название вашего блога.
  • og:video : У вас есть видео, дополняющее ваш контент? Вот вам и шанс включить его в превью. Добавьте ссылку на свое видео, используя этот тэг.

Эти тэги добавляются по всё той же схеме:

Twitter и другие социальные сети, использующие Open Graph

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

Например, Twitter позволяет вам использовать twitter: card — тип “карточки”, которую вы можете использовать при отображении вашего сайта. В настоящее время типы Twitter-карточек включают в себя:

  • summary;
  • summary_large_image;
  • app;
  • player.

Они помогают выбрать, как именно будут отображаться ваши ссылки в ленте Twitter. Например, если вы выберете summary_large_image , то Twitter будет показывать ваши ссылки с большими изображениями высокого разрешения до тех пор, пока вы предоставляете эти изображения в тэге og:image .

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

  • Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started;
  • Facebook: https://developers.facebook.com/docs/sharing/webmasters/;
  • Pinterest: https://developers.pinterest.com/docs/rich-pins/overview/?;
  • LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en.

Изображения в Open Graph

Обычно достаточно добавить ваше изображение в тэг og:image , однако порой может быть непросто сделать так, чтобы это изображение отображалось правильно. На случай если вы столкнулись с проблемой, стандарт Open Graph включает в себя несколько тэгов изображений, таких как og:image:url или og:image:secure_url , а также og:image:width и og:image:height .

Постарайтесь удостовериться, что следуете всем примечаниям и примерам из документации Open Graph. Кроме того, некоторые социальные сети имеют собственные требования относительно изображений. Например, Twitter требует, чтобы соотношение сторон было 2:1, минимальное разрешение — 300×157 и максимальное разрешение — 4096×4096, размер файла составлял меньше 5 Мб, а сам файл был в формате JPG, PNG, WEBP или GIF.

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

Тестирование тэгов Open Graph

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

  • Twitter: https://cards-dev.twitter.com/validator;
  • Facebook: https://developers.facebook.com/tools/debug/;
  • Pinterest: https://developers.pinterest.com/tools/url-debugger/.

Подробнее о тэгах Open Graph

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

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

Пример

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

0 0 голоса
Рейтинг статьи

продолжение повелитель стихий

наследие 1 сезон кинопоиск

пираты карибского моря продолжение будет

Ссылка на основную публикацию