Как работать с 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
Комментарии:
Мотивация сотрудников к работе с текстами. Опыт бюро копирайтинга Texbroker...
16 03 2026 22:12:56
Ссылки нужно не только наращивать, но и постоянно посещать и мониторить качество уже существующих....
15 03 2026 6:50:39
Настройка целей в Google ***ytics, а также отслеживание событий....
14 03 2026 16:17:58
Эффективность контекстной рекламы в тематике «тюнинг автомобилей»....
13 03 2026 14:15:23
Как связываться с клиентами и что делать, чтобы качество обслуживания не просело. Менеджер, который обpaбатывает звонки со своего мобильного, остается без контроля, поэтому АТС оказывается идеальным решением. Разбираемся в статье!...
12 03 2026 17:59:41
Сбор анкет до 16 декабря, публикация результатов в конце декабря...
11 03 2026 18:28:36
Работаете со скриптами R регулярно? Потратьте десять минут на настройку автозапуска и избавьтесь от необходимости активировать R-скрипты вручную...
10 03 2026 18:34:28
Четкая структура полноценного письма с примерами из рассылок крупных компаний: Aviasales, LinguaLeo, Rozetka, Yves Rocher, Pich Shop, Эльдорадо и другие....
09 03 2026 22:14:34
Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...
08 03 2026 7:54:36
Отныне мы можем настраивать показы рекламы на мужчин и женщин определенной возрастной группы....
07 03 2026 19:10:19
Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....
06 03 2026 4:17:59
+ таблица с примерами использования каждой функции....
05 03 2026 0:28:10
Повышаем узнаваемость бренда с помощью медийной кампании, а затем отслеживаем результат по запуску поисковой кампании с брендовыми запросами...
04 03 2026 17:57:42
Наибольший эффект по продвижению сайта при минимальных затратах — именно таков принцип SEO growth hacking. Как найти кратные точки роста, читайте статье....
03 03 2026 5:31:10
Персональная стратегия продвижения онлайн с помощью SEO и контекстной рекламы....
02 03 2026 6:38:33
О проблеме с передачей данных об A/B-тестах в Google ***ytics...
01 03 2026 11:13:18
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
28 02 2026 4:43:20
Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....
27 02 2026 10:38:52
Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...
26 02 2026 14:22:51
Дизайнер, в частности технический дизайнер баннеров, — человек, который оформляет конкретную идею, текст и логотип в приемлемую визуальную форму. Все делают это по-разному, но конечный результат всегда зависит от четкости поставленной задачи...
25 02 2026 9:28:26
Кейс продвижения Pizza House — ROMI 709,9%. От старта с дублями страниц и постановки целей и задач продвижения, проведения технического аудита, аналитики, анализа поисковых фраз, выбора контента до экспериментов с метатегами, увеличения среднего чека и планов на будущее...
24 02 2026 23:47:19
Краткое сравнение двух инструментов и третьего на закуску....
23 02 2026 7:12:58
Кейс по росту органического трафика на сайте интернет-магазина на платформе Summer Cart....
22 02 2026 23:37:34
Если маркетер хочет привлечь к бренд-контенту дополнительное внимание, стоит воспользоваться опцией Promote post....
21 02 2026 23:57:45
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
20 02 2026 1:58:17
Рецензия на книгу «Нейромаркетинг в действии» Дэвида Льюиса...
19 02 2026 19:59:35
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
18 02 2026 12:38:16
Информация поможет вам в составлении медиапланов. Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, можно оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
17 02 2026 1:26:24
Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...
16 02 2026 23:42:39
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
15 02 2026 11:50:48
Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...
14 02 2026 18:17:39
Как сделать красиво. Алгоритм подготовки красивых и понятных презентаций, рекомендации и полезные ссылки, а также простые правила хорошего тона в дизайне Google Презентаций. Узнать больше и сделать свою презентацию эффективнее!...
13 02 2026 0:42:10
HR-советы компаниям, которым нужно найти больше трех джунов в проект...
12 02 2026 9:58:57
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
11 02 2026 15:50:53
Опции скриншутера, которые упростят вам жизнь....
10 02 2026 17:54:52
12 идей для видеоконтента и расскажем, где их лучше размещать, чтобы зрители стали клиентами. Как использовать видео для повышения продаж? Длинный, но все равно неполный список форматов. Читайте дальше и предлагайте свои варианты!...
09 02 2026 3:56:10
Что нужно знать о целевой аудитории, как грамотно воровать у других и что нужно сделать, чтобы настроить идеальную рекламную кампанию....
08 02 2026 2:47:26
Суть бренда на одном дыхании: о рекламе с любовью. Изначально под большой идеей мы пониманием ту пользу, которую несет бренд в окружающий его мир. Помимо этого, большая идея — это те «рельсы», по которым будут ехать все коммуникации бренда в течение нескольких лет...
07 02 2026 20:57:35
И помните: плохих названий нет, если у вас есть большие деньги....
06 02 2026 8:15:57
Чем радовала, удивляла и шокировала таргетированная реклама в социальных сетях...
05 02 2026 16:38:20
История Affise от фаундера компании, рассказанная на SaaS Nation....
04 02 2026 18:27:58
Семинар с примерами юзабилити решений от Twitter, Airbnb, Amazon и других компаний....
03 02 2026 23:15:33
5 кейсов отлично иллюстрируют правила юзабилити и находки веб-аналитиков....
02 02 2026 19:59:28
Корзина интернет-магазина поможет повысить продажи, если ее функционал содержит: фото товара, кликабельное наименование товара, перечень способов оплаты. Узнать больше!...
01 02 2026 18:28:42
Как быстро определить, что ваш подрядчик плохо работает с рекламной кампанией....
31 01 2026 4:12:27
В семье Leo Burnett - 7750 человек из 84-х стран мира. В Украине всего - 90 творческих единиц....
30 01 2026 22:33:16
Узнайте, как пользоваться Инспектором и внутренними диаграммами Facebook, чтобы быть в лидерах своей ниши!...
29 01 2026 14:54:31
Мы решили организовать серию вебинаров по SEO и предоставить их бесплатно. История о том, как с нуля при минимуме затрат создать успешный онлайн-курс...
28 01 2026 10:53:52
Таблицы Google позволят перенести рекламную кампанию и сохранить при этом ключевые слова в разных типах соответствия. Подробный мануал — в новом посте....
27 01 2026 1:33:34
Пользователи могут смотреть вирусные ролики без единого слова...
26 01 2026 17:38:30
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
