Meta property og title content что это

Микроразметка Open Graph: базовые принципы и настройка

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

Что такое Open Graph и какая от нее польза

Open Graph – это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. У хорошего информационного блока (сниппета), который формируется при репосте страницы сайта, есть несколько признаков:

заголовок не обрезается;

в описании – цепляющий лид или другая важная информация;

картинка соответствует требованиям соцсети и тоже не обрезается.

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

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

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

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

Как размечать страницы

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

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

У атрибута property есть четыре обязательных свойства.

og:title – заголовок поста или страницы. Сам текст добавляется в атрибут content.

og:type – тип передаваемого объекта: article, audio, image, video. Полный перечень смотрите в документации.

og:url – канонический URL, который ведет к объекту.

og:image – ссылка на изображение, которое опубликуется при репосте.

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

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

Кроме обязательных есть и дополнительные свойства.

og:audio – адрес звукового файла указанного объекта.

og:video – адрес видеофайла указанного объекта.

og:description – описание передаваемого объекта.

og:determiner – актуально для постов на английском: можно выбрать артикль перед названием объекта в предложении. Тип enum (a, an, the, «», auto), по умолчанию выбрано «» (нет артикля).

og:locale – свойство для указания локации. Формат language_TERRITORY. По умолчанию: en_US.

og:locale:alternate – свойство для добавления альтернативных локалей.

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

Из опциональных свойств часто используют og:description и og:site_name. Первое свойство позволяет добавить краткое описание, которое состоит из одного или нескольких предложений. ВКонтакте и на Facebook количество символов в описании сильно ограничено, зато в Telegram сниппет выглядит информативно.

С помощью og:site_name вы можете добавить в сниппет название сайта и несколько слов для описания его предназначения. Но это свойство обрабатывают не все соцсети. Например, на Facebook отобразится только URL сайта. А вот в Telegram в превью ссылки подтягивается все, что вы укажете внутри свойства og:site_name.

У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать. Изучим их на примере og:image:

og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.

og:image:type – например jpeg или png.

og:image:width – ширина изображения в пикселях.

og:image:height – высота изображения в пикселях.

У свойства og:video доступны такие же дополнительные метаданные: secure_url, type, width и height. А вот у og:audio дополнительных данных width и height нет, что логично – у звукового объекта не может быть длины и ширины, в отличие от изображения и видео.

Ссылки на дополнительные материалы

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

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

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

Примеры разметки для разного контента

Это пример минимальной разметки – в ней только базовые свойства:

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

Это рекомендуемые размеры изображений для Facebook. С ним картинка в сниппете будет выглядеть хорошо.

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

Например, пользователь делает репост в Twitter. Соцсеть будет учитывать только контент, указанный в свойстве twitter:image. Остальные картинки Twitter проигнорирует.

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

В этот набор можно добавить структурированные свойства. Например, указать ширину и высоту видео.

Как внедрить Open Graph на сайте

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

Затем в прописываются метатеги с нужными атрибутами и свойствами.

Чтобы сэкономить время, можно не прописывать все метатеги вручную, а использовать генераторы. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.

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

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

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

Чтобы проверить корректность разметки, используйте валидаторы. Ссылки на некоторые инструменты есть в документации Open Graph. Можно также использовать валидатор в Яндекс.Вебмастере или сервис Open Graph Check. Они проверяют страницы по указанным адресам и показывают, есть ли ошибки в разметке.

Источник

Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить

Общие теги Open Graph

Как сделать кликабельный номер телефона на сайте

og:title

og:description

og:url

og:image

Яндекс.Метрика – что за зверь и как его приручить. Пошаговая инструкция по установке

og:type

Теги для Twitter

Заметьте, в теге twitter:card пишется meta name, а не meta property.

В других мета-тегах для этой площадки — meta property.

И вот мы настроили микроразметку Open Graph.

Найти ошибки

Сбросить кэш ссылки

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

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

Но если вы все-таки загрузили в соцсети ссылку с ошибками в Open Graph, кэш надо сбросить.

Не тратьте время на несколько сайтов, очистите кэш ссылки в FB, VK и Telegram одновременно с помощью Обнулятора. Просто выберите нужные соцсети и нажмите «Обновить кэш». Попробовать Обнулятор

Источник

Open Graph — панацея для соцсетей

10 декабря 2021

Что изменено?

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

Что такое Open Graph?

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

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

С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.

А что если у меня нет Open Graph на сайте?

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

Вот так выглядит пост в соцсетях без Open Graph:

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

Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей!

Перейдем теперь к структуре и внедрению OG — из чего состоит разметка и как ее прописать на веб-страницах?

Структура и внедрение Open Graph

Теги Open Graph добавляются как свойство в HTML-тег : и помещаются в секцию: .

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

og:title

Разметка Open Graph пример:

og:type

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

Разметка Open Graph пример:

og:url

Указываете канонический URL-адрес страницы.

og:description

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

og:image

Рекомендуемое разрешение для Open Graph — 1200 x 630 px. При таком размере миниатюра будет большой и хорошо выделяться. Не рекомендуется превышать вес изображения >5 Мб.

Если ваше изображение меньше 600 x 315 px, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.

Также у этого тега есть связанные теги, которые передают дополнительные свойства:

Другие OG-теги

Существуют и другие теги Open Graph, которые предоставляют соцсетям дополнительную информацию о вашем контенте:

Пример Open Graph на веб-странице

7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.

Инструмент проверки Open Graph

Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.

У него две очень полезные функции:

Плагины для внедрения Open Graph

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

Для WordPress оптимальным решением может будет многофункциональный плагин Yoast SEO. При редактировании страницы, у вас появится возможность добавить Open Graph информацию для Facebook и Twitter:

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

Под Drupal существует специальный модуль Open Graph meta tags.

Выводы

Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.

OG теги позволяют:

Стоит отметить, что существуют и другие виды микроразметки, которые выполняют похожую функцию и передают структурированные данные не только в Facebook, но и в поиск Яндекс/Google — это Schema.org. Есть также отдельная разметка для Twitter — Twitter Cards.

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

Источник

Микроразметка ​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*. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.

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

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

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

*Компания Meta, которой принадлежит Instagram и Facebook, признана в России экстремистской организацией.

Источник

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

Преимущества протокола, синтаксис, инструкция по внедрению и сервисы для проверки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видео в Open Graph

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*Соцсети Instagram и Facebook запрещены в РФ. 21.03.2022 компания Meta признана в России экстремистской организацией.

Источник

Что такое разметка 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. В прошлом уроке про Schema.org мы уже начали создавать разметку для поисковых систем. Теперь черёд социальных сетей — они немаловажны, ибо хорошим материалом с сайта пользователь захочет поделиться.

Что такое вообще Open Graph и откуда взялся? Это ещё один словарь микроразметки, который был разработан Facebook для структурирования данных, находящихся на странице, и создания красивого блока превью для социальной сети.

Сейчас с Open Graph работают (кроме самого Facebook) социальные сети Вконтакте, Google+, Twitter, LinkedIn, Pinterest, а также поисковые системы. Например, Яндекс активно использует разметку в поисках по видео, причём имеет собственной разработки метки, которых нет в оригинальной документации.

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

Немного теории об Open Graph

Наверное, вы заметили, что в описании типов я указывал наряду со страницей слово “объект” — дело в том, что в логике работы OG им называется основной элемент на странице. Допустим, наш сайт — видеохостинг и на данной странице мы предлагаем зрителям посмотреть видео. Значит, эта страница — это объект типа “видео” со всеми вытекающими отсюда мета-тегами.

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

Стандартная разметка сайта

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

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

Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).

Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:

Но при этом у нас должно измениться содержание тега :

Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть документацию Facebook — там всё достаточно просто, к тому же отображена актуальная информация.

Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.

Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.

Open Graph для Twittera

С Твиттером немного сложнее — если мы хотим добавить полную поддержку для него, то нужно добавить ещё несколько строк кода:

Тэги частично повторяют стандартный набор Open Graph, но на одном из них, а именно twitter:card, нужно остановиться подробнее. Данный тег отвечает за инициализацию карточки в системе Твиттера и для нескольких вариантов её отображения имеет отдельные значения.

Summary Card — данное значение является общим нейтральным и может быть применимо для использоваться для многих видов веб-контента, от сообщений в блогах и новостных статей, продуктов и ресторанов. Он предназначен, чтобы дать читателю предварительный просмотр содержимого перед кликом на ваш сайт. Стандартный вариант, чтобы не заморачиваться. В случае для Summary Card код будет таким:

Summary Card with Large Image — по сути, та же Summary Card, только с большой фотографией, на которой и делается весь акцент. Код меняется не слишком сильно:

App Card — используется, чтобы указать ссылку на мобильное приложение. Здесь имеется чуть больше параметров — кроме иконки (то же изображение по сути), названия и описания, можно добавить такие параметры, как цена и рейтинг. Количество тегов здесь значительно больше.

Имхо, данная тема больше нужна разработчикам мобильных приложений для Android и iOs, поэтому даю ссылку на документацию — там есть немного больше информации.

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

Теперь про тег twitter:site — он создан для связывания контента с аккаунтом Вашего сайта в Twitter. Если у вашего сайта есть собственный аккаунт — указывайте его, если нет — можете пропустить, поскольку тег не обязательный. Его практически дублирует twitter:creator, который указывает на аккаунт непосредственно автора контента, что может быть полезным для сайтов с количеством авторов, отличном от 1. Тег также необязателен и можно его не указывать.

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

В разделе для разработчиков предоставлен валидатор для карточек Твиттера для тестирования веб-страниц.

Статистика от Facebook

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

Тег fb:app_id создан для того, чтобы была возможность воспользоваться статистикой на Facebook — с её помощью можно просматривать информацию о переходах на Ваш сайт из Facebook. Для того, чтобы иметь такую возможность, необходимо в разделе Разработки создать новое приложение типа сайт или выбрать из уже имеющихся.

Этот тег необязательный, но Отладчик объектов Open Graph в Facebook будет показывать ошибку.

Немного про размер изображений

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

Разработчики Facebook в рекомендациях указывают, что размер изображения должен быть пропорционален 1,91:1, чтобы избежать для него обрезания. И минимальным размером считают 1200×630 пикселов.

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

Посему зачастую размер изображения делают равным 968×504 пикселов. Получается хорошо и универсально. Но конечный выбор размера изображения остаётся за Вами.

Информация об авторе статьи

Увековечить себя в микроразметки поможет следующая строчка в коде:

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

Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:

Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!

Разметка видео

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

Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:

Их тут очень много и некоторые необходимо разобрать подробнее:

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

Заключение

И напоследок хочу дать сслылки на два инструмента внутри социальных сетей: Отладчик объектов Open Graph в Facebook и pages.clearCache ВКонтакте. Дело в том, что социальные сети, когда обнаруживают новую ссылку внутри себя, кэшируют их содержание и сохраняют — сделано это для того, чтобы каждый раз при показе блока не обращаться за данными на указанный сайт. И если вы заняты отладкой внешнего вида блока или вдруг содержание страницы поменялось (картинка другая, заголовок или описание), и чтобы данные обновились в социальных сетях, кэш нужно сбрасывать (самому вручную).

ВКонтакте нужно просто указать ссылку (в форме внизу страницы) и нажать «Выполнить». На Facebook же функционала немного больше — можно посмотреть текущую информацию о странице и при надобности сбросить её. И заодно посмотреть, правильно ли оформлена разметка (отмечу, что он может ругаться на разметку, но при этом нормально работать).

На этом всё, что я хотел рассказать про разметку Open Graph. В конце добавлю, что её следует использовать в совокупности со Schema.org для поисковых систем.

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

Источник

Микроразметка 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, подробное руководство по каждой тематике

Источник

Пуленепробиваемая разметка 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 позволяет любой веб-странице стать полноценным объектом в социальных сетях. Например, протокол используется на Facebook, чтобы разрешить любой веб-странице иметь такую же функциональность, как и любой другой объект на Facebook.

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

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

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

В качестве примера ниже приводится разметка протокола Open Graph для фильма «The Rock» на IMDB:

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

Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:

Например (line-break исключительно в демонстрационных целях):

Схему RDF (в Turtle) можно найти на ogp.me/ns.

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

Свойство тега og:image имеет несколько дополнительных структурированных свойств:

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

Тег og:audio имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):

Массивы

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

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

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300×300 px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000 px в высоту.

Типы Объектов

Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type

Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма CURIEs

Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type значение имени всегда с префиксом пространства имен, а затем период. Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.

Музыка

Видео

Если это сериал или ТВ-шоу, метаданные идентичны video.movie.

Видео, которое не относится ни к одной из категорий. Метаданные идентичны video.movie.

Не Вертикальные объекты

Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.

Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как og:type web-сайт.

Следующие типы используются при определении атрибутов в протоколе Open Graph.