Лого www.SiteHere.ru

Микроразметка Schema.org — как угодить Google и Yandex одновременно?

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

Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:

PDF отчет

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

В данной статье я хочу показать о том, как на практике сделать микроразметку на своем сайте, чтобы ее хорошо восприняли и Google и Yandex одновременно. Потому что многие сталкиваются с проблемами: для Yandex микроразметка нормально проходит валидацию (об этом читайте ниже), а вот для Google появляются ошибки, и наоборот. Да, это действительно так. Но всегда можно найти компромисс!

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

Как проверить "правильность" микроразметки Schema.org?

Как проверить правильность микроразметки Schema.org

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

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

  • Валидатор микроразметки от Google
  • Валидатор микроразметки от Yandex

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

Как пользоваться валидаторами микроразметки?

Как пользоваться валидаторами микроразметки

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

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:

Валидатор микроразметки Google

Есть два варианта проверки валидации страницы:

  1. С помощью прямой вставки HTML кода
  2. С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

Валидная микроразметка Schema.org

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Валидатор микроразметки Yandex

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

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

Правильная Schema.org

Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

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

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

Что необходимо разметить на странице

Словарь микроразметки Schema.org очень большой. Здесь можно найти формат разметки практически любого типа записей. В прошлой статье я приводил основной список форматов, которые поддерживаются данная микроразметка: адреса и организации, видео, программы, рефераты, изображения, статьи, фильмы и так далее.

Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article. Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting. Он является частным вариантом сущности Article. И он отлично подходит для разметки записей на блогах.

Сейчас определимся со структурой. Свойств там очень много. Вот скриншот лишь небольшой части из всех возможных:

Свойства сущности Schema.org

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

Наглядный пример микроразметки schema.org

Сейчас Вы понимаете какие свойства нам понадобятся для разметки страницы. Я сделал данное изображение, чтобы наглядно показать что именно необходимо указать с помощью микроразметки Schema.org. А из картинки выше понятно, что необходимо пометить самые важные зоны документа. Конечно, на изображении я показал не всю микроразметку, которую мы будем использовать, но Вам сейчас необходимо понять для чего вообще мы будем это делать и что именно попадет под разметку страницы.

Шаг 2. Формируем шаблон микроразметки

Формируем шаблон микроразметки

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

Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- Используем тип "BlogPosting" -->
<div itemscope itemtype="http://schema.org/BlogPosting">
 
    <!-- Ссылка на статью -->
    <link itemprop="mainEntityOfPage" itemscope href="Ссылка на статью" />
 
    <!-- Данные о сайте: лого, телефон, адрес, название -->
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img alt="Лого www.SiteHere.ru" itemprop="image url" src="http://www.sitehere.ru/favicons/favicon-160x160.png"/>
            <meta itemprop="width" content="160">
            <meta itemprop="height" content="160">
        </div>
        <meta itemprop="telephone" content="-">
        <meta itemprop="address" content="Россия">
        <meta itemprop="name" content="www.SiteHere.ru">
    </div>
 
    <!-- Дата публикации статьи -->
    <meta itemprop="datePublished" content="2016-01-24">
 
    <!-- Дата последнего изменения статьи -->
    <meta itemprop="dateModified" content="2016-01-24">
 
    <!-- Автор статьи -->
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Юрий Немец</span>
    </span>
 
    <!-- Тело статьи -->
    <div itemprop="articleBody">
 
        <!-- Заголовок статьи -->
        <h1 itemprop="headline">Заголовок</h1>
 
        <!-- Главное изображение статьи -->
        <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="image url" alt="Описание картинки" width="500" height="280" src="http://www.sitehere.ru/wp-content/uploads/2016/01/microrazmetka-schema-org.png"/>
            <meta itemprop="width" content="500">
            <meta itemprop="height" content="280">
        </span>
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.</p>
    </div>
</div>

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

  • Строка 1: объявляем тип контента, который будет размечен.
  • Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
  • Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
    • Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
    • Строка 14: указываем телефон, если он есть.
    • Строка 15: реальный адрес, если работаете в офисе, например.
    • Строка 16: здесь пишем название компании.
  • Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ". И обязательно разделитель должен быть знак "".
  • Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
  • Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
  • Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
    • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline";
    • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

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

Если Вы разобрались в структуре микроразметки Schema.org для статьи, то проделали уже 80% работы. Осталось малость, но эта "малость" требует технических знаний. Потому что сейчас необходимо перенести данную структуру на реальный работающий сайт.

Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

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

Многие используют различные CMS. Поэтому одного уникального кода, который бы работал сразу на любом сайте. Но у Вас есть код микроразметки, который получился у меня в ходе многочисленных поисков. Вам останется постепенно внедрить данную разметку на своем сайте. И сейчас я дам советы, которые помогут Вам в этом:

  1. Начинайте разметку с основных структур. То есть для начала разметьте основную сущность, внутри которой находятся все остальные элементы. Поэтому сначала необходимо найти блок, в котором содержится все: изображение, автор, дата и так далее;
  2. Далее займитесь разметкой блока "Organization". Потому что он не меняется динамически. Его необходимо один раз сделать и поместить внутрь сущности "BlogPosting". Данный блок затем скройте с помощью CSS стилей.
  3. Затем необходимо разметить дату публикации и дату последнего изменения. Сделать это несложно. В каждой CMS есть своя функция, которая отвечает за это. Так как это мета-теги, то скрывать ничего не нужно. Например в WordPress этот фрагмент микроразметки будет выглядеть следующим образом:
    • HTML КОД
      1
      2
      3
      4
      
      <!-- Дата публикации статьи -->
      <meta itemprop="datePublished" content="<?php the_time('o-m-d') ?>">
      <!-- Дата последнего изменения статьи -->
      <meta itemprop="dateModified" content="<?php the_modified_date('o-m-d'); ?>">
  4. Далее отметьте подструктуру "articleBody". Именно внутри нее Вам необходимо будет указать заголовок и главное изображение статьи.
  5. И последним шагом исправьте разметку главного изображения в статье. Так как это, чаще всего, сделать технически сложнее всего, то оставьте данный элемент на концовку.

Содержание

Вывод

Многие, возможно, начнут возмущаться, что нет готового решения, которого все так ждали. Все хотят волшебную таблетку: "скопировал->вставил". Такого не будет, если Вы хотите реальных и ощутимых результатов. У Вас индивидуальный шаблон, у которого своя собственная структура. Поэтому наберитесь терпения и разберетесь в том, как устроена микроразметка Schema.org.

Что касается технической части, то скажу вот что: либо отдайте это дело профессионалу, либо самостоятельно разберитесь в том, что я описал в данной статье

В статье я поделился практическим примером, на который потратил несколько часов поисков. А Вы можете скопировать его буквально за несколько секунд. Но в этом и есть польза таких статей. Если Вам хочется узнать еще больше практических примеров, то Вам подойдет наша бесплатная PDF книга: СКАЧАТЬ PDF КНИГУ.

Успехов!

С Уважением, Юрий Немец

Микроразметка Schema.org — как угодить Google и Yandex одновременно? 4.57/5 (91.43%) 14 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (16) к записи
  • Наталья Яшина

    Юрий, огромная благодарность за статью. Как раз встал вопрос разобраться с микроразметкой.

     
  • Волк-одиночка

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

     
  • Антон

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

     
    • Юрий Немец

      Здравствуйте, Антон!

      Для чего необходима микроразметка Schema.org читайте в данной статье: ПЕРЕЙТИ.

      Потому что в данной статье уже я описал практическое внедрение микроразметки. Если возникнут вопросы — обязательно пишите.

       
  • witos1

    А я заказывал за 500р.

     
  • Игорь

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

     
    • Юрий Немец

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

       
  • Александр

    А тег <meta>  допускается размещать в теле страницы, вне <head>?

     
    • Юрий Немец

      Александр, в качестве элемента микроразметки — да. В примере показано как это сделать правильно.

       
  • Александр

    Юрий, еще вопрос: а почему в статье Вы сделали разметку "Article" а не  "BlogPosting"?  Есть какие то нюансы использования этих разметок? 

     
    • Юрий Немец

      Александр, мы сейчас тестируем некоторые сниппеты, чтобы точно понять как и что "подцепляет" Google. Поэтому микроразметку незначительно, но иногда меняем для тестов.

       
  • Артем

    Микроразметка Schema.org вещь отличная, но чтобы ее внедрить самостоятельно нужно много инф. почитать. Другое дело готовое взять.angry

     
  • Алексей

    хорошая статья, спасибо! такой подробной и понятной инфы по данной теме еще не встречал :)

     
    • Юрий Немец

      Спасибо, Алексей!

       
  • Сергей

    Юрий, добрый день! Спасибо за информацию в статьях.

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

    Вопрос. Подскажите возможно ли и как повлияет , если к примеру на одной странице размечать микроразметку как для уникально статьи и плюс еще если статья о творческой работе (изображение), а так же разметки для нескольких отдельных изображений. То есть если по яндексу (список тематик) на одной странице сайта нужно отметить и "Оригинальный текст" и "Другие творческие работы" и "картинки"  ? Это можно совмещать в одном коде то есть <div…1>…<div…2>…<div…3>…..</div3><div2><div1>    ?

    Или нужно определиться  и что-то одно ? Или я не правильно понимаю и достаточно просто выбрать нужные мне itemprop=  и их указать в границах одних <div> для трех тематик ?

     
    • Юрий Немец

      Здравствуйте, Сергей!

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

      Советую Вам просто посмотреть на Яндексе какие сущности есть в данной микроразметке и выбрать подходящий для Вас вариант.

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

       

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

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