Внедрение на сайт тегов семантической микроразметки schema.org – по обновлённому стандарту

Сегодня мы обозначим свой блог обновлённой семантической микрометрической разметкой schema.org )) Я постараюсь подробно на некоторых примерах разъяснить это предприятие и, надеюсь, отныне некачественная разметка личного сайта вас печалить не станет. Рассмотрим по шагам – как внедрить разметку Schema.org в файлы шаблона

 

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

 

 

 

 

 

 

А позже дам ссылку на статью о том, как сделать микроразметку на сайте со статьями различной тематики: нужно понимать, что микроразметка разная, в зависимости от темы сайта – но вот коли на сайте публикуются статьи разной тематической направленности, то … в общем – полезно!!

 

 

 

Как известно,  Google вновь поменял свои алгоритмы чтения стандартов разметки Schema! В особенности изменились требования меток обозначения картинок. Яндекс пока пробуксовывает!

 

А что это значит!? А это значит то, что свою прежнюю разметку необходимо заменить на новую, чтобы не отставать от времени, скажем так.

 

 

Заменить-то мы заменим, но вот батюшка Яшка противится грамоте,… а это приведёт к ошибкам в коде (тестируя валидаторами). Хотя, – это вовсе и не ошибки, а так – предупреждения, пока Яша не подтянулся до мировых стандартов (а он подтянется: так говорит практика). Так что не берите в голову… но по возможности правильно разметьте сайт, и – всё будет здорово!

 

 

 

 

к оглавлению

знакомство с Schema.org — стандартом семантической микроразметки данных в интернетсети

 

 

 

 

Привожу цитату:

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.

 

Приступим:

 

 

 

к оглавлению

как удалить разметку hentry

 

 

 

 

Давайте сделаем так: откройте вкладки этого адреса и этого – первая – валидатор микроразметки web-мастера Яндекс и вторая – ссылка Google.

 

Вбиваем свой домен и проверяем.

 

 

Мы сейчас, условно, рассматриваем вариант чистого сайта. Хотя у кого-то может уже быть какая-то другая разметка: её придётся подправить или удалить. Итак..! …взгляните на картинку.

 

 

 

 

Здесь явно наличие разметки hentry. Я её часто встречал на сайтах и, как и многие, склоняюсь к удалению этого ненужного свойства сайта.

 

 

Делается это так: открываем файл функций functions.php и в самый его финал (перед тегом ?>) прописываем следующий пример:

 

 

 

//удаление класса РАЗМЕТКА hentry start
add_filter('post_class', 'wph_remove_hentry_class');
function wph_remove_hentry_class($classes) {
$classes = array_diff($classes, array('hentry'));
return $classes;
}
//удаление класса hentry end

 

 

 

…после этих действий класс разметки исчезнет.

 

 

Я же не стану толковать о вреде или целесообразности разметки hentry, решать вам: я удалил – считаю, что от неё ни тепло ни холодно!

 

 

Далее…

 

 

 

к оглавлению

размечаем шапку сайта в файле header.php классом разметки schema

 

 

 

 

Смотрим на фото: это чистый документ header.php – у вас будет что-то похожее. Принцип везде один – в нём и будем разбираться.

 

Рассмотрим пример динамического варианта вывода ИМЁН сайта.

 

 

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

 

 

В начале славных дел нас интересует цикл отработки шапки сайта от  закрывающего тега </head>  а именно: <div id="header"> или <div class="logo"> это кому как удобнее. Далее поймёте почему.

 

 

А пока, для более подробного ознакомления с разметкой shema.org, можете почитать на страничке Яндекс. Или изучить синтаксис ТУТ.

 

 

Итак: предлагаю начать со строки <div class="logo"> – обернём (или поместим) циклы вывода site_title и site_description в необходимый контейнер схемы разметки.

 

 

Следует добавит атрибуцию самого контейнера: от кавычек “logo” – через пробел – библиотеку разметки itemscope itemtype="http://schema.org/WPHeader".

 

 

Должно получится так:

 

 

<div class="logo" itemscope itemtype="http://schema.org/WPHeader">

 

 

Далее обозначаем отдельные поля с указанием на конкретное свойство схемы (нас интересуют свойства ИМЕНИ и ОПИСАНИЯ сайта): берём строки c h1 title и h2 description (описание сайта) и к их div-классам добавляем необходимые атрибуты… itemprop="headline" И itemprop="description"

 

 

Получится так:

 

 

<h1 class="site_title" itemprop="headline"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>

 

 

…и вот так…

 

 

<h2 class="site_description" itemprop="headline"><?php $theme->option('site_description'); ?></h2>

 

 

 

…ИЛИ лучше description (ДЕСКРИПШН) завернуть не в h2, а так, например: (но об этом подробнее в следующих статьях)

 

 

<span itemprop="description" class="site_description" style="display:none;"><?php $theme->option('site_description'); ?></span>

 

 

И как только закончим занятие разметки шапки сайта, идём проверять главную страницу блога в Гугл и Яндекс.

 

Должно получится так: (как понимаете, сайдбар вы ещё не разметили, а поэтому не обращаем внимания)

 

 

 

 

 

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

 

 

 

 

Ну, что.!? Продолжим… и приступим к вопросу:

 

 

 

 

к оглавлению

как внедрить микроразметку Schema.org на главную страницу и в разделы архивов – категорий

 

 

 

 

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

 

 

 

 

Вероятнее всего, вам нужно будет открыть и работать с файлом вашей темы post.php (в корне шаблона). У кого-то может быть имя документа иное. Ищите тот файл, который отвечает за вывод и формирование главной страницы, категорий, тегов и архивов.

 

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

 

 

 

 

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

 

 

Итак, вот полный файл post.php размеченный стандартом schema.org (советую кликнуть по фотке, открыть в другом окне и изучать – а я буду пояснять)

 

 

 

 

Строка номер три (3):

 

 

<div class="post" itemscope itemtype="http://schema.org/Article">

 

 

Див класс post (у вас будет иной класс – я здесь поменял имена, понятности ради) – в этот контейнер помещён цикл выводов анонсов главной страницы. И, как понимаете, к нему добавлена библиотека itemscope itemtype="http://schema.org/Article" Артикль. И вы проделываете то же самое.

 

 

5 – строка: div-класс информации об анонсе.

 

Дело в том, что новые стандарты разметки подразумевают замены стандартов, как то: дата должна быть двух вариантов – число написания itemprop="datePublished" и число редактирования itemprop="dateModified".

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

 

 

А пока переходим к строке – 13: это заголовок статьи (анонса) к нему следует добавить атрибут itemprop="headline"  Прописывайте…

 

Строка – 14: php – вывод миниатюры записи стандартом thumbnail. У вас миниатюры могут выводиться как-то иначе: или обычной фоткой статьи, или … словом, смотрите (о выводе картинок, также ниже).

 

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

 

 

Можно  сделать так: прежде всего весь код php обернуть в див-класс. То.е перед <php вывода картинки прописать строку

 

 

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

 

 

 

…А в сам php код добавить вот такую фразу после full , array('itemprop' => 'image')

 

 

Должно получиться так:

 

 

<div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div>

 

 

Не забывайте о закрывающем </div>.

 

 

Переходим к строке – 20:

 

Это сам текст анонса. Здесь спорный вопрос: кто-то выводит, а кто-то – нет. Я выводил какое-то время…

 

 

И если будете размечать анонс статьи и вы, то делайте так, как показано в коде ниже: т.е оберните php код в свойство itemprop="articleBody".

 

 

<div class="mihalica" itemprop="articleBody">
<?php
the_content('');
?>
</div>

 

 

…обратите внимание на ДИВ класс (имя любое) и его закрывающий тег.

 

 

 

Проверяем на тестерах разметки! (ссылки выше).

 

 

 

 

Как видите, получается вот такая картинка (относительно всех анонсов главной): имя статьи, и сам анонс.

 

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

 

 

 

Теперь поясню: вот эти красные ошибки вовсе и не ошибки, но предупреждения GOOGLE web мастеру о незаполненных полях опубликованной записи, и всего делоф! А посему, я – считаю для своего сайта вывод этой инфы на страничках анонса ненужным. Вы можете вывести. Тогда будет всё зелёненькое (и не забывайте тестировать свою работу по разметке в Яндекс). Об этом расскажу ниже… в вопросе:

 

 

 

 

 

 

 

 

 

 

 

к оглавлению

как микрозметить стандартом schema страницу сайта

 

 

Открываем файл, который на вашем сайте отвечает за вывод отдельного поста. У меня это  post-single.php Я этот файл нарочно оставил на финал, чтобы вы как-то пообвыклись и въехали в принцип.

 

 

Приступим: всё аналогично !!!

 

 

<div class="ВАШ_класс-CSS_полной_записи" itemscope itemtype="http://schema.org/Article">

 

 

 

 

 

Далее выполним обновлённые требования Google по разметке… шамкаем информационную часть.

 

 

Здесь следует обратить внимание на див-класс post_meta (если он у вас был) – внутри него стоит всё заменить на новый стандарт!

 

Стандарт сказал – поехали))

 

 

Выводим дату: которая должна быть такого стандарта…

 

 

<span itemprop="datePublished"><?php the_time('Y-m-d'); ?></span>
<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d'); ?>"/>

 

 

Первая строка: дата публикации datePublished И- вторая – dateModified …

 

 

И тут же под строками следующая инфа (советую размечать так).

 

Обратите внимание на строки 1 и 2 !! у меня размечено только имя автора, но коли вам нужно разметить и рубрики – размечайте…

 

 

&nbsp;<span> - автор: </span><span itemprop="author"><?php the_author(); ?></span>
&nbsp;<span> Рубрика: <?php the_category(', '); ?></span>
<?php
if(is_user_logged_in()) {
?> &nbsp; <span class="meta_edit"><?php edit_post_link(); ?></span><?php
} ?>

 

 

Далее прописывайте следующее…

 

 

<meta itemscope content="ИМЯ ВАШЕГО САЙТА" itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink(); ?>"/>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="telephone" content="ЭЛ/П@yandex.ru">
<meta itemprop="address" content="спб Петербург">
<meta itemprop="name" content="ИМЯ САЙТА или...">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" itemprop="image" src="http://ДОМЕН.ru/wp-content/themes/ШАБЛОН/images/ИМЯ.jpg" style="display:none;" title="logo" alt="logo"/>
<meta itemprop="width" content="150">
<meta itemprop="height" content="130">
</div>
</div>
</div>

 

 

Обратите внимание на три закрывающих div-класса: первый (сверху) закрывает <div itemprop="logo" … второй див – <div itemprop="publisher" … и третий <div class="postmeta"> (если был – здесь показано для примера).

 

 

 

Ну, давайте поближе рассмотрим вариации разметки информационного цикла:

 

 

1 строка: имя вашего сайта.

 

2 строка: открывается поле информации организации. То есть разметочная инфа вашего блога.

 

3 – указывайте свой телефон или эл/п … Далее разбирайтесь по коду.

 

…

7 строка: логотип вашего сайта и путь до его расположения.

 

8 – 9 -соответственные размеры лого.

 

 

 

Вот как бы с этим и всё! Далее остаётся обозначить разметкой TITLE статьи, типа такого:

 

<h1 class="title" itemprop="headline"><?php the_title(); ?></h1>

 

 

 

к оглавлению

внедрить атрибуты микроразметки Schema.org в теги картинок

 

 

 

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

 

 

<div itemscope itemtype="https://schema.org/ImageObject">
<?php
if(has_post_thumbnail()) {
?>
<div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div><?php
}
?>
<meta itemprop="width" content="215">
<meta itemprop="height" content="128">
</div>

 

 

к оглавлению

микроразметка текста статей

 

 

 

 

 

У кого-то может быть в шаблоне такой вариант вывода текста статьи:

 

…тогда предлагаю php код вывода контента статьи обернуть в какой-нибудь отдельный div-класс, но с атрибутом itemprop="articleBody" посредством которого в валидаторе разметки вы увидите текст вашей записи, ибо этим разметочным атрибутом вы указываете БОТУ на статью… вот, мол, чурбан железный, глотай…

 

 

<div class="ww" itemprop="articleBody">
<?php
the_content('');
wp_link_pages( array( 'before' => '<div class="lists"><p>' . __( 'Следующая страничка:', 'themater' ) . '', 'after' => '</p></div>' ) );
?>
</div>

 

 

Вот теперь всё, товарищи.

 

Да, чуть не забыл, необходимо же

 

 

 

 

к оглавлению

добавить атрибутику микроразметки Schema.org в картинки внутри записи…

 

 

 

 

Для этого воспользуемся php кодом (автора сайта SEO-маяк, ссылка здесь) – его прописываем в файл функций… functions.php куда-то в финал, перед тегом ?>

 

 

//Разметка картинок статьи
add_filter('the_content', 'mayak_filter_image');
function mayak_filter_image($content) {
$ar_mk = '!<img (.*?) width="(.*?)" height="(.*?)" (.*?)/>!si';
$br_mk = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" \\1 width="\\2" height="\\3" \\4/><meta itemprop="width" content="\\2"><meta itemprop="height" content="\\3"></span>';
$content = preg_replace($ar_mk, $br_mk, $content);
return $content;
}
//ФИНАЛ Разметка картинок статьи

 

 

Таким образом, автоматом, ко всем картинкам статьи добавится нужный атрибут itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" …и ещё нужно сказать: этим кодом картинки будут считываться Google по новому стандарту, то есть к ним будет добавлена информация о ширине и высоте изображения. Если вы приглядитесь к коду, то заметите необходимые дополнения в отличие от старого.

 

 

Ну, что.!? …пробуем подсунуть свою работу Гугл и Яндекс..?

 

 

Должна быть такая картинка !!!!

 

 

 

 

 

 

 

 

 

 

Занавес закрывается! В следующей статье мы разметим сайбары, футер и комментарии… Так что подписывайтесь…

 

 

 

 

 

 

 

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress