Структурированные данные и разметка Schema для блога по шагам

Структурированные данные и разметка Schema для блога по шагам

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

Микроразметка Schema совсем не микро.

Многие боятся вникать в дебри разметки и со мной было тоже самое. Уж не знаю почему ее назвали микроразметка, на сайте Схемы ее называют просто разметка (markup) или microdata markup. Разметка микроданных звучит намного точнее. Сайт schema.org выглядит немного непонятным для начинающего. Прежде чем начать вникать в микроданные, я решила посмотреть, как сделали структурирование на самом сайте Schema. Для этого я воспользовалась инструментом Google Search Console и вставила ссылку их блога в проверку структурированных данных. И что я там увидела… целых 55 ошибок и 36 предупреждений! Эта информация меня даже приободрила, если у самого schema.org ошибки, то и нам они не так страшны.

Микроразметка Schema - это не сложно

Прежде всего стало понятно, что совсем необязательно исправлять абсолютно все предупреждения поисковиков. Например, когда мы размечаем статью схемой BlogPosting или Article, у нас потребуют указать атрибут publisher (издатель). Если мы посмотрим инструкцию то увидим, что этот атрибут мы можем указать или в схеме Organization или в схеме Person, что было бы логично, так как не всякий издатель может быть организацией.

микроразметка publisher

Но в реальности, атрибут publisher вы сможете указать только в типе схемы Organization. Типичному блогу, с одним единственным автором, не всегда есть необходимость размечать данные Organization — логотип, номер телефона и адрес. В принципе, можно не вставлять эти данные, вам же нет необходимости выводить их в поисковый сниппет. Показывая нам ошибки или предупреждения, поисковики всего-лишь нам сообщают: «если вы не предоставите эти свойства, то мы не будем показывать их в Rich Snippet или Knowledge Graph».

Если вас все-таки раздражают ошибки и предупреждения в кабинете вебмастера, постараемся выполнить все условия.

поле address отсутствует или пусто

Структурируем блог пошагово.

Сделать микроразметку для HTML-сайта не сложно, труднее дела обстоят с сайтом на WordPress. Рассмотрим все значения структурирования и их порядок для блогов. В каждом пункте сначала указан HTML-код и как реализовать все это в WordPress. Если у вас есть элементы не попавшие в описание этой статьи, просто переходите по ссылке нужной вам схемы «https://schema.org/Organization» и ищите подходящий атрибут. Сайт имеет также русскоязычную версию https://ruschema.org, но она не до конца переведена, при желании, поучаствуйте в переводе.

WebPage — разметка тела сайта.

Первым делом размечаем все тело нашего сайта указывая его как веб-страницу. Для этого в тег <body> добавьте следующие значения:

HTML
<body itemscope itemtype="https://schema.org/WebPage">

На своем сайте WordPress откройте файл Header.php и под закрывающим тегом <head> найдите <body <?php body_class() ?>>, добавьте значения таким образом:

PHP
<body <?php body_class() ?> itemscope="itemscope" itemtype="https://schema.org/WebPage">

Organization — разметка данных компании и логотип .

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

Обычному блогу, не относящегося к организации эти значения размечать нет необходимости. Если вы частное лицо, то атрибуты для разметки ссылок на ваши социальные сети, адреса и прочих личных данных добавьте в тип схемы Person (персона), о которой речь пойдет ниже в этой статье (см. п.6). Если в вашей теме есть логотип, то разметьте его как itemprop=«image» и включите в схему WPHeader.  Кстати, плагин YOAST создает эту разметку в <head> автоматически, если вы настроите его в блоке «Социальные сети — Yoast SEO».

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

HTML
<div itemscope itemtype="https://schema.org/Organization"><!-- Тип схемы Organization (для компаний)  -->
   <meta itemprop="name" content="Название блога"><!-- Название блога  -->
   <meta itemprop="address" content="Город">
   <meta itemprop="telephone" content="+70000000000"><!-- Телефон  -->

<!-- Размечаем социальные сети  -->
   <link itemprop="url" href="https://example.com/"><!-- URL-адрес официального сайта лица или организации-->
      <ul>
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись на Facebook</a></li><!-- Ссылки на ваши соцсети или сайт автора -->
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись в Google+</a></li>
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись в Twitter</a></li>
      </ul> <!-- Размечаем логотип  -->
   <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
     <a href="https://example.com/" class="" rel="home" itemprop="url image"><img width="Ширина лого" height="Высота лого" src="https://example.com/logo.jpg" class="logo" alt="" itemprop="url image"></a>
     <meta itemprop="width" content="Ширина лого">
     <meta itemprop="height" content="Высота лого">
   </div>
</div>

Если необходимо указать адрес полностью, можно разметить таким образом:

HTML
<span  itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
   <span itemprop="streetAddress">ул. Цюрупы, 38</span>
      <meta itemprop="addressLocality" content="Город">
      <meta itemprop="addressRegion" content="Регион">
      <meta itemprop="addressCountry" content="Страна">
      <meta itemprop="postalCode" content="000000">
</span>

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

<a href="https://example.com/" class="" rel="home" itemprop="url"></a>

Циклическую ссылку лучше убрать и с главной страницы на сайте WordPress. Смотрим пример:

PHP
<div itemscope itemtype="https://schema.org/Organization"><!-- Тип схемы Organization для компаний  -->
   <meta itemprop="name" content="<?php bloginfo('name'); ?>"><!-- Название блога  -->
   <meta itemprop="address" content="Какой-то город"><!-- Адрес целиком или страна/город  -->
   <meta itemprop="telephone" content="+70000000000"><!-- Телефон  -->
   <link itemprop="url" href="<?php echo esc_url( home_url( '/' ) ); ?>"><!-- Ссылка на сайт -->
      <ul class="social-icon">
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись на Facebook</a></li><!-- Ссылки на ваши соцсети -->
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись в Google+</a></li>
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись в Twitter</a></li>
      </ul>
   <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><!-- Логотип  -->
      <?php the_custom_logo(); ?>
      <meta itemprop="width" content="Ширина лого">
      <meta itemprop="height" content="Высота лого">
   </div>
</div>

Как разметить структурированные данные в логотипе и убрать циклические ссылки на сайте WordPress читаем на странице Добавляем логотип и убираем ссылку на главную.

WPHeader — разметка названия, описания сайта и изображения в header.

Теперь необходимо разметить название, описание сайта и изображение шапки сайта.

HTML 
<div itemscope itemtype="https://schema.org/WPHeader"><!-- размечаем название, описание сайта в header -->
    <h1 id="site-title" itemprop="name"><a href="https://example.com/" rel="home" title="">Название блога</a></h1>
    <p class="site-description" itemprop="description">Краткое описание блога</p>
    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <a href="https://example.com/" title="" rel="home"> <img itemprop="url image" src="https://example.com/img.jpg" width="750" height="200" alt="Мой сайт"></a>
    <meta itemprop="width" content="750">
    <meta itemprop="height" content="200"> </span>
</div>

На главной странице оборачиваем в тег <h1> заголовок сайта и убираем ссылку. На всех прочих страницах указываем ссылку на главную, а заголовок оборачиваем в тег <span>. Код разметки для изображения заголовка на сайте WordPress берем из этой статьи — Способы добавления изображения в header.

SiteNavigationElement — разметка меню сайта.

Размечая меню сайта мы выделяем весь блок меню и задаем атрибуты ссылкам.

HTML
<nav class="mainNav" itemscope itemtype="https://www.schema.org/SiteNavigationElement"><!-- размечаем блок меню -->
   <ul>
       <li><a itemprop="url" href="#">Блог</a></li><!-- размечаем ссылки меню -->
       <li><a itemprop="url" href="#">Об авторе</a></li>
       <li><a itemprop="url" href="#">Контакты</a></li>
   </ul>
</nav>

Микроразметка меню в WordPress. В тег nav добавляем тип схемы SiteNavigationElement.

PHP
<?php if ( has_nav_menu( 'primary' ) ) : ?>
   <nav class="mainNav" itemscope itemtype="https://www.schema.org/SiteNavigationElement">
      <?php
      // Primary navigation menu.
      wp_nav_menu( array(
      'theme_location' => 'primary', 'container' => 'false',
      'menu_class' => 'has-subnav',
      ) );
      ?>
   </nav>
<?php endif; ?>

Теперь необходимо разметить ссылки меню WordPress, добавив атрибут itemprop=«url»,  для этого вставляем этот код в файл function.php:

PHP
/**
 * The data markup navigation menu, wp_nav_menu
**/
 function nav_menu_schema($content) {
	$pattern = "<a";
	$replacement = '<a itemprop="url"';
	$content = str_replace($pattern, $replacement, $content);
	return $content;
}
add_filter('wp_nav_menu', 'nav_menu_schema');

Blog — разметка главной страницы блога.

Чаще всего главной страницей блога является страница всех анонсов статей. На ней необходимо разметить: описание блога, заголовки анонсов, ссылки и краткое содержимое статей. Часто на главной странице отсутствует блок с описанием сайта, тогда в сниппет попадает лишь краткое содержание первого анонса. Будет намного лучше, если мы добавим описание сайта и скроем его через display:none;, если не захотим показывать посетителям.

<div itemscope="itemscope" itemtype="https://schema.org/Blog">
    <!-- размечаем схему Блога -->
    <div itemprop="description" style="display:none;">
        Текст.
    </div><!-- Описание главной страницы блога, скрываем, если не хотим показывать -->
    <div id="post-1">
        <!-- начало анонса  -->
        <div class="entry-image">
            <a href="#" rel="bookmark" title=""><span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img alt=" " height="высота" itemprop="url contentUrl" src="#" width="ширина"></span>
            <meta content="ширина" itemprop="width">
            <meta content="высота" itemprop="height"></a>
        </div><!-- изображение анонса  -->
        <h2 class="entry-title" itemprop="headline"><a href="#" itemprop="mainEntityOfPage" rel="bookmark">Название анонса записи</a></h2><!-- Заголовок анонса  --> <span class="entry-date"><time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">Время</time><time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time></span> <!-- Дата публикации и обновления -->
        <div class="entry-content" itemprop="description">
            <!-- Содержимое анонса  -->
            <p>Текст.</p>
        </div><!-- конец 1 анонса  -->
        <div id="post-2">
            <!-- начало 2 анонса  -->
            <div class="entry-image">
                <a href="#" rel="bookmark" title=""><span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img alt=" " height="высота" itemprop="url contentUrl" src="#" width="ширина"></span>
                <meta content="ширина" itemprop="width">
                <meta content="высота" itemprop="height"></a>
            </div><!-- изображение анонса  -->
            <h2 class="entry-title" itemprop="headline"><a href="#" itemprop="mainEntityOfPage" rel="bookmark">Название анонса записи</a></h2><!-- Заголовок анонса  --><!-- Сообщаем, что содержимое анонса относится к определенной странице, атрибутом mainEntityOfPage указываем ссылку на эту статью --> <span class="entry-date"><time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">Время</time><time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time></span> <!-- Дата публикации и обновления -->
            <div class="entry-content" itemprop="description">
                <!-- Содержимое анонса  -->
                <p>Тескт.</p>
            </div>
        </div>
    </div>
</div>

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

PHP
<div itemscope="itemscope" itemtype="https://schema.org/Blog"><!-- размечаем схему Блога -->
<div itemprop="description" style="display:none;">Текст.</div><!-- Краткое описание главной страницы блога, скрываем, если не хотим показывать. -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php get_template_part( 'template-parts/post/content', 'excerpt', get_post_format() ); ?>
<?php endwhile; ?>
<?php else: ?>
<?php get_template_part( 'template-parts/post/content', 'none' ); ?> <?php endif; ?>
</div>

За содержимое анонса записи в моей теме отвечает файл content-excerpt.php, делаю разметку свойств Blog и показываю поисковикам, где у меня распологается изображение, заголовок, дата и краткое содержание записей. Как разметить изображение в WordPress, читаем чуть ниже.

PHP
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( has_post_thumbnail() && ! post_password_required() && ! is_attachment() ) : ?>
<div class="archive-image">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('post-thumbnail');?>
</a>
</div><!-- изображение анонса, код разметки изображений смотрите ниже -->
<?php endif; ?>

<h2 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>" rel="bookmark" itemprop="mainEntityOfPage"><?php the_title(); ?></a></h2><!-- Заголовок анонса  -->

<!-- Сообщаем, что содержимое анонса относится к определенной странице, атрибутом mainEntityOfPage указываем ссылку на эту статью -->
<span class="entry-date">
<?php _e('Published', 'nanima'); ?><time class="published" itemprop="datePublished" datetime="<?php echo get_the_date('c'); ?>"><?php the_time(get_option('date_format')); ?></time>
<?php _e('Updated', 'nanima'); ?><time class="updated" itemprop="dateModified" datetime="<?php the_modified_date('c'); ?>"><?php the_modified_date(get_option('date_format')); ?></time> </span><!-- Дата публикации и обновления -->

<div class="entry-content" itemprop="description"><!-- Содержимое анонса  -->
<?php the_excerpt(); ?>
</div>

</div>

BlogPosting, Person и Organization — разметка статьи блога.

Статья блога размечается схемой BlogPosting, кроме всех прочих атрибутов задаваемых содержимому, проверка структурированных данных потребует указать и схему Person, а также атрибут publisher (издатель). В том случае если у нас блог частного лица, то мы бы хотели добавить этот атрибут в схему Person, но publisher поисковики относят к схеме Organization, поэтому укажем в статье все данные этой схемы. (Но совсем необязательно указывать эти данные, если вы не хотите их показывать в сниппете.)

HTML
<div itemscope itemtype="https://schema.org/BlogPosting">
    <!-- размечаем схему BlogPosting -->
    <meta content="https://example.com/zagolovok-statyi/" itemprop="mainEntityOfPage"><!-- сообщаем, что содержимое блока относится к данной странице, в свойстве content указываем ссылку на эту статью -->
    <h1 class="post-title" itemprop="headline">Заголовок статьи</h1><!-- Заголовок статьи  --> <span class="entry-date"><time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished"></time><time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time></span> <!-- Дата публикации и обновления --> <span class="byline" itemprop="author" itemscope itemtype="https://schema.org/Person"><!-- Схема Person --> <a href="https://example.com/author/" itemprop="url" rel="author"><!-- ссылка на страницу автора --> <span itemprop="name">Имя автора</span></a><!-- Имя автора --></span>
    <meta content="Менеджер" itemprop="jobTitle"><!-- Должность автора (необязательно)-->
    <meta content="Корпорация монстров" itemprop="worksFor"><!-- Место работы автора (необязательно)-->
    <meta content="pochta@email.com" itemprop="email"><!-- Электронный адрес (необязательно)--><!-- Социальные сети автора  -->
    <link href="https://example.com/" itemprop="url"><!-- URL-адрес официального сайта лица или организации-->
    <ul>
        <li>
            <a href="#" itemprop="sameAs" rel="external" target="_blank">Facebook</a>
        </li><!-- Ссылки на соцсети автора -->
        <li>
            <a href="#" itemprop="sameAs" rel="external" target="_blank">Google+</a>
        </li>
        <li>
            <a href="#" itemprop="sameAs" rel="external" target="_blank">Twitter</a>
        </li>
    </ul>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <!-- Указываем издателя, логотип и контакты -->
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display:none;">
            <!-- Логотип. Этот блок можно скрыть от посетителей. --><img alt="" height="" itemprop="url image" src="https://example.com/logo.jpg" width="">
            <meta content="ширина" itemprop="width">
            <meta content="высота" itemprop="height">
        </div>
        <meta content="Название сайта" itemprop="name">
        <meta content="+70000000000" itemprop="telephone"><!-- Номер телефона (необязательно для Google, но обязательно для Яндекс) -->
        <meta content="Город" itemprop="address"><!-- Адрес полностью или город/страна (необязательно для Google, но обязательно для Яндекс) -->
    </div><span itemprop="articleSection"><!-- Рубрика статьи --> <a href="https://example.com/wordpress/" rel="category tag">WordPress</a></span> <span itemprop="keywords"><!-- Метки (теги) или ключевые слова--> <a href="https://example.com/tag/metka/" rel="tag">Метка</a></span> <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img alt="" height="" itemprop="url contentUrl" src="https://example.com/thumbnail.jpg" width=""></span>
    <meta content="ширина" itemprop="width">
    <meta content="высота" itemprop="height"><!-- изображение -->
    <div class="entry-description" itemprop="description">
        <!-- Краткое содержание статьи  -->
        <p>Текст.</p>
    </div>
    <div class="entry-content" itemprop="articleBody">
        <!-- Статья  -->
        <p>Текст.</p>
    </div>
</div>

В Wordpres за вывод содержимого статьи отвечает файл content.php.

PHP
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="https://schema.org/BlogPosting"><!-- размечаем схему BlogPosting -->
    <meta itemprop="mainEntityOfPage" content="<?php the_permalink() ?>"><!-- сообщаем, что содержимое блока относится к данной странице, в свойстве content указываем ссылку на эту статью -->

    <?php if ( is_single() ) :
        the_title( '<h1 itemprop="headline">', '</h1>' );
    else :
        the_title( sprintf( '<h2 itemprop="headline"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
     endif;
    ?><!-- Заголовок статьи  -->

    <span class="entry-date">
        <time class="published" itemprop="datePublished" datetime="<?php echo get_the_date('c'); ?>"><i class="fa fa-clock-o" aria-hidden="true"></i></time><time class="updated" itemprop="dateModified" datetime="<?php the_modified_date('c'); ?>"><?php the_modified_date(get_option('date_format')); ?></time>
    </span><!-- Дата публикации и обновления -->

    <span class="byline" itemprop="author" itemscope itemtype="https://schema.org/Person"><!-- Схема Person -->
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>" rel="author" itemprop="url"><!-- ссылка на страницу автора -->
        <span itemprop="name"><i class="fa fa-user-circle" aria-hidden="true"></i><?php the_author(); ?></span><!-- Имя автора --></a>
        <meta itemprop="jobTitle" content="Менеджер"><!-- Должность автора (необязательно)-->
        <meta itemprop="worksFor" content="Корпорация монстров"><!-- Место работы автора (необязательно)-->
        <meta itemprop="email" content="pochta@email.com"><!-- Электронный адрес (необязательно)-->
        <!-- Социальные сети автора  -->
        <link itemprop="url" href="https://example.com/"><!-- URL-адрес официального сайта лица или организации-->
        <ul>
            <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Facebook</a></li><!-- Ссылки на соцсети автора -->
            <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Google+</a></li>
            <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Twitter</a></li>
        </ul>
    </span>

    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><!-- Указываем издателя, логотип и контакты -->
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display:none;"><!-- Логотип. Этот блок можно скрыть от посетителей. -->
            <img itemprop="url image" src="https://example.com/logo.jpg" alt="<?php bloginfo('name'); ?>" width="385" height="150"/> <meta itemprop="width" content="385"> <meta itemprop="height" content="150">
        </div>
        <meta itemprop="name" content="Название сайта">
        <meta itemprop="telephone" content="+700000000"><!-- Номер телефона (необязательно для Google, но обязательно для Яндекс) -->
        <meta itemprop="address" content="Город"><!-- Адрес (необязательно для Google, но обязательно для Яндекс) -->
    </div>

    <span itemprop="articleSection" class="category-list"><!-- Рубрика статьи -->
        <?php the_category (' ', ' ') ?>
    </span>

    <span class="tags" itemprop="keywords"><!-- Метки (теги) или ключевые слова-->
        <?php echo get_the_tag_list(' ', ' ');?>
    </span>
        
    <?php if ( has_post_thumbnail() && ! post_password_required() && ! is_attachment() ) : ?>
    <div class="post-image">
        <?php the_post_thumbnail('post-thumbnail');?>
    </div><!-- .post-thumbnail end -->    
    <?php endif; ?><!-- изображение, разметку смотрите ниже -->

    <div class="entry-content" itemprop="description articleBody"><!-- В одном блоке размечаем и краткое содержание статьи и тело статьи  -->
        <?php the_content(); ?>
    </div>
    
</div>

Тут может возникнуть вопрос, почему статью мы размечаем схемой BlogPosting, а не Article? Схема BlogPosting — это дочерний тип schema.org/Article. Каждый BlogPosting является статьей, но не каждая статья размечается как BlogPosting, потому что статья может относится к различным типам разметки: BlogPosting, NewsArticle (новости), ScholarlyArticle (научная статья). Другими словами, если у вас есть типичный блог, будет лучшим решением использовать schema.org/Blog с schema.org/BlogPosting.

ImageObject — разметка изображений.

С разметкой изображений на HTML сайте нет никаких затруднений.

HTML
	<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><!-- сообщаем, что это изображение-->
		<img alt="" height="высота" itemprop="url contentUrl" src="https://example.com/thumbnail.jpg" width="ширина"><!-- Укажем ссылку на изображение -->
		<meta content="" itemprop="width"><!-- укажем ширину изображения -->
		<meta content="" itemprop="height"><!-- и высоту -->
	</span>

Что касается разметки изображений на сайте WordPress, то здесь нам на помощь приходят парочка функций для разметки изображений (thumbnails) блога на главной и архивных страницах и для разметки изображений в содержимом статей.

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

<?php if ( has_post_thumbnail() && ! post_password_required() && ! is_attachment()  ) : ?>
<?php
    $meta   = wp_get_attachment_metadata( get_post_thumbnail_id( get_the_ID() ) );
    $width  = $meta['width'];
    $height = $meta['height'];
?>
    <div class="" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <a href="<?php the_permalink(); ?>" class="" rel="bookmark" itemprop="mainEntityOfPage">
        <?php the_post_thumbnail('post-thumbnail'); ?>
        <meta itemprop="width" content="<?php echo esc_attr( $width ); ?>">
        <meta itemprop="height" content="<?php echo esc_attr( $height ); ?>">
    </div><!-- .post-thumbnail end -->
<?php endif; ?>

Второй код вставляется в файл functions.php. Он также хорошо работает. Но если в теме или в самом WP изменится порядок вывода атрибутов изображения, тот что в строке $pattern, функцию необходимо будет изменить, так как она просто не сработает.

/**
The data markup thumbnail (разметка миниатюр)
*/
function theme_markup_thumbnail($content) {
$pattern = '!<img width="(.?)" height="(.?)" (.*?)/>!si';
$replacement = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url contentUrl" width="\1" height="\2" \3/><meta itemprop="width" content="\1"><meta itemprop="height" content="\2"></span>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('post_thumbnail_html', 'theme_markup_thumbnail');

Разметить изображения в статье можно при помощью этого кода, вставлять его надо также в файл functions.php.

/**
* The data markup image ( разметка изображений в контенте)
**/
function theme_markup_image($content) {
$pattern = '!<img (.?) width="(.?)" height="(.?)" (.?)/>!si';
$replacement = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" \1 width="\2" height="\3" \4/><meta itemprop="width" content="\2"><meta itemprop="height" content="\3"></span>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'theme_markup_image');

WPSideBar — разметка сайдбара.

HTML микроразметка для сайдбара.

HTML
<div class="widget-area" id="sidebar" itemscope itemtype="http://schema.org/WPSideBar" role="complementary">
</div>

В WordPress yайдите файл отвечающий за вывод сайдбаров, обычно это файл sidebar.php. Добавьте разметку во все сайдбары.

PHP
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
   <div id="sidebar" class="widget-area" role="complementary" itemscope itemtype="https://schema.org/WPSideBar"><!-- разметка -->
      <?php dynamic_sidebar( 'Sidebar' ); ?>
   </div><!-- #sidebar .widget-area -->
<?php endif; ?>

WPFooter — разметка футера.

Добавьте в тег footer соответствующую схему, как в примере ниже. Если у вас в подвале добавлено много различной информации, свойства к ним можно найти на сайте Schema.

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

WPAdBlock — разметка рекламного баннера.

Для рекламного блока тоже есть своя разметка.

HTML
<div itemscope itemtype="https://schema.org/WPAdBlock">
		<span>Реклама</span>
		<a href="ad-target-1.html" itemprop="url" rel="external"><img alt="Пример рекламного объявления 1" height="250" itemprop="image" src="ad-1.png" width="300"></a>
		<a href="ad-target-2.html" itemprop="url" rel="external"><img alt="Пример рекламного объявления 2" height="250" itemprop="image" src="ad-2.png" width="300"></a>
	</div>
СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

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

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

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт