Как работать с 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
Комментарии:
Что делать, когда не получается заставить себя написать статью или кейс...
23 07 2026 18:40:28
В течение месяца нам удалось наладить рассылку с новой платформы....
22 07 2026 13:27:35
Слорварь сленга, без которого к 25-летним не подходи...
21 07 2026 13:55:38
Пример, как 4000+ гривен превращаются в 45000+ гривен. Ниша интернет-магазинов, да еще и бытовой техники уже давно является высококонкурентной. Но при правильном продвижении даже новичок может добиться результатов....
20 07 2026 0:11:58
Интересные факты про Google Рекламу перевел Сергeй Бахарь для читателей нашего блога....
19 07 2026 14:28:36
И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....
18 07 2026 1:29:25
Многие недооценивают триггерное письмо после оформления покупки, а зря. И вот почему....
17 07 2026 13:57:12
SEO-dashboard для сбора данных в Google-таблицы и отправка отчетов по email. Решение, которое поможет заметить глобальные изменения в потоках трафика. Узнать больше!...
16 07 2026 12:42:47
Большой проект Джима Коллинза и его комaнды. Одна из лучших книг в нашей библиотеке. Всем рекомендуется к прочтению!...
15 07 2026 22:56:48
Безопасность Instagram — что делать, если заметили попытку взломщиков украсть аккаунт, и как вернуть аккаунт после взлома....
14 07 2026 6:11:55
Клиентоориентированный бизнес должен знать, чего хотят покупатели. И лучше понять это еще на этапе идеи. Как — читайте чек-лист от Влада Ноздрачева....
13 07 2026 15:31:28
Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...
12 07 2026 13:12:37
Ошибка, которая может привести к полной потере контроля над вашим сайтом. Рассказываем, что это такое, какие могут быть причины поломки и как исправить. Узнать больше!...
11 07 2026 21:22:16
Крутые площадки для нового инструмента: контекстщикам на заметку!...
10 07 2026 16:29:12
Правила, требования, особенности. А ещё примеры, которые помогут создать правильную, с точки зрения поисковиков, рекламу. Читать!...
09 07 2026 14:46:36
Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....
08 07 2026 2:27:16
Клиентам не нужно ориентироваться на попадание к поисковым топам выдачи...
07 07 2026 22:26:59
Грабберы — программы, позволяющие автоматизировать процесс сбора и публикации контента. С помощью грабберов, помимо парсинга контента, осуществляют перевод и уникализацию текстов....
06 07 2026 17:22:38
Насколько классно продается женская одежда в интернете....
05 07 2026 12:33:26
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
04 07 2026 8:17:40
Как сделать приятно подписчику в день его рождения, на Новый год и в любой другой праздник....
03 07 2026 0:42:17
Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....
02 07 2026 3:41:14
Как настроить отправку писем с помощью языка R и как избежать подводных камней....
01 07 2026 4:14:22
Nommi — сокращение от nomadic MiFi: роутер для современных цифровых кочевников...
30 06 2026 15:27:46
Анализ цены за клик в 25 тематиках и 852 городах Украины, России, Казахстана, Болгарии...
29 06 2026 8:21:18
При создании проекта и выбора доменного имени важно взвесить плюсы и минусы использования домена с историей...
28 06 2026 19:41:49
Всё что нужно знать про контекстную рекламу — Как выглядит, какая бывает, сколько стоит, популярные сервисы и др....
27 06 2026 2:42:47
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
26 06 2026 3:26:51
Cтоимость просмотра в Google Ads дешевле как минимум в два раза по сравнению со Smart TV...
25 06 2026 15:51:29
Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....
24 06 2026 22:36:13
В помощь вебмастерам, которые поддерживают работу PBN....
23 06 2026 13:45:34
Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...
22 06 2026 5:45:58
И чем этот тип отслеживания событий отличается от Client-side. Узнать!...
21 06 2026 19:28:14
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
20 06 2026 5:20:32
Надежный сайт позволит вести успешную деятельность, защитить плоды собственного труда и результаты работы исполнителей, с которыми вы сотрудничали. Для реализации задумки вам понадобятся авторские права....
19 06 2026 14:35:48
Мотивация сотрудников к работе с текстами. Опыт бюро копирайтинга Texbroker...
18 06 2026 4:24:27
Как узнать, что потенциальный сотрудник креативный, умеет убеждать, работать в комaнде, адаптироваться к быстрой смене условий, владеет эмоциональным интеллектом? Вопросы для проверки этих софт-скиллов здесь....
17 06 2026 10:38:28
Еще организовали новую онлайн-конференцию, запустили опрос онлайн-покупателей, создали SEO-услугу для крупного бизнеса, рассказали, как вести В2С и В2В аккаунты в Instagram и ввели консультации SMM-специалистов....
16 06 2026 4:53:44
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
15 06 2026 17:33:32
Алгоритм технической подготовки IP-адреса к массовым рассылкам...
14 06 2026 21:12:34
Отличный способ мотивации, который мы попробовали и вам рекомендуем....
13 06 2026 2:58:22
Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...
12 06 2026 5:21:41
Подборка для застройщиков, маркетологов и менеджеров по продажам...
11 06 2026 18:43:36
Как снизить стоимость лидов путём использования новых технологий...
10 06 2026 21:31:59
Создаем фид товаров, настравиваем код и списки динамического ремаркетинга для интернет-магазинов в странах, где отсутствует Google Merchant Center....
09 06 2026 19:20:40
Эффективное PPC благодаря правильной аналитике....
08 06 2026 11:59:50
Результаты, которых мы достигли за 2 месяца работы....
07 06 2026 4:58:44
Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....
06 06 2026 4:50:23
Проведение краудфандинговых кампаний — это бизнес. Это отдельный и вполне серьёзный рынок с уймой заточенных под ваши нужды услуг. Раньше нужно было ждать, пока проект пройдет обязательную проверку сотрудником Kickstarter, сейчас можно запускать кампанию...
05 06 2026 10:24:10
Google Adwords: типы рекламных кампаний и объявлений, тонкостях настройки... Все, о чем вы боялись спросить... Или не боялись, а просто не знали, о чем спрашивать....
04 06 2026 1:45:24
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
