Использование html метатегов (мета теги)

Содержание:

Структурированные Свойства
Как настроить микроразметку Open Graph: от теории к практике
- Основные теги Open Graph
- Теги для видео:
Types
Что такое Open Graph?
Structured Properties
МЕТАтеги Open Graph
Теги Open Graph
What Is Open Graph and Why Was It Created?
Внедрение протокола Open Graph в Joomla 3
Дополнительные мета- теги:
Оптимизация сайта под социальные сети
Микроразметка для социальных сетей. Внедрение.
Добавление и настройка тегов Open Graph вручную
- Следующий шаг — самый интересный
Object Types

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

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

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

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

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

Код:

<meta property="og:image" content="http://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" />

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

Код:

<meta property="og:video" content="http://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

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

Код:

<meta property="og:audio" content="http://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Как настроить микроразметку Open Graph: от теории к практике

Html мета-теги

Для того чтобы Open Graph работал, необходимо вписать дополнительные мета-данные в тегах <html> и <head>.

Основные теги Open Graph

<html prefix=»og: ogp.me/ns#> — расскажем роботу о том, что мы используем протокол Open Graph;
- og:title — данный тег указывает, какой заголовок будет у вашей ссылки в новостной ленте или статье;
- og:description — по сути, это младший брат мета-тега <<meta description>>, но в нашем случае у нас нет ограничений и можно смело вместить больше 160 символов, хотя перегибать палку тоже не стоит;
- og:type — этот элемент указывает какой тип у объекта, видео или статья (если объектов на странице несколько, то следует выбрать основной и указать его;
- og:image — позволяет выбрать самостоятельно нужное изображение, просто указав URL;
- og:url — канонический урл, который будет использоваться как постоянный идентификатор.

Теги для видео:

Вот основные теги для видеофайлов:

<html prefix=»og: ogp.me/ns#

video: ogp.me/ns/video#

ya: https://yandex.ru/support/video/partners/open-graph.html >

Указываем используемые префиксы.

 
<head>
пишем название видео
  <meta property="og:title" content="Что такое Open Graph" />
url видео
  <meta property="og:url" content="http://site.ru/view/404/" />
указываем путь к видео плееру или файлу
  <meta property="og:video" content="http://site.ru/video/?clid=1111111&filmId=111111111" />
хорошо знакомый нам мета-тег, но тут мы можем не ограничивать себя 160 символами 
  <meta property="og:description" content="Open Graph” />

Теперь необходимо детально представить наше видео роботу:

указываем длительность ролика в секундах, при этом округляем до целого числа
  <meta property="video:duration" content="4878787787" />
пишем URL заставки видео
  <meta property="og:image" content="https://pp.vk.me/c625217/v625217969/1e4b/uFP6OCbCmjA.jpg" />
дата загрузки видео в формате ISO 8601
  <meta property="ya:ovs:upload_date" content="2016-03-22" />
 наличие возрастного ограничения 18+
 <meta property="ya:ovs:adult" content="false"/>
тип видео
  <meta property="og:type" content="video.other"/>
нужно указать какие кодеки доступны для формата видео
  <meta property="og:video:type" content="flash"/> 
</head>

Это не все доступные теги. С более полным списком можно ознакомиться на официальном сайте OpenGraph.

Также можно найти дополнительные настройки для каждой социальной сети отдельно (Facebook, Вконтакте, Google+, , LinkedIn, Pinterest) так.как иногда происходит сбой и может неверно отображаться картинка или часть текста.

Существуют также плагины, которые могут проверить валидность кода og. Если у вас нет желания самому ковырять html-код, то в этом могут помочь специальные плагины для CMS. Вот наиболее популярные варианты для WordPress:

WP Facebook Open Graph protocol.
Yoast SEO.
All in One SEO Pack.

А вот плагины для других CMS:

Magento.
Joomla.
Zen Cartl.
OpenCart.
Drupal.

Types

Мета-теги

The following types are used when defining attributes in Open Graph protocol.

Type	Description	Literals
	A Boolean represents a true or false value	true, false, 1, 0
	A DateTime represents a temporal value composed of a date (year, month, day) and an optional time component (hours, minutes)	ISO 8601
	A type consisting of bounded set of constant string values (enumeration members).	A string value that is a member of the enumeration
	A 64-bit signed floating point number	All literals that conform to the following formats: 1.234 -1.234 1.2e3 -1.2e3 7E-10
	A 32-bit signed integer. In many languages integers over 32-bits become floats, so we limit Open Graph protocol for easy multi-language use.	All literals that conform to the following formats: 1234 -123
	A sequence of Unicode characters	All literals composed of Unicode characters with no escape characters
	A sequence of Unicode characters that identify an Internet resource.	All valid URLs that utilize the https:// or https:// protocols

Что такое Open Graph?

Превью — изображение которое выводится в качестве превью к записи.
Домен — URL адресс, ссылка, того чем вы делитесь.
Навание — Заголовок той информации, которую вы собираетесь разместить.
Описание — краткое содержание того, о чем информация.

Основные html теги форматирования текста

Если же не добавлять метатеги от 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 имеет свои метатеги и как остальные они добавляются в шапку сайта, а именно между <head>…</head>. Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:

<meta property="og:type" content="article" />
<meta property="og:image" content="https://gnatkovsky.com.ua/image.png" />
<meta property="og:url" content="https://gnatkovsky.com.ua" />
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Краткое описание того что на странице" />

og:type — указываем тип объекта, от него зависит то, какие дальше будут заданы свойства.
og:image — указываем превью картинку нашей страницы.
og:url — указываем ссылку на текущую страницу (ту где располагаются эти метатеги).
og:title — указываем заголовок страницы.
og:description — указываем краткое содержание страницы, статьи.

Еще часто добавляют тег og:site_name — в нем указывается название сайта.

Первые 4 метатегов являются основными и обязательными. Если вы решили добавлять протокол Open Graph, то они должны быть указанны в любом случаи. Последние og:description и og:site_name не обязателен, но наличие приветствуется, вы сами видели начале статьи примеры. Есть и другие теги которые можно добавлять к страницам сайта, более подробно о них можно узнать на сайте Ruogp.me.

К этой группе тегов можно добавить еще пару специальных метатегов для Facebook:

<meta property="fb:app_id" content="10000000001111"/>
<meta property="fb:admins" content="10000000001111"/>

fb:app_id — указывается айди приложения от Facebook.
fb:admins — указывается айди администратора или администраторов через запятую.

Добавляется любой из этих тегов, нужны они для того чтобы вести статистику по взаимодействию с Facebook. Подробнее об этом можно узнать тут — Facebook developers. Если же это не надо то пропускайте.

Теги Open Graph

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

Главные теги Open Graph:

og:title	Title или альтернативный title страницы, который отображается в качестве заголовка
og:url	URL страницы
og:description	Описание страницы (Facebook показывает не более 300 символов
og:image	URL уникального изображения (рекомендуемое расширение 1200х630 пикселей)
og:type	Cтатья (по умолчанию «website»)

Чтобы посты в Facebook были с нужными вам заголовками, изображениями и описаниями, метатеги должны выглядеть так:

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

Совет:

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

What Is Open Graph and Why Was It Created?

Facebook introduced Open Graph in 2010 to promote integration between Facebook and other websites by allowing posts to become rich objects with the same functionality as other Facebook objects.

Put simply, it helps optimize Facebook posts by providing more control over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.).

To make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

Now, other social media sites also are taking advantage of social meta tags.

Several other major platforms, including and LinkedIn, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

Внедрение протокола 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;} //Описание публикации

Дополнительные мета- теги:

Google месторасположение

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Название улицы"/>
<meta property="business:contact_data:locality" content="Город"/>
<meta property="business:contact_data:postal_code" content="Индекс"/>
<meta property="business:contact_data:country_name" content="Страна"/>
<meta property="business:contact_data:email" content="cotact@mail.com"/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

Google Plus

<meta itemprop="name" content="Название сайта"/>
<meta itemprop="description" content="Описание сайта"/>
<meta itemprop="image" content="https://website.com/image250X250.png"/>

<meta name="twitter:card" content="summary"/> <!-- Тип окна -->
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
<meta name="twitter:creator" content="автор"/>
<meta name="twitter:image:src" content="https://website.com/image250X250.png"/>
<meta name="twitter:domain" content="website.com"/>

<meta property="og:type" content="profile"/>
<meta property="profile:first_name" content="Имя"/>
<meta property="profile:last_name" content="Фамилия"/>
<meta property="profile:username" content="Ник"/>
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="https://website.com/image250X250.png"/>
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
<meta property="og:see_also" content="http://www.website.com"/>
<meta property="fb:admins" content="Facebook_ID"/>

Оптимизация сайта под социальные сети

Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

Повышение ссылочной популярности;
Упрощение добавления контента с сайта в социальные сети;
Привлечение входящих ссылок;
Обеспечение экспорта и распространения контента;
Поощрение создания сервисов, использующих наш контент.

Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».

Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.

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

Сначала как должен.

В Фейсбуке.

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

А вот как не должен расшариваться контент.

В Фейсбуке.

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья — она должна быть соответствующе оформлена, если это медиаконтент — он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.

Микроразметка для социальных сетей. Внедрение.

Поскольку Фейсбук, Гугл+, Вконтакте, Твиттер и Одноклассники имеют разную ширину контента – требования к минимальным размерам картинок, их пропорциям, а также длине вводного текста слегка отличаются друг от друга. Я собрал воедино все требования и на их основе составил общее, с которым и предлагаю Вам ознакомиться.

Метатеги (а именно они понадобятся для внедрения Open Graph на сайт
Располагаются в шапке сайта между тегами <head></head> имеют следующий вид:

В микроразметке для соцсетей основных метатегов четыре, а именно:

og:title – название статьи (ссылки);
og:description – описание;
og:url – ссылка на ваш сайт;
og:image – ссылка на картинку.

Требования к картинкам

	Мин. ширина, px	Мин. высота, px	Соотношение сторон
ОК.ру	640	286	1:91 или 2:2375
400	н/д	1:91 или 2:2375

Как видно из таблицы, минимальный размер картинки, который «понравится» всем сосцетям сразу, должен быть не меньше 640 px в ширину и не меньше 315 px в высоту. Но это не все! По непонятной причине ВКонтакте отказался от поддержки установленной фейсбуком (родоначальником Open Graph), пропорции 1:91 и ввел свою 2:2375.

Что это означает на практике? А то, что картинки, не соответствующие этой пропорции будут «подрезаны снизу»!

Менее раскрученные соцсети, а именно Гугл+, Одноклассники и ряд других поступили мудрее. Они поддерживают оба формата (фейсбучный, и вконтактовский). Также слегка отошел от стандартов Твиттер. Но его пропорция 1:87 не так уж сильно ушла от 1:91, поэтому обрезка незначительна. Кроме того, Твиттер проявил мудрость, расширив микроразметку своими собственными параметрами такими как twitter:image (аналог og:image), twitter:card и ряд других.

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

640×335 (стандарт Фейсбук 1:91)
705×315 (стандарт ВК 2:2375)

В код микроразметку внедрил, но ВКонтакте ее не распознает

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

Микроразметка для Твиттера

Не смотря на то, что Твиттер неплохо расшаривает стандартные метатегитеги “og:”, я все же рекомендую прописывать для него собственные, начинающиеся с twitter: (см. пример ниже)

Обратите внимание на twitter:card и его значение summary_large_image. Этот метатег сообщает социальной сети, что следует создать картинку на всю ширину ленты!. Подробную документацию по микроразмете для твиттер можно

А протестировать тут

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

Добавление и настройка тегов Open Graph вручную

Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тег <html>на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:

на этот код:

Следующий шаг — самый интересный

В этом же файле header.php перед закрывающим тегом </head> вставляете код тегов Open Graph Facebook:

В этих тегах вам нужно заменить 2 значения:

«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);

«og:image» content=«//ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.

Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.

Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.

Замените этот тег:

на этот тег:

Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:

Этот код описывает функцию catch_that_image(), которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:

$first_img = «//ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;

Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.

Object Types

In order for your object to be represented within the graph, you need to
specify its type. This is done using the property:

When the community agrees on the schema for a type, it is added to the list
of global types. All other objects in the type system are
CURIEs of the form

The global types are grouped into verticals. Each vertical has its
own namespace. The values for a namespace are always prefixed with
the namespace and then a period.
This is to reduce confusion with user-defined namespaced types which always
have colons in them.

Namespace URI: https://ogp.me/ns/music#

values:

— >=1 — The song’s length in seconds.
— —
The album this song is from.
— >=1 —
Which disc of the album this song is on.
— >=1 —
Which track this song is.
— —
The musician that made this song.

— — The song on this album.
— >=1 —
The same as but in reverse.
— >=1 —
The same as but in reverse.
— —
The musician that made this song.
— —
The date the album was released.

— Identical to the ones on
— — The creator of this playlist.

music:creator — profile — The creator of this station.

Namespace URI: https://ogp.me/ns/video#

values:

— —
Actors in the movie.
— — The role they played.
— —
Directors of the movie.
— —
Writers of the movie.
— >=1 —
The movie’s length in seconds.
— —
The date the movie was released.
— —
Tag words associated with this movie.

— Identical to
— —
Which series this episode belongs to.

A multi-episode TV show.
The metadata is identical to .

A video that doesn’t belong in any other category.
The metadata is identical to .

These are globally defined objects that just don’t fit into a vertical but
yet are broadly used and agreed upon.

values:

— Namespace URI:

— —
When the article was first published.
— —
When the article was last changed.
— —
When the article is out of date after.
— —
Writers of the article.
— — A high-level section name. E.g. Technology
— —
Tag words associated with this article.

— Namespace URI:

— — Who wrote this book.
— —
The ISBN
— — The date the book was released.
— —
Tag words associated with this book.

— Namespace URI:

— — A name normally given to an individual by a parent or self-chosen.
— — A name inherited from a family or marriage and by which the individual is commonly known.
— — A short unique string to identify them.
— (male, female) — Their gender.

— Namespace URI:

No additional properties other than the basic ones.
Any non-marked up webpage should be treated as website.