Как работать с 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
Комментарии:
Пpaктическая информация о том, что и куда нужно постить....
01 06 2026 7:22:16
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
31 05 2026 16:32:29
Будьте полезны, будьте удобны и будьте везде. Далее подробно — 18 способов собрать базу для email-рассылок. О пользе бесплатного, привлечении внимания, возможных активностях для аудитории, социальных доказательствах, предсказуемости, работе с Facebook и многом другом...
30 05 2026 22:58:41
Советы для фрилансеров и удаленных сотрудников: как строить рабочий процесс так, чтобы он вел к максимальной эффективности. О работе со временем, перерывами, необходимости выключать уведомления, статусе задач, празднованиях побед и организации рабочей среды...
29 05 2026 3:16:34
Нужен ли вашему проекту редактор? Как правильно его выбрать и оценить на собеседовании, а затем и в процессе работы?...
28 05 2026 0:50:48
Расскажем в двух словах о всеми забытой функции «Анализ конкуренции»....
27 05 2026 11:58:29
Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....
26 05 2026 21:56:59
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
25 05 2026 9:17:26
Все дело в формате объявлений Instant Experience с подключенным каталогом товаров. Нет, не только в нем. Узнать больше!...
24 05 2026 12:14:25
Лучшие маркетинговые ориентиры тем, кто захочет познакомиться с SEO и контекстной рекламе...
23 05 2026 3:33:22
Шпаргалка по размерам креативов для всех, кто запускает рекламу в соцсетях...
22 05 2026 16:37:40
Словарь, которым пользуются SEO-специалисты агентства Netpeak...
21 05 2026 22:54:39
Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....
20 05 2026 18:26:28
Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...
19 05 2026 6:54:54
Пишите стоимость товара под постами. Но это не универсальный совет. Если ваша ниша с длинным циклом продаж, можно сделать исключение. Что ещё нужно знать про ответ в директ? Узнать!...
18 05 2026 20:26:21
Не можете найти нужны отчёт в Google ***ytics? Или хотите ускорить поиск нужных данных и отчётов. В помощь ⏩ Обзор к Google ***ytics Intelligence....
17 05 2026 13:15:50
Денис Бигус, Bihus.info: с 13 до 457 000 подписчиков на YouTube за четыре года....
16 05 2026 16:26:14
Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....
15 05 2026 2:18:40
Look-alike аудитории, таргетинг на участников групп, ограничение стоимости установки и другие вкусные фишки myTarget...
14 05 2026 12:26:23
Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...
13 05 2026 15:30:43
Данные по 22,4 миллионам кликов в 46 тематиках и 392 населенных пунктах страны — собрана статистика исключительно по проектам агентства Netpeak. Узнать больше!...
12 05 2026 10:21:41
Эти советы будут полезны вебмастерам, которые хотят сделать шаблон сайта самостоятельно...
11 05 2026 18:39:41
Обзор полезных сервисов и программ, которые увеличат эффективность работы из дома и улучшат организацию бизнес-комaнды...
10 05 2026 2:57:25
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
09 05 2026 9:58:54
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
08 05 2026 14:22:24
Организаторам мероприятий, коллегам из PR-сферы и невестам о том, как делегировать важные мероприятия внешнему подрядчику...
07 05 2026 19:30:29
Если ваша фирма работает на предоставление услуг в медицине, следует учесть требования рекламных систем в интернете, чтобы объявления в с первого раза прошли модерацию...
06 05 2026 10:24:45
SMM для агентства перформанс-маркетинга. Как уйти от сухих текстов и стандартных баннеров для бизнес-страницы....
05 05 2026 4:57:46
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
04 05 2026 7:37:49
Что нужно знать о целевой аудитории, как грамотно воровать у других и что нужно сделать, чтобы настроить идеальную рекламную кампанию....
03 05 2026 23:46:43
Страховка, медицина, корпоративы, английский и оплата спортзала — знакомые плюшки IT-компаний. В этом материале читайте про редкие и необычные бонусы, которые предоставляются в некоторых IT-компаниях Украины....
02 05 2026 16:41:25
Впереди ещё черная пятница и новогодние праздники. И успех массовых распродаж можно повторить....
01 05 2026 12:19:48
Apple, Google и Samsung — давайте вспомним новинки месяца....
30 04 2026 16:57:34
Стоит ли торопиться с переходом на новый формат объявлений? Эксперимент PPC-специалистов агентства Netpeak....
29 04 2026 14:29:30
Дэн Гридин, ненавистник холодных звонков и эксперт в области системного B2B маркетинга для сложных рынков, рассказал читателям блога о принципах работы на рынке во время шторма....
28 04 2026 18:51:27
Как превратить неактивных подписчиков в вовлеченную аудиторию....
27 04 2026 9:28:26
Проверенный способ для сбора базы данных. Метод, с помощью которого можно извлечь контактные данные, а именно: название точки, телефон, адрес, сайт., а потом высылать своё КП, промокоды для акции, сообщить о выходе товара, сделать спецпредложение...
26 04 2026 4:25:35
SEO-dashboard для сбора данных в Google-таблицы и отправка отчетов по email. Решение, которое поможет заметить глобальные изменения в потоках трафика. Узнать больше!...
25 04 2026 12:20:54
Собирательный опыт сотрудников Netpeak. Мы изучали много всего в стиле «купить парковку в аэропорту Гатвика в Лондоне» и тому подобное. Но все, кроме описанного ниже, показалось сложным и ненадежным. Поэтому рассказываем про спокойные варианты....
24 04 2026 20:15:54
Айти эксперт Женя Розинский о том, почему нацию айти развивают продуктовые бизнесы, а не outsourcing сервисы...
23 04 2026 15:26:28
Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...
22 04 2026 10:50:18
Наш результат ведения рекламных кампаний в Facebook показывает, что при правильно подобранной стратегии можно даже за короткий период в авральном режиме попасть точно в цель...
21 04 2026 12:53:59
SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...
20 04 2026 10:29:18
Как новичкам в ecommerce выбрать первую CMS. Преимущества и трудности работы для крупных и небольших интернет-магазинов, русскоязычные и мультиязычные, с активной техподдержкой и без нее. Узнать больше!...
19 04 2026 5:37:58
Свежесть и актуальность контента — главные уроки из Google December 2020 Core Update. Почему — читайте в статье....
18 04 2026 7:35:16
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
17 04 2026 14:49:26
Составим его вместе...
16 04 2026 16:50:29
Новости агентства Netpeak за предыдущий квартал. Появление отдела веб-аналитики. Открыли услугу «Создание и ведение блогов». Добавили мультивалютность. Глобально изменили скрипт Netpeak X-Reference. Запустили серию писем. Что еще?...
15 04 2026 20:18:42
Не знаешь как раскрутить сайт? Мы подготовили 11 этапов SEO-продвижения сайтов в поисковых системах....
14 04 2026 20:39:49
Ярослав Легенчук поделился историей успешного «переезда» площадки IT-продукта из Рунета в страны ЕС...
13 04 2026 1:28:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
