Meta property что это значит

Микроразметка Open Graph: базовые принципы и настройка

Микроразметка помогает роботам ориентироваться на страницах сайта и забирать для формирования поисковой выдачи или превью ссылок в социальных сетях то, что владелец сайта хочет отдать.

Что такое Open Graph и какая от нее польза

Open Graph – это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. У хорошего информационного блока (сниппета), который формируется при репосте страницы сайта, есть несколько признаков:

заголовок не обрезается;

в описании – цепляющий лид или другая важная информация;

картинка соответствует требованиям соцсети и тоже не обрезается.

В большинстве соцсетей можно настраивать внешний вид таких ссылок вручную: редактировать заголовок и описание, менять картинку на превью. Но это отнимает время. И заниматься этим будет разве что администратор страницы в соцсети.

Когда пользователи репостят записи с сайта, они ничего не редактируют. Из-за этого результат может быть непривлекательным: вместо заголовков в превью подтянется содержимое тега, описание будет обрубленным, а картинка – случайным образом выбрана из текста. Вот пример сайта администрации одного из городов:

Open Graph решает эти проблемы. Этот протокол позволяет разметить страницы на сайте так, чтобы при репосте внешний вид поста не надо было дополнительно настраивать. Сниппет по умолчанию будет таким, каким вы хотите его видеть: с заглавной картинкой, заголовком и кратким описанием. Вот хороший пример:

Плюс Open Graph в том, что вы можете настроить отображение превью для разных соцсетей. Размеры картинок, длина заголовка и описания – все это отличается. С Open Graph репосты с сайта будут выглядеть хорошо везде: и на странице VK, и в ленте Twitter.

Как размечать страницы

Микроразметка Open Graph – это просто набор тегов, которые описывают для разных соцсетей, какой контент взять для репоста и как его отобразить. Из одного тега соцсеть берет заголовок, из другого – картинку для сниппета.

Для разметки страницы нужно в раздел добавить дополнительные теги . Внутри тегов указываются атрибуты – property и content. В property прописывается свойство, а в content – сам контент: текст заголовка или описания, ссылка на изображение и другая информация для формирования сниппета.

Обязательные свойства

У атрибута property есть четыре обязательных свойства.

og:title – заголовок поста или страницы. Сам текст добавляется в атрибут content.

og:type – тип передаваемого объекта: article, audio, image, video. Полный перечень смотрите в документации.

og:url – канонический URL, который ведет к объекту.

og:image – ссылка на изображение, которое опубликуется при репосте.

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

Дополнительные свойства

Кроме обязательных есть и дополнительные свойства.

og:audio – адрес звукового файла указанного объекта.

og:video – адрес видеофайла указанного объекта.

og:description – описание передаваемого объекта.

og:determiner – актуально для постов на английском: можно выбрать артикль перед названием объекта в предложении. Тип enum (a, an, the, «», auto), по умолчанию выбрано «» (нет артикля).

og:locale – свойство для указания локации. Формат language_TERRITORY. По умолчанию: en_US.

og:locale:alternate – свойство для добавления альтернативных локалей.

og:site_name – название сайта, которое будет отображаться на всех страницах. Отличное решение для популярных проектов, например Кинопоиска или Timeweb.

Из опциональных свойств часто используют og:description и og:site_name. Первое свойство позволяет добавить краткое описание, которое состоит из одного или нескольких предложений. ВКонтакте и на Facebook количество символов в описании сильно ограничено, зато в Telegram сниппет выглядит информативно.

С помощью og:site_name вы можете добавить в сниппет название сайта и несколько слов для описания его предназначения. Но это свойство обрабатывают не все соцсети. Например, на Facebook отобразится только URL сайта. А вот в Telegram в превью ссылки подтягивается все, что вы укажете внутри свойства og:site_name.

У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать. Изучим их на примере og:image:

og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.

og:image:type – например jpeg или png.

og:image:width – ширина изображения в пикселях.

og:image:height – высота изображения в пикселях.

У свойства og:video доступны такие же дополнительные метаданные: secure_url, type, width и height. А вот у og:audio дополнительных данных width и height нет, что логично – у звукового объекта не может быть длины и ширины, в отличие от изображения и видео.

Ссылки на дополнительные материалы

Больше подробностей про разные свойства атрибута property – в документации протокола Open Graph. Она очень емкая и практичная, так что изучение не займет много времени.

Также можно посмотреть информацию об использовании Open Graph в справке Яндекс.Вебмастера. Там много сведений из официальной документации протокола, но есть и другие полезные примеры – например, использование OG для разметки видео. Это помогает улучшить индексацию роликов по запросам пользователей поисковой системы Яндекса.

Есть также специальные руководства по настройке разметки Open Graph для отдельных социальных сетей:

Примеры разметки для разного контента

Это пример минимальной разметки – в ней только базовые свойства:

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

Это рекомендуемые размеры изображений для Facebook. С ним картинка в сниппете будет выглядеть хорошо.

При размещении этой же ссылки ВКонтакте изображение на превью обрежется. Это связано с тем, что у каждой соцсети свои требования к размеру изображений в сниппетах. Если вы хотите, чтобы ничего не обрезалось при репосте, то нужно подготовить для каждой соцсети свой вариант картинки. Затем нужно указать в разметке разные теги:

Например, пользователь делает репост в Twitter. Соцсеть будет учитывать только контент, указанный в свойстве twitter:image. Остальные картинки Twitter проигнорирует.

В справке Яндекс.Вебмастера уделено много внимания разметке видео. Если вы хотите передать поисковой системе больше информации о своих роликах, то используйте этот минимальный набор свойств:

В этот набор можно добавить структурированные свойства. Например, указать ширину и высоту видео.

Как внедрить Open Graph на сайте

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

В самом начале страницы располагается префикс , который указывает на использование протокола Open Graph.

Затем в прописываются метатеги с нужными атрибутами и свойствами.

Чтобы сэкономить время, можно не прописывать все метатеги вручную, а использовать генераторы. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.

Если постов и страниц много, то ручное добавление разметки становится большой проблемой. К счастью, ее давно научились решать. Например, в конструкторах сайтов разметка формируется автоматически при публикации страницы. Есть также плагины для всех популярных CMS:

Как проверить разметку

Если хотите посмотреть, как конкуренты делают разметку, используйте парсер. Он проверит страницу по указанной вами ссылке и выдаст все используемые на ней атрибуты и свойства Open Graph.

Чтобы проверить корректность разметки, используйте валидаторы. Ссылки на некоторые инструменты есть в документации Open Graph. Можно также использовать валидатор в Яндекс.Вебмастере или сервис Open Graph Check. Они проверяют страницы по указанным адресам и показывают, есть ли ошибки в разметке.

Источник

Разметка Open Graph: пример микроразметки страницы и теги

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

Что такое разметка Open Graph

Open Graph – это специальный протокол в коде , который используется для структурирования информации на сайте и ее внедрения в социальных сетях. На некоторых ресурсах этот блок уже присутствует. Если его нет, то можно внедрить. Это несложно и помощь программиста не понадобится.

Зачем нужен Open Graph

Разметка – один из способов привлечения новой аудитории. Простыми словами, разметка — репост сайта на странице в соцсети, по которому переходит целевая аудитория.

Где используется

Разметка была разработана командой Facebook, но на сегодняшний день используется на многих платформах, в том числе в Instagram, Vkontakte, Twitter, Telegram, Viber и др.

Синтаксис разметки

Open Graph базируется на синтаксисе RDFa, где в прописываются мета-теги . Внутри прописывают атрибуты property и content.

Полную информацию по настройке разметки можно найти на сайтах ogp.me , ruogp.me и в справке Яндекс.Вебмастер .

Обязательные свойства

В разметке должны присутствовать обязательные свойства:

• og:url – ссылка на сайт, которая добавляется в социальную сеть. В ней не должно быть лишнего и она должна отсылать на главную страницу сайта.
• og:type – вид страницы. Здесь указывается вид предоставляемой информации, например «Статья».
• og:title – заголовок страницы. Указывают название документа или страницы.
• og:image – ссылка на страницу с изображением. Без картинки сделать репост невозможно. Минимальные требования к размеру: Вконтакте — 160х160 пикселей, Facebook – 600х315 пикселей. Если подойдет только одно изображение, то оно само станет нужных размеров, если нет — отобразится серый квадрат. Изображения в разном размере можно указывать с помощью тегов с названием соцсетей (vk:image, fb:image, twitter:image). Они будут обрабатываться в первую очередь.

Опциональные свойства

Помимо основных свойств, есть еще и опциональные (дополнительные). Они не обязательны, но улучшают визуальное оформление разметки. Например:

• og:description – краткое описание текста. Здесь указывают анонс той информации, которую пользователь в итоге получит. Соцсеть не всегда его выводит. Будет показано примерно 60 символов и многоточие.
• og:site_name – раздел с названием сайта и краткой информацией о нем.
• og:video – ссылка на страницу с видео и др.

Структурированные метатеги

Мета-теги – часть кода страницы, заключенная между … . Мета-теги OG — это совокупность обязательных и опциональных свойств. В структуре кода они выглядят так.

Как внедрять Open Graph

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

Вручную

Для настройки разметки вручную нужно набрать следующую фразу в начале кода на HTML-странице: http://ogp.me/ns# ”> . Далее – разместить мета-теги, о которых говорилось ранее, в код между … .

С помощью плагинов

Для всех систем управления сайтами есть плагины, позволяющие настроить разметку. Это такие сервисы, как WordPress, Joomla, Битрикс и др. Если сайт сделан на Tilda, то внедрить разметку можно на самом сайте через удобный конструктор.

Плагины для CMS:

Автоматически при помощи генератора метатегов

Сделать код самостоятельно можно через генератор мета-тегов. Для этого существует специальная графа, которую нужно заполнить, используя информацию для кода.

Настройка для Facebook

Информация по настройке разметки на Фейсбуке представлена на официальном сайте . Для размещения необходимо внедрить в код обязательные и дополнительные теги Open Graph.

Настройка для Twitter

Для Твиттера существуют свои метатеги, которые можно заполнить по аналогии со стандартными: twitter: title, description, image, url. Вместо тега og:type действует twitter:cart, в котором также нужно указать тип страницы.

Код для Твиттера на примере названия: .

Пример микроразметки страницы с помощью Open Graph

Пример настройки кода для представленной статьи:

Как проверить корректность внедрения

Для проверки правильности настройки разметки существуют специальные сервисы:

• Отладчик репостов на Фейсбуке. При указании url, сервис покажет описание страницы.
• Валидатор микроразметки Яндекс. Посмотреть корректность можно в Вебмастере по такому же принципу, как в Facebook.
• Инструмент проверки на Твиттере и др.

Сервис проверки Open Graph

Open Graph Check – сервис по проверке правильности внедрения мета-тегов. Чтобы проверить разметку, нужно ввести адрес страницы. В ответе указываются свойства с описаниями.

Заключение

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

Источник