Как работать с 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
Комментарии:
Топ doodle games от Google — от менее достойных к самым крутым....
22 01 2025 3:46:14
О методах поднять и расширить трафик рассказал руководитель internet-проекта Prom.ua Иван Портной....
21 01 2025 16:56:38
Полезные советы для тех, кто делает контекст своими ручками :)...
20 01 2025 20:51:55
Одесса. Конференция «Контекстная реклама 2013». Самые полезные настройки рекламной кампании....
19 01 2025 14:14:23
Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....
18 01 2025 21:45:51
Как мы проводили самую летнюю конференцию в условиях постлокдayна, пандемии и неизвестности....
17 01 2025 8:48:59
Что нужно учесть при создании баннеров для разных аудиторий...
16 01 2025 12:13:25
При выборе SEO сервиса принято ориентироваться на объем ссылочной массы, но надежен ли такой подход? Большая база не всегда значит качество содержащихся в ней данных, а количество нередко обеспечивают спамные ссылки в отчетах....
15 01 2025 16:39:57
Через тернии к кейсу. SEO-продвижение интернет-магазина отопительного оборудования с оплатой за трафик...
14 01 2025 6:24:29
Словарь, которым пользуются SEO-специалисты агентства Netpeak...
13 01 2025 23:39:44
Ещё один проект, который продвигался во время карантина....
12 01 2025 12:25:50
Услуга уровня элит-класса в конкурентной нише и не в самом простом для продвижения регионе. Рассказываем, как привели целевой трафик по минимальной цене. Узнать!...
11 01 2025 3:42:58
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
10 01 2025 11:36:14
В статье коротко о способах объединения данных из разных источников для создания отчётов...
09 01 2025 19:19:27
Упущенная семантика — это ключевые фразы, которые успешно используют в SEO и PPC ваши основные конкуренты, но не используете вы. Как найти упущенную семантику? Читайте кейс сервиса Prodvigator....
08 01 2025 20:28:15
Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....
07 01 2025 3:12:39
Google Data Studio: подробная инструкция и обзор возможностей...
06 01 2025 20:57:43
Как быстро настроить DSA с помощью Netpeak Spider. Рассмотрим подробнее «Только URL из фида страниц». Этот таргетинг помогает точнее определить целевую аудиторию и привести ее на максимально релевантные страницы сайта (к примеру, на карточку товара)....
05 01 2025 0:35:51
Гайд по типам рекламы в соцсетях для SMM-, PPC-специалистов, блогеров и владельцев бизнеса в зависимости от целей, которые вы ставите перед продвижением. С конкретными рекомендациями и примерами. Узнать больше!...
04 01 2025 10:43:37
Новый способ автоматизации процессов при настройке аналитики больших объемов данных....
03 01 2025 16:53:44
Как грамотно раскрутить пиццерию. Сняли фильтр и достигли хороших результатов....
02 01 2025 18:31:32
Лучшие маркетинговые и бизнес-фишки от Давида Брауна (Weblium), Владислава Флакса (OWOX), Александра Галкина (Competera), Люси Литерадо (Reply.io), Вадима Нехая (Depositphotos), Валерия Грабко (PromoRepublic), Игоря Дебатура (Uploadcare), Руслана Савчишин...
01 01 2025 22:25:59
Как вывести в индекс страницы сайта на Ajax: от необходимости их создания, роли SEO, ускорении индексации и реальные рекомендации всего в трех пунктах, чтобы основное преимущество таких сайтов работало безотказно...
31 12 2024 22:16:40
«Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....
30 12 2024 9:39:27
Реклама Facebook для вовлечения пользователей помогает привлечь внимание к приложению и удержать пользователей в условиях перенасыщенного рынка....
29 12 2024 12:12:28
Как изменилось агентство Netpeak c августа по октябрь? Читайте о семи главных нововведениях и улучшениях в работе с клиентами....
28 12 2024 1:53:27
Бренду нужно зайти на Фейсбук? Несколько очень полезных советов об измерении эффективности SMM....
27 12 2024 7:51:34
Заимствуете лучшее, коллекционируйте идеи и не откладывайте тестирование фишек в долгий ящик...
26 12 2024 14:22:39
Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...
25 12 2024 14:31:13
Почти 50 тыс. контактов за год принесли формы подписки и регистрации....
24 12 2024 15:16:15
Как работают SEO-специалисты, что нужно знать о принципах работы алгоритмов Гугл, как продвигать мобильные приложения и каким образом может монетизироваться Телеграм. Узнать больше!...
23 12 2024 11:46:54
Разбираемся, как определить самые эффективные источники лидов....
22 12 2024 19:42:40
Как узнать, что потенциальный сотрудник креативный, умеет убеждать, работать в комaнде, адаптироваться к быстрой смене условий, владеет эмоциональным интеллектом? Вопросы для проверки этих софт-скиллов здесь....
21 12 2024 3:42:37
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
20 12 2024 4:38:43
Зачем внедрять BI-решение для бизнеса, какие функции отдел может решить с помощью автоматизации? Кейс Netpeak....
19 12 2024 20:15:58
Я исследовал 23 миллиона кликов из Украины в Google Ads, Facebook, Директ и структурировал данные по 19 тематикам...
18 12 2024 5:34:59
Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...
17 12 2024 4:52:17
Клиенты, партнеры, потенциальные сотрудники — для каждой аудитории есть своя платформа. Какими нужно быть в соцсетях, чтобы вас заметили, читайте об опыте Reface....
16 12 2024 19:39:49
Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....
15 12 2024 5:50:17
Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....
14 12 2024 16:46:35
И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...
13 12 2024 5:13:45
Зеркалами считаются сайты с разными доменными именами, но идентичным контентом...
12 12 2024 5:49:51
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
11 12 2024 0:45:40
Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....
10 12 2024 2:19:24
Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...
09 12 2024 13:42:49
Правильное распределение кодов ответов сервера позволяет поисковым системам экономить ресурсы на работу с сайтом. Поисковые роботы будут получать только необходимую информацию...
08 12 2024 13:26:19
Как прокачать email, когда рассылки уже работают....
07 12 2024 14:33:51
Как быстро определить, что ваш подрядчик плохо работает с рекламной кампанией....
06 12 2024 17:12:41
После того, как мы разобрали виды мобильных версий сайтов, их плюсы и минусы — стоит поговорить о сервисах, которые облегчают аудит....
05 12 2024 15:39:27
Лафхаки для маркетологов и владельцев сайтов на Prom...
04 12 2024 5:54:15
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
