студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Техническое SEO
студия занимательная МИХАЛИКА

Внедрение на сайт тегов семантической микроразметки schema.org — по обновлённому стандарту

Сегодня мы обозначим свой блог обновлённой семантической микрометрической разметкой schema.org )) Я постараюсь подробно на некоторых примерах разъяснить это предприятие и, надеюсь, отныне некачественная разметка личного сайта вас печалить не станет. Рассмотрим по шагам — как внедрить разметку Schema.org в файлы шаблона

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


1 — удалить разметку hentry  —.2 — разметка шапки сайта

 

.3 — schema.oрг разметка главных страниц  — .4 — разметка отдельной странички

 

.5 !! — статья о микроразметке сайта с различными тематическими рубриками: сайт широкого профиля))

 

Как известно,  Google вновь поменял свои алгоритмы чтения стандартов разметки Schema! В особенности изменились требования меток обозначения картинок. Яндекс пока пробуксовывает!

А что это значит!? А это значит то, что свою прежнюю разметку необходимо заменить на новую, чтобы не отставать от времени, скажем так.

 

Заменить-то мы заменим, но вот батюшка Яшка противится грамоте,… а это приведёт к ошибкам в коде (тестируя валидаторами). Хотя, — это вовсе и не ошибки, а так — предупреждения, пока Яша не подтянулся до мировых стандартов (а он подтянется: так говорит практика). Так что не берите в голову… но по возможности правильно разметьте сайт, и — всё будет здорово!

 

 

 

 

знакомство с Schema.org — стандартом семантической микроразметки данных в интернетсети

 

 

 

 

Привожу цитату:

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.

 

Приступим:

 

 

 

как удалить разметку hentry

 

 

 

 

Давайте сделаем так: откройте вкладки этого адреса и этого — первая — валидатор микроразметки web-мастера Яндекс и вторая — ссылка Google.

Вбиваем свой домен и проверяем.

 

Мы сейчас, условно, рассматриваем вариант чистого сайта. Хотя у кого-то может уже быть какая-то другая разметка: её придётся подправить или удалить. Итак..! …взгляните на картинку.

 

 

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

 

 

Здесь явно наличие разметки hentry. Я её часто встречал на сайтах и, как и многие, склоняюсь к удалению этого ненужного свойства сайта.

 

Делается это так: открываем файл функций functions.php и в самый его финал (перед тегом ?>) прописываем следующий пример:

 

 

//удаление класса РАЗМЕТКА hentry start
function wph_remove_hentry_class($classes) {
$classes = array_diff($classes, array('hentry'));
return $classes;
}
add_filter('post_class', 'wph_remove_hentry_class');
//удаление класса hentry end

 

 

…после этих действий класс разметки исчезнет.

 

Я же не стану толковать о вреде или целесообразности разметки hentry, решать вам: я удалил — считаю, что от неё ни тепло ни холодно!

 

Далее…

 

 

 

размечаем шапку сайта в файле header.php классом разметки schema

 

 

 

 

Смотрим на фото: это чистый документ header.php — у вас будет что-то похожее. Принцип везде один — в нём и будем разбираться.

Рассмотрим пример динамического варианта вывода ИМЁН сайта.

 

 

А вообще, в следующих статьях настроим структуру правильного распределения тегов h1 h2 на главной и второстепенных страницах — и их динамический и статический варианты вывода: это полезно в плане SEO продвижения. Так что подписывайтесь…

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

размечаем шапку сайта в файле header классом shema org

 

 

В начале славных дел нас интересует цикл отработки шапки сайта от  закрывающего тега </head>  а именно: <div id="header"> или <div class="logo"> это кому как удобнее. Далее поймёте почему.

 

А пока, для более подробного ознакомления с разметкой shema.org, можете почитать на страничке Яндекс. Или изучить синтаксис ТУТ.

 

Итак: предлагаю начать со строки <div class="logo"> — обернём (или поместим) циклы вывода site_title и site_description в необходимый контейнер схемы разметки.

 

Следует добавит атрибуцию самого контейнера: от кавычек «logo» — через пробел — библиотеку разметки itemscope itemtype="http://schema.org/WPHeader".

 

 

Должно получится так:

 

<div class="logo" itemscope itemtype="http://schema.org/WPHeader">

 

 

Далее обозначаем отдельные поля с указанием на конкретное свойство схемы (нас интересуют свойства ИМЕНИ и ОПИСАНИЯ сайта): берём строки c h1 title и h2 description (описание сайта) и к их div-классам добавляем необходимые атрибуты… itemprop="headline" И itemprop="description"

 

Получится так:

 

<h1 class="site_title" itemprop="headline"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>

 

…и вот так…

 

<h2 class="site_description" itemprop="headline"><?php $theme->option('site_description'); ?></h2>

 

 

…ИЛИ лучше description (ДЕСКРИПШН) завернуть не в h2, а так, например: (но об этом подробнее в следующих статьях)

 

<span itemprop="description" class="site_description" style="display:none;"><?php $theme->option('site_description'); ?></span>

 

 

И как только закончим занятие разметки шапки сайта, идём проверять главную страницу блога в Гугл и Яндекс.

 

Должно получится так: (как понимаете, сайдбар вы ещё не разметили, а поэтому не обращаем внимания)

 

 

размечаем шапку сайта в файле header.php классом разметки shema.org

 

 

 

Во всём остальном, шапочка у нас теперь должна быть причёсанная и аккуратненькая. Отныне боты-поисковики более внимательно отнесутся к вашему сайту, ибо вы обозначили поле их действия! Они с вами подружатся!

 

 

И ещё, атрибуты разметки можно прописать и в раздел <div id="header" — тогда в валидаторе Гугл (фотка выше) будет размечена главная ссылка сайта…

 

 

Ну, что.!? Продолжим… и приступим к вопросу:

 

 

 

 

как внедрить микроразметку Schema.org на главную страницу и в разделы архивов — категорий

 

 

 

 

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

 

 

Тем же, которые считают разметку сайта для себя сложным занятием, предлагаю написать мне — листок услуг

 

 

Вероятнее всего, вам нужно будет открыть и работать с файлом вашей темы post.php (в корне шаблона). У кого-то может быть имя документа иное. Ищите тот файл, который отвечает за вывод и формирование главной страницы, категорий, тегов и архивов.

 

Ровно точно так же как и первом случае, нужно будет поместить в отдельный контейнер вывод анонсов статей и указать конкретное свойство схемы. То есть — библиотеку. В которой уже будем задавать отдельные свойства нашей размеченной алхимии.

 

 

Необходимое: важно понять, размечая html документ необходимо соблюдать работу циклов контейнеров div-классов (в особенности порядок закрывающих тегов </div>) которые уже были и которое мы внедрим. Иначе будут ошибки!

Так же следует обратить внимание на порядок контейнеров вывода элементов вашего шаблона. Вероятно придётся что-то поменять местами. Я, например, менял div-классы meta-полей (стилистику) вывода даты написания, авторства и рубрик — поместил их в единый цикл вывода анонса записи. Так что смотрите!

 

 

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

 

 

Итак, вот полный файл post.php размеченный стандартом schema.org (советую кликнуть по фотке, открыть в другом окне и изучать — а я буду пояснять)

 

 

как обозначить разметкой schema oрг главную и страницы категорий сайта

 

 

Строка номер три (3):

 

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

 

Див класс post (у вас будет иной класс — я здесь поменял имена, понятности ради) — в этот контейнер помещён цикл выводов анонсов главной страницы. И, как понимаете, к нему добавлена библиотека itemscope itemtype="http://schema.org/Article" Артикль. И вы проделываете то же самое.

 

5 — строка: div-класс информации об анонсе.

Дело в том, что новые стандарты разметки подразумевают замены стандартов, как то: дата должна быть двух вариантов — число написания itemprop="datePublished" и число редактирования itemprop="dateModified".

Я этого не дела ни на главной, ни в категориях (считаю это для моего блога нецелесообразным), но выполнил на страничках отдельных записей… Об этом ниже.

 

А пока переходим к строке — 13: это заголовок статьи (анонса) к нему следует добавить атрибут itemprop="headline"  Прописывайте…

 

Строка — 14: php — вывод миниатюры записи стандартом thumbnail. У вас миниатюры могут выводиться как-то иначе: или обычной фоткой статьи, или … словом, смотрите (о выводе картинок, также ниже).

Но коли у кого так же как и в показанном коде, целесообразнее и её обозначить (я этого не делал на главной…)

 

Можно  сделать так: прежде всего весь код php обернуть в див-класс. То.е перед <php вывода картинки прописать строку

 

<div itemscope itemtype="https://schema.org/ImageObject">

 

…А в сам php код добавить вот такую фразу после full , array('itemprop' => 'image')

 

Должно получиться так:

 

<div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div>

 

Не забывайте о закрывающем </div>.

 

Переходим к строке — 20:

Это сам текст анонса. Здесь спорный вопрос: кто-то выводит, а кто-то — нет. Я выводил какое-то время…

 

И если будете размечать анонс статьи и вы, то делайте так, как показано в коде ниже: т.е оберните php код в свойство itemprop="articleBody".

 

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

 

…обратите внимание на ДИВ класс (имя любое) и его закрывающий тег.

 

 

 

Проверяем на тестерах разметки! (ссылки выше).

 

 

 

Внедрение на сайт семантической разметки shema.org по обновлённому стандарту

 

Как видите, получается вот такая картинка (относительно всех анонсов главной): имя статьи, и сам анонс.

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

 

 

Теперь поясню: вот эти красные ошибки вовсе и не ошибки, но предупреждения GOOGLE web мастеру о незаполненных полях опубликованной записи, и всего делоф! А посему, я — считаю для своего сайта вывод этой инфы на страничках анонса ненужным. Вы можете вывести. Тогда будет всё зелёненькое (и не забывайте тестировать свою работу по разметке в Яндекс). Об этом расскажу ниже… в вопросе:

 

 

к сведению, до кучи…

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

Вероятно, одной размеченной статьи вполне достаточно, чтобы предоставить ПС. Это как бы основное что должно указывать… А главная и т.п. само собой фигурирует в домене.

 

 

 

 

 

как микрозметить стандартом schema страницу сайта

 

 

 

 

Открываем файл, который на вашем сайте отвечает за вывод отдельного поста. У меня это  post-single.php Я этот файл нарочно оставил на финал, чтобы вы как-то пообвыклись и въехали в принцип.

 

Приступим: всё аналогично !!!

 

<div class="ВАШ_класс-CSS_полной_записи" itemscope itemtype="http://schema.org/Article">

 

 

 

Внимание: вам стоит отыскать именно тот контейнер, в который завёрнут САМ цикл вывода ОДНОЙ только записи с МЕТАПОЛЕМ (никакие divы блока комментариев или «похожие записи» суда не путать: будут ошибки!

 

 

Далее выполним обновлённые требования Google по разметке… шамкаем информационную часть.

 

Здесь следует обратить внимание на див-класс post_meta (если он у вас был) — внутри него стоит всё заменить на новый стандарт!

 

Стандарт сказал — поехали))

 

Выводим дату: которая должна быть такого стандарта…

 

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

 

Первая строка: дата публикации datePublished И- вторая — dateModified

 

И тут же под строками следующая инфа (советую размечать так).

Обратите внимание на строки 1 и 2 !! у меня размечено только имя автора, но коли вам нужно разметить и рубрики — размечайте…

 

 

&nbsp; <span> - автор:</span> <span itemprop="author"> <?php the_author() ?></span>
&nbsp; <span> Рубрика: <?php the_category(', '); ?></span>
<?php
if(is_user_logged_in()) {
?> &nbsp; <span class="meta_edit"><?php edit_post_link(); ?></span><?php
} ?>

 

 

Далее прописывайте следующее…

 

Конечно же, структуру подстраивайте под свой шаблоном. …и проверяйте валидаторами… в том числе и html-код размечаемой странички здесь

 

<meta itemscope content="ИМЯ ВАШЕГО САЙТА" itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="telephone" content="ЭЛ/П@yandex.ru">
<meta itemprop="address" content="спб Петербург">
<meta itemprop="name" content="ИМЯ САЙТА или...">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" itemprop="image" src="http://ДОМЕН.ru/wp-content/themes/ШАБЛОН/images/ИМЯ.jpg" style="display:none;" title="logo" alt="logo"/>
<meta itemprop="width" content="150">
<meta itemprop="height" content="130">
</div>
</div>
</div>

 

Обратите внимание на три закрывающих div-класса: первый (сверху) закрывает <div itemprop="logo" … второй див — <div itemprop="publisher" … и третий <div class="postmeta"> (если был — здесь показано для примера).

 

 

Ну, давайте поближе рассмотрим вариации разметки информационного цикла:

 

1 строка: имя вашего сайта.

2 строка: открывается поле информации организации. То есть разметочная инфа вашего блога.

3 — указывайте свой телефон или эл/п … Далее разбирайтесь по коду.

7 строка: логотип вашего сайта и путь до его расположения.

8 — 9 -соответственные размеры лого.

 

 

Вот как бы с этим и всё! Далее остаётся обозначить разметкой TITLE статьи, типа такого:

 

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

 

 

 

внедрить атрибуты микроразметки Schema.org в теги картинок

 

 

 

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

 

 

<div itemscope itemtype="https://schema.org/ImageObject">
<?php
if(has_post_thumbnail()) {
?>
<div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div><?php
}
?>
<meta itemprop="width" content="215">
<meta itemprop="height" content="128">
</div>

 

 

 

 

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

 

 

 

 

 

У кого-то может быть в шаблоне такой вариант вывода текста статьи:

 

…тогда предлагаю php код вывода контента статьи обернуть в какой-нибудь отдельный div-класс, но с атрибутом itemprop="articleBody" посредством которого в валидаторе разметки вы увидите текст вашей записи, ибо этим разметочным атрибутом вы указываете БОТУ на статью… вот, мол, чурбан железный, глотай…

 

 

<div class="ww" itemprop="articleBody">
<?php
the_content('');
wp_link_pages( array( 'before' => '<div class="lists"><p>' . __( 'Следующая страничка:', 'themater' ) . '', 'after' => '</p></div>' ) );
?>
</div>

 

 

Вот теперь всё, товарищи.

 

Да, чуть не забыл, необходимо же

 

 

 

добавить атрибутику микроразметки в картинки внутри записи…

 

 

 

 

Для этого воспользуемся php кодом (автора сайта SEO-маяк, ссылка здесь) — его прописываем в файл функций… 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" \\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');
//ФИНАЛ Разметка картинок статьи

 

 

Таким образом, автоматом, ко всем картинкам статьи добавится нужный атрибут itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" …и ещё нужно сказать: этим кодом картинки будут считываться Google по новому стандарту, то есть к ним будет добавлена информация о ширине и высоте изображения. Если вы приглядитесь к коду, то заметите необходимые дополнения в отличие от старого.

 

Ну, что.!? …пробуем подсунуть свою работу Гугл и Яндекс..?

 

Должна быть такая картинка !!!!

 

Но тут дело вот в чём: Яндекс, очень вероятно, покажет ошибку Не выполнено обязательное условие для передачи данных в Яндекс.Картинки: поле contentUrl или image или thumbnail отсутствует или пусто (так пока считывает разметку Яша)) но это поправляется в четвёртой строке кода, — добавляете ещё одно св-ство … itemprop="image"  но в этом случае валидатор HTML кода страницы может показать ошибку. Выбирайте…

 

 

shema.org симантическая разметка

 

 

 

как обозначить разметкой shema.oрг главную и страницы категорий сайта

 

 

 

Занавес закрывается! В следующей статье мы разметим сайбары, футер и комментарии… Так что подписывайтесь…

 

 

 

Теперь вы практически выучились размечать свой сайт по стандартам разметки schema.org — СХЕМАтика )) И коли нужно, проделайте подобные работы и с остальными файлами вашей темы, отвечающими за выводы отдельных страничек архивов, — например, файлы могут иметь такие имена page.php ИЛИ post-page.php и т.п…

Словом, — у каждого свои требования, а значит и внедрение разметки Schema.org осуществляется согласно вашим желаниям.

 

 


На этом занавес представления опускается…

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

 

 

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


Комментарии © 4 к статье: Внедрение на сайт тегов семантической микроразметки schema.org — по обновлённому стандарту

  1. Здравствуйте, Михаил!
    Не подскажете ли как сделать разметку картинок (миниатюр) thumbnail ?? Не могу разобраться… как же их вывести перед очи google анализатора. ))
    Была бы признательна.

    Ответить - Катя

    • Здравствуйте Катя!
      Если я Вас неправильно понял, то — нужно попробовать сделать следующее…
      Первый вариант: пропишите в файл функций такой код (коллега изобрёл))
       

      /** КАРТИНКИ thumbnail */
      function mayak_filter_thumbnail($content) {
      $ar	= '!<img width="(.*?)" height="(.*?)" (.*?)/>!si';
      $br = '<span itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" itemprop="image" width="\\1" height="\\2" \\3/><meta itemprop="width" content="\\1"><meta itemprop="height" content="\\2"></span>';
      $content = preg_replace($ar, $br, $content);	
      	return $content;		 
      }
      add_filter('post_thumbnail_html', 'mayak_filter_thumbnail');
      /** КАРТИНКИ thumbnail */

       

      Только помните, Катя, код выведет ВСЕ thumbnail картинки сайта, из сайдбаров и прочего…

      Но лучше, сделать как описано в статье: к нужным (кодам) миниатюр добавить фразу — , array(‘itemprop’ => ‘image’) после full

      Ответить - Михаил

      • Спасибо!! да, так получается лучше. По отдельности фотки, я имею… ))

        Ответить - Катя

        • Вы молодчина, что отправили свой код-эксперимента мне на эл/п — так просто всё у нас решилось))
          Дело в том, что, некоторое время на сайте код в комментах был запрещён (вследствие чего могли быть ошибки).
          Теперь всё работает, пишите кодостроки)) если что, прямо в комментариях.
          Удачи, Катя!

          Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

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