Микроразметка Schema для блога часть 2

от ·

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

Разметка изображений

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

1
2
3
4
5
6
7

function micro_image($content) { 
global $post; 
$pattern = "; 
$replacement = '; 
$content = str_replace($pattern, $replacement, $content); 
return $content; } 
add_filter('the_content', 'micro_image');

За микроразметку картинок отвечает команда:

1

itemprop="image"

Разметка подвала сайта

Доходим и до самого низа сайта, так называемого его подвала. С ним все просто. Находим тег

и вставляем в него следующий код:

1

itemscope="itemscope"

У меня получилось вот так.

1

<footer id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter">

Ничего сложного тут не было.

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

С комментариями всё не много сложнее. Тут надо выделить автора, дату комментария и сам комментарий. Наш шаблон не поддерживает такой разметки. Поэтому необходимо сделать функцию, которая за нас все сделает. Вставляем следующий код в файл functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

function schema_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
< echo $tag; ?>  comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment- comment_ID(); ?>">
 if ( 'div' != $args['style'] ) : ?>

 comment_ID(); ?>" class="comment-body">
 endif; ?>


 if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>




 printf( __('
%s:
' ), get_comment_author_link() ); ?>
 if ( '0' == $comment->comment_approved ) : ?>
 _e( 'Ваш комментарий ожидает проверки модератором.' ) ?>


 endif; ?>

 comment_text( get_comment_id(), array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>


 comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>




 if ( 'div' != $args['style'] ) : ?>
 
 endif; ?>

}

Код большой, но это еще не все. Далее надо подключить данный код к нашим комментариям. Для этого открываем файл comments.php и ищем строчку:

1

 wp_list_comments( 'avatar_size=96&type=comment'); ?>

в эту строку нужно подключить функцию, которую мы только что реализовали и у нас получится вот так:

1

 wp_list_comments( 'avatar_size=96&type=comment&callback=schema_comment'); ?>

Благодаря данной функции мы смогли сделать микроразметку для:

  1. Автора комментария
  2. Даты комментария
  3. Самого комментария

Разметка сайдбара или боковой панели

Давайте теперь покажем роботу где у нас расположена панель и какие на ней стоят виджеты. Открываем файл sidebar.php, если у вас трехколоночный сайт, тогда открываем еще и sidebar-2.php. Не смотря на то, что у меня две колонки, разметку я все равно сделал в обеих файлах, мало ли захочу позже подключить третью колонку.

За разметку Sidebar отвечает команда:

1

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

Вот ее мы и подставляем и смотрим на результат:

1

<div class="sidebar s1" itemscope itemtype="http://schema.org/WPSideBar">

По аналогии делаем тоже самое и со вторым файлом:

1

<div class="sidebar s2" itemscope itemtype="http://schema.org/WPSideBar">

Давайте теперь обозначим расположение вижетов. Тут много менять не придется. Ищем в файле functions.php cледущий код:

1

if ( ! function_exists( 'alx_sidebars' ) )

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

1

itemprop="name"

Ищем в данной функции вот такой код:

1

'before_title' => '<h3>','after_title' => '</h3>'

Эта команда оборачивает имя видежета в тег

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

1

'before_title' => '<span itemprop="name"><h3>','after_title' => '</span></h3>'

так делаем во всех строках, которые будут в этой функции.

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

Разметка разделов сайта

В нашем шаблоне разделы расположены совсем в отдельном файле, поэтому я решил подойти к ним отдельно. Открываем файл page-title.php расположенный в папке /wp-content/themes/hueman/inc/

Находим строчки, говорящие нам, что если это страница для наших статей, то вместе заголовка, будем выводить категорию статьи:

1
2
3

 elseif ( is_single() ): ?>

    

  •  the_category(' / '); ?>

Давайте теперь сделаем разметку для этой категории:

1
2
3

 elseif ( is_single() ): ?>

    

  •  the_category(' / '); ?>

Вы заметили, что я обернул категории тегом и разметкой itemprop="articleSection"

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

1

 comments_number( '0', '1', '%' ); ?>

и оберните его в в итоге получится:

1

 comments_number( '0', '1', '%' ); ?>

А теперь переходит к самому главному.

Разметка главной страницы сайта

Наша главная страница разделена на две части:

  1. Слайдер последних статей
  2. Список последних публикаций

Давайте разберемся для начала с слайдером. Для внесения изменений ищем файл content-featured.php

Отмечаем начало обзора:

1

<div class="post-inner post-hover" itemscope itemtype="http://schema.org/BlogPosting">

Далее идет у нас крупным планом картинка, делаем разметку для нее:

1

 the_post_thumbnail('thumb-large', array('itemprop' => 'image'));

На картинке количество комментариев видно, считаем их:

1

 comments_number( '0', '1', '%' ); ?>

Ниже пошли категория, в которой размещена статья:

1

 the_category(' / '); ?>

Делаем разметку для даты статьи:

1

Микроразметка для заголовка статьи на главной:

1

<h2 itemprop="headline" class="post-title">

Ну и напоследок отрывок статьи который мы видим на главной страницы:

1
2
3


 the_excerpt(); ?>

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

На этом разметка всего сайта была закончена. Пришло время полюбоваться на результаты и проверить работу на ошибки.

Для проверка и Яндекс воспользуйтесь сервисом проверки микроразметки Schema.

Смотрим на результаты нашей работы:

результаты микроразметки шапки сайта

результаты микроразметки меню и статей на WP

Результаты разметки сайдбара и подвала сайта

Я протестировал главную страницу сайта. Как видим ошибок не обнаружено и все наша разметка стала четко структурированной.

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

Расскажите мне об Вашем опыте разметки сайта. Были ли у Вас с этим сложности. Пишите в комментариях буду рад помочь.

С уважением, Виктор

Рейтинг: 0

Автор публикации

11
не в сети 2 недели

Виктор

Молодой блогер с большим опытом :)

Комментарии: 10Публикации: 59Регистрация: 11-11-2015

Похожее ...

4 Комментарии

  1. доктор мясников:

    Здравствуйте! Скажите, актуальна ли ваша инструкция сейчас для того чтобы на моем кулинарном блоге на WP в выдаче яндекса отображались фото рецептов?

    Ответить

    Рейтинг: 0
  2. Виктор:

    доктор мясников, да актуальна. Так же будет рабоать и с рецептами

    Ответить

    Рейтинг: 0
  3. Дмитрий:

    Добрый день!

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

    image [ImageObject]:

    height: отсутствует (обязательное)

    url: отсутствует (обязательное)

    width: отсутствует (обязательное)

    Как изменить код, чтобы все шло гладко?

    Заранее спасибо!

    Ответить

    Рейтинг: 0
  4. Виктор:

    К сожалению на данный момент Google и Яндекс разделились. У каждой поисковой системы свои стандарты микроразметки. Поэтому угодить двум поисковикам не получится. Выбирайте тот вариант. На какую больше систему вы ориентированы.

    Ответить

    Рейтинг: 0

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Следи:

Панель управления

Регистрация

0
  • В вашей корзине:
    Пока пусто

Авторизация

Войти с помощью: 
Регистрация Напомнить пароль

Регистрация

Войти с помощью: 

Генерация пароля

Регистрация
Яндекс.Метрика