Чтобы помочь поисковикам верно понять содержание сайта, необходимо внедрить в HTML-код разметку Schema. Разметить данные желательно в самом начале создания сайта, прежде чем поисковики проиндексируют ваш контент и создадут сниппеты так, как они поняли содержимое.
Микроразметка Schema совсем не микро
Многие боятся вникать в дебри разметки и со мной было тоже самое. Уж не знаю почему ее назвали микроразметка, на сайте Схемы ее называют просто разметка (markup) или microdata markup. Разметка микроданных звучит намного точнее. Сайт schema.org выглядит немного непонятным для начинающего. Прежде чем начать вникать в микроданные, я решила посмотреть, как сделали структурирование на самом сайте Schema. Для этого я воспользовалась инструментом Google Search Console и вставила ссылку их блога в проверку структурированных данных. И что я там увидела… целых 55 ошибок и 36 предупреждений! Эта информация меня даже приободрила, если у самого schema.org ошибки, то и нам они не так страшны.
Прежде всего стало понятно, что совсем необязательно исправлять абсолютно все предупреждения поисковиков. Например, когда мы размечаем статью схемой BlogPosting или Article, у нас потребуют указать свойство publisher (издатель). Если мы посмотрим инструкцию то увидим, что этот атрибут мы можем указать или в схеме Organization или в схеме Person, что было бы логично, так как не всякий издатель может быть организацией.
Но в реальности, атрибут publisher вы сможете указать только в типе схемы Organization (требования поисковиков на момент написания статьи). Типичному блогу, с одним единственным автором, не всегда есть необходимость размечать данные Organization — логотип, номер телефона и адрес. В принципе, можно не вставлять эти данные, вам же нет необходимости выводить их в поисковый сниппет. Показывая нам ошибки или предупреждения, поисковики всего-лишь нам сообщают: «если вы не предоставите эти свойства, то мы не будем показывать их в Rich Snippet или Knowledge Graph» .
Если вас все-таки раздражают ошибки и предупреждения в кабинете вебмастера, постараемся выполнить все условия.
Структурируем блог пошагово
Сделать микроразметку для HTML-сайта не сложно, труднее дела обстоят с сайтом на WordPress. Рассмотрим все значения структурирования и их порядок для блогов. В каждом пункте сначала укажу HTML-код и как реализовать всё это в WordPress. Если у вас есть элементы не попавшие в описание этой статьи, просто переходите по ссылке нужной вам схемы «https://schema.org/Organization» и ищите подходящий атрибут. Сайт имеет также русскоязычную версию https://ruschema.org, но она не до конца переведена, при желании, поучаствуйте в переводе.
1. WebPage — разметка тела сайта
Первым делом размечаем всё тело нашего сайта указывая его как веб-страницу. Для этого в тег <body> добавьте следующие значения:
HTML
<body itemscope itemtype="https://schema.org/WebPage">
Чтобы то же самое сделать на сайте WordPress откройте файл header.php и под закрывающим тегом </head> найдите тег <body <?php body_class() ?>>, добавьте значения Schema таким образом:
PHP
<body <?php body_class() ?> itemscope="itemscope" itemtype="https://schema.org/WebPage">
2. Organization — разметка данных компании и логотип
Следующим шагом необходимо разметить логотип, указать ссылки на ваши социальные сети, город и номер телефона — данные заполняем в том случае, если ваш блог принадлежит вашей компании.
Обычному блогу, не относящегося к организации эти значения размечать нет необходимости. Если вы частное лицо, то атрибуты для разметки ссылок на ваши социальные сети, адреса и прочих личных данных добавьте в тип схемы Person (персона), о которой речь пойдет ниже в этой статье. Если в вашей теме есть логотип, то разметьте его как itemprop=«image» и включите в схему WPHeader.
Вот пример микроразметки Organization для организаций.
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">Мы в Linked</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>
Если необходимо указать адрес организации полностью, то внутри Organization создайте схему PostalAddress. Если адрес будет отображаться для посетителей, то оборачивайте блок в ul li или в span, если разметка нужна только для поисковиков, то используйте тег meta. Пример:
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>
Реализация микроразметки Organization на 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">Мы в VK</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 читаем на странице Добавляем логотип и убираем ссылку на главную.
3. WPHeader — разметка названия, описания сайта и изображения в header.
Теперь необходимо разметить название, описание сайта и изображение header сайта.
HTML
<div itemscope itemtype="https://schema.org/WPHeader"><!-- размечаем название, описание сайта в header -->
<h1 id="site-title" itemprop="name">Название блога</h1>
<p class="site-description" itemprop="description">Краткое описание блога</p>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="https://example.com/img.jpg" width="750" height="200" alt="Мой сайт">
<meta itemprop="width" content="750">
<meta itemprop="height" content="200">
</span>
</div>
На главной странице оборачиваем заголовок сайта в тег <h1> и убираем ссылку. На всех прочих страницах указываем ссылку на главную, а заголовок оборачиваем в тег <span>. Если нужно разметить изображение заголовка на сайте WordPress, то читаем эту статью — Способы добавления изображения в header.
4. SiteNavigationElement — разметка меню сайта.
Размечая меню сайта мы выделяем весь блок меню и задаем свойства Schema ссылкам.
HTML
<nav class="mainNav" itemscope itemtype="https://www.schema.org/SiteNavigationElement"><!-- размечаем блок меню -->
<ul>
<li itemprop="name"><a itemprop="url" href="/home">Блог</a></li>
<li itemprop="name"><a itemprop="url" href="#">Об авторе</a></li>
<li itemprop="name"><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');
Обновлённый код для микроразметки меню WordPress смотрите в этом комментарии.
5. Blog — разметка главной страницы блога
Чаще всего главной страницей блога является страница всех анонсов статей. На ней необходимо разметить: описание блога, заголовки анонсов, ссылки и краткое содержимое статей. Часто на главной странице отсутствует блок с описанием сайта, тогда в сниппет попадает лишь краткое содержание первого анонса. Будет намного лучше, если мы добавим описание сайта.
HTML
<div itemscope="itemscope" itemtype="https://schema.org/Blog">
<div class="" itemprop="description">
<p>Текст.</p>
</div><!-- Описание главной страницы блога -->
<div>
<div id="post-1"><!-- анонс №1 -->
<div class="entry-image"><!-- если есть изображение анонса -->
<a href="#" title="">
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img alt="" height="высота" itemprop="url contentUrl" src="#" width="ширина" height="высота">
</span>
</a>
</div>
<h2 class="entry-title" itemprop="headline">
<a href="#" itemprop="mainEntityOfPage">Название анонса записи</a>
</h2><!-- Заголовок анонса -->
<span class="entry-date">
<time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">16.07.2018</time>
<time class="updated" datetime="2018-12-26T16:39:44+00:00" itemprop="dateModified">26.12.2018</time>
</span><!-- Если нужно показать дату публикации или обновления -->
<div class="entry-content" itemprop="description"><!-- Анонс статьи -->
<p>Текст.</p>
</div>
</div>
<div id="post-2"><!-- анонс №2 -->
<div class="entry-image"><!-- если есть изображение анонса -->
<a href="#" title="">
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img alt="" height="высота" itemprop="url contentUrl" src="#" width="ширина" height="высота">
</span>
</a>
</div>
<h2 class="entry-title" itemprop="headline">
<a href="#" itemprop="mainEntityOfPage">Название анонса записи</a>
</h2><!-- Заголовок анонса -->
<span class="entry-date">
<time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">16.07.2018</time>
<time class="updated" datetime="2018-12-26T16:39:44+00:00" itemprop="dateModified">26.12.2018</time>
</span><!-- Если нужно показать дату публикации или обновления -->
<div class="entry-content" itemprop="description"><!-- Анонс статьи -->
<p>Текст.</p>
</div>
</div>
</div>
</div>
Теперь посмотрим пример разметки главной страницы блога WordPress. В файле, который отвечает за вывод всех записей блога, обычно это index.php, добавляем следующие свойства.
Как вывести описание на странице рубрик, текст на странице блога WordPress или магазина Woocommerce
PHP
<div itemscope="itemscope" itemtype="https://schema.org/Blog"><!-- начало разметки анонсов Блога -->
<div itemprop="description">
<p>Текст.</p>
</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 или content.php, открываем его и указываем, где у вас располагается изображение, заголовок, дата и краткое содержание записей.
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(); ?>" 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(); ?>" itemprop="mainEntityOfPage">
<?php the_title(); ?>
</a>
</h2><!-- Заголовок анонса -->
<span class="entry-date"><!-- Если нужно показать дату публикации или обновления -->
<?php _e('Published', 'theme_textdomain'); ?><time class="published" itemprop="datePublished" datetime="<?php echo get_the_date('c'); ?>"><?php the_time(get_option('date_format')); ?></time>
<?php _e('Updated', 'theme_textdomain'); ?><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>
6. 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">16.07.2018</time>
<time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time>
</span> <!-- Дата публикации и обновления -->
<span itemprop="articleSection"><!-- Рубрика статьи -->
<a href="https://example.com/wordpress/">Wordpress</a>
</span>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img alt="" itemprop="url contentUrl" src="https://example.com/thumbnail.jpg" width="" height="">
<meta content="ширина" itemprop="width">
<meta content="высота" itemprop="height"><!-- изображение -->
</div>
<div class="entry-description" itemprop="description"><!-- Краткое содержание статьи -->
<p>Текст.</p>
</div>
<div class="entry-content" itemprop="articleBody"><!-- Статья -->
<p>Текст.</p>
</div>
<span itemprop="keywords"><!-- Метки (теги) или ключевые слова-->
<a href="https://example.com/tag/metka/">Метка</a>
</span>
<div class="" itemprop="author" itemscope itemtype="https://schema.org/Person"><!-- Схема Person -->
<a href="https://example.com/author/" itemprop="url" rel="author"><!-- ссылка на страницу автора -->
<span itemprop="name">Имя автора</span>
</a><!-- Имя автора -->
<ul>
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Мы в Facebook</a>
</li><!-- Ссылки на соцсети автора -->
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Я в Linked</a>
</li>
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Наш Twitter</a>
</li>
</ul>
</div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<!-- Указываем издателя, логотип и контакты -->
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<link itemprop="url image" href="https://example.com/logo.jpg"><!-- Если дизайн позволяет показать логотип, то тег link замените на img -->
<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>
</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 the_title( '<h1 itemprop="headline">', '</h1>' ); ?><!-- Заголовок статьи -->
<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 itemprop="articleSection" class="category-list"><!-- Рубрика статьи -->
<?php the_category (' ', ' ') ?>
</span>
<?php if ( has_post_thumbnail() && ! post_password_required() && ! is_attachment() ) : ?>
<div class="post-image"><!-- изображение поста, разметку смотрите ниже в этой статье-->
<?php the_post_thumbnail('post-thumbnail');?>
</div>
<?php endif; ?>
<div class="entry-content" itemprop="articleBody">
<?php the_content(); ?>
</div><!-- Разметка статьи (код разметки itemrop="description" смотрим в комментариях к этой статье по ссылке https://webkato.ru/strukturirovannye-dannye-i-razmetka-schema-dlja-bloga-po-shagam/#comment-353 -->
<div class="" 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">
<?php the_author(); ?>
</span><!-- Имя автора --></a>
<ul>
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Мы в Facebook</a>
</li><!-- Ссылки на соцсети автора -->
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Я в Linked</a>
</li>
<li>
<a href="#" itemprop="sameAs" rel="external" target="_blank">Наш Twitter</a>
</li>
</ul><!-- Социальные сети автора -->
</div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><!-- Указываем издателя, логотип и контакты -->
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<link itemprop="url image" href="<?php echo esc_url( wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' )[0] ); ?>"><!-- Если дизайн позволяет показать логотип, то тег link замените на img ( c помощью echo get_custom_logo();) -->
<meta content="ширина" itemprop="width">
<meta content="высота" itemprop="height">
</div>
<meta itemprop="name" content="Название сайта">
<meta itemprop="telephone" content="+700000000"><!-- Номер телефона (необязательно для Google, но обязательно для Яндекс) -->
<meta itemprop="address" content="Город"><!-- Адрес (необязательно для Google, но обязательно для Яндекс) -->
</div>
<span class="tags" itemprop="keywords"><!-- Метки (теги) или ключевые слова-->
<?php echo get_the_tag_list(' ', ' ');?>
</span>
</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) блога на главной и архивных страницах и для разметки изображений в содержимом статей. Выбирайте более удобный для вас вариант.
Первый вариант разметки миниатюры поста добавляем content.php, в то место, где у вас выводится миниатюра поста.
PHP
<?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="" itemscope itemtype="https://schema.org/ImageObject">
<?php the_post_thumbnail('post-thumbnail', array( 'itemprop' => 'url image' ));?>
<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 микроразметка для сайдбара.
<div class="widget-area" id="sidebar" itemscope itemtype="http://schema.org/WPSideBar" role="complementary">
</div>
В WordPress найдите файл отвечающий за вывод сайдбаров, обычно это файл 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>
Я думал будет сложнее, оказывается очень просто и быстро можно это сделать. Спасибо.
Добрый день, разметка изображений отказывается работать. Просто ничего не происходит, в чем может быть проблема? Комментарии и организация отображаются в валидаторе корректно.
Добрый день! В связи с тем, что регулярные выражения могут быть изменены, для разметки миниатюры поста воспользуйтесь этой, более удобной функцией, работает в WP 5.0 и выше:
add_filter('post_thumbnail_html','webkato_image_itemprop',10,3 ); function webkato_image_itemprop($html, $post_id, $post_image_id){ if( has_post_thumbnail() ) { $meta = wp_get_attachment_metadata( get_post_thumbnail_id( get_the_ID() ) ); $width = $meta['width']; $height = $meta['height']; if( ! empty( $meta ) ) { $html = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">' . $html . '<meta itemprop="width" content="' . $width . '"><meta itemprop="height" content="' . $height . '"></span>'; $html = str_replace('src',' itemprop="image url" src',$html); } } return $html; }Добрый вечер, извините за то что отвлекаю, возник вопрос. При разметке меню на вордпресс при помощиSiteNavigationElement у меня получается разметить только itemprop="url" добавив ваш код в functions.php. А как мне разметить в менюшке itemprop="name"? Что нужно прописать в functions.php, при условии что меню динамическое? Большое спасибо
Здравствуйте! Вот два варианта на выбор:
1 - добавляем itemprop="name" в тег li меню. Этот код вставляем в functions.php.
/** * Adding itemprop="name" to the li tag of the navigation menu **/ function nav_menu_li_schema($content) { $pattern = "<li"; $replacement = '<li itemprop="name"'; $content = str_replace($pattern, $replacement, $content); return $content; } add_filter('wp_nav_menu', 'nav_menu_li_schema');2 - оборачиваем анкор пункта меню в span и добавляем к нему itemprop="name" сразу в функции вывода меню.
Большое вам спасибо Наталья, вы лучшая. Я неделю искал решение этой проблемы. Перерыл две поисковые выдачи, спрашивал на вопрос - ответах, обращался к двум прогерам. Все советуют реализовать через json-ld, но не учитывают что его не считывает Яндекс. Другие говорят пропиши прямо в код помимо динамического меню еще размеченные вручную пункты. А у меня там и так два вывода меню - мобильное и стационарное. А при реализации таких советов я бы получил сломанную перелинковку и скрытый текст. В общем, еще раз вам огромное спасибо и всего вам наилучшего.
Спасибо! Там при копировании из комментариев могут кавычки на текстовые измениться, так что лучше руками функцию пропишите или подправьте в редакторе.
Хорошо, спасибо, я кстати скопировал изначально как есть и все работает. Разметка как надо.
Подскажите пожалуйста. Хочется разметить категорию и дату в анонсах на главной странице. Вот нужный кусочек кода.
Вставляю itemprop="datePublished"
Если сюда - то как дата выделяется в том числе и категория.
А если так - то не срабатывает.
Как я понял строчки верные, просто вставить itemprop нужно по нормальному.
Большое спасибо за ответ.
В целях безопасности WP обрезал ваш код и я его не вижу. Напишите код в комментарии обернув в шорткод из квадратных кавычек [ php ] здесь код [ /php ], уберите пробелы из примера.
скриншот извините за неудачные попытки отправить код
Николай, не увидела что именно вызывает ошибку, но предлагаю вот такое решение проблемы.
Здесь время обёрнуто в тег
<time class="published" itemprop="datePublished" datetime="<?php echo get_the_date('c'); ?>"><?php the_date(get_option('date_format')); ?></time> <time class="updated" itemprop="dateModified" datetime="<?php the_modified_date('c'); ?>"><?php the_modified_date(get_option('date_format')); ?></time>В списке категорий иконку также можно отобразить с помощью CSS через юникод.
<li class="category-list" itemprop="articleSection"><i class="fa fa-clock-o"></i><?php the_category ('/') ?></li>Наталья, большое спасибо
Наталья, подскажите еще один момент пожалуйста. У меня главная страница размечена по схеме BlogPosting. Как мне внедрить mainEntityOfPage, что бы ссылка на каноническую страницу генерировалась автоматически? Со вкладок пагинации в том числе. Большое вам спасибо за помощь
1.Т.е. главная страница у вас - это анонсы блога, так? Если ссылка на статью из каждого анонса должна содержать itemprop="mainEntityOfPage", то просто добавляем его в ссылку заголовка в файле content-excerpt.php
Тем самым мы указываем страницу (или другой CreativeWork), для которой этот элемент является основной сущностью. Такой же пример есть и в статье.
2.Также вы хотите указать itemprop="mainEntityOfPage" для home page и чтобы на всех страницах пагинации выводился тот же атрибут, тогда можно вставить тег meta внутри head только для главной
add_action( 'wp_head', 'meta_itemprop' ); function meta_itemprop(){ if ( is_home() ) { echo '<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="' . esc_url( home_url( '/' ) ) . '"/>'; } }Тег meta будет отображаться на каждой странице пагинации. Но сниппеты по данным страницам вряд ли отобразятся в поиске, т.к. они не канонические и, скорее всего, вы не будете создавать для них description. Так что rel="canonical" вполне достаточно.
Наталья, спасибо. Я добавил второй код и проверил валидаторами. Предупреждений нет. Единственный вопрос
скриншот
Вот такой и должен быть вывод, без прописывания ссылки на каноничную страницу?
Нет, должна быть ссылка на главную. Перепроверьте кавычки, точки и пробелы в коде или пришлите скриншот самого кода. Я перепроверила свой код, он копируется без ошибок.
Наталья, вот скриншот самого кода в админке, последняя фигурная скобка наверное лишняя? скриншот
И сбросьте мне пожалуйста какие-нибудь реквизиты, я вам хоть донат пришлю, а то тратите на меня время
Добрый день! Все фильтры и события размещаем в functions.php. Перенесите код в functions.php и напишите о результате.
Я вам отправил донат, большое спасибо за помощь. Касаемо кода. Перенес его в functions.php. Но для BlogPosting (главная) он не срабатывает. Пишет предупреждение о том что не найдено
Николай, спасибо!! А где написано предупреждение, в вебмастере Яндекс? Я подумала, что вам надо добавить mainEntityOfPage в head, возле rel="canonical". Тогда разместите тег meta сразу под тем блоком, где вы начали разметку (itemscope itemtype="https://schema.org/BlogPosting"), в файле который отвечает за вывод главной - это index.php или home.php, в зависимости от вашей темы.
Код будет таким:
<?php if ( is_home() ){ echo '<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="' . esc_url( home_url( '/' ) ) . '"/>'; }; ?>Условный тег is_home() позволяет выводить данные только на главной с анонсами. Если страница статическая, то условный тег будет is_front_page().
Вот теперь всё хорошо, еще раз спасибо. И еще маленький вопрос. А почему вы советуете статьи не артиклем размечать, а по схема блог постинг? Есть в этом какой-то секрет?) Можно немножко подробнее
Мне кажется, в статье я ответила на вопрос почему статьи блога мы размечаем BlogPosting, который и является подтипом Article. Также Article имеет множество других подтипов. Например, новостные статьи размечаются NewsArticle и т.п. К Article можно отнести какую-то официальную статью. Если вы считаете, что информативность ваших статей выходит за рамки блога и в разметке BlogPosting вам не хватает каких-то свойств, то разметьте её как Article. В обоих случаях, эти разметки несут одну и ту же функцию - доносят до роботов заголовок и тело статьи.
Теперь я понял, благодарю. Осталось разметить статьи схемой BlogPosting и подгрузить через произвольные поля JSON-LD. Без вас бы я не справился. Все говорят это так легко, а на деле если никогда не занимался микроразметкой, то с ходу и не разметить. Даже с большим опытом в SEO
Спасибо за отзыв, Николай!
Тут чисто технический момент и не совсем SEO, а пояснение для роботов влияющее на SEO, так что отсутствие опыта в разметке данных ничуть не умаляет вашего опыта в SEO. Хотя алгоритмы поисковиков и без "идеального" структурирования данных уже прекрасно "видят" контент блога, разметка лишь уточняет его. Но структурирование данных очень необходимы для рецептов, инструкций, бизнес страниц, товаров и т.п., то есть там, где требуется выделить ту или иную информацию из общего тела.
С момента написания статьи прошло 3 года, за это время Google начал рекомендовать JSON-LD и это намного удобнее. Кстати, для JSON-LD существуют онлайн генераторы, с помощью которых можно заполнить соответствующие ключи, скопировать полученный скрипт, "прикрутить" к ним произвольные поля или функции и вывести в head.