Как работать с 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
Комментарии:
Главная задача крауд-маркетинга — помочь, дать пользователю экспертный ответ и уже в последнюю очередь — оставить ссылку...
30 08 2026 12:26:25
Прогнозирование с помощью «Планировщика ключевых слов»....
29 08 2026 14:39:13
Личный кабинет на сайте: что нового во внешнем виде, внутренностях и отчетах, функционале и юзабилити, автоматизации работы с оплатами, интернет-представительстве клиента и для специалистов. Узнайте больше!...
28 08 2026 8:55:24
10 заданий, которые заставят пошевелить мозгами и придумать нестандартные решения. Используйте их (видоизмените, адаптируйте) под свой продукт или услугу. Создайте крутую кампанию, креатив или предложите это своей комaнде....
27 08 2026 20:53:43
Стратегия контекстной рекламы для лендинга турагенства: увеличение количества онлайн-бронирований на 100%...
26 08 2026 21:25:34
88% времени в телефоне люди проводят в приложениях. Рассказываем, как их можно создавать без написания кода....
25 08 2026 17:52:38
Оптимизация и оформление вордовских текстов, переводчик, совместное редактирование, возможность залить картинку... Эти и много других опций дают дополнения для Google Документов....
24 08 2026 22:48:55
Мы собрали 30+ Телеграм-каналов, где вы найдете только полезную и актуальную информацию про маркетинг, SEO, SMM, веб-аналитику и развитие бизнеса...
23 08 2026 21:32:53
Лучшие маркетинговые и бизнес-фишки от Давида Брауна (Weblium), Владислава Флакса (OWOX), Александра Галкина (Competera), Люси Литерадо (Reply.io), Вадима Нехая (Depositphotos), Валерия Грабко (PromoRepublic), Игоря Дебатура (Uploadcare), Руслана Савчишин...
22 08 2026 21:23:37
Чем работа веб-студий отличается от конструкторов сайтов, как выбрать веб-студию и пять базовых понятий, которые должен знать каждый, кто решил создать сайт....
21 08 2026 2:19:36
Как разобраться в типах соответствия ключевых слов и определить, что минус-слова блокируют показы нужных ключевых слов....
20 08 2026 22:43:29
Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...
19 08 2026 19:13:11
Как обезопасить себя от интернет-пиратов и защитить авторское право онлайн....
18 08 2026 12:44:14
Email-маркетинг — хороший полицейский, спам — плохой....
17 08 2026 13:17:46
Как настроить эффективную удаленную работу: комментарии топ-менеджмента Netpeak с плюсами и минусами, личными инсайтами и рекомендациями. А также перспективы развития удаленки в комапнии. Читать дальше!...
16 08 2026 3:54:11
Три способа парсинга данных с помощью Owox BI Pipeline, Mix Data BI Import, Owox BI Power Upload....
15 08 2026 15:31:39
Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...
14 08 2026 1:21:38
General Data Protection Regulation (GDPR): ответы на вопросы....
13 08 2026 5:26:34
Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...
12 08 2026 0:44:58
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
11 08 2026 3:45:20
Хотите говорить с клиентами? Пишите им в телеге. Для этого важно продвижение телеграм-канала. Что и как делать для раскрутки — подробная инструкция....
10 08 2026 15:20:56
Идея ORM состоит в том, чтобы вызывать положительное мнение о вашей деятельности, работая с отзывами или комментариями, в результате чего больше людей будут покупать ваши товары или услуги. Узнать больше!...
09 08 2026 1:50:33
Четкий мануал для настройки Яндекс.Аудиторий от создания сегмента, работы с геолокацией, пикселем аудитории, похожими аудиториями, ретаргетингом и до корректировки ставок...
08 08 2026 16:20:28
Как узнать, что потенциальный сотрудник креативный, умеет убеждать, работать в комaнде, адаптироваться к быстрой смене условий, владеет эмоциональным интеллектом? Вопросы для проверки этих софт-скиллов здесь....
07 08 2026 23:14:12
Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....
06 08 2026 4:35:51
Как борьба с зарплатным неравенством становится трендом...
05 08 2026 13:30:28
Проседание русскоязычной версии и риск потери трафика из-за дубля страниц — вот чего опасаются при внедрении украинской версии по умолчанию. Как этого избежать, читайте дальше....
04 08 2026 2:37:29
Личный опыт экс-главреда экс-блога Netpeak (сейчас — Netpeak Journal): о работе с информацией, мотивации написания, редактуре черновика, подаче информации по степени важности, выделении главного и составлении окончательной версии текста. Как сделать текст логичным и полезным? Узнайте!...
03 08 2026 11:51:55
Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...
02 08 2026 8:31:36
Основатель сервиса мобилографии EyeEm Рамзи Ризк рассказал об особенностях своего сервиса и будущем мобильных приложений....
01 08 2026 10:16:28
Лихие девяностые и самые ужасные сайты интернета: образцы, примеры, оформление....
31 07 2026 1:26:49
Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....
30 07 2026 21:13:49
Как создавать интеpaктивные рассылки-сайты и чем они хороши...
29 07 2026 18:35:51
Сколько прибыли вы не получили в Google Ads из-за нехватки бюджета или низкого рейтинга ключевых слов. Метод покажется сложным, но в дальнейшем вы сможете бесплатно обновлять данные и контролировать потери показов и дохода по всем рекламным кампаниям...
28 07 2026 23:48:12
Процесс привлечения сторонних ресурсов отнимает основную часть времени у большинства основателей стартапов. Читайте руководство, которое поможет сделать этот процесс во время серии А более эффективным....
27 07 2026 9:38:42
Советы и даже требования SEO-специалистов к разработчикам сайтов....
26 07 2026 6:31:45
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
25 07 2026 23:32:30
Пиксель Facebook — инструмент аналитики рекламной системы, который можно использовать и для Instagram....
24 07 2026 13:44:54
Короткий интересный клип в Instagram — фишка маркетингового сезона 2015...
23 07 2026 17:38:54
Интересные факты про Google Рекламу перевел Сергeй Бахарь для читателей нашего блога....
22 07 2026 9:10:31
Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....
21 07 2026 5:24:48
Увеличение трафика из поисковых систем Азербайджана на 30% за три месяца. И он продолжает расти...
20 07 2026 16:53:18
All about internet mail. Примеры того, что стоит внедрить в рассылках почты онлайн....
19 07 2026 5:47:44
Лучшие результаты в SEO дает заранее спланированное сотрудничество клиента с агентством на всех этапах работ с сайтом....
18 07 2026 13:28:26
Откуда берутся установки и стоит ли тратить деньги на покупку мотивов...
17 07 2026 16:39:44
Это исследование для тех, кто хочет выяснить, эффективно ли работать с лидами, если им год и больше...
16 07 2026 1:54:15
Миллионы решили купить книгу гении и аутсайдеры на Amazon: удивительное исследование канадского журналиста...
15 07 2026 17:18:59
Услуга уровня элит-класса в конкурентной нише и не в самом простом для продвижения регионе. Рассказываем, как привели целевой трафик по минимальной цене. Узнать!...
14 07 2026 2:36:11
На третий месяц работы мы вышли на положительный ROMI, на четвертый — ROMI превысил 800%....
13 07 2026 21:38:55
Артем Шевченко (Epicentr), Михаил Рогальский (Monobank), Максим Дмитров (BSH Hausgeräte), Андрей Чумаченко (Netpeak) и другие участники конференции 8Р о том, как они рассчитывают инвестиции в интернет-маркетинг....
12 07 2026 19:53:40
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
