Как автоматически создать микроразметку для изображений в статье

Здравствуйте, уважаемые друзья. Как вы помните, в прошлом месяце я написал 3 статьи на тему создания микроразметки. Тема очень актуальна, микроразметка нужно каждому сайту и блогу. И как вы помните, сами поисковые системы предлагают инструменты для создания и проверки микроразметки на сайте. А значит, нужно внедрять микроразметку на наши сайты.

Для начала давайте вспомним, что в прошлых статьях я рассказал, как создать микроразметку для статей и страниц сайта, а также показал, как создать разметку для комментариев. Так почему же я опять вернулся к данной теме? И причина этому моя лень. Точнее, нежелание часами сидеть и выполнять рутинную работу. Думаю, вы меня поймёте, дальше.

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

Изначально я не уделил этому должного внимания. Но после того как я отредактировал пару своих статей, добавил код микроразметки к каждому изображению вручную, я понял, что так дело не пойдёт. А учитывая тот факт, что в моем шаблоне код микроразметки куда-то исчезает, если я переключаюсь с текстового на визуальный редактор. И все приходится делать сначала, и этот факт постоянно нужно держать в голове. Такая ситуация меня просто убила. Выходит, что если я размечу больше сотни своих статей вручную и потрачу на это десятки часов, а в дальнейшем мне потребуется отредактировать какую-либо статью, то и микроразметку для изображений тоже нужно будет вносить по новой.

Так вот, этот ручной труд мы заменим средствами автоматизации. И это средство добавить микроразметку к каждому изображению в уже имеющихся статьях и будет добавлять ко всем изображениям в новых статьях. Вам не нужно будет об этом беспокоиться.

Функция для автоматического добавления микроразмекти к изображениям в статьях

Итак, от слов к действию. Открываем административную панель WordPress – «Внешний вид»«Редактор»«Функции темы».

И добавляем вот это код функции:

/* микроразметка изображений */
function micro_image($content) {
global $post;
$pattern = "<img";
$replacement = '<img itemprop="image"';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'micro_image');
/* микроразметка изображений */
Вставка функции в файл
Вставка функции в файл

Примечание: комментарии вы может убрать, это я для удобства использую.

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

Теперь если посмотреть исходный код статьи, то у каждого изображения в статье появится код микроразметки itemprop="image"

Пример работы функции
Пример работы функции

Вот вам и автоматизация. Вроде ничего сложного, зато, сколько сэкономленного времени и сил.

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

На этом у меня сегодня всё. Друзья, используйте и вы средства автоматизации на своих сайтах и блогах. Желаю вам удачи. До встречи в новых статьях.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 24
  1. Павел Пашкан

    А как вы думайте, у кого конверсия больше: у полезной статьи без инфографики, которая несет что то новое, или у статьи с инфографикой, но информация в ней уже многим известна?

    1. Максим Зайцев (автор)

      Точно утверждать не могу, всё покажет анализ.

  2. Николай Вилков

    Спасибо,Максим, для изображений я внедрил микроразметку, это легко, благодаря вашей заметке.
    Вот бы еще всю остальную реализовать))

    1. Максим Зайцев (автор)

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

  3. Анастасия

    Лень толкает человека на подвиги хоть и локального масштаба =) Сама также писала функции для разметки рецептов в одном разделе

    1. Максим Зайцев (автор)

      Анастасия, тогда вы понимаете меня, как никто другой. И если приходит в голову хорошая идея, как сделать дело и опять бездельничать — нужно эту идею реализовать :-)

  4. Василий

    Максим, а почему у меня после добавления этого кода, в валидаторе Google вообще не отображаются изображения? В Яндексе пишет про ошибку. Я вставил только этот код, другую микроразметку на сайте я еще не делал.

    1. Максим Зайцев (автор)

      Вася, из-за этого и ошибка. Нужно для начала разметить заголовки статьи и так далее. Тогда всё будет как надо. А так, просто не понятно к чему эта разметка изображений относится.

      1. Василий

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

        1. Максим Зайцев (автор)

          Я сам, в начале, как начал внедрять микроразметку кинулся размечать изображения вручную. А потом, когда разметил пяток статей, да ещё и не по одному разу. Решил привлекать мою лень на помощь. Обычно, когда мне становится лень что то делать, но при этом это надо делать, — я начинаю придумывать способы облегчить рутинные процессы. ;-)
          А на твоём блоге разметить всё вручную — просто нереально. С ума можно сойти. Куда легче в автомате.

          1. Василий

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

          2. Максим Зайцев (автор)

            Да, ручной труд — это тяжёлая работа!

  5. Василий

    Максим, а для видео, вставленного на сайт с YouTube существует микроразметка?

    1. Максим Зайцев (автор)

      Вася, для видео существует разметка общая разметка, где нужно указывать — дата добавления, автора, ссылка, возрастные ограничения и т.д. Но её можно прикрутить и к видеороликам с youtube.
      На один ролик нужно будет добавить довольно большой код.
      Хотел привести пример, но не могу вставить код. Достала меня уже моя тема. Пора менять.
      А вот как это сделать добавление микроразметки в автомате для видео, думал, но решение пока меня не посетило ;-)

      1. Василий

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

        1. Максим Зайцев (автор)

          Да, для видео есть обязательные поля — урл, название, автор и так далее. Без них выскакивают предупреждения. А просто фрейм со ссылкой на youtube вставлять не вижу смысла. К тому же с этими предупреждениями.

  6. Вика

    Вот это сайт, столько полезной для меня информации (каждый раз захожу сюда и зависаю на часы), и все настолько четко разложено по полочкам! Автор не бросайте это дело, у Вас очень хорошо получается! Спасибо за такие полезные обзоры!

    1. Максим Зайцев (автор)

      Вика, спасибо за добрые слова. Буду стараться ;-)

  7. Евгений

    Пытаюсь найти причину, по которой мои фотографии не индексируются. Как оказалось, в моей теме разметка по умолчанию была schema.org, но список изображений при проверке инструментом проверки структурированных данных гугла выводился только для страниц портфолио, но не для статей.
    Спасибо за код! Теперь список картинок отображается во время проверки микроразметки сервисом гугла. Очень надеюсь, что теперь они начнут индексироваться.

    1. Максим Зайцев (автор)

      Здравствуйте, Евгений. Посмотрел ваш блог, фотографии потрясающие. Вид просто обалденный!
      Теперь, когда микроразметку вы настроили — Гугл по мере обновления будет заносить новые фото в индекс. Удачи вам!

  8. Лариса

    Максим, продолжаю потихоньку внедрять разметку на сайт. С ужасом обнаружила, что разметка рецептов, сделанная вручную, тоже исчезает при переключении вкладок в админпанели… И если с картинками вопрос решился, то с этим пока не знаю что делать(((

    1. Максим Зайцев (автор)

      Лариса, здравствуйте. Я так понимаю, что слетает разметка ингредиентов, которую вы делаете в самой статье. Если так, то я советую почитать статью Виталия http://seo-mayak.com/seo-prodvizhenie/poiskovye-sistemy/makrorazmetka-schema-org.html
      Виталик хорошо описал разметку рецептов и внедрение средств автоматизации через функции темы.

  9. Александр

    Вечер добрый! Спасибо вам за код микроразметки, он единственный оказался рабочий, все остальные представленные в сети выдавали ошибку. Но возник вопрос. после внедрения кода, валидатор гугла стал показывать предупреждения (Атрибут image.itemtype имеет недопустимое значение.)? критично ли это или нет? валидатор яндекса говорит что ошибок нет.

    1. Максим Зайцев (автор)

      Александр, да Гугл сейчас требует указывать размеры изображений. Посмотрите мои статьи по разметке моего нового шаблона http://1zaicev.ru/mikrorazmetka-shablona-customizr-pro-stati-i-stranicy/ здесь я уже доработал код с учётом новых требований Гугла.

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