Что такое Open Graph Protocol разметка?

6.03.2018
4 минуты
микроразметка, Разработка, Руководства,
1218

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

Так, например, вы поделились с другом ссылкой в сообщении. Он сможет видеть не только саму ссылку, но и небольшое описание (на 2-3 строки) и, что еще лучше – изображение того, чем вы делитесь с другом. Это может быть как логотип сайта, так и изображение конкретного товара.

 

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

 

Почему маркетологам нужно знать об Open Graph

 

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

Например, вы когда-нибудь «шарили» ссылку на Facebook, только чтобы узнать, что эскиз отсутствует, или была совершенно другая картина, чем вы ожидали? Небольшое знание о методах Open Graph может помочь решить эти проблемы.

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

 

Кто создатель Open Graph

 

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

Протокол OG позволяет разработчикам интегрировать свои страницы в глобальный инструмент отображения / отслеживания Facebook Social Graph. Эти страницы получают функциональность других объектов графа, включая ссылки на профили и потоковые обновления для подключенных пользователей

 

Типы разметки OGP

 

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

 

Основные метатеги протокола

  • og:title – Это название сущности (страница, статья, товар и т.д),
  • og:type – это тип сущности (может быть article, product, page) .
  • og:image – ссылка на фото той сущности, которой будут делиться в сети
  • og:url – Каноническая ссылка на сущность (страницу)”.

Как это выглядит в коде:

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

 

Важное примечание: Код такой разметки нужно размечать в разделе <head></head> вашей странице, не перепутайте с элементом <header>.

 

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

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

  • og:audio – ссылка на музыкальный (звуковой) файл.
  • og:description – блок описания вашей страницы.
  • og:locale – Тег гео расположения, или же языка страницы. Формат По умолчанию en_US.
  • og:locale:alternate – массив других языков этой же страницы.
  • og:site_name – название сайта.
  • og:video – ссылка для файла видео (если такой есть на странице).

 

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

 

Чтобы облегчить жизнь, Facebook создал инструмент под названием Open Graph Object Debugger (URL Linter). Он имеет две очень полезные функции.

Во-первых, когда вы вводите ссылку, которую хотите проверить, она возвращает любые ошибки и предложения для тегов OG, если таковые имеются. Вы также можете проверить, как выглядит изображение og: image, каково ваше описание и т. д.

Во-вторых, он очищает кеш Facebook. Представьте себе следующее: вы публикуете ссылку на Facebook, но затем вы видите ошибку в миниатюре, поэтому вы возвращаетесь на свой сайт и настраиваете теги OG, и вы публикуете его снова на Facebook.

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

 

OGP для социальной сети Twitter

Мета-теги  соц. сети Twitter схожи с тегами OGP и базируются на тех же библиотеках (наборах правил), что и протокол, разработанный ребятами из Facebook.

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

Важный момент! Несмотря на то, что OGP рекомендует указывать специальный префикс “og” через код <html prefix = “og: http://ogp.me/ns#”>, такая разметка совершенно не нужна сети Twitter.

Пример внедренной разметки Twitter Card

Вот так в конечном итоге Facebook будет видеть нашу страницу.

страница с микроразметкой

Немного подводных камней из личного опыта

В заключение также хочется поделиться личным опытом при настройке Open Graph разметки сайтов. Даже при внедренной разметке нет 100%-й гарантии, что соц.сеть подтянет всю информацию, которую вы ей передали. Это связано с тем, что у каждого  парсера соц.сети есть свои лимиты при работе с вашей разметкой. Например, долгое ожидание, медленный ответ от сервера могут привести к тому, что с первого раза Facebook может не подтянуть некоторые данные. Очень часто это случается с изображениями, и основных проблем здесь две:

  • слишком большой объем файла (250кб+);
  • слишком большое разрешение фото (больше чем 1000px);
  • и наоборот – слишком маленькое разрешение фото (меньше чем 300px).

 

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Будьте в курсе последних обновлений

Присоединиться в

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

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

В версии 3.0.0

  • новые сервисы: Ubersuggest (NeilPatel), Spyfu и другие;
  • автосохранение списка минус-слов в рабочей области;
  • авторизация для хранения данных в аккаунте;
  • списки типовых минус-слов;
  • возможность хранить пользовательские списки минус-слова в расширении для дальнейшего применения в аккаунте;
  • англоязычный и русскоязычный интерфейс.

Основные комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • LeftALT + LeftMouseClick - для сбора фраз
  • LeftALT + S - для поиска слов

In version 3.0.0

  • new services: Ubersuggest (NeilPatel), Spyfu and others;
  • autosave of a negative keywords list in the workspace;
  • authorization for storing data in the account;
  • generic negative keyword lists;
  • the ability to store custom lists of negative keywords in the extension for further use in your account;
  • English and Russian interface.

Key combinations

  • LeftMouseClick to add a word, press again - to delete
  • LeftALT + LeftMouseClick - to collect phrases
  • LeftALT + S - for words searching

В версии 2.0

  • 2 режима выдачи ключевых слов:
  • быстрая выдача - аналогична выдаче Google Planner, но найденные результаты включают каждое слово из введенной в поиск фразы;
  • полная выдача - расширенная выдача, которая включает поиск по дополнительным релевантным фразам, но найденные результаты также включают каждое слово из введенной в поиск фразы.
  • Обновленный файл выгрузки ключевых слов Excel:
  • выгрузка локаций в удобном формате для загрузки в Editor;
  • обновленный шаблон для создания объявлений.
  • Полный список локаций.
  • Группировка отчетов по проектам.
  • Устранена ошибка с задержкой в 30 секунд.
  • Новые фильтры для получения релевантной выдачи.
  • Копирование минус-слов.

In version 2.0:

  • 2 modes of keywords search result:
  • quick search result - is similar to one of Google Planner , but the results found include every word of the phrase entered in the search;
  • full search result - extended search result that includes search on additional relevant phrases, but the results found also include every word of the phrase entered in the search.
  • Updated Exces Keyword Upload File:
  • uploading of locations in a convenient format for uploading to Editor;
  • updated template for creating ads.
  • Full list of locations.
  • Grouping of reports on the projects.
  • Fixed an error with a delay of 30 seconds.
  • New filters for getting relevant search results.
  • Copying of negative keywords.

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме:
1Кликов 259, показов 3 515. Чему равно CTR?
2Заходов на сайт 874, конверсий 16. Чему равен коэффициент конверсии?
3Что такое СРА?
4CTR 4,03%, кликов 240. Чему равно число показов объявления?
5Затрат 20 158, конверсий 63. Чему равна стоимость конверсии?

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме: