Как работать с Open Graph > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Как работать с Open Graph

Как работать с Open Graph

< >

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

Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе Подробнее об этих факторах читайте в нашем посте «Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе».

Протокол Open Graph создан специалистами Facebook. Зачем его использовать? Чтобы сделать предпросмотр (превью) веб-страниц в социальных сетях смотрибельным. А в глобальном смысле — для воплощения идеи семантической паутины. То есть стандартизации всей информации во Всемирной паутине, чтобы она стала пригодна для автоматической обработки.

Зачем внедрять Open Graph

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

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

Давайте подробнее рассмотрим, что произойдет, если не внедрить Open Graph на своем сайте.

Вот некоторые образцы предпросмотра в Facebook веб-страниц без разметки:

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

Теперь примеры страниц с разметкой:

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

Важно: заголовок и описание, по желанию, могут отличаться от title и description веб-страницы.

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

Истории бизнеса и полезные фишки

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

Разметкой предусмотрено много свойств (тегов). Основные:

  1. og:title — заголовок, который хаpaктеризует страницу и отображается внешне.

  1. og:type — тип основного содержимого страницы. Например:
  • видео: ;
  • музыка: ;
  • статья: .

  1. og:image — URL изображения, которое отобразится в предпоказе.

og:url — канонический URL веб-страницы. Он используется как идентификатор объекта (веб-страницы). Например:

Пример кода, если задействовать только основные свойства:

<html prefix=\"og: https://ogp.me/ns#\"><head><meta property=\"og:title\" content=\"Example title\" /><meta property=\"og:type\" content=\"article\" /><meta property=\"og:url\" content=\"https://www.site.com/example\" /><meta property=\"og:image\" content=\"https://site.com/images/example.jpg\" />...head>...html>

Рассмотрим не основные, но важные и полезные теги при продвижении:

  1. og:site_name — задает имя сайта, которое отображается в предпоказе.

  1. og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).

Вот все теги, которые влияют на внешний вид предпросмотра:

Дополнительные необязательные теги

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

Если свойство не задано, по умолчанию язык и регион «en_US».

Код языка нужно указывать по ISO 639.2, а страны по ISO 3166-1.

  • og:audio – указывает URL аудиофайла;
  • og:video – указывает URL видеофайла.

Например:

Как использовать дополнительные свойства тегов

Теги могут содержать дополнительные свойства. Например, у og:image такие:

  • og:image:secure_url — задает URL картинки, который работает на HTTPS;
  • og:image:width — число пикселей в ширину;
  • og:image:height — число пикселей в высоту;
  • og:image:type — задает MIME тип изображения (список существующих MIME-типов).

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

<meta property=\"og:image\" content=\"https://site.com/example.jpg\" /><meta property=\"og:image:secure_url\" content=\"https://site.com/example.jpg\" /><meta property=\"og:image:type\" content=\"image/jpeg\" /><meta property=\"og:image:width\" content=\"500\" /><meta property=\"og:image:height\" content=\"400\" />

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

Например, есть три картинки с разным разрешением image1, image2, image3. Код будет выглядеть следующим образом:

<meta property=\"og:image\" content=\"https://site.com/image1.jpg\" /><meta property=\"og:image:width\" content=\"800\" /><meta property=\"og:image:height\" content=\"600\" /><meta property=\"og:image\" content=\" https://site.com/image3.jpg\" /><meta property=\"og:image\" content=\"https://site.com/image2.jpg\" /><meta property=\"og:image:height\" content=\"500\" />

То есть, у image1 размер 800х600, у image2 500 пикселей в высоту, а ширина не указана,

у image3 размеры не указаны,

Разметка позволяет подстраховаться, указав, например, альтернативную картинку. Если первый URL будет недоступен, то в предпросмотр подгрузится вторая картинка. Очередь (приоритет) — сверху вниз.

Например:

<meta property=\"og:image\" content=\"https://site.com/example.jpg\" /><meta property=\"og:image\" content=\"https://site.com/example1.jpg\" />

Если картинка https://site.com/example.jpg недоступна, подгрузится следующая https://site.com/example1.jpg.

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

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

Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины). Например, для WordPress и Для Joomla!.

Второй вариант посложнее — внедрить протокол напрямую в код страниц.

Сначала нужно обозначить, что страница использует протокол Open Graph. Для этого в открывающем теге указать атрибут prefix со значением my_namespace: https://example.com/ns#

Выглядит это так:

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

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

Чтобы проверить правильность внедрения разметки можно воспользоваться специальным инструментом от Facebook или сервисом Open Graph Check.

Ещё больше тонкостей при продвижении в социалках — опыт наших экспертов в услуге SMM:

Хочу, чтобы мои соцсети продвигали маркетологи Netpeak

Выводы

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

  1. Рекламировать свой сайт в социальных сетях, создавая корректные превью страниц.
  2. Привлекать трафик из соцсетей кликабельными превью.
  3. Формировать не случайный, а продуманный предпоказ страницы.
  4. Наращивать поведенческие факторы и популярность среди пользователей соцсетей, которые будут репостить, лайкать и комментировать красивые превью.

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

  1. Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины).
  2. Второй вариант посложнее — внедрить протокол напрямую в код страниц.

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

Подписывайтесь на Telegram-каналы основателей Netpeak



Комментарии:

Обзор Netpeak Spider 3.0: краткая версия

Обзор Netpeak Spider 3.0: краткая версия Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....

24 05 2025 3:23:31

Разбираем архетипические образы в рекламе

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

23 05 2025 14:23:37

Как получить ещё больше от рекламы в Facebook: семь новых фишек

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

22 05 2025 16:39:41

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

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

21 05 2025 3:31:35

Как COVID-19 повлиял на результаты рекламы в Google для 21 отрасли

Выборка из 15 759 учетных записей клиентов WordStream в США по всем вертикалям, которые до размещали рекламу в поиске Google в 2020 году...

20 05 2025 3:17:48

Почему я уволился из SEO-агентства

Почему я уволился из SEO-агентства Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...

19 05 2025 12:29:25

Импорт данных из Google ***ytics в Excel с помощью ***ytics Edge — подробное руководство

Импорт из Google ***ytics в Excel — manual по ***ytics Edge....

18 05 2025 12:45:34

Инструменты для парсинга в работе SEO-специалиста

Инструменты для парсинга в работе SEO-специалиста Парсинг сайтов: как избавиться от головной боли и сэкономить сотни часов рутинного труда...

17 05 2025 6:54:30

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

Как сделать платежи в соцсетях удобными для клиента и продавца Оплата покупок в Facebook и Instagram через платежные ссылки...

16 05 2025 21:44:29

Как настроить счетчик Яндекс.Метрики

Как настроить счетчик Яндекс.Метрики Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....

15 05 2025 1:40:52

Денис Довгаль — интервью о видеоконтенте и удаленке до пандемии

Денис Довгаль — интервью о видеоконтенте и удаленке до пандемии Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....

14 05 2025 20:36:56

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка Алгоритм технической подготовки IP-адреса к массовым рассылкам...

13 05 2025 8:29:32

Как создать рассылку push-уведомлений. Чек-лист эффективной рассылки от Notix

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

12 05 2025 5:24:40

Что такое скрам — инструкция для новичков

Что такое скрам — инструкция для новичков Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....

11 05 2025 2:53:44

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

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

10 05 2025 11:14:33

Скрам-система — внедрить и отказаться. Опыт компании Boosta

Скрам-система — внедрить и отказаться. Опыт компании Boosta Внедрение скрама, чтобы решить проблемы в управлении бизнесом, год работы на нем и отказ от методологии. Читайте об опыте Boosta, которая объединяет 9 SEO-комaнд на удаленке....

09 05 2025 4:26:25

Как запустить онлайн марафон? Бесплатные и платные методы

Как собрать свой онлайн марафон на 500 или 1000 человек? Сколько это стоит и какие сервисы использовать. Давайте разбираться....

08 05 2025 15:23:44

Самые популярные домены и доменные зоны — исследование Serpstat

Самые популярные домены и доменные зоны — исследование Serpstat Знаете, как доменная зона Германии связана с криптовалютой, или почему в доменной зоне маленького острова площадью 10 квадратных километров зарегистрировано 20 млн доменов? Сейчас расскажем!...

07 05 2025 20:54:27

Что такое Netpeak Group? Все, что нужно знать

Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....

06 05 2025 7:17:23

Почему Netpeak стал лидером среди IT-работодателей Украины

Почему Netpeak стал лидером среди IT-работодателей Украины Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....

05 05 2025 2:37:13

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....

04 05 2025 19:26:39

Как добавить товары на Яндекс.Маркет — руководство для интернет-магазинов

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

03 05 2025 13:51:17

Что такое tone of voice и как использовать голос бренда в соцсетях

То, как мы разговариваем, важно не только в жизни, но и в соцсетях. Зачем нужен tone of voice и как сделать, чтобы ваш голос отличался от других и был эффективен? Читайте наш гайд....

02 05 2025 2:38:41

Какой сервис крауд-маркетинга выбрать

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

01 05 2025 3:40:30

Краткое руководство по системному управлению проектами в PPC

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

30 04 2025 1:29:45

Топ-50 кейсов в блоге Netpeak

Топ-50 кейсов в блоге Netpeak Кейсы с наибольшим количеством комментариев, репостов, оценок и дочитываний; по контекстной рекламе, поисковому продвижению, аналитике, SMM и другие. Узнать больше!...

29 04 2025 21:56:14

Как выступить с полезным докладом: советы экспертов

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

28 04 2025 21:26:24

Алексей Гулый о правильных людях, новых идеях и бизнесе без потерь

Алексей Гулый о правильных людях, новых идеях и бизнесе без потерь Как начать бизнес в институте и масштабировать его до международной группы компаний. Собрали все самое интересное из интервью фаундера «Техно Ёж» Алексея Гулыя на конференции 8P....

27 04 2025 9:34:46

Почему для пользователей разных устройств нужны разные стратегии контекстной рекламы — кейс

Почему для пользователей разных устройств нужны разные стратегии контекстной рекламы — кейс Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....

26 04 2025 22:42:48

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...

25 04 2025 20:31:46

Что такое релевантные страницы?

Что такое релевантные страницы? И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....

24 04 2025 20:12:33

Что нужно сделать перед созданием интернет-магазина

Что нужно сделать перед созданием интернет-магазина Планируете создание бизнеса, связанного с торговлей в интернете? Сначала прочитайте этот текст....

23 04 2025 9:27:26

Как не попасть в спам при отправке email-рассылки

Как не попасть в спам при отправке email-рассылки Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...

22 04 2025 20:28:33

Как активизировать подписчиков по Франку Керну

Как активизировать подписчиков по Франку Керну Как превратить неактивных подписчиков в вовлеченную аудиторию....

21 04 2025 22:47:53

Кейс по продвижению интернет-магазина медицинских товаров: ROMI 32%

Кейс по продвижению интернет-магазина медицинских товаров: ROMI 32% Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...

20 04 2025 6:26:26

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года Из нового исследования вы узнаете, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года...

19 04 2025 14:12:59

Главные секреты планировщика ключевых слов Google

Главные секреты планировщика ключевых слов Google Небольшой набор секретов по работе с Планировщиком ключевых слов гугла...

18 04 2025 13:44:38

Как сделать правильную перелинковку в интернет-магазине

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

17 04 2025 5:37:16

Почему пользователи удаляют ваше приложение — обзор инструментов для анализа Uninstall Rate

Почему пользователи удаляют ваше приложение — обзор инструментов для анализа Uninstall Rate Иногда удержать пользователя сложнее, чем мотивировать загрузить приложение. Семь инструментов для анализа Uninstall Rate....

15 04 2025 17:59:45

Зачем нужны целевые страницы и что такое лидогенерация

Всё, что важно узнать о лидогенерации и работе с целевой аудиторией....

14 04 2025 3:45:35

Почему контекстная реклама в агентстве стоит дорого — развернутый ответ для клиентов

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

13 04 2025 12:57:48

Что такое граббер сайтов и как с ним работать

Что такое граббер сайтов и как с ним работать Грабберы — программы, позволяющие автоматизировать процесс сбора и публикации контента. С помощью грабберов, помимо парсинга контента, осуществляют перевод и уникализацию текстов....

12 04 2025 23:39:43

93 шага к идеальному интернет-магазину — детальный чек-лист

93 шага к идеальному интернет-магазину — детальный чек-лист Открытие проверенных действий по увеличению продаж...

11 04 2025 6:23:55

Цистерны и насосы — задача по теории ограничений систем Голдратта

Цистерны и насосы — задача по теории ограничений систем Голдратта Используйте методы Элияху Голдратта для оптимизации процессов в жизни и на работе...

10 04 2025 19:12:42

Делаем первичный сбор семантики грамотно, экономя время на чистках

Делаем первичный сбор семантики грамотно, экономя время на чистках Как составить список, работа с которым займет меньше времени, чем обычно. На примере обработки запросов в ювелирной тематике....

09 04 2025 14:55:11

Наука быть счастливым: бесплатный онлайн-курс от профессора из Йеля

Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...

08 04 2025 6:40:37

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми Клиенты возвращаются к хорошему сервису, который начинается с понятного интерфейса на сайте, продолжается в общении с вежливым сотрудником и заканчивается в общении с воспитанным курьером или менеджером в пункте самовывоза. Что ещё? Читайте!...

07 04 2025 3:29:42

Как email-рассылки принесли ceкc-шопу 20% дохода

Как email-рассылки принесли ceкc-шопу 20% дохода Кейс выполнимой миссии — отправили рассылку по «холодной» базе и обошли запреты почтовых сервисов на изображения 18+...

06 04 2025 11:35:37

Первая помощь в офисе — как вести себя в нештатных ситуациях

Первая помощь в офисе — как вести себя в нештатных ситуациях Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....

05 04 2025 12:39:38

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::