С недавнего времени Яндекс начал поддерживать разметку стандартами Schema.org видео и картинок. Еще на конференции optimization представители Яндекса проговорились, что будущее за семантическим WEB. Поэтому не теряем время зря и идём в ногу со временем, продолжая размечать микроразметкой всевозможные элементы на сайте. Почитать про поддерживаемые в Яндексе поля при разметке картинок можно здесь, а про разметку видео контента — здесь.

Как известно. в настоящее время вручную прописать необходимый код для разметки контента по стандарту Schema.org в текстовом редакторе WordPress не получится, так как он просто вырезает данный код. Это связано с особенностью TinyMCE, который входит в базовый пакет WordPress. И тут ничего не поделаешь. По крайней мере я не знаю, как вручную через встроенный текстовый редактор вставлять разметку. Если Вы знаете как это делать, то напишите, пожалуйста, в комментариях.

Из этой ситуации есть выход — плагин для WP — Post Snippets. Качаем его здесь и устанавливаем. Он прекрасно справляется с задачами разметки видео и картинок на сайте.

Разметка видео контента

В начале готовим код необходимый для разметки видео файла. Привожу пример разметки видео на странице с информацией про настройку robots.txt:

<div itemscope itemtype="http://schema.org/VideoObject">

<h2>Видео: <span itemprop="name">Настройка robots.txt</span></h2>

<meta itemprop="thumbnail" content="https://www.seowind.ru/wp-content/uploads/videoschema/robots_icon.jpg" />

<object style="height: 390px; width: 640px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://www.youtube.com/v/paohjOu8--g?version=3" /><embed style="height: 390px; width: 640px;" type="application/x-shockwave-flash" src="http://www.youtube.com/v/paohjOu8--g?version=3" allowFullScreen="true" allowScriptAccess="always" allowfullscreen="true" allowscriptaccess="always" /></object>

<br />

<span itemprop="caption">robots.txt, настройка роботса</span><br />

<span itemprop="description">Видео урок настройки файла для поисковых систем robots.txt</span>

<meta itemprop="width" content="640" />

<meta itemprop="height" content="390" />

</div>

Чтобы данный код работал, его нужно вставить на страницу с помощью плагина Post Snippets. Заходим в настройки данного плагина и нажимаем кнопку «Добавлен новый сниппет». В поле «заглавие» вводим заголовок и ставим галочку в «Shortcode» (рисунок 1).

[post snippets настройка_jpg]

Далее заходим в саму запись, выбираем курсором место где будет вставлен уже размеченный видеоконтент и нажимаем на значок жёлтый значок «post_snippets.desc» (рисунок 2). Плагин на выбор предложит созданные варианты разметов в формате shortcode. Все! Готово! Видеофайл размечен. Проверить можно с помощью валидатора яндекса и гугла.

[значок post_snippets.desc]

Разметка картинок

Картинки я разметил на данной странице (рисунки 1 и 2). В плагине post snippets действуем по аналогии как и для разметки видео. Код для разметки рисунка 1 я использовал следующий:

<div itemscope itemtype="http://schema.org/ImageObject">

<span itemprop="name">Настройка post snippets</span>

<p style="text-align: center;"><img src="https://www.seowind.ru/wp-content/uploads/2012/12/post-snippets-nastrojka.jpg" itemprop="contentUrl" /></p>

<p style="text-align: center;">Рисунок 1. <span itemprop="description">Настройка post snippets</span></p>

<meta itemprop="width" content="670" />

<meta itemprop="height" content="271" />

</div>

Если я кому-то помог, буду признателен за лайки, твиты и +1!