Пуленепробиваемая разметка open graph

Open Graph в других социальных сетях

Открытый протокол График используется не только Facebook, но и на других сайтах социальных сетей, в разной вариации. Вконтакте и Одноклассники, например, поддерживают стандартный Open Graph, потому их не выделяем.

Карты Twitter

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

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

• twitter:card — Определяет тип содержимого, разделяемых. В настоящее время эти типы карт:
  • > Player Card — Для сообщений, содержащих видео / музыку;
  • > App Card — позволяет скачать мобильное приложение;
  • > Summary Card — для других типов публикаций;
  • > Summary Card with Large Image — Позволяет дополнительно включать изображение

Пример:

<meta name=”twitter:card” content=”summary_large_image”/>

• twitter:title — похож на og:title. Максимальная длина составляет 70 символов,
• twitter:description — похож на og:description. Максимальная длина составляет 200 символов,
• twitter:image — Тег подобен og:image, в котором идет адрес изображение. Максимальный вес изображения: 1 МБ, а минимальный размер 60 х 60 пикселей.
• twitter:site — Указывает имя страницы учетной записи на Twitter.

Пример:

<meta name=”twitter:site” content=”@RomanusRU”/>

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

Вид Твиттер карт:

Вот так круто выглядит Rich Pin:

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

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

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

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

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

Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма
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-сайт.

Introduction

The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used on Facebook to allow
any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined
together, there isn’t a single technology which provides enough information to
richly represent any web page within the social graph. The Open Graph protocol
builds on these existing technologies and gives developers one thing to
implement. Developer simplicity is a key goal of the Open Graph protocol which
has informed many of the technical design decisions.

Зачем нужна микроразметка?

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

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

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

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

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

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

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

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

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

Open Graph плагин WordPress

Можно использовать специальные, отдельные модули Open Graph в WordPress. Смотрите на этой странице wordpress.org. Или введите в поиск по плагинам, в админ-панели, метку open graph и оп-ля. Выбирайте подходящий вам, ориентируйтесь по количеству установок (популярность) и как часто обновляются:

Результаты по запросу: open graph

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

В заключение

Добавление метаданных Facebook Open Graph в WordPress — один из хороших способов привлечь больше посетителей/читателей на ваш веб-ресурс.

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

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

И только так можно привлечь внимание пользователей при просмотре ленты новостей

Типы

Следующие типы используются при определении атрибутов в протоколе 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

Why you should care about Open Graph

Having an appealing image that catches attention, and a great title and description to entice people to click on your snippet, is a game changer if you’re looking to leverage social-media traffic.

Open Graph markup lets you gain control over how your URLs’ snippets are shown on social media. In SEO we’re obsessed with optimizing our titles and meta descriptions to get the highest possible click-through rate (CTR), but when it comes to social media, this is often forgotten. That’s a shame, because the battle for attention on social media is just as fierce.

Geoffrey Colon, Microsoft, Bing Ads (opens in a new tab)

Izzi Smith, Owner, Izzi Smith (opens in a new tab)

Does Open Graph increase my rankings?

No, Open Graph does not directly increase your rankings. We do think, though, that Open Graph helps search engines determine the context of your content, similar to Schema.org. So in a way, your SEO performance does benefit from Open Graph.

As we pointed out in the previous section, if you want to drive more traffic from social media, it’s highly recommended that you implement Open Graph.

After all, it doesn’t cost much extra time to also fill in an Open Graph title, description, and image when you’re fine-tuning your title and meta description.

Kevin Indig (opens in a new tab), Director of SEO, Shopify (opens in a new tab)

Arnout Hellemans, OnlineMarkethink (opens in a new tab)

Don’t miss out on potential traffic

Be alerted to any Open Graph issues in real-time. With 24/7 monitoring, ContentKing detects issues and alerts you in real-time.

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

С помощью тегов OG, потому что мы можем установить страницу:

1. Подготовленное для пользователей броское название (согласитесь, наши сеошные тайтлы — не годятся для «желтой прессы» в 90% случаев);
2. Адекватное описание (вместо куска текста);
3. Графика (вместо случайного изображения со страницы).

Таким образом, мы будем улучшать CTR из соц. сетей и увеличим количество переходов.

Например, сервис Tumblr после реализации протокола Open Graph увеличил трафик с Facebook на 250%. Использование Open Graph особенно уместно на сайтах, связанных с таким темами, как:

• музыка;
• фильмы;
• телевидение;
• книги;
• спорт;
• общепит;
• приложения и игры;
• Кулинария;
• Женские порталы.

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

Implementations

The open source community has developed a number of parsers and publishing
tools. Let the Facebook group know if you’ve built something awesome too!

• Facebook Object Debugger —
  Facebook’s official parser and debugger
• Google Rich Snippets Testing Tool — Open Graph protocol support in specific verticals and Search Engines.
• PHP Validator and Markup Generator — OGP 2011 input validator and markup generator in PHP5 objects
• PHP Consumer —
  a small library for accessing of Open Graph Protocol data in PHP
• —
  a simple parser for PHP
• PyOpenGraph —
  a library written in Python for parsing Open Graph protocol
  information from web sites
• OpenGraph Ruby —
  Ruby Gem which parses web pages and extracts Open Graph protocol markup
• OpenGraph for Java —
  small Java class used to represent the Open Graph protocol
• RDF::RDFa::Parser —
  Perl RDFa parser which understands the Open Graph protocol
• WordPress plugin —
  Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
• Alternate WordPress OGP plugin —
  A simple lightweight WordPress plugin which adds Open Graph metadata to WordPress powered sites.

Продвижение с помощью метатегов

Начните думать о своем контенте на популярных платформах как о социальной рекламе.

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

Теги title и description позитивно сказываются на естественном ранжировании в поисковой системе. Метатеги для социальных сетей выполняют ту же роль – они повышают социальное воздействие, увеличивают трафик из социальных медиа и улучшают CTR.

Ирина Винниченко
Контент-маркетолог SEMANTICA

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

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

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:

Теги 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 были с нужными вам заголовками, изображениями и описаниями, метатеги должны выглядеть так:

<meta property=”og:title” content=”The Always-Up-to-Date SEO Checklist from Bruce Clay, Inc.” />

<meta property=”og:url” content=”https://www.bruceclay.com/blog/seo-checklist/” />

<meta property=”og:description” content=”Just getting started optimizing websites? Here’s a time-tested SEO checklist to keep on-hand during your projects.” />

<meta property=”og:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />

<meta property=”og:type” content=”article” />

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

Совет:

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

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):

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

Рассмотрим примеры применения микроразметки 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 – автор статьи.

Как общаться с технической поддержкой о мета-тегах

Чтобы не тратить зря время, не упоминайте расширение ПРОДЗЕН и термины «красная рожица», «грустная мордочка», «значок робота» и т.п.

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

Не ссылайтесь только лишь на наличие самого мета-тега.

Если статья новая и не получает показов — так и напишите.

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

Т.е. основным в вашем письме должно быть то, что возникли проблемы с публикацией. Про мета-тег можно вообще не упоминать, или упоминать в качестве дополнения.

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

Иногда можно подождать, пока ваше обращение будет отмечено как завершённое и написать ещё раз — если повезёт, вам ответит сотрудник, настроенный как-то помочь вам.

Так же можно обратиться за помощью в официальные группы Дзена в ВК или в телеграме.

Если ничего добиться не удастся, то остаётся только грустить вместе с грустным роботом.

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

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

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

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

• 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. Их мы и рассмотрим на конкретном примере.

Title

HTML пример

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

Тег <title> указывает на название страницы.

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

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

Этот тег пригодится, если вы хотите настроить свой заголовок специально для результатов поиска. Итак, допустим, вы написали кликбейт заголовок, чтобы посетители, которые его увидели, захотели узнать, о чем идет речь. Что-то вроде:

How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend

(Как заработать шестизначную зарплату, не имея ничего, кроме ноутбука, паспорта и лучшего друга)

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

Это 56 символов, теперь заголовок вписывается в лимиты Google, и работает так же хорошо, как оригинал.

Как с помощью расширения обнаружить статьи с мета-тегом?

Значок грустного робота на странице канала

При установленном расширении проверка главной страницы канала производится автоматически. Если канал отмечен как неиндексируемый, то в меню расширения пункт «Неиндексируемые» заменяется значением «Канал не индексируется».

Если в меню расширения в редакторе указано «Канал не индексируется», значит в коде страницы канала присутствует <meta property=»robots» content=»none» />

Ещё раз подчеркну, что наличие этого кода, а значит и соответствующего оповещения в меню — норма для новых каналов.

Значок «грустного робота» на странице публикации

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

Если в публикации есть такой значок, значит в коде страницы есть <meta name=»robots» content=»noindex» />

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

Поиск публикаций с мета-тегом

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

Для того чтобы начать поиск нужно выбрать пункт меню «Неиндексируемые».

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

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

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

Теоретически это может быть воспринято как DDOS-атака или как попытка накрутить просмотры. На практике с этим проблем не было, но предупредить я вас обязан.

Можно проверить все публикации на канале, а можно проверить лишь 20 последних.

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

На моём канале только на одной публикации есть этот мета-тег.

Как настроить микроразметку 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.

Canonical Link

HTML пример

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

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

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

Google не принимает дубликаты контента. Но допустим, что ваша статья «5 способов повысить безопасность WordPress сегодня» – это рерайт статьи под названием «7 способов повышения безопасности WordPress» от 2015 года.

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

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