Микроразметка адреса компании. Полное руководство по работе со структурированными данными
Неподготовленному взгляду структура микроразметки может показаться сложной и запутанной, но на самом деле, это совсем не так. Достаточно всего лишь разобраться в иерархии словаря разметки и даже не на самом высоком уровне знать код сайта, чтобы успешно дать нужные сигналы поисковым машинам.
В предыдущей мы вкратце рассказали, что такое микроразметка, и для чего она может использоваться. В этой статье мы от теории перейдем к более наглядным моментам и покажем, как микроразметка внедряется в сайт, и что это дает в итоге. Для примера мы возьмем словарь семантической разметки http://schema.org как наиболее популярный и официально поддерживаемый всеми основными поисковиками. Кстати, существует русскоязычная версия словаря (http://ruschema.org), разрабатываемая энтузиастами. Не такая полная, как оригинал, но внимания достойна.
Как сделать микроразметку и куда прописать нужные атрибуты
Теперь непосредственно к делу. О том, куда прописываются данные, на которые будет обращать внимание поисковая машина. Для начала — три атрибута, которое должны быть использованы абсолютно всегда:
- указывает поисковому боту на то, что на странице присутствует объект, на который стоит обратить внимание;
- itemtype находится после itemscope и описывает, к какому типу относится упомянутый объект. Перечень возможных объектов можно увидеть в соответствующем разделе словаря (http://schema.org/docs/full.html);
- , который описывает свойства данного объекта.
Вновь обратимся к примерам самого Яндекса. Перед нами кусок кода, описывающий фильм «Аватар».
Как видим, атрибут появляется в теге
Иногда значение itemprop само может означать отдельную сущность, в таком случае атрибут itemscope будет находиться внутри уже одного существующего. Это делается употреблением itemscope сразу после itemprop. Например:
Как видим, во внутреннем теге
В какие теги заключается микроразметка
Как вы могли заметить, тег
— в него заключаются свойства объекта, которые можно описать словами. Употребление этого тега очень удобно, так как в него можно заключить любую информацию, при этом не изменив визуально сайт, следовательно его лучше всего вводить, если нужно добавить атрибут itemprop; Тег
используется для ссылок, которые видны пользователям. Если внутри тега заключить url
, ссылающийся на сторонний сайт, то поисковой машине будет легче понять, что именно за информация находится у вас на странице. Например, можно дать ссылку на статью в Википедии: Кроме того, использование тега
полезно для так называемых перечислений, то есть свойств, которые имеют ограниченное количество значений. Например, интернет-магазин с помощью микроразметки может указать на наличие товара на складе. Возможные значения в этом случае, согласно schema.org: in stock
(в наличии), out of stock
(нет в наличии), pre-order
(на заказ). С помощью тега
эту информацию можно оформить следующим образом: Если бы мы не указывали на значение InStock, то предпоследняя строчка могла выглядеть так: Уже в продаже! Но, расширив функции микроразметки, в этом случае мы тег
заменили на <
link>
, превратив его в невидимую ссылку. Аналогичным образом можно использовать и тег <
meta>
, который остается вне поля зрения пользователя, но ввиду негативного отношения поисковых систем к слишком частому его применению, мы рекомендуем им не злоупотреблять. Время или продолжительность описывается тегом <
time>
с атрибутом datetime. Например, на скриншоте ниже, время начала концерта описывается значением startDate: В заключении приведем пример использования микроразметки на сайте, на котором вы сейчас находитесь, а также эффекта, который эта микроразметка дает. Речь идёт об атрибуте AggregateRating для объекта типа Article, то есть для статьи. Под каждой статьей размещен виджет рейтинга статьи, в коде которого присутствует «невидимый» тег Благодаря нему рейтинг статьи можно увидеть в выдаче Гугла. Кроме того, дата публикации в сниппете выдачи – это тоже заслуга микроразметки. Это один из множества примеров использования микроразметки. Она может пригодиться для сайта любой тематики, и улучшить его представление в поисковиках, будь то товары, мероприятия, кулинарные рецепты, отзывы, словарные статьи и так далее, и так далее. Поэтому рекомендуем внимательно изучить schema.org и найти там атрибуты, которые позволят ссылке на ваш сайт выделиться на фоне конкурентов и привлечь больше посетителей. Сегодня мы обозначим свой блог обновлённой семантической микрометрической разметкой schema.org)) Я постараюсь подробно на некоторых примерах разъяснить это предприятие и, надеюсь, отныне некачественная разметка личного сайта вас печалить не станет. Рассмотрим по шагам — как внедрить разметку Schema.org в файлы шаблона Нынче я не стану тратить время на рассказы о приоритетах размеченного сайта перед поисковыми системами, подобную информацию легко отыскать на просторах инета. А приступим-ка лучше к выполнению негоции в разметке контента… Разделы статьи:
А позже дам ссылку на статью о том, как сделать микроразметку на сайте со статьями различной тематики: нужно понимать, что микроразметка разная, в зависимости от темы сайта — но вот коли на сайте публикуются статьи разной тематической направленности, то … в общем — полезно!! Как известно, Google вновь поменял свои алгоритмы чтения стандартов разметки Schema! В особенности изменились требования меток обозначения картинок. Яндекс пока пробуксовывает! А что это значит!? А это значит то, что свою прежнюю разметку необходимо заменить на новую, чтобы не отставать от времени, скажем так. Заменить-то мы заменим, но вот батюшка Яшка противится грамоте,… а это приведёт к ошибкам в коде (тестируя валидаторами). Хотя, — это вовсе и не ошибки, а так — предупреждения, пока Яша не подтянулся до мировых стандартов (а он подтянется: так говорит практика). Так что не берите в голову… но по возможности правильно разметьте сайт, и — всё будет здорово! Привожу цитату: Schema.org
- это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов. Здесь явно наличие разметки 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, решать вам: я удалил — считаю, что от неё ни тепло ни холодно! В начале славных дел нас интересует цикл отработки шапки сайта от закрывающего тега а именно: А пока, для более подробного ознакомления с разметкой shema.org, можете почитать на страничке Яндекс
. Или изучить синтаксис ТУТ
. Итак: предлагаю начать со строки Следует добавит атрибуцию самого контейнера: от кавычек «logo» — через пробел — библиотеку разметки itemscope itemtype="http://schema.org/WPHeader" . Должно получится так:
Далее обозначаем отдельные поля с указанием на конкретное свойство схемы (нас интересуют свойства ИМЕНИ и ОПИСАНИЯ сайта): берём строки c h1 title и h2 description (описание сайта) и к их div-классам добавляем необходимые атрибуты… itemprop="headline" И itemprop="description" Получится так:
…и вот так…
…ИЛИ лучше description (ДЕСКРИПШН) завернуть не в h2 , а так, например: (но об этом подробнее в следующих статьях)
И как только закончим занятие разметки шапки сайта, идём проверять главную страницу блога в Гугл и Яндекс. Должно получится так: (как понимаете, сайдбар вы ещё не разметили, а поэтому не обращаем внимания) Во всём остальном, шапочка у нас теперь должна быть причёсанная и аккуратненькая. Отныне боты-поисковики более внимательно отнесутся к вашему сайту, ибо вы обозначили поле их действия! Они с вами подружатся! И ещё, атрибуты разметки можно прописать и в раздел Ну, что.!? Продолжим… и приступим к вопросу: Приготовьтесь: разметка главной, отдельных записей и страничек занятие более кропотливое. Но не стоит пугаться, и коли отнестись с вниманием к моим пояснениям, у вас всё получится. Вероятнее всего, вам нужно будет открыть и работать с файлом вашей темы post.php (в корне шаблона). У кого-то может быть имя документа иное. Ищите тот файл, который отвечает за вывод и формирование главной страницы, категорий, тегов и архивов. Ровно точно так же как и первом случае, нужно будет поместить в отдельный контейнер вывод анонсов статей и указать конкретное свойство схемы. То есть — библиотеку. В которой уже будем задавать отдельные свойства нашей размеченной алхимии. Необходимое
: важно понять, размечая html документ необходимо соблюдать работу циклов контейнеров div-классов (в особенности порядок закрывающих тегов Так же следует обратить внимание на порядок контейнеров вывода элементов вашего шаблона. Вероятно придётся что-то поменять местами. Я, например, менял div-классы meta-полей (стилистику) вывода даты написания, авторства и рубрик — поместил их в единый цикл вывода анонса записи. Так что смотрите! Я вам покажу как делал на одном из сайтов, а последовательно немного буду пояснять, чтобы вы уловили принципиальное решение разметки сайта и смогли разобраться со своим шаблоном до финала. Итак, вот полный файл post.php размеченный стандартом schema.org (советую кликнуть по фотке, открыть в другом окне и изучать — а я буду пояснять) Строка номер три (3):
Див класс post
(у вас будет иной класс — я здесь поменял имена, понятности ради) — в этот контейнер помещён цикл выводов анонсов главной страницы. И, как понимаете, к нему добавлена библиотека itemscope itemtype="http://schema.org/Article" Артикль. И вы проделываете то же самое. 5 — строка
: div-класс информации об анонсе. Дело в том, что новые стандарты разметки подразумевают замены стандартов, как то: дата должна быть двух вариантов — число написания itemprop="datePublished" и число редактирования itemprop="dateModified" . А пока переходим к строке — 13
: это заголовок статьи (анонса) к нему следует добавить атрибут itemprop="headline" Прописывайте… Строка — 14
: php — вывод миниатюры записи стандартом thumbnail . У вас миниатюры могут выводиться как-то иначе: или обычной фоткой статьи, или … словом, смотрите (о выводе картинок, также ниже). Но коли у кого так же как и в показанном коде, целесообразнее и её обозначить (я этого не делал на главной…) Можно сделать так: прежде всего весь код php обернуть в див-класс. То.е перед
…А в сам php код добавить вот такую фразу после full , array("itemprop" => "image") Должно получиться так:
Не забывайте о закрывающем Переходим к строке — 20
: Это сам текст анонса. Здесь спорный вопрос: кто-то выводит, а кто-то — нет. Я выводил какое-то время… И если будете размечать анонс статьи и вы, то делайте так, как показано в коде ниже: т.е оберните php код в свойство itemprop="articleBody" .
…обратите внимание на ДИВ класс (имя любое) и его закрывающий тег. Как видите, получается вот такая картинка (относительно всех анонсов главной): имя статьи, и сам анонс. Как говорилось выше, новые стандарты разметки подразумевают вывод более полной информации — дату, автора, логотип сайта телефон и т.п… Я этого на главных страничках не делаю, а вывожу всё это на отдельных записях блога. Теперь поясню: вот эти красные ошибки вовсе и не ошибки, но предупреждения GOOGLE web мастеру о незаполненных полях опубликованной записи, и всего делоф! А посему, я — считаю для своего сайта вывод этой инфы на страничках анонса ненужным. Вы можете вывести. Тогда будет всё зелёненькое (и не забывайте тестировать свою работу по разметке в Яндекс). Об этом расскажу ниже… в вопросе: к сведению, до кучи… Всё же мне думается, можно как-то иначе поступить с разметкой главной страницы… я, например, решил убрать теги микроразметки из анонсов. Вероятно, одной размеченной статьи вполне достаточно, чтобы предоставить ПС. Это как бы основное что должно указывать… А главная и т.п. само собой фигурирует в домене. Открываем файл, который на вашем сайте отвечает за вывод отдельного поста. У меня это post-single.php Я этот файл нарочно оставил на финал, чтобы вы как-то пообвыклись и въехали в принцип. Приступим: всё аналогично!!!
Внимание:
вам стоит отыскать именно тот контейнер, в который завёрнут САМ цикл вывода ОДНОЙ только записи с МЕТАПОЛЕМ (никакие divы блока комментариев или «похожие записи» суда не путать: будут ошибки!
Здесь следует обратить внимание на див-класс post_meta (если он у вас был) — внутри него стоит всё заменить на новый стандарт! Стандарт сказал — поехали)) Выводим дату
: которая должна быть такого стандарта…
"/>
Первая строка
: дата публикации datePublished И- вторая — dateModified … И тут же под строками следующая инфа (советую размечать так). Обратите внимание на строки 1 и 2 !! у меня размечено только имя автора, но коли вам нужно разметить и рубрики — размечайте… Автор:
Рубрика:
Обратите внимание на три закрывающих div-класса: первый (сверху) закрывает
Другой способ указать поисковику на ссылку – это употребления тега
с атрибутом href:
Различие его от тега
заключается в том, что ссылку не увидят посети
тели сайта.Еще один пример использования микроразметки
Не пропустите:
знакомство с Schema.org
- стандартом семантической микроразметки данных в интернетсети
">option("site_title"); ?>
option("site_description"); ?>
как внедрить микроразметку Schema.org на главную страницу и в разделы архивов — категорий
как микрозметить стандартом schema страницу сайта