Микро-разметка Schema.org

Микро-разметка для Google и Яндекс с учётом всех нововведений Schema.org

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

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

Ведь после того, как Google значительно поменял свои представления о микро — форматах, данная тема стала, как нельзя актуальна.

Сегодня я постараюсь исправить своё упущения и хотя бы вкратце расскажу вам, как лучше организовать микро — разметку на своём сайте либо блоге, по примеру: abrek-ad-abra.ru.

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

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

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

Общая микро-разметка ресурса для Google и Яндекс

Если вы ещё никогда не размечали свой блог придётся начинать с самых азов, к счастью основная микро разметка таких элементов, как; заголовок, странички с записями и комментарии, сегодня подходит как для Google так и для Яндекс.
Давайте начнём размечать свой сайт с шапки (заголовка), но для этого сначала, если у вас установлен плагин: «All in One SEO Pack», посмотрите не активирована ли в нём функция: «Use Schema.org Markup», если да, то отключите.
Проверить; наличие или отсутствие, атак же все имеющиеся ошибке в микро-разметке вашего блога вы всегда можете в специальных валидаторах от Google и Яндекс.

Вносим микро-разметку в заголовок шапку блога «header»

Итак, открываем файл темы: «header.php», дальше находим: тег <body> и после него, что то на подобии:

<div id="header">

Конечно может быть и что то совсем другое, у меня например так:

<div id="pro-main">

Теперь нам нужно в конец данной строки прописать микро-элемент нашей новой разметки заголовка, вот такого вида:

itemscope itemtype="http://schema.org/WPHeader"

Вот, что у меня получилось:

<div id="pro-main" itemscope itemtype=" http://schema.org/WPHeader">

Дальше нам необходимо добавить микро-разметку к описанию блога, ищем, что то похожее на:

<h3><?php bloginfo('description'); ?></h3>

И добавляем элемент разметки:

itemprop="description"

Результат:

<h3 itemprop="description"><?php bloginfo('description');?></h3>

Также старайтесь, чтобы описание вашего ресурса не превышало более 160 символов.

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

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

На этот раз элемент микро-разметки у нас будет вот такой:

itemprop="headline"

Вот, что должно у нас получиться:

<h1 itemprop="headline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Теперь уже, при желании можно проверить результат в каком либо указанном выше валидаторе и если всё нормально идём дальше, а вернее ниже по блогу, так как: «header» у нас с вами уже размечен, приступаем к внедрению микро-разметки в статью.

Вносим микро-разметку в запись статью «single»

Находим в теме: «single.php», открываем его для редактирования и сразу после:

<?php get_header(); ?>

В первый же блок div с каким либо классом, например:

<div class="contentLayout">

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

itemscope itemtype="http://schema.org/Article"

Вот, как это выглядит на: «Progress-project»:

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

Дальше ставим микро-разметку в заголовок поста, ищем:

<h2><?php the_title(); ?></h2>

И добавляем элемент:

itemprop="name"

В результате получаем:

<h2 itemprop="name"><?php the_title(); ?></h2>

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

<?php the_author() ?>

Оборачиваем её следующим образом:

<span itemprop="author"><?php the_author() ?></span>

И переходим к дате публикации:

<?php the_time('Y-m-d') ?>

Результат:

<span itemprop="datePublished"><?php the_time('Y-m-d') ?></span>

К разметке статьи мы ещё с вами сегодня вернёмся а пока переходим к комментариям.

Вносим микро-разметку в комментарии «comments»

Чтобы нам одним махом разметить сразу все элементы в комментариях, давайте воспользуемся преимуществом «php».

Итак, открываем для редактирования файл: «functions.php», где в самом низу, перед: ?>, устанавливаем специальную функцию, которая в дальнейшем и будет размечать комментарии на нашем блоге:

function progress_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID(); ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author">
<?php echo get_avatar($comment,$size='48'); ?>
</div>
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">
<?php printf( __('<div class="comcreator" itemprop="creator">%s:</div>' ), get_comment_author_link() ); ?>
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ) ?></em>
<br />
<?php endif; ?>
<div class="comment-meta commentmetadata" itemprop="datePublished"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s' ), get_comment_date('Y-m-d')); ?></a><?php edit_comment_link( __( '(Edit)' ), '&nbsp;&nbsp;', '' );
?>
</div>
<div itemprop="text"><?php comment_text( get_comment_id(), array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></div>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}

Дальше переходим уже в: «comments.php», находим:

<?php wp_list_comments(); ?>

Дальше добавляем в эту функцию, такую строчку:

callback=progress_comment

Результат:

<?php wp_list_comments('callback=progress_comment'); ?>

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

Здесь же попутно находим похожую строку с функцией:

<h4 id="comments">Комментарии к статье: <?php comments_number();?></h4>

И добавляем к ней микро-разметку:

<h4 id="comments">Комментарии к статье: <span itemprop="commentCount"><?php comments_number();?></span></h4>

Только, что мы рассмотрели основную базовую, общепринятую микро-разметку веб-ресурса, которая нравится, как Google, так и Яндексу, дальше я планирую рассказать уже о нововведении Google, в виде дополнительных микро форматах, если вы хотите ограничится прежним вариантом микро-разметки, которую мы рассмотрели только что, то дополнительно к уже проделанной работе, добавьте в: «functions.php», код-функцию, представленную в самом низу статьи. Данный код, поможет вам автоматически разметить все изображения в теле поста.

Новая микро-разметка от Google

Итак, на этот раз, Google решил «порадовать» нас своей обновлённой библиотекой: «schema.org/Article».
В принципе нововведений на этот раз не так уж и много, но без их внедрения появляется куча ошибок, давайте рассмотрим поближе, что же именно на этот раз добавил Google.

Сразу хочу сказать, что все нововведения библиотеки: «schema.org/Article», в виде дополнительных микро-форматов, относятся исключительно к разметке постов и их действие не должны выходить за их пределы.

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

В файле: «single.php» активной темы поверх заголовка поста, пишем главную библиотеку микро-разметки:

<div itemscope itemtype="http://schema.org/Article">
<h2><?php the_title(); ?></h2>

Так же, незабываем и о закрывающемся: </div>, после кода выводящего все элементы поста.

Google микро-разметка «MainEntityOfPage» — «Schema.org/WebPage»

Далее уже в этот блок прописываем новые элементы микро разметки:

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="URL_страницы"/>

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

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>

Google микро-разметка «Publisher» — «Schema.org/Organization»

Сразу же, после уже прописанных только что строк, вставляем как бы новый блок с информацией о публикации поста:

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <img itemprop="url" src="полный_путь_до_логотипа_ресурса" style="display:none;"/>
        <meta itemprop="width" content="ширина_логотипа">
        <meta itemprop="height" content="высота_логотипа">
    </div>
    <meta itemprop="name" content="название_вашего_ресурса">
    <meta itemprop="telephone" content="+7 xxx xxx xx xx (можно написать, что угодно)">
    <meta itemprop="address" content="Ваш_Город">	
</div>

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

Google микро-разметка «DateModified»

Добавляем сразу после только, что вставленного «мини-блока», дату обновления поста:

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

В принципе, что касаемо данного блока то на этом всё. Вот, как всё это дело выглядит на «Прогресс-проект»:

<div itemscope itemtype="http://schema.org/Article">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="http://abra.devpage.ru/wp-content/uploads/2015/12/logotip-progress-project-0-02.png" alt="logotip «Progress-project»" style="display:none;"/>
<meta itemprop="width" content="211">
<meta itemprop="height" content="149">
</div>
<meta itemprop="name" content="SEO-Бизнес блог: «Progress-project»">
<meta itemprop="telephone" content="+7 xxx xxx xx xx">
<meta itemprop="address" content="Город">
</div>
<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/>

Теперь давайте ещё разметим все наши картинки в теле поста и на этом на сегодня можно будет закончить.

Google микро-разметка «Image» — «Schema.org/ImageObject»

Опять же, будем это делать в автоматическом режиме с помощью php.
Открываем: «functions.php» и в самый низ этого файла вставляем код:

function progress_filter_image($content) {
$ar_mk	= '!<img (.*?) width="(.*?)" height="(.*?)" (.*?)/>!si';
$br_mk = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" itemprop="image" \\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;		 
}
add_filter('the_content', 'progress_filter_image');

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

Думаю, что я сполна пополнил пробел «Progress-project», по поводу отсутствия какой либо информации о микро-разметки и поэтому со спокойной душой на сегодня с вами прощаюсь, желаю удачи и до новых встреч!

Вам также может понравиться

Микроразметка видео на блоге

Микроразметка видео на блоге

Микро-разметка расширяющая сниппет — библиотека NewsArticle

Микроразметка расширяющая сниппет — библиотека NewsArticle

Мета-тег robots. Более точная настройка индексации WordPress

Мета-тег robots. Более точная настройка индексации WordPress

Как удалить ссылки в комментариях

Как удалить ссылки в комментариях