Чтобы помочь поисковикам верно понять содержание сайта, необходимо внедрить в 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>
Наталья, добрый вечер, ранее мы с вами уже общались и вы мне очень помогли. У меня возникло 2 вопроса по разметке статей. Подскажите пожалуйста.
1) При разметке статьи схемой BlogPosting, как разметить H2 c помощью "headline", если у меня в файле single.php вообще нет h2 ?
2) Когда я размечаю тело статьи обязательно ли мне использовать одновременно itemprop="description articleBody" или можно просто articleBody ?
Большое вам спасибо.
Здравствуйте, Николай! Отвечаю по порядку:
1) H2 мы размечаем только в анонсах на странице Блога со всеми записями. На одиночной странице вы размечаете только h1.
Подозреваю, что вас сбил с толку этот код:
<?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; ?>Пояснение: if ( is_single() ) - выводим h1 в посте и else - выводим заголовок h2 на других страницах (блог, категории т.п.).
Если ваш файл content.php используется только для постов, то уберём лишнее:
2). В год написания статьи самым простым способом показалось обозначить тело статьи вместе с описанием (которое тогда обязательно требовал Google для Schema). Т.е. в валидаторе оба свойства отображаются раздельно. В спецификации Schema BlogPosting свойство description есть, но оно не обязательное. По сути, в самом начале страницы мы уже вывели meta name="description" content="" для поискового сниппета. Но вы можете добавить вводное описание с помощью Custom Fields или, к примеру, если описание всегда будет в 1 параграфе статьи, тогда добавим в его тег p itemprop="description".
/* Добавляем itemprop="description" в 1 параграф WordPress the_content(); * Source: http://webkato.ru/ ---------------------------------------------------------------------------------------------------- */ function first_paragraph($content){ if( is_single() ) { return preg_replace('/<p([^>]+)?>/', '<p$1 itemprop="description">', $content, 1); } } add_filter('the_content', 'first_paragraph');Текст внутри itemprop="description" должен быть идентичным тому тексту, что вы добавили в og:description, если используете разметку Open Graph и name="description".
Наталья, большое спасибо, я вас обожаю. Получается в статье мне h2 не нужны и description в схеме BlogPosting тоже не нужен. И надеюсь последний вопрос, дабы вас не докучать. Я вставлял ваш код для разметки картинок в статье, но у меня он не работает. Можно ли это исправить? И как это делают вручную? Просто что бы знать. И напомните, пожалуйста реквизиты для доната, а то так мне спрашивать стыдно. Спасибо
Спасибо за добрые слова, Николай!
Способ №1.
Этот код работает в версиях WP старше 5.0, он добавляет микроразметку в первое главное изображение поста. Его надо вставить в файл functions.php
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 itemscope itemtype="https://schema.org/ImageObject">' . $html . '<meta itemprop="width" content="' . $width . '"><meta itemprop="height" content="' . $height . '"></span>'; $html = str_replace('src',' itemprop="url contentUrl" src',$html); } } return $html; }HTML-код будет выглядеть так:
Второй способ.
В том файле который у вас отвечает за вывод контента, обычно это content.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="post-thumbnail" itemscope itemtype="https://schema.org/ImageObject"> <?php the_post_thumbnail('post-thumbnail', array( 'itemprop' => 'url contentUrl' ));?> <meta itemprop="width" content="<?php echo esc_attr( $width ); ?>"> <meta itemprop="height" content="<?php echo esc_attr( $height ); ?>"> </div><!-- .post-thumbnail end --> <?php endif; ?>Для донатов вы можете воспользоваться кнопкой расположенной сразу под статьёй.
Наталья, а можно мне пожалуйста ваш номер Яндекс кошелька? Как в прошлый раз. А то у меня карта на перевыпуске. Если нет, заморочусь - попрошу перевести. Касаемо разметки изображений. А как в статье размечают картинки в ручную через редактор вордпресс? Потому что у меня в статьях много картинок и хотелось бы еще научиться любую размечать руками, а не только самую верхнюю в статье с помощью кода . Спасибо.
Добрый вечер!
Не знаю каким редактором вы пользуетесь, классическим или гутенберг, но там и там вы можете использовать в тексте статьи html-код. Это самое простое решение для ручного отображения. Конечно, удобнее будет в Гутенберг. Можно вставить картинку стандартным способом а затем, в меню блока нажать "Редактировать как HTML", добавить необходимые теги и свойства и пересохранить как HTML блок.
<figure class="wp-block-image size-full" itemscope itemtype="https://schema.org/ImageObject"> <img width="1000" height="667" itemprop="url contentUrl" src="http://site.ru/wp-content/uploads/2020/04/a19-1.jpg" alt="test" class="wp-image-5661287"> </figure>Готовый блок можно сохранить как шаблон в "Мои блоки". Но, считаю, что ручная разметка замедляет процесс написания статей. Из бесплатных плагинов порекомендую "Genesis Custom Blocks", создайте с его помощью собственный блок для картинок со своим HTML-кодом. Если пользуетесь плагином Advanced Custom Fields, то в премиальной версии у них есть возможность создавать свои блоки Гутенберг. Считай, у вас уже будет всё размечено, нужно будет только заменить картинку.
Добрый вечер. Я отправил вам донат, большое спасибо еще раз
Надеюсь, что действительно вам помогла. Спасибо и всего доброго!
Наталья, вы мне очень помогли. Спасибо еще раз)
Наталья, простите, все же вопрос с изображениями остался актуален. У меня классический редактор WP. Есть статья в ней 5 картинок. Я пытаюсь в ручную их разметить. Но при редактировании во вкладке "текст" микроразметка просто пропадает. Вставляю itemscope itemtype="https://schema.org/ImageObject" - сохраняю. При повторном просмотре ни каких схем микроразметки нет. Каким образом в саму статью вставить код? Большое спасибо за ответ)
Всё верно, я бы рекомендовала использовать Гутенберг.
1. Но если это невозможно, то добавьте этот код в functions.php, который отключит форматирование в указанных ниже тегах.
//Разрешаем добавлять элементы в теги img, a, span, figure function edit_elements_editor($init) { if(current_user_can('unfiltered_html')) { $init['extended_valid_elements'] = 'img[*],a[*],span[*],figure[*]'; } return $init; } add_filter('tiny_mce_before_init', 'edit_elements_editor', 20);Можете удалить ненужные или добавить нужные HTML теги.
2. Как вариант, можете вставлять кастомный код через плагин Insert Html Snippet.
3. И еще один способ посмотрите в этой статье под 5 заголовком, но т.к. уже давно не работаю с классическим редактором, не могу проверить его актуальность.
Наталья, вот кусочек кода который отвечает за вывод картинки в статье. Подскажите пожалуйста как разметить его по схеме imageObject. Большое спасибо, я вам наверное уже надоел) Но мне кажется это завершающий вопрос)
Привет, Николай! Не переживайте, открытые комментарии подразумевают вопросы и ответы. Вот разметка вашего избранного изображения:
<figure class="wp-image" itemscope itemtype="https://schema.org/ImageObject"> <img class="alignnone size-full wp-image-1441" src="https://....ru/wp-content/uploads/2019/05/g-567779_1280.jpg" alt="обязательно альт текст" width="1280" height="853" itemprop="url contentUrl"/> <meta itemprop="width" content="1280"> <meta itemprop="height" content="853"> </figure>Если картинка внутри статьи, то теги meta можно убрать. А вообще, все все изображения в обычной статье можно не размечать (кроме кулинарных рецептов), тут главное задать всем правильный alt текст, с которым поисковики без проблем индексируют картинки. В поисковом сниппете будет отображаться избранное изображение.
Форматирование в тегах я отключил, спасибо
Наталья, большое вам спасибо. Всё получилось. Единственный момент как разрешить тег meta. Что бы его не форматировало в статье. Если к примеру указываю вот так, то всё срабатывает . Но применим ли span в данном случае?
Вы форматирование тегов с помощью функции из моего предыдущего комментария отключали? Если да, то просто добавьте в эту строчку тег meta через запятую:
Я первым делом добавил в функции, в ваш код тег meta. Но редактор все равно вносит свои изменения убирая meta. Может реально в span обернуть и ладно?)
В тег span нам никак нельзя вставить атрибут content. Тогда поступим так: удаляйте ту функцию из предыдущего комментария, скачайте и активируйте этот плагин, который разрешит разметку Schema.org в классическом редакторе WordPress.
Теперь, если необходимо указать тег meta, то оборачивайте изображение не в figure, а в div.
Наталья, большое спасибо, всё получилось)