og site name что это
Пуленепробиваемая разметка Open Graph
В процессе разработки над нашими проектами, не раз сталкивались с проблемой правильной микроразметки Open Graph. В статье хотим поделиться решением, которое подойдет в 99% случаев.
Для начала ответим на вопрос, что такое разметка Open Graph и зачем она нужна?
Микроразметка — это способ оптимизации сайта, благодаря которому роботы берут только нужную информацию и используют её в сниппетах выдачи или в соцсетях.
Задачи микроразметки — информативность сниппета, привлекательность для пользователей. Прямого влияния на SEO нет, но за счет внедрения микроразметки можно улучшить поведенческие факторы сайта. Ну просто люди будут чаще переходить по ссылке. Да и теряться в общей массе не будет.
Остается вопрос, но как пользователи делятся публикациями? Разберем часто используемое решения:
Кнопки «Поделиться» на сайте
Этот функционал предлагают несколько сервисов. Например, мы используем Яндекс для русскоговорящих проектов или Addthis для всего остального мира.
Этот фунционал полезен. Пользователям удобно отправлять интересные материалы себе на стену в социальные сети, двумя кликами, а владельцы сайтов получают дополнительное распространение контента и увеличение трафика.
Если материал понравился посетителю сайта и он решил сохранить себе в соцсеть или рассказать друзьям, он нажимают соответствующую кнопку любимой соцсети и делаешь репост. Репост примерно выглядит так:
Что бы репост в социальной сети был красивый, надо внедрить микроразметку Open Graph.
Протокол Open Graph от Facebook
Основная часть материалов, которыми делятся люди, представлена на Facebook в виде URL, поэтому для разметки сайта важно использовать теги Open Graph. От них зависит то, как ваши материалы будут выглядеть на Facebook. Руководство по публикации для веб-мастеров
Говоря проще Open Graph разработали в Facebook для контроля текстово-графического анонса, который формируется при добавлении ссылки в социальную сеть.
Зачем нужен Open Graph?
Разметку Open Graph поддерживают соцсети (ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники) и мессенджеры (Telegram, Skype) и другие.
Разберемся, как настроить разметку Open Graph для страницы.
Теги Open Graph
Основные теги Open Graph
Дополнительные теги Open Graph
Дополнительные теги Open Graph для Twitter
Пример разметки Open Graph
Этот пример Open Graph самодостаточен для публикации практически во все социальные сети.
Требования к картинке для разметки
Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся.
На хабре рекомендуют изображение в 968×504 пикселя, это меньше минимально рекомендованных Фейсбуком. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Мы используем размер рекомендованный Фейсбуком 1200×630 пикселей.
Где проверить разметку Open Graph?
Тут всё просто. Идем на страницу «Отладки репостов» в Facebook и на страницу Card validator в Twitter. Вставляете вашу ссылку и проверяете.
Микроразметка 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 соцсетях, но и широко распространены и на других платформах.
Карты Twitter
Twitter использует базовый шаблон для ретвитов, но для качественного отображения и привлечения внимания пользователей, базовой разметки будет мало. И лучше написать специально под соцсеть.
twitter:card — Тип карты, который может быть одним из «summary», «summary_large_image», «app» или «player».>
Google+
Для Google+ идеальным вариантов пойдёт базовая разметка с использованием тегов
В данной соцсети есть множество типов контента, называется — Rich Pins, подробное руководство по каждой тематике
Еще не зарегистрированы?
Что такое Open Graph?
Open Graph структурирует информацию о странице. Например, вы можете указать какое изображение или видео появится в превью, или какие заголовок и описание должны быть показаны, и даже местоположение или язык, авторство и многое другое.
С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.
А что если у меня нет Open Graph на сайте?
В таком случае соцсети будут собирать данные о странице выборочно и могут не точно ее отобразить. Например, в качестве обложки вывести не изображение статьи, а логотип сайта или какую-нибудь другую картинку, или показать слишком длинный заголовок. Все это негативно скажется на рейтинге ваших публикаций.
Вот так выглядит пост в соцсетях без Open Graph:
Пост с прописанной микроразметкой Open Graph:
Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей!
Структура и внедрение Open Graph
Теги Open Graph добавляются как свойство в HTML-тег : и помещаются в секцию: .
Рассмотрим основные теги:
og:title
Разметка Open Graph пример:
og:type
Разметка Open Graph пример:
og:url
Указываете канонический URL-адрес страницы.
og:description
Указываете краткое описание страницы. Попытайтесь написать несколько релевантных предложений, которые увеличат информативность вашей публикации.
og:image
Если ваше изображение меньше 600 x 315 px, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.
Также у этого тега есть связанные теги, которые передают дополнительные свойства:
Другие OG-теги
Существуют и другие теги Open Graph, которые предоставляют соцсетям дополнительную информацию о вашем контенте:
Пример Open Graph на веб-странице
Инструмент проверки Open Graph
Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.
У него две очень полезные функции:
Плагины для внедрения Open Graph
Для WordPress оптимальным решением может будет многофункциональный плагин Yoast SEO. При редактировании страницы, у вас появится возможность добавить Open Graph информацию для Facebook и Twitter:
Плагины Open Graph для CMS Joomla можно просмотреть в репозитории Joomla и подобрать на свой вкус.
Под Drupal существует специальный модуль Open Graph meta tags.
Выводы
Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.
OG теги позволяют:
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Open Graph Protocol — разбор микроразметки
Open Graph Protocol представляет собой микроразметку от Facebook, которая в 2010 году была разработана для того, чтобы интегрировать веб-сайты с соц. сетью. Сейчас данный формат используется в Twitter, Google+, Вконтакте, Одноклассники, Pinterest и т.д. С помощью протокола Open Graph можно управлять представлением контента в социальных медиа, тем самым улучшая его взаимодействие с пользователями. Например, мы можем определить, название, описание и фото, которое будет отображаться на странице в социальной сети и определить тип контента.
Что такое Open Graph на практике
Для подключение OG необходимо внести специальный html-код (разметка на примере видео есть в хэлпе Яндекса). Группа обязательных тегов:
Open Graph мета-теги
В результате применения этих тегов расшаренная запись в Facebook будет отображаться так:
В дополнение к 4 обязательным мета-тегам Open Graph есть дополнительные:
В Facebook можно использовать еще больше мета-данных (подробности здесь). Например:
Геолокации: широта, долгота, высота над уровнем моря:
Контактная информация (street_address, locality, postal_code, region, country_name, email, phone_number, fax_number):
Типы контента
На Facebook широкий спектр дополнительных типов данных, которые мы можем назначить для страницы (вы должны поместить их в тег «og:type»). Типы контента сгруппированы по категориям:
Для некоторых типов контента есть уникальные дополнительные маркеры. Например, тип «article» может определить дату публикации — «article:published_time» или категорию статьи «article:section». Для того, чтобы использовать это нужно немного магии в микро-разметке:
Для получения дополнительной информации о дополнительных маркерах для типов контента нужно покопать документацию Open Graph (на русском).
Реализация
Реализация протокола Open Graph на сайтах гораздо проще, если вы используете популярные CMS (системы управления контентом), такие как WordPress или Drupal и т.д. Есть куча плагинов, которые позволяют довольно просто настраивать соответствующую разметку. Например для WordPress это сделает Yoast SEO.
Когда соответствующие теги Open Graph будут размещены на сайте, вы можете проверить его точность с помощью инструментов, предоставляемых Facebook: https://developers.facebook.com/tools/debug
Open Graph в других социальных сетях
Открытый протокол График используется не только Facebook, но и на других сайтах социальных сетей, в разной вариации. Вконтакте и Одноклассники, например, поддерживают стандартный Open Graph, потому их не выделяем.
Карты Twitter
Twitter автоматически использует стандартные теги OG, но и создал свой собственный набор метаданных. Они позволяют делать более сложные и хорошо размеченные твиты. Они выделяются в толпе других постов и позволит вам получить больше переходов и ретвитов. Ниже приведены два примера твитов.
Для использования этих функций необходимо разместить специальный код, используемый Твиттером. Наиболее важными тегами являются:
Пример:
Пример:
Подробная информация о Twitter карточки с примерами и перечнем необходимых тегов для различных типов карт можно найти в официальной документации: https://dev.twitter.com/cards/overview
Вы должны знать, что если вы используете Open Graph и Twitter карты, то можно опустить дублирующие теги, такие как название, описание или изображение и оставить их только стандартные теги OG.
Правильность реализации на данных мета Twitter можно проверить с помощью валидатора: https://cards-dev.twitter.com/validator
Google+
Предпочтительными тегами являются Schema.org (она же микроразметка), но также поддерживаются следующие мета-теги Open Graph: og:title, og:description, og:image. Для получения более подробной информации о представлении страниц в Google+ доступна по адресу: https://developers.google.com/+/web/snippet/.
Pinterest использует несколько типов разметки: Schema.org, Open Graph, oEmbed и hRecipe. Существуют различные типы тегов в зависимости от типа контента, так называемые — Rich Pins, содержащие дополнительные данные доступные для следующих категорий: рецепты, статьи, видео, места и продукты. Точные описания метки, необходимые для данной категории, вы можете получить на странице: https://developers.pinterest.com/docs/rich-pins/.
Вот так круто выглядит Rich Pin:
Как использовать Open Graph
С помощью тегов OG, потому что мы можем установить страницу:
Таким образом, мы будем улучшать CTR из соц. сетей и увеличим количество переходов.
Например, сервис Tumblr после реализации протокола Open Graph увеличил трафик с Facebook на 250%. Использование Open Graph особенно уместно на сайтах, связанных с таким темами, как:
В общем любые тематики, где часто делают расшаривания контента, т.к. это даст более качественное представление вашего поста в любой соц. сети. Одним слово, Open Graph — полезняк, который нужно внедрять на сайты. Я проспал эту тему (откладывал постоянно), потому сейчас дописываю пост и иду пилить его на свои сайты 🙂
Понравился пост? Сделай репост и подпишись!
Рекомендую к прочтению
25 способов создания крутого контента
Проверка скорости загрузки сайта или страницы: ТОП-11 онлайн сервисов
Open Graph: стандарт разметки для социальных сетей
Социальные сети и мессенджеры настолько прочно вошли в нашу жизнь, что многие не представляют ни дня без любимых приложений и сайтов. Кто-то проводит в них даже слишком много времени😅
А вот владельцы бизнесов используют эти каналы для распространения информации о своих продуктах, услугах и привлечения новых покупателей. Но для того, чтобы заинтересовать будущего клиента, надо красиво презентовать контент. Для этих целей и используем разметку Open Graph.
Что такое Open Graph Protocol
Open Graph — это специальный протокол разметки, состоящий из набора тегов и правил для структурирования контента. Когда этим контентом будут делиться в социальных сетях, благодаря такой разметке каждая ссылка на текстовую страницу будет состоять из самой ссылки, подходящей красивой картинки и небольшого релевантного описания.
Данный формат микроданных был разработан в компании Facebook и поначалу использовался для внутренних целей. Теперь же Open Graph поддерживают и другие сервисы:
Вот как выглядит репост в Facebook страницы, на которой использовалась разметка:
В Telegram эта же ссылка будет выглядеть так:
А вот примеры постов без разметки:
В мессенджере выглядит тоже не очень привлекательно:
Для чего нужна разметка Open Graph
Как уже, наверное, понятно, разметка Open Graph необходима в первую очередь для красивых репостов. Если вы планируете использовать социальные сети и каналы в мессенджерах для привлечения новых клиентов, настроить ее нужно обязательно. И даже если не планируете, то настройте все равно, ведь хорошим продуктом обязательно захочется поделиться пользователям вашего ресурса.
Так же Open Graph поддерживается Google AdSense при создании блоков рекомендуемого контента.
Если разметка не сделана, то не страшная проблема. Любой сервис создаст ее самостоятельно, используя мета-теги страницы. Для превью будет использована первая картинка на странице (чаще всего это логотип), для заголовка содержимое тега Title, а для описания тег Description.
Как видите, не всегда автоматически получается создать красивый репост, поэтому советуем внедрить разметку Open Graph для всех страниц своего сайта, а в первую очередь для тех, которыми часто делятся в социальных сетях и мессенджерах.
Если разметка сделана, то для заголовка, текста анонса и картинки превью будут использоваться указанные вами значения. Как именно их указать, поговорим ниже.
Как внедрить разметку Open Graph
Для разметки страницы по стандарту Open Graph понадобится добавить несколько специальных тегов в секцию каждой страницы. Они и будут использоваться при создании превью поста.
Таким образом каждая страница будет представлять собой объект с определенными свойствами.
Обязательные свойства
Тип объекта. Самые часто используемые для обычных сайтов это website (сайт) и article (статья). Все возможные типы объектов в документации.
Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID.
Название объекта в том виде, в котором оно будет отображаться.
URL-адрес изображения, которое будет описывать ваш объект.
Что касается тега изображения, то тут есть нюанс.
У разных соцсетей разные форматы превью и, соответственно, разные размеры картинок. В идеале желательно подготовить собственный ресайз картинки под каждую социальную сеть, где вы будете размещать пост.
Например, у вашей компании 3 социальных сети: Вконтакте, Facebook и Twitter. Чтобы при размещении ссылки на новую статью в каждой из них картинка «не пострадала», в разметке Open Graph надо указать отдельные теги для каждого сайта. В нашем случае это vk:image, fb:image, twitter:image.
Каждая соцсеть будет использовать свой тег, а ненужные проигнорирует.
Если же вы зададите размеры картинки с помощью тегов og:image:width и og:image:height, подобранные под размеры для какой-то одной сети, то в других картинка будет жестко обрезаться под их параметры. Это надо учесть, если на картинке присутствуют текст, цифры или логотипы, и не размещать их с краю изображения.
Размеры картинок в популярных сетях:
Дополнительные свойства
Краткое описание объекта (1-2 коротких предложения).
Название сайта (не URL).
URL видео файла, который относится к описываемому объекту.
URL звукового файла, который относится к описываемому объекту.
Язык и локация объекта, имеет формат язык_СТРАНА. По умолчанию en_US.
Массив дополнительных локалей, которые доступны для описания данного объекта.
Слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.
Чаще всего используется не все дополнительные свойства, а только те, что отмечены звездочкой. Другие же могут быть задействованы при наличии подходящего объекта.
Рассмотрим пример разметки с сайта Кинопоиск:
Для изображения здесь использовано 3 тега: тег og:image, vk:image и twitter:image, хотя все они указывают на одну и ту же картинку, подогнанную под стандарты Facebook.
Выглядеть в Telegram разметка будет так:
Документация
Полный список свойств и их значение можно посмотреть в официальной документации по разметке, а также в справочных руководствах других сервисов.
ogp.me — англоязычная документация;
ruogp.me — перевод документации⬆️ на русский язык;
Яндекс справка — введение в разметку Open Graph;
Facebook — инструкция по разметке для социальной сети Facebook.
Как проверить сделанную разметку
После того, как вы указали, где брать значения для тегов разметки Open Graph и программисты ее внедрили, надо проверить, все ли получилось корректно. Для этого есть несколько спобов.
1. Вручную. Выберите несколько страниц сайта на разных шаблонах и вручную запостите их в популярных социальных сетях, поделитесь в мессенджерах. Для проверки в Telegram можно использовать специальный бот для просмотра превью страниц.
2. Специальный сервис. Например, Open Graph Check. Введите урл страницы в поле формы и получите полный анализ.
3. Отладчик репостов от Facebook. Специальный инструмент, предназначенный для отладки визуала репостов перед запуском рекламной кампании. Понадобится авторизация в аккаунте этой социальной сети.
Если на вашем сайте нет кнопок шеринга и большого числа пользователей, то при первом использовании вы скорее всего увидите сообщение, что этим адресом еще никто не делился. Нажмите на кнопку Получить информацию.
Отладчик выдаст найденные теги, а если после этого вы внесете изменения в разметку, то нажмите кнопку Повторить скраппинг.
Не обращайте внимания на предупреждение. Тег fb:app_id нужен, чтобы просматривать информацию статистику Facebook о переходах на ваш сайт.
4. Валидатор Яндекса. Инструмент проверки разметки в Вебмастере подходит для многих типов данных, в том числе Open Graph. Потребуется авторизация в аккаунте Яндекс.
После запуска проверки вы получите сообщение об анализе присутствующих на странице тегов.
Так в чем же плюсы?
Многие популярные CMS имеют встроенные плагины для создания Open Graph. Так что проверьте свой сайт, возможно, разметка уже есть😉
Если же ее нет или вы видите, что свойства заполняются некорректно, то обязательно настройте у себя Open Graph, ведь разметка имеет несколько важных преимуществ:
1. Возможность заранее подготовить красивую картинку для репоста нужного формата: у разных социальных сетей размеры превью отличаются. С разметкой ваши записи всегда будут выглядеть привлекательно и заметно.
2. Уже в анонсе пользователь увидит всю нужную информацию по теме, которую вы вынесете в тег описание.
3. Репост выглядит аккуратно и завершенно, что привлекает внимание.