Как работать с Open Graph
Поисковые системы обращают внимание на поведенческие факторы, в частности — внимание к сайту в социальных сетях. В свою очередь, протокол Open Graph позволяет использовать возможности соцсетей при поисковой оптимизации в полную силу. К тому же, повышает кликабельность ссылок на сайт, которыми делятся пользователи в своих профилях.
Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе Подробнее об этих факторах читайте в нашем посте «
Протокол Open Graph создан специалистами Facebook. Зачем его использовать? Чтобы сделать предпросмотр (превью) веб-страниц в социальных сетях смотрибельным. А в глобальном смысле — для воплощения идеи семантической паутины. То есть стандартизации всей информации во Всемирной паутине, чтобы она стала пригодна для автоматической обработки.
Зачем внедрять Open Graph
Сейчас Open Graph поддерживают большинство популярных соцсетей и мессенджеров:
Протокол также используется для передачи данных в Яндекс.Видео и помогает качественнее работать функции «Блоки рекомендуемого контента» в 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:
Хочу, чтобы мои соцсети продвигали маркетологи NetpeakВыводы
Open Graph —инструмент для формирования превью, который поддерживают большинство социальных сетей и мессенджеров. С помощью Open Graph можно:
- Рекламировать свой сайт в социальных сетях, создавая корректные превью страниц.
- Привлекать трафик из соцсетей кликабельными превью.
- Формировать не случайный, а продуманный предпоказ страницы.
- Наращивать поведенческие факторы и популярность среди пользователей соцсетей, которые будут репостить, лайкать и комментировать красивые превью.
Существуют несколько способов внедрения протокола Open Graph на сайте:
- Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины).
- Второй вариант посложнее — внедрить протокол напрямую в код страниц.
Подписывайтесь на Telegram-каналы основателей Netpeak
Комментарии:
Не можете найти нужны отчёт в Google ***ytics? Или хотите ускорить поиск нужных данных и отчётов. В помощь ⏩ Обзор к Google ***ytics Intelligence....
08 06 2026 10:53:15
Netpeak подводит итоги 2016 года и делится планами на будущее....
07 06 2026 19:46:50
Инсайты от специалистов агентства Netpeak о популярных тематиках, тенденциях, особенностях продвижения в карантин и кризис, новых правилах для контекстной рекламы и других способов продвижения. Чтобы узнать больше, читайте далее!...
06 06 2026 4:35:38
Что такое посол бренда и чем он отличается от адвоката бренда?...
05 06 2026 10:21:30
Сет по контекстной рекламе в тематике «разработка программного обеспечения»: снижение стоимости клика на 89%....
04 06 2026 1:26:14
И уж если бумага стерпит все, интернет — тем более, а значит онлайн-исповедальне быть! И не только ей......
03 06 2026 0:55:52
Время, потраченное на исправление ошибок, допущенных на этапе подготовки и создания сайта, убивает потенциал роста видимости ресурса....
02 06 2026 23:52:33
Все успешные люди немного сомневаются в своих достижениях и рефлексируют о большом количестве ошибок. Не ок, когда сомнения затягивают и разрушают самооценку, создают постоянное напряжение. Давайте разбираться с синдромом самозванца....
01 06 2026 19:58:10
Отличный кейс Ольги Костовой. Увеличивая бюджет на рекламу вдвое, вы начинаете заpaбатывать не вдвое больше, а в 2.5, 3 и так далее раз больше. На примере кейса показываем, как это происходит. Читать дальше....
31 05 2026 14:11:45
В продажах лучше визуализировать путь потребителя в виде нейронных сетей....
30 05 2026 23:43:20
При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....
29 05 2026 21:29:11
Tencent — китайская компания, мировой лидер в сфере игр. Все о создании компании, доходах, прибыли, инвестициях. Особенности ведения бизнеса в Китае — в пересказе статьи Паки Маккормик. Читать дальше!...
28 05 2026 0:45:53
Твиттереть нужно правильно. Интересная аналитики и планирование твитов по времени...
27 05 2026 0:35:22
Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...
26 05 2026 3:33:13
Офис Netpeak в Харькове официально открыт! В этом посте, вместо игры на фанфарах, мы на собственном примере рассмотрим, что нужно для создания регионального отделения в разгар кризиса....
25 05 2026 4:41:29
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
24 05 2026 2:46:22
Кейс по росту органического трафика на сайте интернет-магазина на платформе Summer Cart....
23 05 2026 17:47:30
Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...
22 05 2026 7:30:47
Почему дешевый копирайт не подходит для текстов карточки товара...
21 05 2026 14:50:16
Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....
20 05 2026 6:46:11
У нас было 500 вечнозеленых постов и желание понять алгоритм ленты Facebook....
19 05 2026 3:29:33
Если выполнить настройку не корректно, поисковик воспримет материалы как дубли контента....
18 05 2026 17:49:43
Что нужно, чтобы реклама в интернете приносила прибыль....
17 05 2026 20:15:46
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
16 05 2026 11:37:14
Несколько фишек Google Tag Manager, чтобы сделать продвинутые списки ремаркетинга....
15 05 2026 7:46:33
Как купить дешевый трафик из Facebook? Образец работы со структурой рекламного аккаунта...
14 05 2026 11:29:41
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
13 05 2026 18:48:42
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
12 05 2026 7:27:50
![Дополнительные ценности Netpeak — что вы получаете при заказе [SEO 2.0] вместе с поисковым продвижением](/marketing-raw/img/751.php.jpg "Дополнительные ценности Netpeak — что вы получаете при заказе [SEO 2.0] вместе с поисковым продвижением")
В коробку [SEO 2.0] вместе с самим поисковым продвижением входят дополнительные ценности Netpeak: унифицированные действия по увеличению продаж, улучшения удобства работы и преимущества бренда Netpeak...
11 05 2026 20:34:27
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
10 05 2026 7:59:45
Как создать и внедрить баннеры об использовании куки-файлов с помощью Google Tag Manager и OneTrust...
09 05 2026 13:26:17
Как формируется цена на услугу онлайн-рекламы в специализированном агентстве, и на какие бюджеты предпринимателям стоит ориентироваться...
08 05 2026 4:40:29
Google Data Studio: подробная инструкция и обзор возможностей...
07 05 2026 9:35:48
Истории бизнеса и советы от Игоря Жаданова (Readdle), Александра Галкина (Competera) и Рагнара Саас (Pipedrive)...
06 05 2026 0:49:57
Под какие треки работают интернет-маркетологи, копирайтеры и другие специалисты digital-рынка....
05 05 2026 0:13:30
Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....
04 05 2026 23:27:15
Поисковая реклама для службы доставки еды — пpaктические советы, как выделиться на фоне конкурентов в популярной нише. На примере харьковской доставки пиццы мы покажем, как правильно продавать еду. Читайте в статье!...
03 05 2026 20:38:29
Продвижение сервисного центра техники Total Apple в Москве....
02 05 2026 13:48:46
Ошибка, которая может привести к полной потере контроля над вашим сайтом. Рассказываем, что это такое, какие могут быть причины поломки и как исправить. Узнать больше!...
01 05 2026 1:11:56
Как увеличить количество транзакциий, сохранив прибыльность кампании в РСЯ?...
30 04 2026 7:25:51
Google Adwords: типы рекламных кампаний и объявлений, тонкостях настройки... Все, о чем вы боялись спросить... Или не боялись, а просто не знали, о чем спрашивать....
29 04 2026 16:50:10
Одесские магазины, где продают вечерние и свадебные платья нуждаются в особом внимании интернет-маркетинга. Как настроить контекстную рекламу для малого и среднего бизнеса со скромными маркетинговыми бюджетами...
28 04 2026 10:25:50
Об особенностях реализации интернет-проектов в Великобритании, России и Казахстане и фишках успешного ведения бизнеса онлайн мы побеседовали с Владимиром Меркушевым — руководителем интернет-проектов успешной казахстанской компании Kolesa.kz....
27 04 2026 17:19:15
Интересные детали интерьера в офисах украинских IT-компаний: от массажного стола и тенниса до звукозаписывающей студии и корпоративной велопарковки. Читать дальше!...
26 04 2026 9:47:26
В этой статье мы поговорим про принципы работы СRM-системы. Это базовые моменты, прояснив которые СRM перестанет быть для вас чем-то сложным и непонятным....
25 04 2026 12:34:10
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
24 04 2026 8:23:19
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
23 04 2026 10:31:53
Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...
22 04 2026 8:32:31
Как стать лидером ниши не на словах, а на деле. Пошаговый алгоритм....
21 04 2026 16:34:14
Ringostat и Binotel. Сравнение главных сервисов для коллтрекинга в Украине...
20 04 2026 0:50:55
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
