Web

Руководство для веб-мастера: meta property og title content

Lorem ipsum dolor

Начинающие веб-разработчики при разборе чужого программного кода иногда сталкиваются с таким выражением: «meta property="og:title" content="Какой-то описательный текст"». Резонный вопрос: что это такое?

У «meta property» есть много других аргументов, помимо «og:title». Все это является частью технологии документации контента «Open Graph», именно поэтому в выражении «meta property="og:title" content» присутствуют буквы «og».

Open Graph это специализированный веб-протокол, который определяет структуру показа контента веб-ресурсов на «просторах» социальных площадок. Этот протокол предназначен для продвижения веб-ресурсов на социальных площадках, потому что придает веб-страницам читабельный и удобный вид. Технология Open Graph имеет важное значение для контент-маркетинга на таких социальных площадках, как:

  • Facebook, команда разработчиков этой соцсети разработала Open Graph,

  • Instagram,

  • VKontakte,

  • Twitter,

  • LinkedIn,

  • мессенджеры Viber и Telegram,

  • и др.

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

Open Graph и meta property — что это?

Open Graph это технология разметки, а «meta property» — это набор мета-тегов, которые являются частью разметки этой технологии. 

Ключевые мета-значение тега «meta property»:

  1. «og:url» определяет адрес веб-ресурса, который открывается на социальной площадке.

  2. «og:type» определяет тип веб-контента, который публикуется на социальной площадке. Контент может определяться как новостной, статейный, содержащий видео или изображения и другие категории.

  3. «og:title» определяет заголовок, который показывается при публикации веб-страницы в какой-либо социальной сети.

  4. «og:description» определяет краткое описание страницы, которое будет видно при публикации в соцсети. Обычно описание должно быть не больше 60 символов, потому что все, что больше, будет спрятано за многоточием.

  5. «og:site_name» определяет наименование сайта и короткое уведомление о нем.

  6. «og:video» определяет url-адрес на видеопрезентацию, которая будет транслироваться в посте социальной площадки.

  7. «og:image» определяет графическую составляющую страницы, которая будет показываться на социальной площадке.

Как технология структурирования Open Graph выглядит непосредственно в HTML-документе:

 

<meta property=“og:title” content=“Здесь описываем заголовок страницы”>

<meta property=“og:site_name” content=“Определяем название сайта”>

<meta property=“og:type” content=“Определяем тип контента”>

<meta property=“og:url” content=“http://codernet.ru/ссылка на статью”>

<meta property=“og:image” content=“http://codernet.ru/ссылка на изображение”>

<meta property=“og:description” content=“Коротко описываем страницу, которая будет публиковаться”>

 

Для того чтобы мета-теги заработали, необходимо в самом верху HTML-документа в разделе «head» добавить вот такой код:

 <html prefix=”og: http://ogp.me/ns#”>

Если испытываете трудности с HTML, а сайт у вас на какой-либо известной CMS типа Вордпресс, Джумла, Битрикс и других, тогда воспользуйтесь специализированными плагинами для внедрения технологии Open Graph на ваш веб-сайт.

Заключение

Теперь вы знаете, что мета-значения тега «meta property» являются частью специализированной технологии структурирования Open Graph. Возможности этой технологии помогают адаптировать показ веб-страницы на популярных социальных площадках. Продвижение сайта в соцсетях — это важный этап интернет-маркетинга, поэтому технологией Open Graph часто пользуются SEO- и SMM-профессионалы. Освоить его очень просто.

Схожие статьи

Web

Почему $_FILES может быть пустым при загрузке файлов в PHP?

Web

Как вставить карту на сайт HTML, как сделать это просто по шагам

Какой хостинг выбрать для сайта
Web

Какой хостинг выбрать для сайта

Международные биржи фриланса: фриланс за рубежом — это просто!
Web

Международные биржи фриланса: фриланс за рубежом — это просто!