Создание микроразметки для блога по schema.org. Быстро, просто и правильно

Много уже сказано про разметку, много еще чего можно сказать. С поддержкой json создание микроразметки для блога упростилось очень сильно. Буквально пара кликов и все.

Да, кто-то может поспорить что разметка не полная, что надо размечать и главную страницу, и другие элементы сайта. Да, все верно. Но есть нюанс: если сама тема сайта сверстана правильно и использует технологии HTML5, то никаких таких особых разметок не требуется, поисковые системы прекрасно умеют считывать нужные теги. Таким макаром, остается только в статьях и страницах разместить нужный код и этого будет достаточно, чтобы поисковые системы поняли, что у вас содержится на той или иной странице.

Для этих целей можно (иногда и удобнее) использовать плагин, например этот  или этот. Но все же, на мой взгляд у них избыточный функционал, если надо добавить мирокразметку только для блога. Так что я написал свое решение.

Подробно про плагины и код смотрите в видео

к содержанию

Код для создания микроразметки

Обязательно требуется добавить ссылки на дефолтную картинку $image_url_default = '#'; и $logo_img = ''; (ссылки вставлять между одинарными кавычками). Смотрим код внимательно, там нужные строки откоменнтированы

Код добавлять в файл functions.php

if ( ! function_exists( 'asm_markup_post' ) ) {
   add_filter( 'the_content', 'asm_markup_post', 10 );
   /**
    * Вывод разметки внутри статьи
    *
    * @param $content
    *
    * @return string
    */
   function asm_markup_post( $content ) {
      $markup = new Art_Markup_Post();
      
      return $markup->markup_schemaorg() . $content;
   }
}

if ( ! class_exists( 'Art_Markup_Post' ) ) {
   class Art_Markup_Post {
      
      private $categories;
      private $categories_count;
      private $categories_list;
      private $post_obj;
      private $author_data;
      public $default = [
         'image_default' => '', // Обязательно установить ссылку на картинку по умолчанию
         'logo'          => '',// Обязательно установить ссылку на логотип
      ];
      
      /**
       * Получение полной разметки
       *
       * @return string
       */
      public function markup_schemaorg() {
         $posts_schema = '<!-- This markup start  --><script type="application/ld+json">';
         $posts_schema .= $this->get_markup_data();
         $posts_schema .= '</script><!-- This markup end  --> ';
         
         return $posts_schema;
      }
      
      /**
       * Сбор данных и получение строки json
       *
       * @return mixed|string
       */
      public function get_markup_data() {
         $canonnical_link  = get_the_permalink( $this->get_post_obj()->ID );
         $post_type_markup = is_single() ? 'BlogPosting' : 'Article';
         $post_markup      = [
            '@context'         => 'http://schema.org',
            '@type'            => $post_type_markup,
            'mainEntityOfPage' => [
               '@type' => 'WebPage',
               '@id'   => $canonnical_link,
            ],
            'url'              => $canonnical_link,
            'headline'         => $this->get_post_obj()->post_title,
            'image'            => [
               '@type'  => 'ImageObject',
               'url'    => $this->get_images()[0],
               'width'  => $this->get_images()[1],
               'height' => $this->get_images()[2],
            ],
            'datePublished'    => $this->get_post_obj()->post_date,
            'dateModified'     => $this->get_post_obj()->post_modified,
            'articleSection'   => $this->get_category(),
            'publisher'        => [
               '@type' => 'Organization',
               'name'  => get_bloginfo( 'name' ),
               'logo'  => [
                  '@type'  => 'ImageObject',
                  'url'    => $this->get_default()['logo'],
                  'width'  => 600,
                  'height' => 60,
               ],
            ],
            'author'           => [
               '@type' => 'Person',
               'name'  => $this->get_author_data(),
               'url'   => get_author_posts_url( $this->get_post_obj()->post_author ),
               'image' => [
                  '@type'  => 'ImageObject',
                  'url'    => get_avatar_url( $this->get_post_obj(), "size=24&default=wavatar" ),
                  'width'  => 24,
                  'height' => 24,
               ],
            ],
            'comment'          => $this->get_comments(),
         ];
         $markup_json      = json_encode( $post_markup, JSON_UNESCAPED_UNICODE );
         
         return $markup_json;
      }
      
      /**
       * Получение картинок
       * В первую очередь получаем миниатюру
       * если ее нет, то первую прикрепленную картинку
       * иначе занчение по умолчанию
       *
       * @param string $size
       * @param null $image_default
       *
       * @return array|false
       */
      public function get_images( $size = 'full', $image_default = null ) {
         $images_first = get_children( [
            'post_type'      => 'attachment',
            'post_mime_type' => 'image',
            'post_parent'    => $this->get_post_obj()->ID,
         ] );
         if ( has_post_thumbnail( $this->get_post_obj()->ID ) ) {
            $image_arr = wp_get_attachment_image_src( get_post_thumbnail_id( $this->get_post_obj()->ID ), $size );
         } elseif ( isset( $images_first ) && ! empty( $images_first ) ) {
            $image     = reset( $images_first );
            $image_arr = wp_get_attachment_image_src( $image->ID, $size );
         } elseif ( ! isset( $images_first ) && empty( $images_first ) ) {
            ob_start();
            ob_end_clean();
            $output_image = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $this->get_post_obj()->post_content, $matches );
            $image_arr    = [ $matches [1][0], '1280', '720' ];
         } elseif ( $image_default != null ) {
            $image_arr = [ $image_default, '1280', '720' ];
         } else {
            $image_arr = [];
         }
         
         return $image_arr;
      }
      
      /**
       * Получение всех рубрик статьи
       *
       * @return string
       */
      public function get_category() {
         $this->categories       = get_the_category();
         $this->categories_count = count( $this->categories );
         $this->categories_list  = '';
         if ( $this->categories_count > 1 ) {
            foreach ( $this->categories as $category ) {
               $this->categories_list .= $category->name . ', ';
            }
         } else {
            foreach ( $this->categories as $category ) {
               $this->categories_list .= $category->name;
            }
         }
         
         return $this->categories_list;
      }
      
      /**
       * Получение комментариев статьи
       *
       * @return array
       */
      public function get_comments() {
         $comment_arr   = array();
         $post_comments = get_comments( array(
            'post_id' => $this->get_post_obj()->ID,
            'status'  => 'approve',
            'type'    => 'comment',
         ) );
         if ( $post_comments ) {
            foreach ( $post_comments as $comment ) {
               $comment_arr[] = [
                  '@type'       => 'Comment',
                  'dateCreated' => $comment->comment_date,
                  'author'      => [
                     '@type' => 'Person',
                     'name'  => $comment->comment_author,
                     'url'   => $comment->comment_author_url ? $comment->comment_author_url : '',
                  ],
                  'description' => strip_tags( $comment->comment_content ),
               ];
            }
         }
         
         return $comment_arr;
      }
      
      /**
       * @return mixed
       */
      public function get_categories() {
         return $this->categories;
      }
      
      /**
       * @param mixed $categories
       */
      public function set_categories( $categories ) {
         $this->categories = $categories;
      }
      
      /**
       * @return mixed
       */
      public function get_categories_count() {
         return $this->categories_count;
      }
      
      /**
       * @param mixed $categories_count
       */
      public function set_categories_count( $categories_count ) {
         $this->categories_count = $categories_count;
      }
      
      /**
       * @return mixed
       */
      public function get_categories_list() {
         return $this->categories_list;
      }
      
      /**
       * @param mixed $categories_list
       */
      public function set_categories_list( $categories_list ) {
         $this->categories_list = $categories_list;
      }
      
      /**
       * @return mixed
       */
      public function get_post_obj() {
         global $post;
         $this->post_obj = $post;
         
         return $this->post_obj;
      }
      
      /**
       * @return mixed
       */
      public function get_default() {
         return $this->default;
      }
      
      /**
       * @param array $default
       */
      public function set_default( array $default ): void {
         $this->default = $default;
      }
      
      /**
       * @return mixed
       */
      public function get_author_data() {
         $this->author_data = get_userdata( $this->get_post_obj()->post_author );
         
         return $this->author_data->data->display_name;
      }
      
      /**
       * @param mixed $authordata
       */
      public function set_author_data( $author_data ): void {
         $this->author_data = $author_data;
      }
      
   }
}

Код это конечно хорошо, но удобнее использовать плагин, благо в новой версии прикрутил настройки.

к содержанию

Плагин Art Schema Markup

Тот же самый код, только в виде плагина и с настройками. Устанавливаете, активируете и пользуетесь. С версии 2.0 появилась страница настроек.

Автоматическая разметка статей и страниц

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

Ахтунг! Это обязательные настройки, особенно ссылка на логотип. Без нее будут ошибки
Скачать: Art Schema Markup 2.0
Плагин быстрого внедрения микроразметки по schema.org через json-ld для блогов и инфосайтов. Автоматически размечаются посты и страницы
Скачано: 3, размер: 4.2 KB, дата: 06.Дек.2017

Вот и все. Удачной вам разметки.

Вопросы задавайте в комментариях.

49 комментариев
  • Святослав

    21.10.2016

    Ого, подробно то как. И думать не надо. Ну что могу сказать, огромное спасибо!

  • Мария

    10.11.2016

    Огромное спасибо, за мастерство и великодушие.
    Очень выручила меня Ваша статья. Смотрю все Ваши уроки.
    И всегда благодарю Вас от всей души. Удачи Вам.

    • Артем

      10.11.2016

      Вам спасибо, что смотрите и читаете

  • Мария

    10.11.2016

    Артем, еще раз здравствуйте.
    Вот никак не могу убрать с главной странице вот это. Запись была до того, как я использовала Ваши рекомендации и осталась и после…
    Все перепробовала. Ничего не помогает. Где эту заразу найти
    cancelurlTemplate
    //….com/?s={search_term_string} (В шаблоне окна поиска обнаружена ошибка: NON_HTTP_URL.)

    Помогите, пожалуйста с советом.

    • Артем

      10.11.2016

      Добрый день! Сложно так сказать, напишите в личку и киньте ссылку на сайт, это смотреть надо

      • Maksim

        06.01.2017

        Точно такая же ошибка {search_term_string} (В шаблоне окна поиска обнаружена ошибка: NON_HTTP_URL.)
        Подскажите как исправить?

        • Артем

          06.01.2017

          Насколько помню, там проблема была в том, что путь к файлам был без http или https. Для валидатора требуется полный путь. Убрали плагин, который делает такое (иногда так делают при подключении SSL) и все стало нормально. Проверьте ваши плагины

          • Maksim

            07.01.2017

            Да спасибо помогло, отключил плагин
            HTTP / HTTPS Remover

  • Валерий

    13.11.2016

    Артем, вставил в файл функций код, изменил пути к картинкам. Гугл показывает, что ошибок нет, а Яндекс выводит такую надпись: ОШИБКА: ваша JSON-LD разметка не может быть разобрана. Проверьте документ на синтаксические ошибки: …t;/h1> <img …
    Что это может быть?

    • Артем

      13.11.2016

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

      • Валерий

        13.11.2016

        Спасибо Артем, теперь Яндекс не ругается.

  • Наталья

    03.12.2016

    Спасибо большое! Ваш материал очень кстати. Как всегда лаконично и по делу. :-)

    • Артем

      04.12.2016

      Пожалуйста, рад оказаться полезным

  • Оксана

    29.01.2017

    Здравствуйте! После установки плагина вместо сайта вот такая надпись Fatal error: Call to undefined function get_avatar_url() in /home/u556659670/public_html/wp-content/plugins/art-schema-markup/art-schema-markup.php on line 29. Может я что-то не то сделала?

    • Артем

      29.01.2017

      Добрый вечер! Да нет, такого не должно быть. Это с плагином что-то не так. Проверю

  • Grigoriy

    30.01.2017

    Здравствуйте Артем!
    Вставил Ваш код микроразметки — заработал. Но есть несколько замечаний.
    В коде имеются незначительные ошибки, исправьте их, иначе люди будут обращаться постоянно.
    В коде: «height»: ‘. $img_post[1] .’,
    «width»: ‘. $img_post[2] .’ поменяйте местами height и width. Поисковики первое значение привыкли принимать как ширину, а не высоту — выдают ошибку. Там два таких места.
    И еще есть просьба, если можно, подскажите как исправить. Яндекс выдает:
    «Не выполнено обязательное условие для структурированных сниппетов Яндекс. Справочника: кажется, ваша разметка hCard описывает не организацию (поля fn и org не совпадают). В данный момент такая разметка не поддерживается Яндексом.»
    Главное — как исправить — (поля fn и org не совпадают).
    Буду ждать ответа. С Уважением, Григорий.

    • Артем

      30.01.2017

      Добрый день! Спасибо за замечания, поправлю.
      По замечаниям Яндекса — это у вас скорее всего в теме что-то успользуется типа vcard в комментариях. Надо смотреть, так не смогу точно сказать

  • Оксана

    31.01.2017

    А у меня так и не получилось установить :(

    • Grigoriy

      31.01.2017

      Все зависит от шаблона WordPress. Я так же не устанавливал этот код в functions.php,
      а сделал отдельный плагин. Если нет времени потерпеть — поищите информацию в интернет.
      К концу недели подробно напишу об этом на своем сайте Sit-Info.ru как очень просто залить
      этот файл отдельным плагином на любой блог WordPress. И еще много чего.
      Таким методом можно корректировать любой шаблон, даже если он время от времени обновляентся — типа премиум-шаблонов.

      • Оксана

        31.01.2017

        Шаблон у меня сделан на Артистере. Пробовала и плагин(тот что в статье) и код вставлять — не получается.

        • Grigoriy

          31.01.2017

          Оксана, я не имел ввиду официальные плагины,
          которые предлагает Артем.
          Я говорил о самостоятельно созданном плагине,
          на основе кода, который предложил Артем.
          Плагин создается очень просто — это своего рода PHP-файл,
          который добавляет функции в functions.php и вставляется
          он в любой шаблон, как обыкновенный плагин.
          В комментариях не объяснишь.

          • Оксана

            02.02.2017

            Я имела ввиду тот плагин, что под виде. Этот тот же самый код, только плагином.

  • Grigoriy

    02.02.2017

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

  • Альберт

    10.02.2017

    Здраствуйте! Благодарен за полезное видео. Подскажите пожалуйста, как правильно установить url картинки: $image_url_default = ‘#’; после или до решетки #

    • Артем

      10.02.2017

      Доброго! Надо указывать ВМЕСТО # и внутри одинарных кавычек полный путь к картинке, например так
      $image_url_default = 'https://wpruse.ru/wp-content/uploads/2016/07/ads-title-680x350.jpg';

      • Альберт

        10.02.2017

        Спасибо за быстрый ответ! Теперь все ясно…

      • Альберт

        10.02.2017

        У меня сайты на https будет плагин работать?

        • Артем

          10.02.2017

          Будет, только если используется какой-нибудь плагин типа HTTP / HTTPS Remover то будут ошибки, так как плагин режет ссылки

          • Альберт

            10.02.2017

            ОШИБКА: ваша JSON-LD разметка не может быть разобрана. Проверьте документ на синтаксические ошибки: {‘; $posts_…

          • Артем

            10.02.2017

            Странно, вроде все работало. Проверю

          • Артем

            10.02.2017

            Код поправил, проверьте. Плагин по позже поменяю

      • Альберт

        10.02.2017

        Артем плагин не работает и код тоже, то есть в валидаторе микроразметки нет изменений. Что может быть?

  • Татьяна Акманова

    28.02.2017

    Артем, сделала все по видео.
    У меня сейчас в консоли в библиотеке не поняла что произошло, но картина такая http://prntscr.com/ee6flq
    Подскажите что делать?

    • Артем

      28.02.2017

      Что использовали? Плагин или код?

  • Александр

    01.04.2017

    Читаю Ваши статьи, и они меня часто выручают, всегда много полезной информации.

  • Мастер

    06.04.2017

    Очень полезная статья, читаю их и как будто прохожу обучения, всегда все четко и понятно описано.

  • Александр

    08.04.2017

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

  • Дизайнер

    22.04.2017

    Здорово, все так подробно описано, даже вопросов не возникло, а самое главное все наглядно показано.

  • Михаил

    15.07.2017

    «@context»: «http://schema.org»,
    «@type»: «Article»,
    «mainEntityOfPage»: {
    «@type»: «WebPage»,
    «@id»: «https://xn—-btbkbnlbcc6cva2k.xn--p1ai/»
    добрый день, в этом месте яндекс выдает ошибку
    image
    Необходимо указать значение для поля image.
    подскажите как можно поправить

    • Артем

      27.07.2017

      Добрый! Надо указать ссылку на картинку и похоже что валидатор не понимает такие названия доменов

    • Артем

      27.07.2017

      У вас видимо на странице картинки нет, вот он и ругается. НАдо в коде установить дефолтную картинку. А на счет Article — то вот решение

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

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