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

Как извлечь данные из файла csv в PHP

Как правильно выбрать имя домена для своего сайта? Лучшие примеры
Web

Как правильно выбрать имя домена для своего сайта? Лучшие примеры

Web

Получение элементов DOM по имени класса

Web

Автоматическая смена картинок на CSS. Смена изображений по таймеру

×