Как работать с 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
Комментарии:
Требования к интернет-магазину, мануал по регистрации, что может пойти не так...
01 04 2026 13:51:51
Лучшие плагины WordPress для SEO и продвижения сайта в поисковой системе Google и 10 советов для WordPress, которые помогут вам продвигать свой сайт...
31 03 2026 21:15:25
Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....
30 03 2026 3:49:27
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
29 03 2026 6:20:22
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
28 03 2026 1:39:55
Быстрая индексация: как оперативно узнать, попала ли важная для вас страница в поисковые системы Google и Яндекс....
27 03 2026 23:38:24
Полем битвы стала тематика кроваток, игрушек и прочих детских товаров, основным оружием в бою — контекстная реклама....
26 03 2026 2:24:15
Лихие девяностые и самые ужасные сайты интернета: образцы, примеры, оформление....
25 03 2026 12:37:21
Слорварь сленга, без которого к 25-летним не подходи...
24 03 2026 15:51:42
12 идей для видеоконтента и расскажем, где их лучше размещать, чтобы зрители стали клиентами. Как использовать видео для повышения продаж? Длинный, но все равно неполный список форматов. Читайте дальше и предлагайте свои варианты!...
23 03 2026 1:31:51
Делимся советами по оптимизации рассылок. Важны новые форматы писем, предварительное тестирование, смена тем письма, ярче CTA. Все это в сочетании с понятностью и искренностью не заставит ждать хороший CTR...
22 03 2026 22:38:21
3 часто задаваемых вопроса о раскрутке сайтов об эффективной организации SEO своими силами, способах проверки оптимизации сайта и о том, как быстро можно увидеть эффект от SEO. Узнайте больше!...
21 03 2026 21:40:28
Как создавать интеpaктивные рассылки-сайты и чем они хороши...
20 03 2026 23:30:59
SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...
19 03 2026 21:29:26
Почему важно знать детали создания и защиты уникального контента? Потому что это позволит защитить ваш сайт от санкций поисковых систем из-за неуникального контента...
18 03 2026 15:37:13
Сотрудники на рабочем месте расслаблены, игнорируют распоряжения, а при давлении угрожают увольнением. В эту ситуацию нередко попадают руководители. Некоторые считают, что причина — выстраивание дружеских отношений с подчинёнными....
17 03 2026 23:50:29
Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....
16 03 2026 18:31:14
Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....
15 03 2026 5:39:52
Среди интернет-маркетологов существует мнение, что медийная реклама — не перформанс-инструмент. То есть не приносит прямые конверсии. Когда медийные кампании продают — кейс центра тюнинга автомобилей премиум класса....
14 03 2026 7:56:45
Короткий прогон сервисов для аналитики активности в Твиттер....
13 03 2026 2:28:12
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
12 03 2026 10:42:31
Мануал по Microsoft Power BI — мощному инструменту для бизнес-аналитики. Освоив эту платформу, вы сможете с легкостью создавать понятные отчеты и обновлять их в режиме реального времени....
11 03 2026 9:46:13
Как заинтересовать инвесторов, сколько времени это займет, а также стратегии поиска....
10 03 2026 18:25:35
Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....
09 03 2026 21:49:49
Работа — рекламировать. Интервью с директором по стратегии агентства Smartica/Skykillers....
08 03 2026 12:11:21
Несложные рекомендации, как увеличить продажи с сайта и его мобильной версии с помощью инструментов Google: ***ytics, Tag Manager, Optimizer и форм-опросов. UX-специалисты Турум-бурум рекомендуют их для проверки сайта и используют в своей работе....
07 03 2026 16:23:18
Образец чек-листа по созданию форм заказа на сайте интернет-магазина...
06 03 2026 21:11:31
Повышаем узнаваемость бренда с помощью медийной кампании, а затем отслеживаем результат по запуску поисковой кампании с брендовыми запросами...
05 03 2026 2:27:49
Много интересных фактов о работе мозга и новейших исследованиях социологии и психологии....
04 03 2026 17:25:28
Несколько полезных советов перед запуском. Tрaнcпорт и путешествия, ритейл, медиа и развлечения — тематики, в которых чаще используют мобильные приложения. Есть и другие факторы популярности приложений. Узнать!...
03 03 2026 22:15:38
Краткая инструкция для новичков. Структура сайта, внутренняя перелинковка, юзабилити, контент, оптимизация тегов и заголовков, HTTPS, скорость загрузки сайта, mobile friendly и другие. Узнать больше!...
02 03 2026 20:26:18
О том, как сделать сайты интереснее и эффективнее. Гeймификация — применение игровых сценариев и элементов вне игровых контекстов. Это не про создание игр, это про поиск решений, которые помогут сделать любую работу интереснее. Читайте дальше!...
01 03 2026 13:47:30
В арсенале Google Рекламы есть очень ценный инструмент — отслеживание конверсий....
28 02 2026 15:26:17
29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...
27 02 2026 14:35:23
Шаблон по настройке и оптимизации динамических поисковых объявлений...
26 02 2026 9:55:50
Как достучаться до сердца блогера, или Автору звонят дважды...
25 02 2026 7:19:20
Инструменты интернет-маркетинга, которые вы не используете или используете не на сто процентов....
24 02 2026 5:47:34
До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....
23 02 2026 16:33:38
Список рекомендаций для SMM-специалистов. Статья будет полезна SMM-менеджерам, проектным менеджерам, а также владельцам бизнеса, которые предпочитают самостоятельно ставить комaнде задачи и отслеживать выполнение целей....
22 02 2026 9:53:32
Интересные детали интерьера в офисах украинских IT-компаний: от массажного стола и тенниса до звукозаписывающей студии и корпоративной велопарковки. Читать дальше!...
21 02 2026 11:28:59
Как настроить автоматическое обновление данных о товарах с помощью таблиц Google....
20 02 2026 21:14:34
Все, что нужно знать об UTM-метках: зачем использовать, как правильно сгенерить и анализировать....
19 02 2026 9:34:55
Убираем человеческий фактор при сборе отчетов по контекстной рекламе...
18 02 2026 11:53:47
Безопасность Instagram — что делать, если заметили попытку взломщиков украсть аккаунт, и как вернуть аккаунт после взлома....
17 02 2026 12:33:51
Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....
16 02 2026 14:58:48
Относящиеся к низкочастотным long-tail запросы при правильном подходе могут стать эффективным инструментом для увеличения трафика. Рассказываем почему, а главное — как....
15 02 2026 18:40:20
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
14 02 2026 8:52:42
5 важных навыков для новичков в PPC: как учиться, чтобы стать экспертом; секреты тайм-менеджмента, мотивации; тонкости оптимизации рабочего процесса. Узнать больше!...
13 02 2026 0:38:14
У нас на руках оказались все карты для создания собственного мини-рейтинга популярных сервисов email-рассылок....
12 02 2026 2:55:12
Комaнда Serpstat проанализировала стратегии продвижения лидеров ниши онлайн-образования. Читайте о главных инсайтах в посте....
11 02 2026 12:32:51
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
