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



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

Как работать с аудиториями Google Ads в наблюдении

Давайте больше не будем сливать бюджет, выбирая неправильный параметр....

15 07 2024 18:51:45

Как работают смарт-баннеры в Яндекс.Директ — кейс интернет-магазина товаров для сада и огорода

Как работают смарт-баннеры в Яндекс.Директ — кейс интернет-магазина товаров для сада и огорода Решили написать про новый формат рекламы — баннерный...

14 07 2024 5:21:48

Бизнес и экология. В компании Herman Miller наняли на работу пчёл

Бизнес и экология. В компании Herman Miller наняли на работу пчёл Сортировка мусора, использование велосипедов вместо автомобилей, озеленение города... В Украине, как правило, так представляют экофрендли бизнес. Зарубежные компании идут дальше....

13 07 2024 4:19:14

Полезные сервисы для оптимизации удаленной работы

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

12 07 2024 15:58:22

15 неочевидных и пpaктически применимых фишек для работы интернет-магазина — круглый стол 8P 2018

Идеи, кейсы и советы от экспертов. Читайте и находите что-то для продвижения своего бизнеса. Нетривиальные идеи от признанных экспертов-пpaктиков! Рекомендуем каждому, что развивает или планирует свой бизнес в интернете!...

11 07 2024 0:56:10

Apple тайно рекламирует приложения в гугле? Что это значит.

Apple тайно рекламирует приложения в гугле? Что это значит. Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....

10 07 2024 12:34:10

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

Действие зеркальных нейронов зеркальные нейроны и сознание. как они влияют на наше поведение?...

09 07 2024 3:12:39

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

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года Ежеквартальное исследование Netpeak по стоимости клика...

08 07 2024 0:10:37

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

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

07 07 2024 22:34:54

Как создать и запустить тысячи объявлений с помощью файла Excel

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

06 07 2024 4:21:42

Как вернуть органический трафик после неправильного переноса сайта

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

05 07 2024 23:56:37

Что меняет налог на Google для бизнеса и пользователей — объясняем на примере Facebook

Что меняет налог на Google для бизнеса и пользователей — объясняем на примере Facebook Как жить с налогом на Google, Facebook и другие международные сервисы — объясняем детали....

04 07 2024 9:40:24

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

Анализ ссылочной массы — подробное руководство Как найти, нарастить и проанализировать ссылочную массу...

03 07 2024 10:23:58

Сколько стоил клик в Google Ads во втором квартале 2016 — исследование Netpeak

Сколько стоил клик в Google Ads во втором квартале 2016 — исследование Netpeak Алексей Селезнев проанализировал более 7 миллионов кликов и посчитал, во сколько обходятся рекламодателям клики по объявлениям в разных странах и тематиках....

02 07 2024 1:24:43

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....

01 07 2024 15:20:23

Анализ эффективности кампаний рекламной сети Яндекса с помощью отчета по многокaнaльным последовательностям

Отчет «Многокaнaльные последовательности» в Google ***ytics помогает оценить влияние каждого канала, сделать выводы о работе рекламных кампаний — понять их вклад и участие в цепочке до совершения конверсии. Показываем на примере....

30 06 2024 6:44:33

Once upon a time… 22 правила сторителлинга от Pixar

Как рассказывать истории...

29 06 2024 13:43:14

Как отслеживать трафик PBN-сайтов

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

28 06 2024 8:16:15

Как массово удалить в интернет-магазине страницы товаров, которые не приносят трафик

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

27 06 2024 12:53:56

Как создать рекламную кампанию в Bing Ads — подробное руководство

Как создать рекламную кампанию в Bing Ads — подробное руководство Инструкция о том, как создать новую кампанию в Bing Ads или импортировать существующую из Google Рекламы? Как добавить способ оплаты? Читайте о первых шагах настройки рекламы в Bing...

26 06 2024 11:32:13

Семь улучшений Netpeak: создаем бизнес-страницу в Instagram, на Facebook, делаем email-маркетинг и публикуем истории бизнеса

Семь улучшений Netpeak: создаем бизнес-страницу в Instagram, на Facebook, делаем email-маркетинг и публикуем истории бизнеса Настроенная бизнес-страница компании в Instagram и на Facebook помогает в продвижении товаров и услуг в интернете. Поэтому так важно сделать их seo-friendly. Читать!...

25 06 2024 10:43:28

Реклама в Google Shopping для сайта б/у техники — рост продаж на 280% за 8 месяцев

Реклама в Google Shopping для сайта б/у техники — рост продаж на 280% за 8 месяцев Как продавать новую и б/у технику, ювелирные изделия в интернете. Эксперимент показал, что в Google Shopping можно продавать не только новые товары. Узнать больше!...

24 06 2024 19:13:55

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....

23 06 2024 15:29:35

Аудит мобильной версии сайта — подробное руководство

Аудит мобильной версии сайта — подробное руководство О видах мобильных версий, их плюсах и минусах, а также советы по аудиту....

22 06 2024 5:13:32

Кейс по SMM в тематике «посуда»: фотоконкурс для стимуляции активности в сообществе

Кейс по SMM в тематике «посуда»: фотоконкурс для стимуляции активности в сообществе Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....

21 06 2024 17:38:31

SMM без купюр. Наш тёплый ламповый SMM

SMM от Netpeak — это разработки стратегий продвижения, механики конкурсов, медиапланирование и постоянная интеpaктивная связь с клиентом с помощью «Личного кабинета»....

20 06 2024 5:18:44

Настройка поисковой рекламы в App Store — пошаговое руководство

Как создать Apple ID и настроить поисковую рекламу в App Store...

19 06 2024 21:14:51

Как повысить продажи брендовых украшений на 8-е марта. Кейс Pandora

Как повысить продажи брендовых украшений на 8-е марта. Кейс Pandora Стратегия продвижения, благодаря которой удалось снизить стоимость заявки от покупателей. Рассказываем об особенностях проведения акций в нише. Узнать больше!...

18 06 2024 18:11:34

7 частых и неочевидных ошибок интернет-магазинов

7 частых и неочевидных ошибок интернет-магазинов Расскажем про ошибки интернет-магазинов, которые трудно найти соответствующими программами и сервисами проверки...

17 06 2024 16:25:51

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

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

16 06 2024 16:48:24

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....

15 06 2024 14:54:16

Как определить плотность ключевых слов — советы и сервисы

Как определить плотность ключевых слов — советы и сервисы Сервисы для определения оптимальной плотности ключевых слов...

14 06 2024 0:31:26

Google показывает не все результаты поиска

Google показывает не все результаты поиска Сколько страниц на самом деле показывает и может перевести поисковик Google?...

13 06 2024 17:11:30

Как вывести коммерческую страницу и домен из бана Facebook

Кейс SMM-специалиста Edu-CASH.com о том, что делать, если Facebook страница заблокирована. И почему могут забанить аккаунт даже популярного бренда. Узнайте в статье!...

12 06 2024 5:26:15

SEO-продвижение магазина мебели, под Болгарию — кейс с ROMI 420%

SEO-продвижение магазина мебели, под Болгарию — кейс с ROMI 420% Лучшие результаты в SEO дает заранее спланированное сотрудничество клиента с агентством на всех этапах работ с сайтом....

11 06 2024 12:10:49

Epic vs Apple — первый раунд битвы

Epic vs Apple — первый раунд битвы Следим за развитием событий и анализируем решение суда. Читать дальше!...

10 06 2024 5:54:15

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...

09 06 2024 0:12:59

10 видов инноваций

10 видов инноваций Примеры инновационных проектов. Нескучная рецензия на интересную книгу....

08 06 2024 21:25:49

Stories для бизнеса. Фишки вовлечения в Instagram

Stories для бизнеса. Фишки вовлечения в Instagram Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....

07 06 2024 16:11:19

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

Как быстро написать текст — девять хитростей Что делать, когда не получается заставить себя написать статью или кейс...

06 06 2024 14:34:25

Пользователи удаляют приложение — когда mobile-маркетологу не стоит волноваться

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

05 06 2024 4:41:29

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

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

04 06 2024 5:12:53

Кейс Yves Rocher: как сформировать спрос на новую косметику с помощью видеорекламы

Кейс Yves Rocher: как сформировать спрос на новую косметику с помощью видеорекламы Какие форматы видеорекламы логичнее купить для создания спроса на новую продукцию? Выясняем на примере кейса бренда Yves Rocher...

03 06 2024 0:38:59

Лидеры рынка фармы — топ сайтов, которые видят украинцы, когда ищут лекарства в интернете

Статистика изменений долей рынка после майского и декабрьского апдейта Google в 2020 году....

02 06 2024 8:15:52

Аналитика в Твиттер: ссылки, ведущие на сайт

Аналитика в Твиттер: ссылки, ведущие на сайт Короткий прогон сервисов для аналитики активности в Твиттер....

01 06 2024 18:56:20

Funnel Based модель атрибуции в OWOX BI — руководство по настройке

Funnel Based модель атрибуции в OWOX BI — руководство по настройке Как настроить многокaнaльную модель атрибуции для своего бизнеса....

31 05 2024 0:25:55

Как обучать комaнду по методу 70:20:10

Как эффективно распределять бюджет и ресурсы на обучение сотрудников. Статья будет полезной для собственников бизнеса и HR-специалистов....

30 05 2024 18:21:53

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

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

29 05 2024 6:50:22

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

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

28 05 2024 12:53:50

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе»

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе» Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....

27 05 2024 9:14:46

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