Микроразметка Schema.org для WordPress

  • 28.02.2020 22:50
  • 0
  • 381

Schema.org – общепринятый стандарт семантической разметки html-кода, которая основывается на внедрении в теги специальных атрибутов.

Микроразметка Schema.org отлично интерпретируется поисковыми системами Google, Yandex, Bing, Yahoo и прочими.

Для чего нужна семантическая разметка документа

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

  • Карточки товаров интернет-магазинов
  • Статьи
  • Посты в блогах
  • Страницы контактов
  • Кулинарные рецепты
  • Пошаговые инструкции и др.

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

Кроме того, внедрение Schema позволяет создать расширенные сниппеты в выдаче поисковиков, которые, в свою очередь, повышают CTR и, следовательно, посещаемость ресурса (на картинке выше показан пример расширенного сниппета, реализованного с помощью Схемы).

Как реализовать микроразметку на WordPress

Для внедрения Schema.org в Вордпресс существуют готовые решения, к примеру, плагины:

  • Schema Pro
  • All in One Rich Snippets

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

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

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

Пошаговая инструкция по внедрению семантической разметки Schema.org в Вордпресс

В самом начале скажу, что Ваша тема 100% отличается от моей по тегам и классам. Так что действовать придется по аналогии.

Разметка шапки

В самом начале реализуем разметку верхней части нашего сайта. Для это открываем в редакторе файл header.php и ищем соответствующие элементы кода.

Первым делом разметим тег <body>:

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

Мы указали поисковикам, что каждая страница нашего сайта имеет тип WebPage. Это и понятно.

Далее размечаем тег <header>. У Вас это может быть <div class=”header”> или что-то другое:

<header itemscope itemtype="http://schema.org/WPHeader">

Здесь мы указываем, что содержимое тега <header> является шапкой сайта на Вордпрессе.

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

У меня код выглядит следующим образом:

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

Внутри тега <a> у меня завернуто изображение с логотипом. Разметка скажет поисковику, что данный код – названия моего проекта.

Теперь переходим к описанию. У меня оно выглядит от так:

<span itemprop="description">

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

</span>

Указываем ПС, что этот код содержит описание сайта.

Разметка навигации

Сразу под шапкой у меня располагается навигационное меню. Размечаем его с помощью директивы SiteNavigationElement:

<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement">

<ul class="menu">

<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/">Главная</a></li>

<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/author-bloga/">Автор</a></li>

</ul>

</nav>

Поисковики отлично читают html-код страниц. Но этим кодом мы говорим им, что это главное меню ресурса с определенными элементами. После внедрения свойств name и url в навигацию можно ожидать появления быстрых ссылок к сниппетах. Они повышают CTR проекта.

На этом я сохраняю и закрываю файл header.php.

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

Для этой работы нам понадобятся сразу 2 файла: single.php и page.php.

Первым делом ставлю тип содержимого в теге, определяющем начало поста:

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

Говорим ПС о том, что это – статья.

Далее маркируем заголовок статьи:

<h1 itemprop="headline"><?php the_title(); ?></h1>

Следующий шаг – категория статьи:

<span itemprop="articleSection"><?php the_category(',') ?></span>

Далее идет дата публикации и автор.

Для даты:

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

Для автора:

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

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

<div class="postcontent" itemprop="articleBody">

<?php the_content(); ?>

</div>

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

Сохраняем и закрываем оба файла.

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

Открываем sidebar.php. Тут все элементарно – нам потребуется найти открывающий колонку тег (у меня это <aside>) и преобразовать следующим образом:

<aside itemscope itemtype="http://schema.org/WPSideBar">

Этим мы говорим поисковым системам, что это – боковая колонка ВП-сайта.

Это все. Сохраняем и закрываем файл.

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

Если у Вас реализовано комментирование, размечаем его. Это поможет поисковику понять, что это – не основной контент, а его обсуждение.

Открываем файл comments.php

Вот как выглядит размеченный комментарий у меня:

<?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">

Этот код скажет поисковой системе, что здесь находится комментарий.

Далее нам нужно разметить автора комментария:

<?php printf( __( '<cite class="fn" itemprop="creator">%s</cite>' ), get_comment_author_link() ); ?>

Здесь атрибут itemprop=»creator» указывает на автора комментария.

Далее делаем дату публикации комментария:

<span itemprop="datePublished">

<?php printf( __('%1$s'), get_comment_date('Y-m-d')); ?>

</span>

в <?php comment_time('H:i'); ?>

Осталось поработать над текстом комментария. Мой результат получился вот таким:

<div itemprop="text"><?php comment_text(); ?></div>

Комменты мы сделали. Сохраняем и закрываем файл.

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

Конечным этапом внедрения Схема.орг на сайт будет разметка футера. Открываем footer.php, ищем тег, открывающий эту секцию. У меня подвал заключен в тег <footer>. У Вас может быть <div>

Результат выглядит вот так:

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

По аналогии с шапкой, мы указали, что данная секция – подвал сайта на Вордпрессе.

Все. Разметка закончена. Сохраняем и закрываем файл.

Проверка в валидаторе

У Яндекса есть специальный сервис для проверки микроразметки Schema. Для проверки можно вставить УРЛ страницы сайта или ее исходный код.

микроразметка сайта wordpress

Если ошибок нет, это – успех.

Итоги

Итак, мы внедрили микроразметку сайта. Теперь продвигать проект будет еще легче.

Так как я – аффилейт казино, то этой разметки достаточно для моих проектов. Если у Вас проект, который содержит контактную информацию или какие-то инструкции, то у Яндекса есть документация для соответствующих типов страниц. Если владеете английским языком, то можно обратиться к официальной документации разработчиков стандарта Schema.org.

Комментарии (0)
Чтобы оставить комментарий, необходимо войти на сайт
Войти
Последние комментарии
Мостебт Партнерс предлагают очень хорошие ставки, так что даже небольшое количество трафика дает возможность зарабатывать. Я не гонюсь за огромными выплатами, 400 долларов в месяц вполне достаточно. Этого в первый месяц удалось достичь практически без усилий. Может буду чуть-чуть наращивать обороты, но пока и так все хорошо. Это как небольшой дополнительный заработок для меня. ДУмаю, что можно сделать и основным, если захотеть, так что советую всем.
Уже работал с разными партнерками, но считаю, что mostbet partners одна из самых адекватных в плане технической поддержки. она работает круглосуточно, и всегда готова помочь, Если какие-то проблемы, то сразу решаются все проблемы. Я обращался несколько раз, первый, когда настраивал все, а потом уже при первой выплате. Возникли вопросы по статистике, но все объяснили, показали, так что вопросов вообще не осталось.
На данный момент. среди множества ПП, не нашел для себя ни одной лучше, чем mostbet partners. Не знаю, с чем это связано, но условия здесь наиболее выгодные. Шейва не заметил, что очень радует. Холда даже на первых порах не было, деньги сразу выплачивали. Трафик в сфере гемблинга мне приносит довольно большой доход, который я теперь не хочу терять.
Пользователи