Сегодня мы обозначим свой блог обновлённой семантической микрометрической разметкой schema.org )) Я постараюсь подробно на некоторых примерах разъяснить это предприятие и, надеюсь, отныне некачественная разметка личного сайта вас печалить не станет. Рассмотрим по шагам — как внедрить разметку Schema.org в файлы шаблона
Нынче я не стану тратить время на рассказы о приоритетах размеченного сайта перед поисковыми системами, подобную информацию легко отыскать на просторах инета. А приступим-ка лучше к выполнению негоции в разметке контента…
- знакомство с Schema.org — стандартом семантической микроразметки данных в интернетсети
- как удалить разметку hentry
- размечаем шапку сайта в файле header.php классом разметки schema
- как внедрить микроразметку Schema.org на главную страницу и в разделы архивов — категорий
- как микрозметить стандартом schema страницу сайта
- внедрить атрибуты микроразметки Schema.org в теги картинок
- микроразметка текста статей
- добавить атрибутику микроразметки Schema.org в картинки внутри записи…
А позже дам ссылку на статью о том, как сделать микроразметку на сайте со статьями различной тематики: нужно понимать, что микроразметка разная, в зависимости от темы сайта — но вот коли на сайте публикуются статьи разной тематической направленности, то … в общем — полезно!!
Как известно, Google вновь поменял свои алгоритмы чтения стандартов разметки Schema! В особенности изменились требования меток обозначения картинок. Яндекс пока пробуксовывает!
А что это значит!? А это значит то, что свою прежнюю разметку необходимо заменить на новую, чтобы не отставать от времени, скажем так.
Заменить-то мы заменим, но вот батюшка Яшка противится грамоте,… а это приведёт к ошибкам в коде (тестируя валидаторами). Хотя, — это вовсе и не ошибки, а так — предупреждения, пока Яша не подтянулся до мировых стандартов (а он подтянется: так говорит практика). Так что не берите в голову… но по возможности правильно разметьте сайт, и — всё будет здорово!
к оглавлению
знакомство с Schema.org — стандартом семантической микроразметки данных в интернетсети
Привожу цитату:
Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Приступим:
к оглавлению
как удалить разметку hentry
Давайте сделаем так: откройте вкладки этого адреса и этого — первая — валидатор микроразметки web-мастера Яндекс и вторая — ссылка Google.
Вбиваем свой домен и проверяем.
Мы сейчас, условно, рассматриваем вариант чистого сайта. Хотя у кого-то может уже быть какая-то другая разметка: её придётся подправить или удалить. Итак..! …взгляните на картинку.
Здесь явно наличие разметки hentry. Я её часто встречал на сайтах и, как и многие, склоняюсь к удалению этого ненужного свойства сайта.
Делается это так: открываем файл функций functions.php
и в самый его финал (перед тегом ?>
) прописываем следующий пример:
//удаление класса РАЗМЕТКА hentry start
add_filter('post_class', 'wph_remove_hentry_class');
function wph_remove_hentry_class($classes) {
$classes = array_diff($classes, array('hentry'));
return $classes;
}
//удаление класса hentry end
…после этих действий класс разметки исчезнет.
Я же не стану толковать о вреде или целесообразности разметки hentry, решать вам: я удалил — считаю, что от неё ни тепло ни холодно!
Далее…
к оглавлению
размечаем шапку сайта в файле header.php классом разметки schema
Смотрим на фото: это чистый документ header.php
— у вас будет что-то похожее. Принцип везде один — в нём и будем разбираться.
Рассмотрим пример динамического варианта вывода ИМЁН сайта.
А вообще, в следующих статьях настроим структуру правильного распределения тегов h1 h2
на главной и второстепенных страницах — и их динамический и статический варианты вывода: это полезно в плане SEO продвижения. Так что подписывайтесь…
Online консультация по настройкам и созданию сайтов на WordPress
В начале славных дел нас интересует цикл отработки шапки сайта от закрывающего тега </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>
И как только закончим занятие разметки шапки сайта, идём проверять главную страницу блога в Гугл и Яндекс.
Должно получится так: (как понимаете, сайдбар вы ещё не разметили, а поэтому не обращаем внимания)
Во всём остальном, шапочка у нас теперь должна быть причёсанная и аккуратненькая. Отныне боты-поисковики более внимательно отнесутся к вашему сайту, ибо вы обозначили поле их действия! Они с вами подружатся!
И ещё, атрибуты разметки можно прописать и в раздел <div id="header"
— тогда в валидаторе Гугл (фотка выше) будет размечена главная ссылка сайта…
Ну, что.!? Продолжим… и приступим к вопросу:
к оглавлению
как внедрить микроразметку Schema.org на главную страницу и в разделы архивов — категорий
Приготовьтесь: разметка главной, отдельных записей и страничек занятие более кропотливое. Но не стоит пугаться, и коли отнестись с вниманием к моим пояснениям, у вас всё получится.
Тем же, которые считают разметку сайта для себя сложным занятием, предлагаю написать мне — листок услуг
Вероятнее всего, вам нужно будет открыть и работать с файлом вашей темы post.php
(в корне шаблона). У кого-то может быть имя документа иное. Ищите тот файл, который отвечает за вывод и формирование главной страницы, категорий, тегов и архивов.
Ровно точно так же как и первом случае, нужно будет поместить в отдельный контейнер вывод анонсов статей и указать конкретное свойство схемы. То есть — библиотеку. В которой уже будем задавать отдельные свойства нашей размеченной алхимии.
Необходимое: важно понять, размечая html документ необходимо соблюдать работу циклов контейнеров div-классов (в особенности порядок закрывающих тегов </div>
) которые уже были и которое мы внедрим. Иначе будут ошибки!
Так же следует обратить внимание на порядок контейнеров вывода элементов вашего шаблона. Вероятно придётся что-то поменять местами. Я, например, менял div-классы meta-полей (стилистику) вывода даты написания, авторства и рубрик — поместил их в единый цикл вывода анонса записи. Так что смотрите!
Я вам покажу как делал на одном из сайтов, а последовательно немного буду пояснять, чтобы вы уловили принципиальное решение разметки сайта и смогли разобраться со своим шаблоном до финала.
Итак, вот полный файл post.php
размеченный стандартом schema.org (советую кликнуть по фотке, открыть в другом окне и изучать — а я буду пояснять)
Строка номер три (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>
…обратите внимание на ДИВ класс (имя любое) и его закрывающий тег.
Проверяем на тестерах разметки! (ссылки выше).
Как видите, получается вот такая картинка (относительно всех анонсов главной): имя статьи, и сам анонс.
Как говорилось выше, новые стандарты разметки подразумевают вывод более полной информации — дату, автора, логотип сайта телефон и т.п… Я этого на главных страничках не делаю, а вывожу всё это на отдельных записях блога.
Теперь поясню: вот эти красные ошибки вовсе и не ошибки, но предупреждения GOOGLE web мастеру о незаполненных полях опубликованной записи, и всего делоф! А посему, я — считаю для своего сайта вывод этой инфы на страничках анонса ненужным. Вы можете вывести. Тогда будет всё зелёненькое (и не забывайте тестировать свою работу по разметке в Яндекс). Об этом расскажу ниже… в вопросе:
к сведению, до кучи…
Всё же мне думается, можно как-то иначе поступить с разметкой главной страницы… я, например, решил убрать теги микроразметки из анонсов.
Вероятно, одной размеченной статьи вполне достаточно, чтобы предоставить ПС. Это как бы основное что должно указывать… А главная и т.п. само собой фигурирует в домене.
В статьях рецептов, как известно, по правилам микроразметки, желательно использовать мета тег itemprop="description"
в решении этой у многих задачи возникают трудности — что это за тег и как его правильно добавить, описано в этой полезной статье.
к оглавлению
как микрозметить стандартом 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 !! у меня размечено только имя автора, но коли вам нужно разметить и рубрики — размечайте…
<span> - автор: </span><span itemprop="author"><?php the_author(); ?></span>
<span> Рубрика: <?php the_category(', '); ?></span>
<?php
if(is_user_logged_in()) {
?> <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>
Вот теперь всё, товарищи.
Да, чуть не забыл, необходимо же
к оглавлению
добавить атрибутику микроразметки Schema.org в картинки внутри записи…
Для этого воспользуемся php
кодом (автора сайта SEO-маяк, ссылка здесь) — его прописываем в файл функций… functions.php
куда-то в финал, перед тегом ?>
//Разметка картинок статьи
add_filter('the_content', 'mayak_filter_image');
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;
}
//ФИНАЛ Разметка картинок статьи
Таким образом, автоматом, ко всем картинкам статьи добавится нужный атрибут itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url"
…и ещё нужно сказать: этим кодом картинки будут считываться Google по новому стандарту, то есть к ним будет добавлена информация о ширине и высоте изображения. Если вы приглядитесь к коду, то заметите необходимые дополнения в отличие от старого.
Ну, что.!? …пробуем подсунуть свою работу Гугл и Яндекс..?
Должна быть такая картинка !!!!
Но тут дело вот в чём: Яндекс, очень вероятно, покажет ошибку Не выполнено обязательное условие для передачи данных в Яндекс.Картинки: поле contentUrl или image или thumbnail отсутствует или пусто
(так пока считывает разметку Яша)) но это поправляется в четвёртой строке кода, — добавляете ещё одно св-ство … itemprop="image"
но в этом случае валидатор HTML кода страницы может показать ошибку. Выбирайте…
Занавес закрывается! В следующей статье мы разметим сайбары, футер и комментарии… Так что подписывайтесь…
Теперь вы практически выучились размечать свой сайт по стандартам разметки schema.org — СХЕМАтика )) И коли нужно, проделайте подобные работы и с остальными файлами вашей темы, отвечающими за выводы отдельных страничек архивов, — например, файлы могут иметь такие имена page.php
ИЛИ post-page.php
и т.п…
Словом, — у каждого свои требования, а значит и внедрение разметки Schema.org осуществляется согласно вашим желаниям.
Вот полезная статья о том, как внедрить микроразметку schema.org на сайт со статьями различной тематики: т.е если у вас на сайте есть рубрики с рецептами и какие-то различные публицистические рубрики, напрямер по способам вяззки крюком))
Статьи по тегам : html редактор вордпресс — 2 — плавный скроллинг якоря и пружинистой кнопки вверх
3 — на сайте max-спойлер в один клик, и без плагина
Online консультация по настройкам и созданию сайтов на WordPress
Как работать с условными тегами WP: пример на странице пагинации — закрываем в noindex,follow
Подключаем Турбо Страницы Яндекса (на канале — видео о том, как удалить эти Турбо страницы из индекса Я.
mihalica.ru !
СпасибО помогли :)
Здравствуйте. Яндекс выдает ошибку
Код выглядит так.
Что ему не нравится?
Почему то не выводит скрип
Для этого (вывода скриптов без ошибок) существуют кнопочки над формой коммов…
Валидатор гугла выдает ошибку
«В документе JSON-LD задан недопустимый тип.»
Как это исправить тут?
попробуйте поставить заместо
HomeProducts
этот тип продуктаProduct
(это конечно, в самой разметке) и тестируйте… как только ошибка уйдёт выправите остальное.Разметьте для начала по элементарным стандартам.
По микр.р. Я. смотрите тут: Яндекс.
В валидаторе микроразметки яндекса и гугла (
//pokupaylegko.ru
)jsonld
ПРЕДУПРЕЖДЕНИЕ: тип http://www.schema.org/HomeProducts неизвестен по спецификации schema.org
HomeProducts — что это такое? — сам не представляю, осталось наследство от прошлого программиста. Видимо так он хотел указать, что это магазин с товарами для дома.
Вот как раз из-за этого атрибута и предупреждение!! (напутано у Вас)
Замените его на стандартный
…и, может быть, ещё кое-что придётся подправить в общих тегах микр. на страницах… вероятно, и к карточкам товаров нужно повнимательнее отнестись!
И всё заработает…
(ссылку Вашу я уберу — !! поставил текстом в комментарии !! ибо магазинам не разрешено оставлять ссылки)
Добрый день. Валидаторы выдают ошибку, помогите пожалуйста исправить
https://pokupaylegko.ru/
Ошибку в чём выдают? конкретнее…
HomeProducts
— что это такое?У Вас ошибка в мироразметке картинок.
1) Валидатор яндекса ругается
2) Микроразметка появляется только у картинок без подписи. А у картинок с подписью не появляется микроразметка.
Правильно так:
Спасибо, Сергей, за внимание!..
Сейчас посмотрю: мог и напутать… (вообще — это, выражусь так: не ошибка)
Да, можно и поправить — хотя у меня ошибку валидатор не выдавал, но парсер страничку видел специфически: без блочных делений
image
……
Это года два назад… когда ещё на предупреждение Яшки лишнего
image
(или недостающего, не помню уже) приходилось вымудряться с атрибутикойitemprop="image"
добавлять, к примеру,url
сюдаitemprop="url image"
ну и прочее…Короче — да — эту строку можно поправить:
…но, приоритет «900» (в фин. строке), думаю, выставлять необязательно…
…
Сейчас поправлю и в статье и ТУТ пусть остаётся!! кстати, ещё придётся в коде mainEntityOfPage атрибутику поправить.
Ещё раз, Сергей, простое, но большое человеческое Сапасибо! за Вашу внимательность — а то бы когда я ещё зашёл на эту статью.
Читателям будет полезно.
PS|
А у Вас который ПС ошибку выдавал: Google или Яша?? Ведь приходится мудрить, чтоб услужить и тому и другому ПС. Исправление этой ошибки — породит другие — ибо Яндекс вечно мудрит!
Проверял только верификатором Яндекса.
Приоритет 900 нужен для того, чтобы фильтр работал после замены подписи к рисунку. Подпись в вордпрессе реализована шорткодом, т.е. тоже работает через свой фильтр. Если фильтр микроразметки срабатывает раньше, то потом обработчик подписи к рисунку вычищает обертку вокруг img. Это, если под рисунком есть подпись. Если под рисунком нет подписи, то Ваш фильтр работает корректно.
В том-то и вся штука!!
Попробуйте Google валидатору дать покушать документ… Будет много ошибок! (тестировать нужно, проверяя тут же у обоих ПС)
Поэтому у меня такое построение атрибутов разметки и значений…
Если убрать (по переложенному Вами коду)
image
— Гугл картинки в статье не увидит!! и кроме того запросит не толькоimage
но иurl
… а где их взять к картинке (адреса вложений фоток мы всячески скрываем, от дублей…) Вот из-за этой закавыки и добавлены в строку на которую Вы указали:<img itemprop="url image"...
и пр. и пр. Словом, как в статье…Пс Г. получает
url и image
, а Я. своё…В этом случае и Яша и Гугл смиренно МОЛЧАТ! Что и требовалось!
Это, конечно, этакий костыль, но иначе этих товарищей ПС не подружить))
…
Поэтому «приоритет» и значения не играет… только меняются ошибки в Гугле.
PS
Хотите, посмотрите как работает разметка у меня на сайте (хоть конкретно этой страницы) тогда будет о чём ещё потолковать… Вообще, это интересно))
Микроразметка стала актуальной в 2016 году, по сути она для соц. сетей или для сбора Снипитов. Еще полезно знать о семантической разметки сайта. Кому интересно можете ознакомится в моей блоге…
К сожалению… должен удалить Ваш труд — ссылку удалил: это банальная реклама!
Для рекламы есть соответствующие решения… И это правильно!
Здравствуйте, Михаил!
Не подскажете ли как сделать разметку картинок (миниатюр) thumbnail ?? Не могу разобраться… как же их вывести перед очи google анализатора. ))
Была бы признательна.
Здравствуйте Катя!
Если я Вас неправильно понял, то — нужно попробовать сделать следующее…
Первый вариант: пропишите в файл функций такой код (коллега изобрёл))
Только помните, Катя, код выведет ВСЕ
thumbnail
картинки сайта, из сайдбаров и прочего…Но лучше, сделать как описано в статье: к нужным (кодам) миниатюр добавить фразу —
, array(‘itemprop’ => ‘image’)
послеfull
Спасибо!! да, так получается лучше. По отдельности фотки, я имею… ))
Вы молодчина, что отправили свой код-эксперимента мне на эл/п — так просто всё у нас решилось))
Дело в том, что, некоторое время на сайте код в комментах был запрещён (вследствие чего могли быть ошибки).
Теперь всё работает, пишите кодостроки)) если что, прямо в комментариях.
Удачи, Катя!