Как работать с 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



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

Как модель маркетплейса увеличивает SEO-трафик?

Как модель маркетплейса увеличивает SEO-трафик? Каким образом бизнес-модель маркетплейса может помочь увеличить трафик интернет-магазина в целом....

07 06 2023 11:55:16

Что такое метавселенная и когда она станет реальной

Что такое метавселенная и когда она станет реальной Microsoft, Facebook и другие технологические компании заявляют, что метавселенная — это будущее интернета. Или настоящее? Давайте разберемся...

06 06 2023 9:16:49

Выход на новый рынок, рост видимости сайта в 5 раз и +20% небрендового трафика ежемecячно — кейс Decathlon

Выход на новый рынок, рост видимости сайта в 5 раз и +20% небрендового трафика ежемecячно — кейс Decathlon Начинали с SEO на этапе разработки нового сайта. Узнать больше!...

05 06 2023 17:16:40

Как увеличить количество звонков с сайта: кейс Callback от Ringostat

Как увеличить количество звонков с сайта: кейс Callback от Ringostat Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...

04 06 2023 6:49:14

Что такое трекер мобильного приложения и как его выбрать

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

03 06 2023 7:56:29

Типы людей: желтые, красные, синие и зеленые

Типы людей: желтые, красные, синие и зеленые Как говорится, люди делятся на тех, кто делит других на типы и тех, кто не делит. В этом посте — про желтых, синих, красных и зеленых людей....

02 06 2023 6:26:57

Бесплатный SEO-аудит на примере AIN.ua

Обойдемся без теории, зато покажем пример SEO-аудита...

01 06 2023 0:44:30

Песочница Netpeak: бесплатная площадка для ваших статей

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

31 05 2023 20:48:42

Как делать email-рассылку без попадания в спам и что делать, если это случилось

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

30 05 2023 5:55:58

Свадьба в IT, или Как пиарщику доверить организацию самого важного ивента подрядчику

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

29 05 2023 11:48:53

Кейс по SMM в тематике «алкогольные напитки»: «Пригласи 10 друзей — получи бутылку шампанского»

Кейс по SMM в тематике «алкогольные напитки»: «Пригласи 10 друзей — получи бутылку шампанского» Оживший бар. О том, как один украинский бренд за полтора месяца получил более 4 000 фанов!...

28 05 2023 15:20:22

+247% кликов из органического поиска за год — SEO для Bosch Siemens Hausgerate

Со старта сотрудничества, рост видимости сайтов клиента вырос в 15 раз....

27 05 2023 14:33:30

Какую роль играют запахи?

Какую роль играют запахи? Аромамаркетинг. Почему В Нью-Йоркских магазинах Samsung пахнет медовой дыней, в British Airways — луговыми травами. Что мы знаем о восприятии нами сенсорной информации, а конкретно — ароматов. Читать дальше!...

26 05 2023 3:35:52

Кейс «Секунда»: как получить больше 13 000 обращений в офлайн-магазины с помощью локальных кампаний Google

Кейс «Секунда»: как получить больше 13 000 обращений в офлайн-магазины с помощью локальных кампаний Google Как настроить и получить эффективную отдачу от Google Local Campaigns...

25 05 2023 12:33:16

Что такое XML-feed: как его создать и отредактировать

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

24 05 2023 19:32:52

Как продвигать мобильное приложение: опыт Андреаса Рётля на примере Journi

Как продвигать мобильное приложение: опыт Андреаса Рётля на примере Journi Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....

23 05 2023 1:20:29

Аудит репутации в интернете — зачем и как его проводить

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

22 05 2023 19:29:52

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

Какие данные о пользователях можно собирать сайтам, а какие — нет General Data Protection Regulation (GDPR): ответы на вопросы....

21 05 2023 10:50:51

Кто такой контент-маркетолог и зачем он бизнесу

Кто такой контент-маркетолог и зачем он бизнесу Не путайте с контент-менеджером, пожалуйста....

20 05 2023 7:55:31

Лучшие программы для редактирования подкастов

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

19 05 2023 20:27:26

Как быстро и без страданий сделать главную страницу сайта — MVP-подход

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

18 05 2023 21:20:15

Какие ошибки возникают при работе с Google ***ytics и как с ними бороться

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

17 05 2023 1:22:18

Блокчейн, революция контент-маркетинга и cмepть автора

Блокчейн, революция контент-маркетинга и cмepть автора Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...

16 05 2023 6:39:25

Как стать специалистом по контекстной рекламе

Как стать специалистом по контекстной рекламе Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...

15 05 2023 21:32:17

Что делать, когда упали продажи с сайта: чек-лист для проверки и исправления ошибок

Что делать, когда упали продажи с сайта: чек-лист для проверки и исправления ошибок «Настольная» методичка для предпринимателей и маркетологов....

14 05 2023 0:37:49

Десять часто задаваемых вопросов о лендингах

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

13 05 2023 11:33:19

Портрет украинского фрилансера — исследование Freelancehunt.

Портрет украинского фрилансера — исследование Freelancehunt. Ежегодный прирост рынка фриланса в Украине составляет в среднем 35%. В прошлом году зарегистрировано более 200 тысяч проектов на общую сумму 385 млн гривен....

12 05 2023 5:30:25

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

Английский язык — два упражнения для пополнения словарного запаса и развития разговорной речи Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...

11 05 2023 17:19:36

Как составить поисковые объявления для Google Ads и Яндекс.Директ

Как составить поисковые объявления для Google Ads и Яндекс.Директ Правила, требования, особенности. А ещё примеры, которые помогут создать правильную, с точки зрения поисковиков, рекламу. Читать!...

10 05 2023 21:15:42

Кейс Office-Expert.kz: как на треть снизить стоимость транзакций и вырастить CR на 67%

Кейс Office-Expert.kz: как на треть снизить стоимость транзакций и вырастить CR на 67% Как эффективно выйти из карантина с помощью контекстной рекламы...

09 05 2023 14:40:53

Как настраивать представления в Google ***ytics — подробное руководство

Как настраивать представления в Google ***ytics — подробное руководство Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...

08 05 2023 1:38:11

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....

07 05 2023 19:28:29

Репутация за деньги: откровения скупщика фейковых фолловеров

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

06 05 2023 15:18:28

Как создать рекламную видеозаставку с помощью Bumper Machine

Как создать рекламную видеозаставку с помощью Bumper Machine Создание даже короткого ролика может стоить дорого. Поэтому можно использовать бесплатный инструмент Bumper Machine от Google....

05 05 2023 4:12:51

Динамические поисковые объявления — как автоматизировать работу с товарным фидом

Как быстро настроить DSA с помощью Netpeak Spider. Рассмотрим подробнее «Только URL из фида страниц». Этот таргетинг помогает точнее определить целевую аудиторию и привести ее на максимально релевантные страницы сайта (к примеру, на карточку товара)....

04 05 2023 16:31:17

Как настроить код динамического ремаркетинга Google Ads без программиста

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

03 05 2023 2:17:28

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать 82% малых бизнесов тонут как раз из-за проблем с денежными потоками (по данным исследований U.S. Bank, 2020). Как предприниматели попадают в кассовые разрывы и что делать в таких ситуациях, разберем в этой статье....

02 05 2023 16:31:53

Как METRO отказалась от печатных каталогов

Как METRO отказалась от печатных каталогов Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....

01 05 2023 16:30:39

Как проводить вебинары — опыт агентства Netpeak

Как проводить вебинары — опыт агентства Netpeak Мы решили организовать серию вебинаров по SEO и предоставить их бесплатно. История о том, как с нуля при минимуме затрат создать успешный онлайн-курс...

30 04 2023 18:26:56

Как мы нашли модель аналитики для SaaS-проекта UniSender.com

Как мы нашли модель аналитики для SaaS-проекта UniSender.com Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...

28 04 2023 12:25:12

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

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

27 04 2023 3:10:17

Как добавить 100 000 метатегов на сайт за 5 минут?

Как добавить 100 000 метатегов на сайт за 5 минут? Как SQL-запросы сайтов и Google Sheets освобождают SEO-специалиста от рутины...

26 04 2023 9:25:50

Проверка уникальности контента

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

25 04 2023 9:41:31

Как оценить потерянный доход в Google Ads с помощью языка R

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

24 04 2023 16:23:17

Симулятор ставок кампании в Google Рекламе

Сергeй Бахарь неустанно исследует Google Рекламу и рассказывает о новинках нашим читателям....

23 04 2023 4:42:59

Язык R в интернет-маркетинге — дайджест полезных публикаций

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

22 04 2023 5:19:18

Как использовать фотоколлаж в маркетинге

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

21 04 2023 23:20:17

Кейс по SEO-продвижению сайта в тематике «эко-товары и натуральная косметика»: ROMI 129%

SEO-продвижение сайта, торгующего натуральной косметикой...

20 04 2023 18:35:26

Как стать хорошим SMM-специалистом

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

19 04 2023 15:11:42

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