Какие бывают meta теги и зачем они нужны

Some other open graph tags that are worth adding

Though you’ll generally be okay with the basics, here are a few more that would be worth adding:

• : A description of your page. Similarly to , this may be the same as your website’s tag, unless you’d like to present it differently.
• : If you want to localize your tags, it would probably make sense to include locale. The format is , where the default is .
• : The name of the overall website your content is on. If you’re on a blog post page, you might have a using that blog post’s title, where the would be the name of your blog.
• : Have a video that supports your content? Here’s a chance to include it. Add a link to your video using this tag.

These tags will be added in the same pattern as before:

Что такое микроразметка?

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

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

Популярные словари микроразметки:

• schema.org – сделан по инициативе поисковых систем и рекомендуется ими к применению;
• Open Graph – придуман Facebook для эффективного взаимодействия сайтов с этой соцсетью, и поддерживается прочими социальными сетями;
• Микроформаты – основаны на использовании элементов языка HTML, что и позволило ему в свое время обрести большую популярность;
• Data Vocabulary – разработан компанией Google, но прекративший свое развития из-за активной поддержки schema.org;
• Dublin Core – специализированный словарь для библиотек;
• Good Relations – специализированный словарь для интернет торговли;
• FOAF – специальный социальный словарь для разных сообществ.

Наиболее распространенные синтаксисы:

• микроданные – часто применяются со словарями schema.org и Data Vocabulary;
• RDFa – применяется со словарями Open Graph и Data Vocabulary;
• микроформаты – являются как синтаксисом, так одновременно и словарем.

Какой формат семантической разметки выбрать? Если нет уже наработанной базы и начинать разметку нужно с нуля, то лучше всего для статей использовать микроданные с schema.org и RDFa с Open Graph. Их мы и рассмотрим на конкретном примере.

Structured Properties

Some properties can have extra metadata attached to them.
These are specified in the same way as other metadata with and
, but the will have extra .

The property has some optional structured properties:

• — Identical to .
• — An alternate url to use if the webpage requires
  HTTPS.
• — A MIME type for this image.
• — The number of pixels wide.
• — The number of pixels high.
• — A description of what is in the image (not a caption). If the page specifies an og:image it should specify .

A full image example:

The tag has the identical tags as . Here is an example:

The tag only has the first 3 properties available
(since size doesn’t make sense for sound):

Что такое Open Graph?

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

На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.

Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?

Вконтакте не подтягивает Open Graph потому что он не указан сайте

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

Так выглядит Open Graph при вставлении ссылки вручную

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

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс и извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

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

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

Как , так и дают рекомендации относительно использования упомянутых выше тегов. Учтите, что ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Title (Заголовок).	Заголовок или название объекта.	Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание).	Краткое описание или содержание объекта (2-4 предложения).	Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка).	URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки	Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL	Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.

Внедрение протокола Open Graph в Joomla 3

Как всегда самым простым вариантом в решение данной, если можно так сказать, проблемы будет использование специальных плагинов (Easy Open Graph, Phoca Open Graph, Open Graph Tags, Global Open Graph). Но если честно ни один из множества плагинов, которые я тестировал, меня не впечатлили, поэтому я решил делать все самостоятельно, чего и Вам советую.

Как добавить данные в блок head документа Joomla 3? В этом нам поможет стандартный класс JDocument, при помощи которого мы сможем внедрить в блок head документа все что угодно. Чтобы не ходить вокруг да около, давайте сразу рассмотрим код, который необходимо добавить в файл отвечающий макет статьи /components/com_content/views/article/tmpl/default.php, но предварительно я советую вам создать переопределение (скопировать данный файл в папку /templates/имя_шаблона/html/com_content/article). Более подробная информация об этом содержится в статье «Переопределение в Joomla 3».

//Протокол Open Graph
$document =& JFactory :: getDocument();
if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации
$document -> addCustomTag( '
<meta property="og:title" content="'.$this -> escape($this -> item -> title).'" />
<meta property="og:description" content="'.$desc.'" />
<meta property="og:type" content="article" />
<meta property="og:url" content="'.JURI :: current().'" />
<meta property="og:image" content="http://joom4all.ru/'.$images -> image_fulltext.'" />
<meta property="article:published_time" content="'.$this->item->created.'" />
<meta property="article:modified_time" content="'.$this->item->modified.'" />
<meta property="fb:app_id" content="140756266603425" />
');

Код не сложный, изначально мы объявляем, что будем использовать класс JDocument, а затем при помощи метода addCustomTag мы можем добавлять что угодно в секцию head документа, в нашем случае это будут метатеги Open Graph.

Хочу обратить отдельное внимание на то, как формируется описание публикации, тут мы при помощи определенного условия проверяем наличие текста в метатеге description , если его нет, тогда в качестве краткого описания страницы будет использован вступительный текст материала. За это отвечает следующая строчка кода:

if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации

Как сделать микроразметку статьи?

Рассмотрим примеры применения микроразметки schema.org и Open Graph. Тут есть некоторое различие. В первом случае вся разметка прописывается рядом с телом статьи. При передаче же информации в соцсети описывается как должна выглядеть ссылка на страницу статьи.

Разметка с schema.org

Рассмотрим, как с помощью schema.org можно сделать микроразметку статьи.

Сначала посмотрим, как статья выглядит в HTML без разметки

А теперь этот пример с разметкой

Прежде всего, мы даем роботу знать, что используем в статье разметку schema.org. Это делается размещением в начале тега, включающего статью, следующей записи:

itemscope itemtype=”http://schema.org/Article” id=”main”.

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

• headline – наименование статьи;
• datePublished – дата публикации в формате ISO 8601;
• image – картинка;
• articleBody – тело статьи;
• author – имя автора;
• publisher – наименование сайта, публикующего статью.

Есть еще необязательные параметры, которые все же желательно указывать:

• dateModified – дата изменения статьи;
• mainEntityOfPage – ссылка на страницу со статьей.

В теге publisher использованы следующие параметры:

• logo — логотип;
• name — наименование организации;
• telephone – телефон;
• address — адрес.

Если статью публикует не организация, а частное лицо, то все равно publisher нужно заполнить, так как параметр обязателен. Иначе Гугл будет ругаться при проверке. Замена Organization на Person не поможет. Можно сознательно не заполнять этот блок и игнорировать предупреждение.

Разметка с Open Graph

Микроразметку Open Graph нужно разместить внутри тегов <html> и <head>.

В блоке <html> указываем роботу на использование разметки Open Graph.

<html xmlns:fb=”http://ogp.me/ns/fb#”>

Все остальное размещается внутри <head>

<meta property="og:title" content="Создание микроразметки статьи ">
<meta property="og:type" content="article">
<meta property="og:description" content=" В этом материале познакомимся с таким важным видом семантической разметки как микроразметка статьи.">
<meta property="og:url" content="http://nashsite.com/microrazmetka ">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content=" http://nashsite.com/imgrazmetka.jpg ">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta property="og: article:published_time" content="2019-01-22T16:20:30+00:00">
<meta property="og: article:modified_time" content="2019-01-22T17:30:40+00:00">
<meta property="og: article: author" content="Михаил Степанов">

Выглядит здесь все проще, чем с schema.org. Вот что значат использованные теги:

• og:title – название статьи и текст ссылки;
• og:description – описание статьи, которое показывается под заголовком;
• og:type – тип объекта, для статьи применяется article;
• og:locale – локализация, указывать не обязательно, но желательно;
• og:image – ссылка на картинку статьи;
• og:url – ссылка на статью.

Тег article использовать несложно:

• og:article:published_time – дата публикации статьи;
• og:article:modified_time – дата последнего изменения;
• og:article:author – автор статьи.

Кнопки «Поделиться в соцсетях» на сайте

Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.

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

Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.

Поделиться пином с рецептом

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

Основные Метаданные

Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протокола
RDFa это означает что вы будите размещать дополнительные теги в вашей web-странице. Четыре основных свойства для каждой страницы:

• — Название вашего объекта, как он должен отображаться в графе, например фильм, «The Rock».
• — , например, «video.movie». В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
• — URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
• — Канонический URL-адрес объекта, который будет использоваться в качестве его
  постоянного ID в графе, например, «http://www.imdb.com/title/tt0117500/».

В качестве примера ниже приводится разметка протокола Open Graph для фильма «The Rock» на
IMDB:

Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:

• — URL-адрес звукового файла, который сопутствует этому объекту.
• — Одно-два предложения описания вашего объекта.
• — Слово, которое появляется перед названием этого объекта в предложении. Тип (a, an, the, «», auto). Если выбрано , потребитель данных должен выбирать между «a» или «an». По умолчанию — » » (пусто).
• — Тег локации.
  Формат . По умолчанию .
• — Тип других локалей на этой странице.
• — Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, «IMDb».
• — URL-адрес видео-файла, который сопутствует этому объекту.

Например (line-break исключительно в демонстрационных целях):

Схему RDF (в Turtle)
можно найти на ogp.me/ns.

Типы

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

Тип	Описание	Литерал
	Представляет логическое значение true или false	true, false, 1, 0
	DateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут)	ISO 8601
	Типа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов).	Строковое значение, которое является членом перечисления
	64-разрядное число с плавающей точкой	Все литералы, которые соответствуют следующим форматам: 1.234 -1.234 1.2e3 -1.2e3 7E-10
	32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков.	Все литералы, которые соответствуют следующим форматам: 1234 -123
	Последовательность Unicode символов	Все литералы состоят из символов Unicode без каких-либо символов Escape-Последовательности
	Последовательность Unicode символов, которые идентифицируют Интернет-ресурс.	Все допустимые URL-адреса, которые используют протокол http:// или https://

Twitter and other social media networks using open graph

Most of the social networks adhere to the basics of open graph standards, but a few of them also include their own extension to help customize the look and feel within their ecosystem.

Twitter for instance, allows you to specify , which is the type of “card” you can use when they show your website. At this time, their card types include:

• summary
• summary_large_image
• app
• player

This will help you choose how your links are used in their feed. If you choose for instance, Twitter will show your links with big high resolution images as long as you’re providing it in the in the tag.

Here are some quick references to the documentation of how to use open graph tags with some of the social media sites:

• Twitter:
• Facebook:
• Pinterest: ?
• LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Проблемы с повторяющимися тегами Open Graph

Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.

В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.

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

Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:

На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.

Типы Объектов

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

Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма
CURIEs

Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип значение имени всегда с префиксом пространства имен, а затем период.
Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.

Пространство имён определяется URI: http://ogp.me/ns/music#

значение:

• — >=1 — Длина песни в секундах.
• — —
  Название альбома.
• — >=1 —
  Номер альбома на диске.
• — >=1 —
  Номер трека в альбоме.
• — —
  Исполнитель песни.

• — — Название песни в альбоме.
• — >=1 —
  Тоже самое что но в обратном значении.
• — >=1 —
  Тоже самое что но в обратном значении.
• — —
  Профайл музыканта, который создал эту песню.
• — —
  Дату выпуска альбома.

• — Идентично одному из
• — — Создатель плейлиста.

music:creator — profile — Создатель Радио-станции.

URI пространства имен: https://ogp.me/ns/video#

значение:

• — —
  Актеры в этом фильме.
• — — Роли актеров
• — —
  Режиссеры фильма.
• — —
  Авторы фильма.
• — >=1 —
  Длина фильма в секундах.
• — —
  Дата выхода фильма в прокат.
• — —
  Теги, связанные с этим фильмом.

• — Идентично
• — —
  К какой серии этот эпизод принадлежит.

Если это сериал или ТВ-шоу, метаданные идентичны .

Видео, которое не относится ни к одной из категорий. Метаданные идентичны .

Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.

значение:

— Статья, пространство имён определяется URI:

• — —
  Когда статья была впервые опубликована.
• — —
  Когда статья была последний раз изменена.
• — —
  Время истечения срока статьи.
• — —
  Авторы статьи.
• — — Название категории.
• — —
  Теги, связанные с этой статьей.

— Книга, пространство имён определяется URI:

• — — Кто написал эту книгу.
• — —
  Международный стандартный книжный номер ISBN
• — — Дата выпуска книги.
• — —
  Теги, связанные с этой книгой.

— Профайл, пространство имён определяется URI:

• — — Имя пользователя профайла.
• — — Фамилия пользователя профайла.
• — — Ник.
• — — Пол (мужской, женский).

— Web-сайт, пространство имён определяется URI:

Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как web-сайт.

Структурированные Свойства

Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.
Они определены таким же образом как метаданные и
, но будут иметь дополнительные .

Свойство тега имеет несколько дополнительных структурированных свойств:

• — Идентичный .
• — Альтернативный url-адрес для использования в случае, если web-страница требует
  HTTPS.
• — Типы MIME для изображения.
• — Число пикселей в ширину.
• — Число пикселей в высоту.

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

Свойство тега имеет идентичные теги с . Вот пример:

Тег имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):

Проверка и отладка публикаций в социальных сетях.

Если Facebook обнаружит какие-то ошибки в настройках — будет выделено в красной рамке. Если же будет не то изображение, так как Facebook берет устаревшие данные из «кеша», кликните на кнопку — Сделать скроллинг — Получить повторные данные. Указанные ошибки необходимо исправить и повторить предыдущие действия.

Facebook Debugger

Осталась последняя проверка. Ваша задача — занести сайт в «Белый список» Twitter. Здесь придется немного повозиться, ибо, как Вы знаете, Twitter не очень хочет публиковать Ваши посты вместе с картинками. Обычно это очень короткие твиты с ссылкой на статью.

Для этого заходите по адресу: — это сервис для занесения сайта в «Белый список». С левой стороны вставляете адрес Вашей статьи. Нажимаете Preview card — посмотреть превью Вашего анонса — и справа отобразится превью анонса в Twitter, а внизу, под картинкой, то что нужно сделать, если будет предупреждение, что «Не занесен в белый список».

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