Как работать с 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
Комментарии:
Примеры инновационных проектов. Нескучная рецензия на интересную книгу....
17 04 2026 13:59:15
Новая услуга от Netpeak по ведению Instagram и Facebook...
16 04 2026 5:26:49
Анализ пути — это как многокaнaльные последовательности в Universal ***ytics, только лучше....
15 04 2026 14:50:12
Расширения, горячие клавиши и мгновенный перевод слов на другой язык — минимум лайфаков, которые можно использовать для удобства пользователей Google Chrome...
14 04 2026 5:30:13
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
13 04 2026 9:45:57
Уверены, что аппы в украине не приносят денег? В этом кейсе мы расскажем, как увеличить доход с мобильного приложения, и поделимся результатами продвижения LeBoutique...
12 04 2026 3:36:15
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
11 04 2026 7:27:42
VPN — технология анонимного сетевого подключения. Она позволяет организовать подсеть в уже существующем соединении. Поверхностная сеть закрыта от внешнего доступа, потому вмешаться в нее не смогут. Чтобы узнать больше, читайте дальше!...
10 04 2026 12:34:36
Открытие проверенных действий по увеличению продаж...
09 04 2026 5:21:49
Хороший пост с примерами продающих «Белых книг»....
08 04 2026 17:23:27
Советы и даже требования SEO-специалистов к разработчикам сайтов....
07 04 2026 4:43:56
Первая часть иллюстрированного руководства, в котором мы взяли 20 самых важных фактора ранжирования представлены с краткими иллюстрированными примерами. В этом тексте вы найдете первые 10. Узнать больше!...
06 04 2026 11:58:41
Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....
05 04 2026 10:40:27
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
04 04 2026 16:45:10
Примерно 70% конверсий происходит за счет дополнительных источников, их ценность отражается в GA. Разбираемся, какие отчеты использовать для анализа и оценки таких источников. Читайте далее!...
03 04 2026 7:14:18
Как изменилось агентство Netpeak c августа по октябрь? Читайте о семи главных нововведениях и улучшениях в работе с клиентами....
02 04 2026 7:48:41
Эти данные пригодятся в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Читать!...
01 04 2026 1:20:38
Опыт контент студии WordFactory и 14 экспертов интернет-маркетинга....
31 03 2026 6:43:23
Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...
30 03 2026 14:50:38
Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....
29 03 2026 13:25:16
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
28 03 2026 17:33:53
Корневой каталог это папка, содержащая все файлы на сайте, в том числе системные файлы....
27 03 2026 15:20:19
Бывают случаи, когда код Google ***ytics перестает вообще собирать статистику. Чтобы выявить сбой вовремя, обязательно настройте эти оповещения....
26 03 2026 18:48:25
Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...
25 03 2026 20:38:25
Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...
24 03 2026 13:17:56
Facebook раскрывает алгоритм формирования новостной ленты...
23 03 2026 3:13:24
Клиникка использует лазеры и нуждается в продвижении. В специфических сферах привлечь потребителя впервые бывает сложнее и дороже, чем удержать его. Этот кейс о том, как повысить количество обращений новых клиентов с помощью видеорекламы...
22 03 2026 5:44:45
Конференцию eCommerce будет развивать комaнда Octopus Events...
21 03 2026 17:53:19
Как автоматизировать рутину в Google Таблицах с помощью Google Apps Script...
20 03 2026 20:44:31
Дизайн макета сайта должен полностью соответствовать представлениям о готовом ресурсе. Создать его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код...
19 03 2026 4:15:55
Впереди ещё черная пятница и новогодние праздники. И успех массовых распродаж можно повторить....
18 03 2026 10:57:30
Как добавить данные о компании на карты Google и Яндекс....
17 03 2026 21:31:54
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
16 03 2026 22:31:35
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
15 03 2026 2:47:24
Инсайты от специалистов агентства Netpeak о популярных тематиках, тенденциях, особенностях продвижения в карантин и кризис, новых правилах для контекстной рекламы и других способов продвижения. Чтобы узнать больше, читайте далее!...
14 03 2026 16:12:57
Анализируя поведение аудитории, вы сможете понять, почему клиенты приходят на сайт, почему уходят, и почему не делают заказы....
13 03 2026 5:14:41
Грамотный контент важен для всех, но особенно — для аутсорсов и стартапов в B2B. Если вы согласны с этим, давайте делать медиа....
12 03 2026 4:41:51
Неля Серебро рассказывает про внутреннюю кухню блога Netpeak...
11 03 2026 11:17:12
Три способа парсинга данных с помощью Owox BI Pipeline, Mix Data BI Import, Owox BI Power Upload....
10 03 2026 8:59:11
Как и где найти хорошего автора для вашего сайта: сравнение платформ копирайтинга, форматы оплаты (объем или качество), фишки по выбору фрилансера. Читать дальше!...
09 03 2026 13:15:13
Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....
08 03 2026 12:54:30
Используйте и интерпретируйте карты знаний Netpeak Group, чтобы экономить свои силы и время на создании собственных карт с нуля. Узнать больше!...
07 03 2026 2:50:33
9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....
06 03 2026 14:19:38
Десять вопросов, которые чаще всего задают люди, столкнувшиеся с необходимостью создания landing page....
05 03 2026 12:51:51
Директор «1С-Битрикс» в Казахстане Сармантай Касенов о кейсах, развитии и образовательной миссии компании...
04 03 2026 14:18:31
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
03 03 2026 5:31:30
Если у вас есть продукт, о котором миру стоит узнать, книга Pitch perfect придется вам очень кстати....
02 03 2026 8:57:37
Если выполнить настройку не корректно, поисковик воспримет материалы как дубли контента....
01 03 2026 1:56:48
Чек-лист для РРС-специалистов. Всегда быстрее учиться на опыте других людей, а не набивать шишки самостоятельно. А также советы, как исправить рекламные кампании. Обо всем читайте в этой статье!...
28 02 2026 10:53:34
Отличная работа SEO-специалистов прошлого, породила касту PPC-специалистов настоящего, которые все еще ориентируются на публикации из 2017, ведь они все еще в ТОПе выдачи....
27 02 2026 13:45:17
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
