Как работать с 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
Комментарии:
Как сделать приятно подписчику в день его рождения, на Новый год и в любой другой праздник....
16 07 2026 21:26:59
Как правильно писать нарицательное слово «интернет»....
15 07 2026 18:50:36
Помимо полезного и качественного продукта, услуги, компании нужен мощный маркетинг. И возможно это только благодаря хорошему директору по маркетингу. Только так это работает. Кто лучшие в этой нише в Казахстане? Узнать!...
14 07 2026 11:42:45
Как помешать фейковым 404 страницам испортить статистику вашего сайта?...
13 07 2026 14:24:18
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
12 07 2026 2:19:26
Открываем интернет-магазин за один день. Комплекс UniTheme от AlexBranding и Netpeak включает CMS CS-Cart, современный шаблон и 11 SEO-модулей...
11 07 2026 5:46:45
Какие фишки влияют на видимость сайтов? Советы по юзабилити от SEO-специалиста....
10 07 2026 18:33:29
Детально заполняйте карточку товара, добавляйте качественные фотографии, делайте акцент на УТП....
09 07 2026 4:56:39
Бесплатно, быстро и безопасно. Но есть и минусы. Узнать больше!...
08 07 2026 2:22:15
Применяя фишки, можно выделить релевантную аудиторию и продать ей что угодно — от кроссовок до президента....
07 07 2026 8:53:22
Четыре способа исключить нерелевантные места размещения видеорекламы, а также полезные списки минус-слов и детских YouTube-каналов....
06 07 2026 6:28:51
Самые популярные блоги Рунета по интернет-маркетингу — все RSS-фиды в одном месте...
05 07 2026 20:18:10
Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...
04 07 2026 6:40:15
Как говорят легенды, на создание дизайна этих носочков Sammy Icon вдохновили рисунки на стенах храма Темпло Майор в древнем городе Теночтитлан. К сожалению, город сейчас разобрали перуанские строители, но память о нем осталась в киевских носках...
03 07 2026 4:39:50
K-pop заpaбатывает деньги: как и сколько...
02 07 2026 20:44:49
Обойдемся без теории, зато покажем пример SEO-аудита...
01 07 2026 23:11:28
Новости агентства Netpeak за предыдущий квартал. Появление отдела веб-аналитики. Открыли услугу «Создание и ведение блогов». Добавили мультивалютность. Глобально изменили скрипт Netpeak X-Reference. Запустили серию писем. Что еще?...
30 06 2026 8:13:58
Как понравиться поисковым системам и пользователям....
29 06 2026 13:46:24
Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...
28 06 2026 9:16:24
Конкректная цель — конкретные результаты трудоустройства...
27 06 2026 1:13:39
Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...
26 06 2026 13:16:35
Об особенностях реализации интернет-проектов в Великобритании, России и Казахстане и фишках успешного ведения бизнеса онлайн мы побеседовали с Владимиром Меркушевым — руководителем интернет-проектов успешной казахстанской компании Kolesa.kz....
25 06 2026 1:21:31
Мы решили узнать, как дорого обходятся рекламодателям клики по объявлениям в разных странах и тематиках, чтобы читателям блога было удобнее планировать бюджет на рекламные кампании....
24 06 2026 5:14:33
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
23 06 2026 16:20:34
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
22 06 2026 12:39:11
Как делать большие деньги даже, когда случаются кассовые разрывы и каким образом строить процессы внутри компании, чтобы сотрудники горели своим (вашим) делом? Узнать!...
21 06 2026 2:53:20
Когда саппорт-отдел не справляется, подключайте к работе ПланФикс и Телеграм....
20 06 2026 13:21:50
Готовые триггерные письма и сценарии позволяют быстро запустить триггеры после реализации технических заданий разработчиком....
19 06 2026 12:18:13
Большинство рекламодателей знают и используют только 4-5 видов таргетинга, а остальные оставляют без внимания. А ведь правильно подобранная аудитория — это один из залогов успеха рекламной стратегии. Поэтому обязательно тестируйте новые таргетинги...
18 06 2026 0:43:46
Будьте полезны, будьте удобны и будьте везде. Далее подробно — 18 способов собрать базу для email-рассылок. О пользе бесплатного, привлечении внимания, возможных активностях для аудитории, социальных доказательствах, предсказуемости, работе с Facebook и многом другом...
17 06 2026 8:38:46
Что ждет новичка в его первый день работы в Netpeak — подарки, первые задачи и традиции компании. Все, что нужно знать, чтобы меньше волноваться и влиться в коллектив. Узнать больше!...
16 06 2026 19:57:42
Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....
15 06 2026 6:28:38
Зачем размещаться на AppSumo и как запустить продукт в 2021 году? Лайфхаки по размещению, личный опыт и результаты по проведенной кампании...
14 06 2026 13:25:40
Не путайте с контент-менеджером, пожалуйста....
13 06 2026 21:20:16
От идеи для стартапа до плана развития и масштабирования бизнеса. Познавательные, полезные каналы, которые помогут реализовать смелые бизнес-цели. Узнать больше!...
12 06 2026 7:39:47
Как мы недооценили уровень конкуренции в нише, и как пришлось с этим бороться, чтобы принести пользу клиенту....
11 06 2026 8:14:36
Как проверить качество текста от копирайтера. Составляем техническое задания для копирайтера, проверяем уникальность, наличие ключевых слов, использование LSI, проводим семантический анализ текста....
10 06 2026 9:30:28
Статья Оливера Гарднера посвящена различным аспектам оптимизации посадочных страниц: дизайну, контексту, созданию кнопки действия...
09 06 2026 13:28:13
Через тернии к кейсу. SEO-продвижение интернет-магазина отопительного оборудования с оплатой за трафик...
08 06 2026 23:44:10
Подружим GTM и Метрику с минимальным вовлечением программиста....
07 06 2026 0:10:38
UTM-метки позволяют эффективно отслеживать источники трафика. Но составлять их нужно правильно. Как именно, давайте разбираться....
06 06 2026 0:41:48
Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....
05 06 2026 13:49:10
Рекомендации по ведению переговоров в непростых условиях....
04 06 2026 4:10:46
Как мы проводили самую летнюю конференцию в условиях постлокдayна, пандемии и неизвестности....
03 06 2026 13:35:12
Результаты грамотного внедрения технического SEO-аудита...
02 06 2026 8:59:44
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
01 06 2026 4:36:25
Доступно объясняем, как пользоваться и не типичными для экспертов по контекстной рекламе программами. Например, созданными для разработчиков. Узнать больше!...
31 05 2026 20:26:44
Как правильно читать отчеты в Панели вебмастеров Google — объясняем на примерах из пpaктики....
30 05 2026 7:34:15
Структура того, чем обладают сотрудники департаментов работы с клиентами лучших компаний....
29 05 2026 1:13:35
Основатель Depositphotos и Clashot Дмитрий Сергеев рассказал нам о базовых правилах ведения бизнеса на западном рынке....
28 05 2026 17:41:45
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
