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

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт

Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты

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

Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.

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

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

Также есть инструмент от Яндекс, который анализирует микроразметку. Работает также и для Open Graph. Валидатор разметки Yandex позволит вам отследить и исправить ошибки в настройках.

Экспертное мнение

Не секрет, что конкуренция во всех сферах и отраслях постоянно растет. И даже если у вас совсем новая идея, через некоторое время вы не будете одиноки. Получается, что Open Graph это протокол, который позволяет убить сразу двух зайцев (да, это возможно). Роботы поисковых систем видят ваши старания для пользователей, что, несомненно, скажется на «месте под солнцем», пусть и не совсем серьезно. И самое главное, для потенциального юзера ваша ссылка будет визитной карточкой, а их он видит достаточно, так почему бы не сделать её яркой, информативной?

Что такое UTM-метки: создание и настройка УТМ-меток для ссылок.

Настраиваем теги протокола Open Graph

А мы структурируем все теги и собираем вместе под комментарием «OPEN GRAPH PROTOCOL». В Эгее все нужные данные по каждой статье уже лежат в переменных, например, заголовок материала лежит в $content, а краткое описание страницы можно получить функцией array_keys(content). Главное для нас — добавить такую строку:

В результате мы написали скрипт, который генерирует изображение с текстом-параметром прямо на сайте, а затем вызвали этот скрипт в тегах протокола Open Graph. В качестве доработки можно добавить изображения разных размеров и генерировать картинку в зависимости от социальной сети. Теги тоже могут отличаться — изображение для ВКонтакте вставляется в тег <vk:image>, а для Twitter — <twitter:image>. В примере выше указано правильное использование этих тегов.

Как использовать дополнительные свойства тегов

Теги могут содержать дополнительные свойства. Например, у og:image такие:

• og:image:secure_url — задает URL картинки, который работает на HTTPS;
• og:image:width — число пикселей в ширину;
• og:image:height — число пикселей в высоту;
• og:image:type — задает MIME тип изображения (список существующих MIME-типов).

В коде это выглядит так:

Если необходимо задать разрешение сразу для нескольких изображений, можно использовать массив. Дополнительное свойство присваивается первому родительскому тегу сверху.

Например, есть три картинки с разным разрешением image1, image2, image3. Код будет выглядеть следующим образом:

То есть, у image1 размер 800х600, у image2 500 пикселей в высоту, а ширина не указана,

у image3 размеры не указаны,

Разметка позволяет подстраховаться, указав, например, альтернативную картинку. Если первый URL будет недоступен, то в предпросмотр подгрузится вторая картинка. Очередь (приоритет) — сверху вниз.

Например:

Если картинка http://site.com/example.jpg недоступна, подгрузится следующая http://site.com/example1.jpg.

Facebook Og (Open Graph) Meta Etiketleri

Bildiğiniz gibi Facebook’ta bir web sayfası paylaştığımızda, Facebook o sayfadan edindiği bazı içerikleri bu gönderide gösterir. En alttaki resimde de göreceğiniz gibi o sayfa ile ilgili bir başlık, özet ve resim kullanarak, gönderiyi daha ilgi çekici hale getirmeye çalışır.

Ancak Facebook her zaman paylaşılan sayfa ile ilgili doğru resim, başlık veya açıklamayı kullanmayabilir. Örneğin gönderide kullanılan resim, genellikle sayfadaki resimler içerisinden seçilir ama bu seçilen resim sayfamızı iyi temsil etmeyebilir. Sayfada daha güzel resimler varken, en alakasız resim gönderide paylaşılabilir.

Site sahibi olarak biz, herhangi bir sayfamız facebook’ta paylaşıldığında, alakasız içerikler gösterilmesini istemeyiz.

Peki Facebook paylaşımlarında gösterilecek resim vb bilgileri ayarlayabilir miyiz?

Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.

Пример:

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер px, второе изображением не имеет указанных размеров и третье изображением имеет размеры px в высоту.

Robots

HTML пример

Или же:

Что он делает?

Мета-теги “robots” всем поисковым ботам (роботам) или определенным ботам-обходчикам («googlebot», «bingbot», «duckduckbot» и т. д.), как обрабатывать страницу. Обычно это связано с тем, как должна быть проиндексирована страница.

Действительно ли он необходим?

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

Есть несколько причин, по которым вы могли бы заставить поисковые системы действовать иначе:

• noindex: используйте этот тег, если вы хотите скрыть страницу от поиска. (Не полагайтесь на это в целях безопасности. Помните, это всего лишь техническое решение.)
• nofollow: это полезно для блогов, которые принимают контент от авторов, но не проверяют его. Таким образом, если партнерские ссылки будут размещены на странице, Google не будет следовать им.
• nosnippet или max-snippet: управляет отображением вашего текста, изображения или фрагмента видео в поиске.
• noarchive: если существуют более старые кэшированные версии страницы, используйте этот тег, чтобы запретить поисковым системам показывать их.
• unavailable_after:: это хороший вариант для ограниченного продвижения, например, в период продаж в Черную пятницу. Если вы, захотите привлечь трафик на страницу с октября по декабрь, возможно, имеет смысл убрать все из поиска после завершения праздников и прекращения действия сделок.

Настройка meta-тегов Open Graph в функционале темы WordPress плагинами SEO.

Кто систематически следит за новостями от Facebook, может заметить, что в последнее время функционал этой социальной сети часто обновляется. Вышло даже вот такое предупреждение:

В связи с этим, старые мета теги перестают работать в новых шаблонах или спорят с некоторыми SEO-плагинами. Иногда выскакивают такие предупреждения при проверке работоспособности установленных meta-тегов в Отладчике Обмена новостями — Sharing Debugger.

На моем основном блоге dg-palych.ru, на старом шаблоне, эти мета теги работали безукоризненно. Но, потом, я установил на сайт профессиональный платный шаблон, где автором уже были интегрированы эти функции, непосредственно в тему. Так что устанавливать их дополнительно, отпала необходимость.

На этом же сайте, где Вы находитесь, некоторые функции Open Graph так же предусмотрены. Но требуют некоторых дополнений. Здесь установлен шаблон для WordPress от западных разработчиков Muffin Group — BeTheme, который я предлагаю в своем видео-курсе, упомянутом выше.

Большинство профессиональных платных шаблонов разработаны, именно, по этому принципу. В следствие чего, установка на них дополнительных meta-тегов, в большинстве случаев, не требуется.
В шаблоне BeTheme имеются свои SEO и meta настройки. Некоторые функции я отключил, так как использую внешний, установленный дополнительно, всем известный, SEO-плагин All In One SEO Pack. Как его устанавливать и настраивать, найдете в одной из статей блога dg-palych.ru.

Чтобы внести дополнительные настройки, заходите в Консоль блога — All In One SEO — Управление модулями и активируете вкладку «Социальные мета«, переходите в ее настройки.

Основных настройкахГлавной страницы

Настройках изображения

В Настройках Facebook, первое — нажмите на значок вопроса Facebook Admin ID. Откроется дополнительная информация, где найдете ссылку http://findmyfbid.com/.

В строке Facebook App ID подставляете значение ID Вашего приложения, о создании которого мы говорили выше. Дальше, выбираете опции Веб-сайт, если у Вас статическая Главная страница, или блог, если вместо Главной — лента анонсов записей блога.
Генерировать теги и использовать ключевые слова.

Социальные ссылки

настроек Twitter

Социальные настройки плагина All In One SEO Pack этим не ограничиваются. Кто с ним знаком, знает, что в Редакторе WordPress, после каждой статьи, присутствуют такие же настройки этого плагина, но уже для каждой статьи отдельно.

Там есть Основные настройки и появились обновленные Социальные настройки. Где Вы так же можете, для большей уверенности, вписывать название статьи, ее описание, выбирать рисунок и его размер.

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

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.

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

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

Facebook Debugger

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

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

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

Шаг 1. Внедрение микроразметки сайта Open Graph

Вручную или используя готовые плагины для CMS. Рассмотрим последний вариант на примере WordPress.

Вариант 1

Заходим в панель управления и выбираем раздел «Плагины». В открывшемся меню выбираем «Добавить новый», в строке поиска вводим название плагина, который нас интересует — Open Graph.

Выбираем подходящий вариант и нажимаем «Установить».

Сохраняем изменения и вуаля — установка готова!

Аналогичным образом можно внедрить микроразметку для Joomla, Magento и других систем управления сайтом.

Вариант 2

Подходит для самописных админок, в которые нельзя интегрировать готовые продукты. Здесь вам понадобится доступ к исходному коду сайта.

Сначала нужно добавить протокол Open Graph. Для этого в тег <html> прописываем атрибуты xmlns и prefix. Так мы говорим системе, что на странице будет использоваться OG. Вот пример синтаксиса для активации протокола: <html xmlns:og=»http://ogp.me/ns#»>.

А это пример того, как выглядит внедрение протокола на работающем сайте:

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

-og:title — заголовок статьи;

— og:url — адрес страницы;
— og:image — картинка поста;— og:type — тип контента, который присутствует на странице: статья, видео, новость;

— og:site_name — название сайта;

— og:description — краткое описание, превью.

А так — дополнительные:

• og:local — язык и регион;
• og:audio — сообщает, что на странице есть аудиофайлы;
• og:video — сообщает, что на странице есть видеофайлы.

Выбираем те элементы, которые хотим видеть в своих превью и прописываем между тегами <head> и </head>. В итоге должно получиться так:

<!DOCTYPE HTML>
<html lang=»ru»>
<head>
<html prefix=»og: http://ogp.me/ns#»>
<title>ЗАГОЛОВОК СТРАНИЦЫ</title>
<meta property=»og:title» content=»ЗАГОЛОВОК СТРАНИЦЫ» />
<meta property=»og:type» content=»article» />
<meta property=»og:url» content=»ССЫЛКА НА СТРАНИЦУ» />
<meta property=»og:image» content=»ССЫЛКА НА ПРЕВЬЮ» />
<meta property=»og:audio» content=»ССЫЛКА НА АУДИО ФАЙЛ» />
<meta property=»og:description» content=»ОПИСАНИЕ СТРАНИЦЫ» />
<meta property=»og:locale» content=»ru_RU» />
<meta property=»og:locale:alternate» content=»en_US» />
<meta property=»og:site_name» content=»НАЗВАНИЕ САЙТА» />
<meta property=»og:video» content=»ССЫЛКА НА ВИДЕО» />
…
</head>
<body>
</body>

При необходимости элементы могут содержать дополнительные свойства. Например, в атрибут og:image можно добавить ширину (width) и высоту (height) картинки в пикселях. Исходный код при этом будет выглядеть так: <meta property=»og:image:width» content=»500″ /> или так: <meta property=»og:image:height» content=»400″ />.

Финальный этап — проверка корректности отображения сниппета статьи. Чтобы убедиться, что при написании кода вы не допустили ошибок и превью отображается так, как и было задумано, воспользуйтесь дебаггером Open Graph на Facebook.

Разметку OG поддерживает большинство современных соцсетей — Facebook, Printerest, Viber, Telegram, WhatsApp. Twitter тоже есть в этом списке. Но для него мы рассмотрим еще один полезный инструмент — Twitter Cards.

Результаты тестирования

Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог. На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.

Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.

Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.

Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.

Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.

Дополнительные атрибуты Open Graph

Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.

• og:audio — URL звукового файла, который относится к описываемому объекту;
• og:determiner — слово, которое должно быть перед названием объекта в предложении. Оно может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать;
• og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US;
• og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта;
• og:site_name — название сайта, на котором размещена информация об объекте;
• og:video — URL видео файла, который относится к описываемому объекту.

Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:

Пример Open Graph СМИ Republic

Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.

Шаг 2. Внедрение Твиттер Кардс

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

• Summary Card — содержит описание, картинку и заголовок.
• Summary Card with Large Image — вариант, аналогичный предыдущему. Только здесь используется большая картинка.
• Photo Card — пост с фотографией в центральной части. Может публиковаться без заголовка.
• Gallery Card — мини-галерея из четырех изображений. При необходимости можно указывать авторство картинок. Описание и заголовки не обязательны.

Теперь нужно прописать эти элементы внутри метатегов <head> и </head>. Отметим, что разметка Twitter Cards основана на стандарте Open Graph, поэтому и варианты написания кода для внедрения на сайт будут очень похожими. Так выглядит пример синтаксиса для стандартной карточки (summary):

<head>
<title>ЗАГОЛОВОК СТРАНИЦЫ</title>
<meta name=»twitter:card» content=»summary»>
<meta name=»twitter:site» content=»@ваш корпоративный аккаунт в Твиттере»>
<meta name=»twitter:title» content=» «Название статьи»>
<meta name=»twitter:description» content=»Анонс материала. Например, из этой статьи вы узнаете то-то и то-то.»>
<meta name=»twitter:image» content=»http://site.ru/картинка для анонса.jpg»>
…
</head>
<body>
</body>

Это только базовый перечень атрибутов. В зависимости от того, какая карточка используется, он может меняться. Например, при заполнении данных для Product Card можно добавлять элемент twitter:label, который показывает стоимость товара. Полный вариант написания атрибута выглядит вот так: <meta name=»twitter:label» content=»Price»>.

Здесь нам нужно скачать архив и распаковать его.

При распаковке нас интересуют данные в папках player и player_streaming. Их нужно перенести в корневую папку вашего сайта.

Если все хорошо, находим между тегами <head> и </head> атрибуты twitter:image и twitter:player. В первый мы прописываем картинку для анонса: <meta name=»twitter:image» content=»http://site.ru/картинка для анонса.jpg»>, а во второй — ссылку на видео, которое публикуем: <meta name=»twitter:player» content=»URL видео»>. Дополнительно можем указать ширину и высоту плеера с помощью тегов width и height.
Как и в случае с Open Graph, последний этап настройки — проверка корректности отображения поста. Это можно сделать с помощью валидатора Card Validator.

Просто укажите адрес поста и посмотрите как он будет отображаться после публикации. Если все корректно, подтвердите добавление и публикуйте готовый материал

Обратите внимание, что валидация проводится только перед размещением первого поста. Затем карточки будут добавляться автоматически

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

Что бы превратить вашу 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.

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: от теории к практике

Для того чтобы 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.

Open Graph как использовать?

Итак, чтобы вашу страницу смогли считывать социальные сети необходимо добавить определенные мета-теги. Эти мета-теги будут размещаться в разделе <head></head> и теге <meta>. Давайте разберем базовую Open Graph разметку, то есть 4 основных атрибута для каждой страницы.

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

• og:description – Краткое описание вашей страницы или видео. Чем-то напоминает Meta-tag description, но без символьных ограничений;
• og:image — URL-адрес изображения, которое можно указать самостоятельно просто добавить в этот атрибут ссылку;
• og:url — URL-адрес страницы, который использоваться в качестве постоянного ID.

Пример:

Читайте в нашем блоге: 5 причин почему поисковая система не видит страницы вашего сайта

Что такое Open Graph на практике

• og:title — название страницы (длина в Facebook — до 95 символов);
• og:type — тип контента на сайте (статья, фильм, песня или профиль человека);
• og:image — адрес изображения, используемого в качестве превью (на Facebook минимальный размер составляет 50 х 50px, максимальный вес 5 МБ);
• og:url — адрес страницы.

Open Graph мета-теги

В результате применения этих тегов расшаренная запись в Facebook будет отображаться так:

В дополнение к 4 обязательным мета-тегам Open Graph есть дополнительные:

• og:site_name — название сайта, на котором расположен сайт;
• og:description — краткое описание (максимальная длина Facebook — 297 символов);
• og:locale — язык, используемый на сайте и его местонахождение;
• og:locale:alternate — Другие языки, в которых доступна страница (для мультиязычных сайтов). Вы можете указать несколько дополнительных языков.

Геолокации: широта, долгота, высота над уровнем моря:

<meta property="place:location:latitude" content="37.416382/">

<meta property="business:contact_data:email" content="/">

Типы контента

На Facebook широкий спектр дополнительных типов данных, которые мы можем назначить для страницы (вы должны поместить их в тег «og:type»). Типы контента сгруппированы по категориям:

• Виды деятельности: activity, sport;
• Бизнес: bar, company, restaurant, cafe, hotel;
• Группы: sports_league, sports_team;
• Организации: band, government, non_profit, school, university;
• Люди: actor, athlete, author, director, musician, politician, public_figure;
• Места: city, country, landmark, state_province;
• Развлечения: album, book, drink, food, game, product, song, movie, tv_show;
• Веб-сайты: blog, website, article.

Для некоторых типов контента есть уникальные дополнительные маркеры. Например, тип «article» может определить дату публикации — «article:published_time» или категорию статьи «article:section». Для того, чтобы использовать это нужно немного магии в микро-разметке:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2015-05-20T10:31:27+00:00" />
<meta property="article:section" content="Алгоритм Google" />

Для получения дополнительной информации о дополнительных маркерах для типов контента нужно покопать документацию Open Graph (на русском).

Подытожим: все еще есть над чем работать

Понимание того, как выглядит средняя веб-страница, дает представление о текущих тенденциях. И тут же возникают вопросы.

Почему вебмастера редко прописывают alt для изображений? Почему заголовки h1 есть только на 60% страниц? Почему title и description заполняют далеко не все? Почему не спешат внедрять микроразметку JSON-LD? А ведь это базовое SEO…

Хочется сказать, что все это неважно — все-таки анализировались страницы из ТОП-20 Google. То есть Google считает их в общей массе авторитетными — даже без «альтов»

Но не забываем, что SEO — это комплекс факторов. Мы рассмотрели лишь малый технический аспект. Даже если взять только оптимизацию сайта, то там более 60 разных работ. А еще ссылки, упоминания, локализация, поведенческие факторы…

Так что от «подкрутки» базового технического SEO ваш сайт точно не пострадает. А если учесть, что на других площадках не все так хорошо, то рост более чем реален.

Основные теги протокола Open Graph

А теперь давайте разберем основные теги, использованные при описании статьи, которые необходимо добавлять исключительно между тегами head документа:

• og:title – при помощи данного тега мы можем передавать заголовок поста в социальные сети;
• og:description – как следует из названия, тег служит для передачи краткого описания поста, длина краткого описания не должна превышать 300 символов;
• og:type – указывает тип объекта, это может быть статья, музыка, видео и прочее. Подобных объектов в протоколе Open Graph не так уж и много и если на странице их несколько, то указывать стоит только один, который вы считаете основным;
• og:url – адрес страницы, который будет использован в качестве постоянного идентификатора;
• og:image – тег необходим для указания изображения, которое следует брать при формировании поста. Какими должны быть изображения, а точнее, какого размера достаточно интересный вопрос, который мы обсудим в следующий раз;
• og:site_name – имя сайта (его название) на котором размещена та самая информация об объекте.

Images in open graph

While adding your image as should often be enough, sometimes it can be challenging to get your image to show up correctly. If you seem to be running into trouble, the open graph standard includes a few image tags such as vs as well as the and .

Try to make sure you’re following all of the . Additionally, some of the social networks have image requirements. Twitter for instance requires a ratio of 2:1 with a minimum size of 300×157 and a maximum size of 4096×4096 that’s under 5MB and of JPG, PNG, WEBP or GIF format.

If you’re stuck, test your tags using the social media network’s tools to see if you can find the issue.

Подготовка

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

Подробнее об оформлении сниппетов для ВКонтакте можно почитать в документации

У социальных сетей разные требования по размеру изображений: ВКонтакте, например, рекомендует 510×228 пикселей. В корне сайта создадим папку og-image-files. Перейдём в неё, положим туда подготовленное фоновое изображение и создадим ещё одну папку внутри под названием og-fonts для шрифтов на изображении.

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 в 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;} //Описание публикации