Как работать с 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
Комментарии:
Расширения, горячие клавиши и мгновенный перевод слов на другой язык — минимум лайфаков, которые можно использовать для удобства пользователей Google Chrome...
26 04 2024 6:39:42
Цель — трафик facebook. Делимся кейсом проекта «Мой город»....
25 04 2024 9:33:52
Как правильно оптимизировать страницы пагинации, чтобы не допустить проседание целевого трафика...
24 04 2024 17:29:18
Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...
23 04 2024 19:48:48
Как собрать свой онлайн марафон на 500 или 1000 человек? Сколько это стоит и какие сервисы использовать. Давайте разбираться....
22 04 2024 0:32:59
Пример того, как составить маркетинговый контент-план, анализируя успешных конкурентов...
21 04 2024 0:29:28
Создаем фид товаров, настравиваем код и списки динамического ремаркетинга для интернет-магазинов в странах, где отсутствует Google Merchant Center....
20 04 2024 15:11:47
Отныне мы можем настраивать показы рекламы на мужчин и женщин определенной возрастной группы....
19 04 2024 7:35:11
Как новичкам в ecommerce выбрать первую CMS. Преимущества и трудности работы для крупных и небольших интернет-магазинов, русскоязычные и мультиязычные, с активной техподдержкой и без нее. Узнать больше!...
18 04 2024 10:43:59
Какую связь можно назвать «качественной» и как улучшить работу телефонии — советы от платформы Ringostat в новом посте....
17 04 2024 2:29:45
Google Shopping и Smart Shopping Campaign сами себя не оптимизируют....
16 04 2024 19:59:55
Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...
15 04 2024 9:52:55
Динамический ремаркетинг: как вернуть посетителя на сайт и продать, когда человеку «надо ещё подумать»....
14 04 2024 11:19:18
Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....
13 04 2024 21:10:14
Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....
12 04 2024 8:26:25
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
11 04 2024 0:15:14
Где найти лидера для своей инхаус-комaнды маркетологов...
10 04 2024 21:42:43
Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...
09 04 2024 0:55:28
Помогают ли комментарии повысить эффективность рекламных постов? Единственный способ выяснить наверняка — провести A/B-тестирование в Facebook. Спойлер: тональность комментария также имеет значение в Facebook...
08 04 2024 11:17:48
Как упростить работу с данными и сэкономить на оплате сервиса...
07 04 2024 23:10:24
Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....
06 04 2024 10:50:42
Короткий прогон сервисов для аналитики активности в Твиттер....
05 04 2024 15:49:47
Интересные маркетинговые методы, эффективные профессиональные хитрости и много другое прозвучало на круглом столе по фишкам контекстной рекламы...
04 04 2024 10:34:46
Обзор главных преимуществ, которые дают облачные академии бизнесу....
03 04 2024 12:57:53
Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...
02 04 2024 17:12:41
В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....
01 04 2024 14:55:48
10 шагов к я-бренду из книги «Я-бренд. Формула успеха». Марк вырастил свой бренд до размеров торгового бизнеса с объемами продаж в миллиарды долларов. Читайте, здесь есть и сама формула, подходящая для товара, сайта или торговли машинами...
31 03 2024 3:32:51
Разбираемся, как определить самые эффективные источники лидов....
30 03 2024 9:17:33
Для эффективного ведения контекстной рекламы необходимо отслеживать продажи. Как сделать это с помощью Google Tag Manager расскажем в этой статье...
29 03 2024 12:34:20
Хотите узнать, сколько стоит клик в вашей тематике? Как эффективно распределить рекламный бюджет? В этом исследовании я изучил, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане...
28 03 2024 0:56:16
Реклама в ASA значительно повышает эффективность ASO....
27 03 2024 13:25:28
Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....
26 03 2024 2:14:44
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
25 03 2024 4:14:53
Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....
24 03 2024 12:36:44
Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...
23 03 2024 15:34:32
Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, вы можете оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
22 03 2024 17:43:59
При встрече со сложностями, когда мозг говорит вам «стоп, у тебя не получится, не пытайся даже», победа достается тому, кто это предупреждение игнорирует....
21 03 2024 15:14:51
Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...
20 03 2024 5:41:58
Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....
19 03 2024 0:43:48
Почему популярность электромобилей растет и как это связан с продажей углеродных квот...
18 03 2024 0:30:22
Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....
17 03 2024 10:59:12
Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....
16 03 2024 1:29:37
Используйте методы Элияху Голдратта для оптимизации процессов в жизни и на работе...
15 03 2024 14:25:51
Популярные скрипты Google Рекламы позволяют автоматизировать рутинные и монотонные процессы. Каждый скрипт состоит из функций, переменных, объектов, сущностей, селекторов, итераторов...
14 03 2024 0:15:16
Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...
13 03 2024 7:11:57
Адаптивный линкбилдинг: будьте полезны людям, а не поисковикам....
12 03 2024 12:49:21
Бухгалтерский мир Netpeak: цель, задачи, мотивация....
11 03 2024 3:42:35
Собирательный опыт сотрудников Netpeak. Мы изучали много всего в стиле «купить парковку в аэропорту Гатвика в Лондоне» и тому подобное. Но все, кроме описанного ниже, показалось сложным и ненадежным. Поэтому рассказываем про спокойные варианты....
10 03 2024 20:20:42
Работа велась с конца августа прошлого года до конца декабря и включила в себя анализ рынка, конкурентов, целевой аудитории, поиск инсайта, разработку стратегии, подготовку медиаплана, создание промо-сайта и само проведение рекламной кампании, в котором б...
09 03 2024 7:21:33
Как сделать рекламу в Universal App Campaign 2.0 максимально эффективной...
08 03 2024 14:11:37
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
