Posted:
Дек 22, 2022
Comments:
0 Comments

Meta name og title: html — What is the attribute property=»og:title» inside meta tag?

Содержание

Как работать с Open Graph

Поисковые системы обращают внимание на поведенческие факторы, в частности — внимание к сайту в социальных сетях. В свою очередь, протокол Open Graph позволяет использовать возможности соцсетей при поисковой оптимизации в полную силу. К тому же, повышает кликабельность ссылок на сайт, которыми делятся пользователи в своих профилях.

Подробнее об этих факторах читайте в нашем посте «Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе».

Протокол Open Graph создан специалистами Facebook. Зачем его использовать? Чтобы сделать предпросмотр (превью) веб-страниц в социальных сетях смотрибельным. А в глобальном смысле — для воплощения идеи семантической паутины. То есть стандартизации всей информации во Всемирной паутине, чтобы она стала пригодна для автоматической обработки.

Зачем внедрять Open Graph

Сейчас Open Graph поддерживают большинство популярных соцсетей и мессенджеров:

  • Facebook;
  • Twitter;
  • Pinterest;
  • Viber;
  • Telegram;
  • WhatsApp.

Протокол также помогает качественнее работать функции «Блоки рекомендуемого контента» в AdSense.

Давайте подробнее рассмотрим, что произойдет, если не внедрить Open Graph на своем сайте.

Вот некоторые образцы предпросмотра в Facebook веб-страниц без разметки:

Facebook не понимает, какие элементы подгружать в предпросмотр, поэтому берет любую картинку со страницы (может взять даже рекламный баннер). К тому же, полностью загружает заголовок.

Теперь примеры страниц с разметкой:

Предпросмотр выглядит привлекательнее и кликабельнее потому, что в разметке указаны выбранные нами изображение, заголовок и описание.

Важно: заголовок и описание, по желанию, могут отличаться от title и description веб-страницы.

Open Graph позволяет собственноручно сформировать желаемый сниппет для превью страницы в соцсетях.

Истории бизнеса и полезные фишки

Основные теги протокола Open Graph

Разметкой предусмотрено много свойств (тегов). Основные:

  1. og:title — заголовок, который характеризует страницу и отображается внешне.
  1. og:type — тип основного содержимого страницы. Например:
  • видео: <meta property=’og:type’ content=»video.movie» />;
  • музыка: <meta property=’og:type’ content=»music.song» />;
  • статья: <meta property=’og:type’ content=»article» />.
  1. og:image — URL изображения, которое отобразится в предпоказе.

og:url — канонический URL веб-страницы. Он используется как идентификатор объекта (веб-страницы). Например:

<meta property=»og:url» content=»https://www.site.ru/example/» />

Пример кода, если задействовать только основные свойства:

<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>

Рассмотрим не основные, но важные и полезные теги при продвижении:

  1. og:site_name — задает имя сайта, которое отображается в предпоказе.
  1. og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).

Вот все теги, которые влияют на внешний вид предпросмотра:

Дополнительные необязательные теги

  1. og:locale — задает язык и регион в формате «язык_РЕГИОН». Например:

<meta property=»og:locale» content=»ua_UA» />

Если свойство не задано, по умолчанию язык и регион «en_US».

Код языка нужно указывать по ISO 639.2, а страны по ISO 3166-1.

  • og:audio – указывает URL аудиофайла;
  • og:video – указывает URL видеофайла.

Например:

<meta property=»og:video» content=»https://site. com/video/example.mp3″ />

Как использовать дополнительные свойства тегов

Теги могут содержать дополнительные свойства. Например, у 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. Для этого в открывающем теге <html> указать атрибут prefix со значением my_namespace: https://example.com/ns#

Выглядит это так: <html xmlns:og=»https://ogp.me/ns#»>

Сами же свойства (теги) нужно располагать между открывающим <head> и закрывающим </head>, то есть внутри элемента <head>.

Способ подойдет сайтам, которые не используют CMS или же используют, но нет подходящего плагина.

Чтобы проверить правильность внедрения разметки можно воспользоваться специальным инструментом от Facebook или сервисом Open Graph Check.

Ещё больше тонкостей при продвижении в социалках — опыт наших экспертов в услуге SMM:

Хочу, чтобы мои соцсети продвигали маркетологи Netpeak

Выводы

Open Graph —инструмент для формирования превью, который поддерживают большинство социальных сетей и мессенджеров. С помощью Open Graph можно:

  1. Рекламировать свой сайт в социальных сетях, создавая корректные превью страниц.
  2. Привлекать трафик из соцсетей кликабельными превью.
  3. Формировать не случайный, а продуманный предпоказ страницы.
  4. Наращивать поведенческие факторы и популярность среди пользователей соцсетей, которые будут репостить, лайкать и комментировать красивые превью.

Существуют несколько способов внедрения протокола Open Graph на сайте:

  1. Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины).
  2. Второй вариант посложнее — внедрить протокол напрямую в код страниц.

Артем Бородатюк о бизнесе и том, как он меняет мир

Андрей Чумаченко о маркетинге, управлении собой и агентством

Читать

Читать

Подписывайтесь на Telegram-каналы основателей Netpeak

Крутой шаринг страниц в соцсети с помощью Open Graph / Хабр

maggg

Разработка веб-сайтов *

Решил собрать в одной статье короткий рецепт приготовления страницы, которая круто шарится во все основные соцсети. Тем, кто вообще не в теме, придётся сначала прочитать про Open Graph protocol.

Для Фейсбука, Вконтакта, Одноклассников и Гуглплюса:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Название сайта">
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание. ">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="http://example.com/img.jpg">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">


Для Твиттера и Вконтакта (ВКонтакт выберет для заголовка тот title, который в коде будет расположен ниже):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание.">
<meta name="twitter:image:src" content="http://example.com/img.jpg">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:domain" content="example.com">
<meta name="twitter:site" content="@">
<meta name="twitter:creator" content="@...">


Гуглплюс нормально подхватывает Open Graph, поэтому добавлять специальные теги для него больше не нужно:

<!--
<meta itemprop="name" content=""> 
<meta itemprop="description" content=""> 
<meta itemprop="image" content="">
-->


Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся. Раньше я пользовался специальным шаблоном, чтобы понять, как откадрировать изображение и гарантированно не потерять главного.

А потом я просто подсмотрел, как делают на Слоне.

Да, 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.

Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCache, Facebook Open Graph Object Debugger.

Расскажите о других тонкостях применения технологии в комментариях? Хорошего шаринга.

Теги:

  • open graph

Хабы:

  • Разработка веб-сайтов

Всего голосов 18: ↑13 и ↓5 +8

Просмотры

85K

Комментарии
5

Иван Золотов
@maggg

Пользователь

Комментарии
Комментарии 5

html.

Делает ли метатег для «og:title» избыточным метатег для «title»?

спросил

Изменено
8 лет, 1 месяц назад

Просмотрено
12 тысяч раз

На моем сайте есть два метатега, которые в настоящее время имеют одинаковое значение:

Второй формат необходим для подключения facebook .

Означает ли это, что первый лишний и его можно удалить?

  • html
  • facebook
  • seo
  • метатеги

Лучше иметь оба тега. Тег сообщает поисковым системам о вашей странице для индексации, а также отображается как заголовок в поисковой выдаче.
Тег og:title помогает Facebook индексировать контент, чтобы на вашей странице могли отображаться результаты поиска в Facebook, а также для определенного контента, когда этот конкретный URL-адрес на вашем веб-сайте публикуется. Также помогает добавить атрибут og:image, который является изображением предварительного просмотра в стандартных публикациях/рассылках Facebook.

Также нет

 
 Это
  ......... 
 
 Нет. Метатег Facebook не является стандартным, и вы не должны ожидать, что кто-то еще, кроме Facebook, будет использовать значение этого тега для чего-либо.
 1
 Первый — это стандартный тег заголовка, который обычно совпадает с заголовком страницы. Он используется (или, по крайней мере, использовался) поисковыми системами. Посмотри это.
 Мне не удалось найти официальную ссылку, описывающую первый тег:   . На практике это кажется бесполезным, и если оно когда-либо было полезным, я подозреваю, что это был просто ленивый синтаксический анализатор в веб-сканере.
 Второй тег используется. Стандарт OpenGraph используется для обмена многими сайтами, кроме Facebook. Хотя это и не поможет ранжированию напрямую, но может помочь косвенно за счет более привлекательных и лучше отформатированных акций.
 Я бы предложил использовать больше тегов OpenGraph, чем просто  og:title  . Другие, в том числе  og:image , помогут лучше делиться.
 Поскольку ваш второй метатег также включает атрибут имени, любой совместимый синтаксический анализатор должен подобрать его для заголовка. Поэтому ваш первый метатег лишний.
 Однако я не знаю ни одной системы, использующей метатег title.
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но никогда не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Все, что вам нужно знать 
 Михал Пеканек
 Маркетолог и автор контента в Ahrefs. Зависимость от SEO, авиации, ароматов, суши и тако.
 СТАТИСТИКА СТАТЕКА 
  •  Ежемесячный трафик  6 343
  •  Связывание веб -сайтов  314
  •  твиты 
 . содержание. Как правило, чем больше веб-сайтов ссылаются на вас, тем выше ваш рейтинг в Google.
 Показывает расчетный месячный поисковый трафик этой статьи по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3-5 раз больше.
 Сколько раз этой статьей поделились в Твиттере. Поделиться этой статьей
 Решением являются метатеги Open Graph.
 Вот как один из наших постов выглядит после публикации на Facebook
  •  Почему теги Open Graph важны
  •  Какие теги Open Graph использовать
  •  Как настроить теги Open Graph
  •  Как тестировать и отлаживать теги Open Graph
  •  Как проводить аудит тегов Open Graph
    •  Что такое метатеги Open Graph? 
     Метатеги Open Graph — это фрагменты кода, управляющие отображением URL-адресов при публикации в социальных сетях.
     Они являются частью протокола Open Graph Facebook, а также используются другими сайтами социальных сетей, включая LinkedIn и Twitter (если отсутствуют Twitter Cards).
     Вы можете найти их в разделе    на веб-странице. Любые теги с  og:   перед именем свойства – это теги Open Graph.
     Вот несколько примеров из нашего руководства, как стать экспертом в области SEO:
     


 
     Вот как эти теги выглядят на Facebook:
     Почему теги Open Graph важны? 
     Люди с большей вероятностью увидят общий контент с оптимизированными тегами OG и нажмут на него, что означает увеличение трафика на ваш сайт из социальных сетей.
     На это есть три причины:
    1.  Они делают контент более привлекательным в лентах социальных сетей.
    2.  Они с первого взгляда сообщают людям, о чем контент.
    3.  Они помогают Facebook понять, о чем контент, что может повысить узнаваемость вашего бренда в поиске.
     Давайте подробнее коснемся последнего пункта, так как его часто упускают из виду.
     Вот результаты поиска в Facebook по запросу «альтернативные поисковые системы»:
     Выдает популярные статьи, которыми люди уже поделились на Facebook. Каждый заголовок и изображение взяты из тегов Open Graph.
     Даже если по результатам поиска не найдено ни одной статьи, Facebook по-прежнему показывает совпадающий контент, опубликованный в группах или на страницах, на которые вы подписаны, или друзьями.
     Примечание.
      Теги Open Graph также помогают создать фрагмент, когда кто-то отправляет вам ссылку через прямые сообщения с помощью приложений, поддерживающих протокол Open Graph — естественно, Facebook Messenger и WhatsApp, а также iMessage и Slack.
     Какие теги Open Graph следует использовать? 
     Facebook перечисляет 17 тегов OG в своей официальной документации, а также десятки типов объектов. Мы не будем обсуждать все это. Всего четыре необходимы Facebook, чтобы понять основы вашей страницы, и есть еще пара других, которые иногда помогают.
     Давайте рассмотрим это.
     og:title 
     Название вашей страницы.
     Синтаксис 
      
     Передовой опыт 
    •  Добавьте его на все страницы, которыми можно поделиться.
    •  Сосредоточьтесь на точности, ценности и кликабельности.
    •  Сделайте его коротким, чтобы предотвратить переполнение. Официальных указаний по этому поводу нет, но 40 символов для мобильных устройств и 60 символов для настольных компьютеров – это примерно то, что нужно.
    •  Использовать исходный заголовок. Не включайте брендинг (например, название вашего сайта).
     og:url 
     URL контента.
     Синтаксис 
      
     Рекомендации 
    •  Используйте канонический URL. Это помогает консолидировать все связанные данные, такие как лайки, по всем опубликованным повторяющимся URL-адресам.
     og:image 
     URL-адрес изображения для социального фрагмента.
     Обратите внимание, что это, возможно,  самый важный тег Open Graph , потому что он занимает больше всего места в социальной ленте.
     Синтаксис 
      
     Передовой опыт 
    •  Используйте собственные изображения для страниц, которыми можно поделиться (например, главная страница, статьи и т. д.)
    •  Используйте свой логотип или любое другое фирменное изображение для остальных страниц.
    •  Используйте изображения с 1. 9Соотношение 1 : 1 и минимальные рекомендуемые размеры 1200 x 630 для оптимальной четкости на всех устройствах.
     og:type 
     Тип объекта, которым вы делитесь. (например, статья, веб-сайт и т. д.)
     Синтаксис 
      
     Передовой опыт 
    •  Используйте статью для статей и веб-сайт для остальных страниц .
    •  При необходимости опишите типы объектов дополнительно (необязательно).
     ог:описание 
     Краткое описание содержимого.
     Синтаксис 
      
     Передовой опыт 
    •  Дополните заголовок, чтобы фрагмент был максимально привлекательным и привлекательным.
    •  Скопируйте сюда свое метаописание, если это имеет смысл.
    •  Говорите коротко и ясно. Facebook рекомендует 2-4 предложения, но это часто сокращается.
     og:locale 
     Определяет язык содержимого.
     Синтаксис 
      
     Рекомендации 
    •  Используйте только для содержимого, написанного не на американском английском (en_US). Facebook предполагает, что контент без этого тега написан на этом языке.
     Как настроить теги Open Graph 
     Выберите платформу своего веб-сайта из списка ниже или следуйте инструкциям руководства.
    •  WordPress
    •  Shopify
    •  Wix
    •  Squarespace
     Установка тегов Open Graph в WordPress 
     Установите SEO-плагин Yoast. Перейдите в редактор сообщения или страницы, затем прокрутите вниз. Вы должны увидеть окно Yoast SEO. Перейдите на вкладку «Социальные сети», затем «Facebook».
     Заполните это, чтобы установить теги  og:title  ,  og:description  и  og:image  .
     Нет необходимости устанавливать  og:url  вручную. Yoast сделает это за вас. Он также добавляет другие полезные теги OG, такие как размеры изображения.
     Примечание.
      Если вы не настроили общедоступное изображение, а в публикации есть избранное изображение, Yoast будет использовать его по умолчанию. Он также добавит другие теги Open Graph и Twitter Card, ручная настройка которых будет пустой тратой времени — имя сайта, размеры изображения и т. д. Это отображается, если для общего URL-адреса не задан пользовательский тег.
     Вы найдете возможность сделать это в настройках Yoast.
      Yoast > Social > Facebook 
     Убедитесь, что переключатель установлен в положение «Включено», затем загрузите соответствующее изображение. Здесь лучше всего работают изображения брендов.
     Настройка тегов Open Graph в Shopify 
     Большинство тем Shopify извлекают теги OG из переменных, таких как тег title для  og:title  и избранное изображение для  og:image  .
     Единственный тег, который вы можете настроить с помощью пользовательского интерфейса Shopify, — это общесайтовый тег  og:image  .
     Перейдите в Интернет-магазин  > Темы > Настроить > Настройки темы > Настроить > Социальные сети > выберите подходящее изображение  .
     Если вы хотите увидеть, как это настроено, перейдите в Интернет-магазин  > Темы > Действия > Редактировать код > Фрагменты > social-meta-tags.liquid  на полосе прокрутки. При необходимости вы можете отредактировать код.
     Настройка тегов Open Graph в Wix 
     Wix извлекает общие теги OG из других переменных, таких как мета-заголовок и описание страницы.
     Вы можете настроить заголовок, описание и изображение ОГ для каждой страницы в настройках «Общий доступ в социальных сетях».
     Вы также можете установить собственное общедоступное изображение для всего сайта. Перейти к  Настройки > Поделиться в социальных сетях  в главном меню.
     В целом, Wix упрощает добавление тегов OG, поскольку нет необходимости что-либо жестко кодировать.
     Настройка тегов Open Graph в Squarespace 
     Squarespace использует заголовок страницы и метаописание для  og:title   и  og:description  .
     Вы можете установить пользовательский  og:image  на постраничной основе.
     Просто перейдите в  Настройки страницы > Социальное изображение > Загрузить  .
     Если вам нужно добавить другие теги OG и настроить параметры по умолчанию, перейдите к  Параметры страницы > Дополнительно > Вставка кода заголовка страницы  . Прочтите следующий раздел о добавлении тегов вручную и скопируйте туда код.
     Настройка тегов Open Graph вручную 
     Если вам удобно копаться в коде веб-сайта, добавить теги OG так же просто, как вставить их в раздел   вашей веб-страницы.
     Рассмотрите возможность использования генератора разметки, такого как мегатеги или инструменты веб-кода, чтобы сократить количество синтаксических ошибок.
     Как тестировать и отлаживать теги Open Graph 
     Теперь, когда вы развернули все теги, вам нужно убедиться, что они работают должным образом и готовы к совместному использованию.
     Для этого используйте следующие инструменты:
    •  Facebook Sharing Debugger
    •  Twitter Card Validator
    •  LinkedIn Post Inspector
     Все они работают одинаково. Они извлекают теги со страницы и показывают, как она выглядит при совместном использовании.
     Тестирование также помогает предотвратить проблемы, связанные с неправильным отображением или извлечением тегов OG.
     Вот как выглядит FB Sharing Debugger в действии:
     Самое главное — это то, как выглядит фрагмент. Если вы пропустите или неправильно настроите менее важные теги, ничего страшного. Вы можете игнорировать предупреждения о неважных тегах, таких как  fb:app_id 
     Если что-то выглядит не так, и вы обновляете теги, используйте кнопку «Очистить снова», чтобы получить свежие данные. Если вы не видите изменений после сканирования, используйте пакетный инвалидатор, чтобы очистить кеш, и повторите попытку.
     Повторите этот процесс с помощью Twitter Card Validator и LinkedIn Post Inspector, чтобы убедиться, что ваш контент выглядит правильно во всех сетях.
     Примечание.
      Я обнаружил, что только Twitterbot следует директивам robots.txt. Поисковые роботы Facebook и LinkedIn могут очищать и отображать контент, даже если вы запретите сканирование. Это было удивительно, но даже ради Твиттера убедитесь, что все URL-адреса, которыми вы делитесь, могут быть просканированы.
     Как проводить аудит тегов Open Graph 
     Если у вас уже есть сайт с сотнями страниц, и вы не уверены, на каких из них уже есть теги Open Graph, вы можете использовать такой инструмент, как аудит сайта Ahrefs, чтобы проверить ваши страницы массово.
     Просто запустите сканирование, затем перейдите к отчету о социальных тегах, чтобы увидеть все проблемы, связанные с тегами Open Graph и Twitter Card.
     Нажмите на отмеченное предупреждение, чтобы просмотреть пояснения и рекомендации по его устранению.
     Нажмите «Просмотреть затронутые URL-адреса», и вы увидите проблемы, затрагивающие каждый URL-адрес, а также соответствующие показатели.
    This entry was posted in Популярное