Начинающие веб-разработчики при разборе чужого программного кода иногда сталкиваются с таким выражением: «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»:
«og:url» — определяет адрес веб-ресурса, который открывается на социальной площадке.
«og:type» — определяет тип веб-контента, который публикуется на социальной площадке. Контент может определяться как новостной, статейный, содержащий видео или изображения и другие категории.
«og:title» — определяет заголовок, который показывается при публикации веб-страницы в какой-либо социальной сети.
«og:description» — определяет краткое описание страницы, которое будет видно при публикации в соцсети. Обычно описание должно быть не больше 60 символов, потому что все, что больше, будет спрятано за многоточием.
«og:site_name» — определяет наименование сайта и короткое уведомление о нем.
«og:video» — определяет url-адрес на видеопрезентацию, которая будет транслироваться в посте социальной площадки.
«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
