Микроразметка для статьи в wordpress

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

О пользе семантической разметки я сегодня писать не буду – она описана мной раньше. Начну сразу с того, как внедрить микроразметку Article (для статьи) от Schema.org на сайт.
Итак, сначала нужно добавить название сущности в тег, который оборачивает запись (текст статьи, ее название и комментарии), это могут быть теги div или article.
Микроразметка ArticleИх можно найти в самом начале файла single.php. Если это div, он может иметь class или id с названиями: entry, main, maincolumn, article или что то похожее.
Именно в него нужно вставить параметры itemscope itemtype="http://schema.org/Article"

Вот так:

<div itemscope itemtype="http://schema.org/Article" id="main">

В микроразметке Schema.org для статьи есть обязательные параметры:

headline - заголовок поста,
articleBody - тело поста,
author - автор и name - имя автора,
datePublished - дата публикации,
image - изображение,
publisher - автор поста.

А есть рекомендуемые:

dateModified - дата модификации, т.е. изменения поста,
mainEntityOfPage – основная страница по этой теме,
articleSection - категория, к которой принадлежит пост.

  1. Итак, в файле single.php найдите тег h1 и замените его этим кодом:
    <div itemid="<?php the_permalink() ?>" itemprop="mainEntityOfPage">
        <h1 itemprop="headline"><?php the_title (); ?></h1>
    </div>
  2. Далее, найдите функцию the_content() и замените ее на:

    <div itemprop="articleBody">
         <?php the_content(); ?>
    </div>

  3. Если в вашей теме нет функции вывода имени автора, ее можно добавить так:

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

    Если эта функция есть, тогда просто замените ее указанными тегами.

  4. Найдите вывод даты публикации the_time().
    Замените его следующими тегами:

    <meta itemprop="datePublished" content="<?php the_time('Y-m-d') ?>" /><?php the_time('d.m.Y') ?>
    <meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>" />

  5. Что касается параметра Publisher – он относится к сущности "Организация".
    В код файла single.php, где-нибудь после вывода the_content() вставьте следующий код:

    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url contentUrl" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/logo.jpg" alt="logo" />
            <meta itemprop="width" content="6" />
            <meta itemprop="height" content="6" />
       </div>
       <meta itemprop="name" content="<?php bloginfo('name'); ?>" />
       <meta itemprop="address" content="" />
       <meta itemprop="telephone" content="" />
    </div>


    Здесь укажите свой адрес и телефон:

    <meta itemprop="address" content="Ваш Адрес" />
    <meta itemprop="telephone" content="Ваш Телефон" />


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

  6. Осталось добавить автоматическую микроразметку изображений.
    Для этого, в самый конец файла functions.php, перед закрывающим ?> вставьте следующий код:

    function mayak_filter_image($content) {
    $ar_mk	= '!<img (.*?) width="(.*?)" height="(.*?)" (.*?)/>!si';
    $br_mk = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url contentUrl" \\1 width="\\2" height="\\3" \\4/><meta itemprop="width" content="\\2"><meta itemprop="height" content="\\3"></span>';
    $content = preg_replace($ar_mk, $br_mk, $content);
    	return $content;
    }
    add_filter('the_content', 'mayak_filter_image');


    Это код добавит микроразметку картинок во все посты вашего сайта (в ранее опубликованные посты и во все будущие).
    Автор кода Виталий Кириллов.

Внимание!
Код не работает для изображений, если в них добавлены подписи.

Проверить правильность разметки можно здесь:

https://developers.google.com/structured-data/testing-tool
https://webmaster.yandex.ua/microtest.xml

↓ Скачать файл с микроразметкой Article можно по ссылке ниже

Уже скачали 67 раз(а)
Открыть ↓
Для разблокировки содержимого, введите код из последнего, присланного вам письма.

Комментарии

  1. Спасибо огромное, Людмила! Очень пригодился ваш ценный материал. Жду ваших новых статей с нетерпением!!!

  2. Сайта Shema.org не существует.)) Пройдите по ссылке. Опечатка?

    • Перешла - сайт на месте :).
      Никакой опечатки нет.

      • И все же есть. Опечатка не в статье, а в комментарии schema.org, а не Shema.org.

  3. Здравствуйте, Людмила. Я пыталась внедрить микроразметку по другим источникам, но когда дело дошло до кодов - остановилась. Признаюсь честно запуталась. Даже не знаю, получится ли у меня.

  4. А у меня после внедрения кодов микроразметки в файл single.php ломается шаблон .
    Скачала Ваш файл - поменяла - то же самое, и Гугл видит 3 ошибки.

    • Значит, что то не правильно сделали.

  5. Здравствуйте, Ксана!
    Во-первых, благодарю за хорошую и полезную статью. Можно ли задать Вам вопрос?
    На своем сайте я убрала во всех записях вывод даты и автора блога (просто закомментировала функцию вывода в коде), и теперь не могу использовать в single.php эту сущность - itemscope itemtype="http://schema.org/Article", поскольку она требует многих атрибутов (того же автора и дату, которые я убрала). Подскажите, пожалуйста, что в таком случае мне лучше использовать, какую сущность? Хотела WebPage, но я ее уже прописала в header.php, а дважды, как я понимаю, это будет уже ошибкой, запутает поисковиков. Какое здесь может быть оптимальное решение?
    Заранее благодарю за ответ!)

    • Все зависит от того, какого типа ваш контент: если это обычная статья, тогда лучше использовать Article.
      Если что то другое: фото, видео, отзывы и пр., тогда нужно использовать микроразметку, соответствующую вашему контенту.
      Больше ничего посоветовать не могу, только вернуть назад автора и дату 🙂

      • Благодарю! А если такой вариант - оставить в header.php (в теге , как Вы советовали) itemscope itemtype="http://schema.org/WebPage", а в статьях и записях (файлы single.php и index.php) - прописать itemprop="mainContentOfPage", itemprop="headline" и itemprop="text". Тогда эти свойства подтянутся к сущности WebPage. Но будет ли правильным такое оформление, как Вы считаете, Ксана? Или WebPage обязательно должен включать в себя Article или BlogPost, которые я не могу добавить из-за отсутствия даты и автора (их нельзя возвращать в моем случае, у меня не блог). Спасибо за Ваше терпение и время, затрачиваемое на чтение таких вопросов!)

        • Попробуйте.
          А после, проверьте валидатором микроразметки - если он не найдет ошибок, значит, все нормально.
          Но, помните, что микроразметка - это не просто формальный процесс, она дает возможность поисковому роботу правильно индексировать статью.

          • Спасибо

  6. Снова здравствуйте!) Что означает Ваше примечание: "Код не работает для изображений, если в них добавлены подписи"? Подписи - в смысле alt и title для изображений? А как же без них? Или Вы имели в виду что-то другое? Спасибо!

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

      • Спасибо за пояснение!

  7. Здравствуйте, Людмила.
    Загрузила Ваш файл single.php с микроразметкой на сайт с темой Infobis. Из плагинов только Google XML Sitemaps загружен, активирован. Ни одного скрипта не было добавлено. Новая читая база данных. После загрузки сайт сломался. Что же делать?
    Провожу эксперименты: вношу рекомендуемые Вами коды на двух разных сайтах Infobis и FreshResponsive на разных хостингах, один из которых Бегет. И почему-то все ломается.

  8. ПРЕДУПРЕЖДЕНИЕ: Не выполнено обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody отсутствует или пусто.
    articlebody = Скорей всего ошибка в этой строке. как ошибку исправить?

    • Добавить articlebody - в посте написано, как именно это сделать - пункт 2.

  9. Добрый день! А как думаете внедрение такой микро-разметки может давать какое-либо преимущество в плане seo-продвижения?

    • Конечно. Как минимум, улучшает индексацию.

  10. Здравствуйте, на вашу рассылку невозможно подписаться письма не приходят для подтверждения ни на одну почту не на яндекс ни на майл.ру.

    Проверьте настройки подписки

  11. Микроразметка картинки работает некорректно, точнее, требует точного соблюдения формата тега, что не всегда возможно.
    Корректный вариант:
    /**
    * Создание микроразметки для изображений
    *
    * Создание микроразметки для изображений по schema.org. Поскольку атрибуты
    * длина и ширина указывачтся не всегда, вставляем их по отдельности
    *
    * @param string $content входная строка с изображениями
    *
    * @return string
    * @link https://prodengiblog.ru/optimizaciya/mikrorazmetka-article.html
    */
    function microImage(string $content): string{
    $content=preg_replace(
    '##si',
    '',
    $content);

    $content=preg_replace(
    '!!si',
    '',
    $content);

    $content=preg_replace(
    '!!si',
    '',
    $content);

    return $content;
    }

  12. Блин, движок сожрал все вкусности. Смысл в том, что сперва обрамляем картинку в общем виде, а потом вставляем в неё теги длины и ширины

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5298