Как работать с 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
Комментарии:
Про работу мозга и запоминание из книги Торкеля Клинберга «Информационный поток и пределы рабочей памяти» и обзор игр Lumosity....
02 11 2026 19:48:14
Все дело в формате объявлений Instant Experience с подключенным каталогом товаров. Нет, не только в нем. Узнать больше!...
01 11 2026 16:48:41
Большинство рекламодателей знают и используют только 4-5 видов таргетинга, а остальные оставляют без внимания. А ведь правильно подобранная аудитория — это один из залогов успеха рекламной стратегии. Поэтому обязательно тестируйте новые таргетинги...
31 10 2026 15:53:13
На вопрос «как все успеть?» хочется ответить что-то вроде «никак». Особенно, если дело касается задач, связанных с творчеством. Но можно и не срывать дедлайны. Читать дальше....
30 10 2026 8:48:30
Раскрываем тайны показателя качества в рекламе гугл с помощью API...
29 10 2026 1:51:19
Как найти, нарастить и проанализировать ссылочную массу...
28 10 2026 8:40:38
Тренды, рекомендации, уроки, инструкции, а также вакансии, идеи, кейсы и всё, что поможет оставаться в теме, находить интересные проекты и вдохновляться. Читать дальше....
27 10 2026 9:31:52
Подборка онлайн-платформ и программ для работы с текстом и изображениями....
26 10 2026 0:18:27
Личный кабинет на сайте: что нового во внешнем виде, внутренностях и отчетах, функционале и юзабилити, автоматизации работы с оплатами, интернет-представительстве клиента и для специалистов. Узнайте больше!...
25 10 2026 15:35:29
Список инструментов email-маркетолога для рассылок по англоязычной аудитории....
24 10 2026 22:43:49
Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...
23 10 2026 14:45:44
Amazon сократил комиссию для сайтов партнеров от 30% до 80% — что делать дальше? Мнение эксперта....
22 10 2026 23:30:31
Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...
21 10 2026 19:13:23
Инструкция для новичков по одновременной работе с кампаниями, а также объявлениями и группами в Яндекс.Директ...
20 10 2026 9:26:15
Кейсы, фишки и советы, опыт крупных брендов, маркетологов....
19 10 2026 9:14:33
Делаем первые шаги к созданию системы email-коммуникаций бренда....
18 10 2026 19:55:12
Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....
17 10 2026 18:32:37
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
16 10 2026 19:21:36
Портал-каталог организаций и его продвижение. В этом кейсе мы детальнее остановимся на выгодах для проекта от синергии усилий клиента и агентских специалистов по контекстной рекламе...
15 10 2026 10:39:34
Большинство покупателей предпочитают безналичный расчет, желают иметь разные варианты оплаты. Как их наличие или отсутствие влияет на средний чек?...
14 10 2026 1:11:58
Чем радовала, смущала и шокировала реклама в социальных сетях в марте 2021-го...
13 10 2026 23:21:33
Делимся советами по оптимизации рассылок. Важны новые форматы писем, предварительное тестирование, смена тем письма, ярче CTA. Все это в сочетании с понятностью и искренностью не заставит ждать хороший CTR...
12 10 2026 18:44:14
Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....
11 10 2026 7:27:33
21 апреля Google официально начнет учитывать совместимость с мобильными девайсами в качестве одного из факторов ранжирования сайта в мобильном поиске. Что это значит для владельцев сайтов и вебмастеров? Мы подготовили небольшой FAQ по теме для рубрики «SE...
10 10 2026 7:37:12
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
09 10 2026 16:42:28
Чем вам может пригодиться это исследование? Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Читать!...
08 10 2026 4:31:18
Открываем интернет-магазин за один день. Комплекс UniTheme от AlexBranding и Netpeak включает CMS CS-Cart, современный шаблон и 11 SEO-модулей...
07 10 2026 17:32:22
Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...
06 10 2026 10:34:55
Мы решили узнать, как дорого обходятся рекламодателям клики по объявлениям в разных странах и тематиках, чтобы читателям блога было удобнее планировать бюджет на рекламные кампании....
05 10 2026 8:45:21
Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....
04 10 2026 5:32:21
Чтобы и клиенту не стыдно было показать и свои ожидания не обмануть....
03 10 2026 1:39:43
Что такое идеальное время доставки почты и как его использовать для повышения кликабельности email-кампаний....
02 10 2026 18:13:31
Информация поможет вам в составлении медиапланов. Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, можно оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
01 10 2026 13:12:48
Лучшие фишки от спикеров конференции 8P 2020. В конце каждой конференции спикеры 8P собираются за круглым столом, чтобы поделиться пpaктически применимыми советами, которые можно внедрить в свой проект и сразу почувствовать отдачу...
30 09 2026 3:41:58
Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....
29 09 2026 10:18:20
Краткий обзор динамических мультимедийных объявлений...
28 09 2026 22:16:49
Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....
27 09 2026 5:30:48
Положительная динамика с первых месяцев работы....
26 09 2026 9:47:16
Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, вы можете оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
25 09 2026 16:47:10
Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....
24 09 2026 14:11:53
Email-маркетинг — хороший полицейский, спам — плохой....
23 09 2026 11:40:13
Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....
22 09 2026 6:15:48
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
21 09 2026 22:30:42
Рекомендации по ведению переговоров в непростых условиях....
20 09 2026 2:46:48
Как провести крутую конференцию по интернет-маркетингу, сделать трaнcляцию этой конференции и вместо сухих репортажей подготовить полезный контент для СМИ. Узнать больше....
19 09 2026 3:44:53
Как сделать рекламу в Universal App Campaign 2.0 максимально эффективной...
18 09 2026 15:30:36
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
17 09 2026 15:56:56
Как помешать фейковым 404 страницам испортить статистику вашего сайта?...
16 09 2026 23:24:22
Откуда берутся установки и стоит ли тратить деньги на покупку мотивов...
15 09 2026 5:53:13
Относящиеся к низкочастотным long-tail запросы при правильном подходе могут стать эффективным инструментом для увеличения трафика. Рассказываем почему, а главное — как....
14 09 2026 21:18:24
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
