Как работать с 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 Journal — медиа об онлайн-бизнесе и не только

Netpeak Journal — медиа об онлайн-бизнесе и не только Представляем Netpeak Journal — новый этап развития блога Netpeak...

24 09 2023 0:29:38

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

Сколько стоил клик в Яндекс.Директ в Казахстане в первом квартале 2020 года Чем вам может пригодиться это исследование? Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Читать!...

23 09 2023 10:30:44

Внутренняя кухня SEO: как Netpeak продвигает UniSender — первые 5 шагов

Внутренняя кухня SEO: как Netpeak продвигает UniSender — первые 5 шагов Начинаем серию постов в режиме реалити-шоу о подробностях продвижения крупного игрока бизнеса email- и sms-рассылок — компании UniSender....

22 09 2023 17:38:20

SEO-продвижение интернет-магазина строительных товаров в Украине — рост трафика на 121% и дохода на 413%

SEO-продвижение интернет-магазина строительных товаров в Украине — рост трафика на 121% и дохода на 413% Мы достигли поставленных на старте продвижения целей: вернули потерянный трафик, получили дальнейший рост видимости сайта и увеличили доход....

21 09 2023 16:26:20

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...

20 09 2023 13:32:24

20 фактов о развитии мобильных приложений — инфографика

20 фактов о развитии мобильных приложений — инфографика Рынок мобильных приложений и его глобальные тренды из исследования App Annie...

19 09 2023 1:42:59

Как ангел-хранитель Sammy помогает продвигать носки

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

18 09 2023 11:25:21

SSL-сертификат — что это такое и как он работает

SSL-сертификат — что это такое и как он работает Безопасное соединение, которое положительно оценивают не только поисковые роботы, но и пользователи. Особенно, если на сайте предстоит оставить личные данные. Читать!...

17 09 2023 17:27:31

Продвинутый подход к работе с аудиториями Facebook

Продвинутый подход к работе с аудиториями Facebook В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...

16 09 2023 0:48:48

Что такое Alexa Rank и как в нем продвинуться

Что такое Alexa Rank и как в нем продвинуться Alexa Rank учитывает как число страниц, так и количество просмотров страниц. Alexa Rank 1, что означает, что все сайты и сервисы Google посещают больше всего посетителей в интернете....

15 09 2023 8:25:57

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць Как подготовиться и сделать из интервью полноценную историю, которая будет интересна аудитории...

14 09 2023 1:12:36

Продвижение мобильного приложения с помощью Google Ads, YouTube, ВКонтакте, Facebook, Yandex.Store и iAD

Продвижение мобильного приложения с помощью Google Ads, YouTube, ВКонтакте, Facebook, Yandex.Store и iAD В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....

13 09 2023 20:33:30

Кейс: заказ цветов с доставкой, SEO-продвижение сайта с ROMI 132%

Кейс: заказ цветов с доставкой, SEO-продвижение сайта с ROMI 132% SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...

12 09 2023 16:42:42

Сколько стоил клик в Google Ads в Казахстане во втором квартале 2020 года — исследование Netpeak

Сколько стоил клик в Google Ads в Казахстане во втором квартале 2020 года — исследование Netpeak Зная стоимость клика в вашей тематике или регионе, коэффициент конверсии на сайте, вы можете оценить объем необходимых в рекламу инвестиций и прогнозировать стоимость конверсии. Узнать больше!...

11 09 2023 10:56:18

Миграция с Google AdWords API на Google Ads API: подробный мануал

Миграция с Google AdWords API на Google Ads API: подробный мануал Как и зачем мигрировать со старой на новую версию API на языке R. С пакета RAdwords на rgoogleads. Руководство от Алексея Селезнева. Читать дальше!...

10 09 2023 17:55:52

Откуда же берутся скидки в Google Рекламе

Откуда же берутся скидки в Google Рекламе Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...

09 09 2023 23:15:49

Блоги, каналы и паблики об интернет-маркетинге — читательский рейтинг

Блоги, каналы и паблики об интернет-маркетинге — читательский рейтинг Думаете, что почитать об онлайн-продвижении и диджитал-маркетинге? Вам сюда. Мы собрали топ интересных сайтов, блогов, каналов и пабликов...

08 09 2023 10:25:40

Семь массовых сбоев, оставивших миллионы людей без привычных сервисов

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

07 09 2023 8:26:47

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio Новый способ автоматизации процессов при настройке аналитики больших объемов данных....

06 09 2023 9:53:48

Кейс Pandora.kz. Как email принес 30% от общего дохода по всем каналам продаж.

Кейс Pandora.kz. Как email принес 30% от общего дохода по всем каналам продаж. Как прокачать email, когда рассылки уже работают....

05 09 2023 12:58:17

Кейс: зачем сегментировать аудиторию перед запуском ремаркетинга

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

04 09 2023 22:43:38

5 вопросов: нужно ли вам статейное продвижение

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

03 09 2023 18:21:41

Вебмастера заработают более $2 млн на Всемирном дне шопинга в 2021

Вебмастера заработают более $2 млн на Всемирном дне шопинга в 2021 С каждым годом китайские маркетплейсы увеличивают свое влияние, и покупатели всё активней заказывают товары из Поднебесной. Но не всё скидки да покупки — обладатели интернет-аудитории и маркетологи могут еще и хорошо заработать на этих площадках....

02 09 2023 6:35:57

Правила здорового сна от Мэтью Уокера

Правила здорового сна от Мэтью Уокера Привыкли к недосыпу и жизни «на кофе»? Вы, конечно же, понимаете, что это не дело. Но осознаете ли насколько? Если нет, почитайте....

01 09 2023 6:47:19

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

Что такое краулинг и как управлять роботами Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...

31 08 2023 22:42:35

Генерируем прорывные идеи по Люку Уильямсу

Генерируем прорывные идеи по Люку Уильямсу Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....

30 08 2023 12:27:44

Как отслеживать работу PBN и оперативно реагировать на изменения

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

29 08 2023 7:13:18

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017 Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...

28 08 2023 3:51:28

Трудности перевода: как найти общий язык с зарубежными SEO-специалистами

Трудности перевода: как найти общий язык с зарубежными SEO-специалистами Профессиональная лексика SEO-специалистов в буржунете и в рунете формируется в одном поле: Google-то общий. Но когда специалисты Востока и Запада встречаются, им сложно понять друг друга. Это неудивительно, так как язык отражает само восприятие SEO. А под...

27 08 2023 21:10:35

Как узнать, было ли прочитано ваше письмо адресатом?

Как узнать, было ли прочитано ваше письмо адресатом? Метод не для всех, но увлеченным веб-аналитикой точно понравится!...

26 08 2023 10:20:36

Как создать специальный отчет в Google ***ytics

Как создать специальный отчет в Google ***ytics Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....

25 08 2023 20:18:19

Как я работаю дома с двумя детьми — хроники безумного папы

Как я работаю дома с двумя детьми — хроники безумного папы Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...

24 08 2023 17:15:16

Обзор Netpeak Checker 2.1 — мультифункционального инструмента для массового анализа и сравнения сайтов

Обзор Netpeak Checker 2.1 — мультифункционального инструмента для массового анализа и сравнения сайтов Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....

23 08 2023 1:35:35

Сленг в Telegram — каналы-оборотни, приходы и закрепы

Сленг в Telegram — каналы-оборотни, приходы и закрепы Вам точно нужен ВП? Тогда утвердите сабж, чтобы умещался в три слова, скиньте линк и дескрипшн и распознайте канал-оборотень. Полная подборка сленговых слов, значение которых не всегда найдете в Google...

22 08 2023 12:20:21

Как не терять звонки даже с двумя сотрудниками в call-центре

Как не терять звонки даже с двумя сотрудниками в call-центре Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...

21 08 2023 17:15:11

Как Netpeak продвигает бизнес-страницы на OLX — первая часть

Как Netpeak продвигает бизнес-страницы на OLX — первая часть Как найти продавцов для маркетплейса с помощью рекламы в Google, Facebook, TikTok и Viber....

20 08 2023 2:16:51

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group Онлайн-корпоративы стали трендом 2020 года, но останутся с нами надолго если не в чистом, то в гибридном формате. Делимся опытом организации дня рождения компании в Zoom....

19 08 2023 13:12:31

Как продвигать премиум-продукты — аутрич кейс бренда High-End акустики Copra

Как продвигать премиум-продукты — аутрич кейс бренда High-End акустики Copra Кейс о том, как написать большинству дилеров премиальных акустических систем в Европе и ничего не продать. И почему это кейс, а не антикейс....

18 08 2023 21:58:22

Как лучше презентовать себя — несложные советы, которые игнорируют 90% специалистов

Как лучше презентовать себя — несложные советы, которые игнорируют 90% специалистов Как правильно оформлять свое портфолио, писать сопроводительные письма и делать посты в соцсетях. С помощью простой человеческой адекватности можно выигрывать у 90% других подрядчиков. Как это использовать? Читайте дальше!...

17 08 2023 1:12:31

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

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

16 08 2023 23:51:50

Как найти новые точки роста в рекламных кампаниях

Как найти новые точки роста в рекламных кампаниях Как и зачем отслеживать конверсии с тегом Google Рекламы...

15 08 2023 4:30:31

Рост небрендового трафика на 99% — кейс интернет-магазина Vodafone Retail Ukraine

Рост небрендового трафика на 99% — кейс интернет-магазина Vodafone Retail Ukraine За 10 месяцев сотрудничества увеличили небрендовый на 99%, а общий трафик — в два раза. Рассказываем не только о результатах, но и подходе создания реалистичного прогноза SEO-продвижения сайта. Читать дальше!...

14 08 2023 1:35:14

Как сделать email-рассылку в MailChimp

Как сделать email-рассылку в MailChimp Инструкция для новичков: как быстро отправить почтовую рассылку клиентам...

13 08 2023 19:28:56

Кейс: снижение (not set) трафика в Google ***ytics на 59,35%

Кейс: снижение (not set) трафика в Google ***ytics на 59,35% Сет по контекстной рекламе в тематике «разработка программного обеспечения»: снижение стоимости клика на 89%....

12 08 2023 18:19:55

Email-маркетинг для интернет-магазина — как настроить, чтобы получить от 7 до 15% общего дохода

Email-маркетинг для интернет-магазина — как настроить, чтобы получить от 7 до 15% общего дохода Email-маркетинг увеличивает частоту транзакций. Показываем как это происходит и за счет чего. Делимся кейсом email-маркетинга для книжного интернет-магазина. Читать дальше....

11 08 2023 14:39:23

Карантин 2020 — как сохранить здоровую психику

Карантин 2020 — как сохранить здоровую психику Самопомощь по тревоге во время карантина и экономического кризиса...

10 08 2023 20:18:38

Дублирование контента на сайтах, ориентированных на разные страны

Дублирование контента на сайтах, ориентированных на разные страны Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...

09 08 2023 16:30:59

Дополнительные функции Zoom

Дополнительные функции Zoom Как обойти «Зал ожидания» и другие неочевидные фишки...

08 08 2023 21:55:51

Дэн Гридин: «Проблема “холодные звонки не работают” вошла в топ-3 по абсолютно всем рынкам в 12 странах»

Дэн Гридин: «Проблема “холодные звонки не работают” вошла в топ-3 по абсолютно всем рынкам в 12 странах» Дэн Гридин, ненавистник холодных звонков и эксперт в области системного B2B маркетинга для сложных рынков, рассказал читателям блога о принципах работы на рынке во время шторма....

07 08 2023 15:37:17

11 пpaктически применимых фишек по SEO и арбитражу трафика — итоги круглого стола 8P 2019

11 пpaктически применимых фишек по SEO и арбитражу трафика — итоги круглого стола 8P 2019 Панельная дискуссия, на которой специалисты представляют нестандартные идеи для привлечения трафика, продвижения проектов. Всё, что можно применить на деле. Читать!...

06 08 2023 11:14:51

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