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

< >

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

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

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

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

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

Facebook;
Twitter;
Pinterest;
Viber;
Telegram;
WhatsApp.

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

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

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

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

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

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

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

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

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

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

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

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

og:type — тип основного содержимого страницы. Например:

видео: ;
музыка: ;
статья: .

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>

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

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

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

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

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

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:

{\"0\":{\"lid\":\"1531306243545\",\"ls\":\"10\",\"loff\":\"\",\"li_type\":\"nm\",\"li_name\":\"name\",\"li_ph\":\"Имя\",\"li_req\":\"y\",\"li_nm\":\"name\"},\"1\":{\"lid\":\"1573230091466\",\"ls\":\"20\",\"loff\":\"\",\"li_type\":\"ph\",\"li_name\":\"phone\",\"li_req\":\"y\",\"li_masktype\":\"a\",\"li_maskcountry\":\"UA\",\"li_nm\":\"phone\"},\"2\":{\"lid\":\"1573567927671\",\"ls\":\"30\",\"loff\":\"y\",\"li_type\":\"in\",\"li_name\":\"surname\",\"li_ph\":\"Фамилия\",\"li_req\":\"y\",\"li_nm\":\"surname\"},\"3\":{\"lid\":\"1531306540094\",\"ls\":\"40\",\"loff\":\"\",\"li_type\":\"in\",\"li_name\":\"domains\",\"li_ph\":\"Адрес сайта\",\"li_rule\":\"url\",\"li_req\":\"y\",\"li_nm\":\"domains\"},\"4\":{\"lid\":\"1573230077755\",\"ls\":\"50\",\"loff\":\"\",\"li_type\":\"em\",\"li_name\":\"email\",\"li_ph\":\"Email\",\"li_req\":\"y\",\"li_nm\":\"email\"},\"5\":{\"lid\":\"1575903646714\",\"ls\":\"60\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"comment\",\"li_value\":\"Автоматический коммент: заявка из блога, без пользовательского комментария\",\"li_nm\":\"comment\"},\"6\":{\"lid\":\"1575903664523\",\"ls\":\"70\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"lead_channel_id\",\"li_value\":\"24\",\"li_nm\":\"lead_channel_id\"},\"7\":{\"lid\":\"1584374224865\",\"ls\":\"80\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"ip\",\"li_nm\":\"ip\"},\"8\":{\"lid\":\"1609939854149\",\"ls\":\"90\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"post_id\",\"li_nm\":\"post_id\"}}

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

Выводы

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

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

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

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

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

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

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

Как получить данные из Google ***ytics в R и загрузить в Power BI

Расширяем возможности визуализации данных из Google ***ytics c помощью пакета RGA и Power BI...

15 04 2024 16:54:38

Коллекция шуток Netpeak или Генератор мемов

Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...

14 04 2024 15:49:13

Как выбрать нишу для информационного сайта

Узкие специализированные ниши и широкие, которые, как правило, уже заняты лидерами рынка — в каждой найдется место для онлайн-издания с полезным контентом. Узнать больше!...

13 04 2024 9:35:52

IOS 14: Что это значит для рекламодателей Facebook

Реклама будет не настолько персонализирована, как сейчас....

12 04 2024 4:10:59

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

Парсинг сайтов: как избавиться от головной боли и сэкономить сотни часов рутинного труда...

11 04 2024 14:13:57

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

Пожар в дата-центре, неудачные обновления и то самое падение Facebook....

10 04 2024 22:10:38

Как успешно запустить интернет-магазины по продаже семян и саженцев в Болгарии, Чехии и Словакии — кейс Gradinamax

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

09 04 2024 2:42:18

10 полезных приемов работы в Редакторе AdWords

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

08 04 2024 18:55:22

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

Ежеквартальное исследование Netpeak по стоимости клика...

07 04 2024 22:46:56

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

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

06 04 2024 13:27:32

8 сервисов автопроверки on-page ошибок

Платные и бесплатные способы ускорить оптимизацию....

05 04 2024 13:20:43

Как бизнесу сэкономить на digital-услугах в кризис: 6 рабочих способов

Разбираем на примерах коллабораций, подрядчиков из регионов и тендендерных площадок...

04 04 2024 16:58:13

Google Колибри — все, что вы хотели знать о новом алгоритме

Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...

03 04 2024 19:13:58

Кейс по выводу из фильтра Google Panda интернет-магазина отопительной и водоснабжающей техники: ROMI 338%

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

02 04 2024 22:45:44

Как настроить автоматические правила в Facebook? Подробное руководство

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

01 04 2024 19:40:15

«Социальная сеть»: бой гения и плагиата

Наш обзор кинофильма «Социальная сеть» про Facebook и Марка Цукерберга....

31 03 2024 12:46:37

15 идей для таргетинга мобильного приложения в Facebook и Instagram

Готовые к использованию таргетинговые идеи для мобильных приложений онлайн в Facebook....

30 03 2024 8:34:30

Когортный анализ в Google ***ytics: пошаговая инструкция

Когорта в google ***ytics позволяет снять любые претензии в духе «прошел уже целый месяц, где результаты»....

29 03 2024 23:47:47

Как международному бренду занять свое место на новом рынке и в перегретой нише — SEO-кейс Domino’s Pizza

Для одной компании смена description это что-то пустяковое. Здесь же — настоящий бренд-менеджмент....

28 03 2024 14:31:22

Как вывести сайт из-под фильтра Яндекса за накрутку поведенческих факторов

Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...

27 03 2024 10:51:44

Миссия компании и как ее выполнить — кейс Netpeak

Миссия компании: делимся опытом создания и реализации в компании с 300 сотрудниками...

26 03 2024 13:49:19

Как провести A/B-тест сайта: инструменты и популярные гипотезы

22 оригинальные гипотезы для A/B-теста сайта, которые чаще всего влияют на получаемую прибыль...

25 03 2024 15:33:40

Гайд по системе умных заметок Zettelkasten — настройка, воркфлоу, лайфхаки

Как настроить программу Obsidian для удобной и быстрой работы по системе Zettelkasten....

24 03 2024 12:52:48

Google My Business: как локальному бизнесу получать 1000+ бесплатных запросов

7 советов для оптимизации вашего профиля в Google Мой Бизнес....

23 03 2024 14:30:52

Советы от Google для бизнеса — как вести себя в период неопределенности

Рекомендации от Google для бизнеса о поведении в период распространения коронавируса....

22 03 2024 21:46:29

Кейс по SEO-продвижению магазина сантехники, садовой техники, электроинструментов: ROMI 4157%

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

21 03 2024 19:17:24

SMM продвижение автомобильного бренда — «Дневники тест-драйвера»

Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...

20 03 2024 1:52:59

10 лучших книг о маркетинге

Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....

19 03 2024 22:13:17

7 признаков некачественных онлайн-курсов

Рассказываем, как обменять свои деньги на действительно полезные знания....

18 03 2024 10:42:12

Примеры писем интернет-магазинов: лучшие e-mail письма и рассылки клиентам после покупки

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

17 03 2024 11:36:48

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

Нет новых идей для развития рекламной компании? Одобренные рекомендации по поисковому продвижению от экспертов: спикеров и участников 8P 2018...

16 03 2024 23:33:13

К чему быть готовым продавцам одежды и обуви — пример тематической стратегии Netpeak

Советы специалистов по продвижению интернет-магазинов в сверхконкурентной нише одежды и обуви...

15 03 2024 6:57:34

Чаты для бизнеса от Яндекс: руководство по настройке

Идеи для интернет-маркетологов, как получить дополнительные каналы трафика и сделать заметным сниппет в поисковой выдаче....

14 03 2024 19:39:18

Как добавить сайт в Google ***ytics, Яндекс.Метрику и LiveInternet — пошаговое руководство

Как зарегистрировать и настроить новый сайт в сервисах веб-аналитики...

13 03 2024 18:25:55

Гонитесь за гарантией и прозрачностью в SEO-услугах? А их нет!

Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...

12 03 2024 1:38:50

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

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

11 03 2024 19:40:46

Что такое внутренние дубли страниц и как с ними бороться?

Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...

10 03 2024 0:35:23

Как запустить товарную рекламу, если у вас только YML-файл со списком товаров

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

09 03 2024 19:58:47

Как выбрать подрядчика для SEO и PPC: нанять агентство или создать инхаус-комaнду

Почему синергия штатных специалистов и рекламное дело агентства SEO/PPC выгодна бизнесу...

08 03 2024 0:31:25

Как наполнять контент-план — мнения редакторов

Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...

07 03 2024 6:38:39

WolframAlpha или Вычислительная Теория Всего

Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...

06 03 2024 22:55:37

Отделяем мух от котлет в контент-маркетинге

Пpaктическая информация о том, что и куда нужно постить....

05 03 2024 18:49:13

Кейс МегаДом. Как сдать в аренду 1200 кв. м торговых площадей в условиях пандемии

Особенности продвижения локального офлайн-бизнеса...

04 03 2024 9:17:56

Как найти фейковые 404 страницы с помощью Google Tag Manager

Как помешать фейковым 404 страницам испортить статистику вашего сайта?...

03 03 2024 5:40:16

Самые «нелепые» идеи успешных стартапов

2 любопытные истории и 8 успешных стартапов, которые вас удивят....

02 03 2024 19:26:16

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

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

01 03 2024 14:51:46

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

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

29 02 2024 18:52:43

Блогеры vs таргетинг: плюсы и минусы

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

28 02 2024 22:25:23

«Покажи свою работу»: Юрий Грузинский, руководитель отдела по работе с крупными клиентами

Как построить самостоятельную комaнду и научиться спокойно делегировать...

27 02 2024 17:33:59

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

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

26 02 2024 15:19:50

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