Мікророзмітка для сайту за стандартом Schema.org

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{16-03-2016, 00:09
1 630
0}

Розберемось з видами (Thing) розмітки: тут опис на російській мові тут

На сьогодні є 3 великі групи:
Action - це сайти повязані з якимось діями. Наприклад концерт, захід, виставка, презентація.
Event - наприклад, концерт, лекція або фестиваль, з можливістю розділяти по минулим, теперішнім та майбутнім подіям.

- - -

CreativeWork - Підходить для більшості сайтів. Наприклад блоги, новини, портали...

Сайме цю групу ми будемо і розбирати. вона складається з:

- підгрупа "WebPage": розмітки самої структури сайту (опис, логотип, недер, футер, сайдбара і навігації...)

- підгрупа "Article ": розмітка самої статті (дати написання, автора, малюнка, оцінки, коментарів...)

Почнемо з підгрупи "WebPage":

Мікророзмітка WebPageElement.

Задаємо саму схему:

<html itemscope itemtype="http://schema.org/WebPage">

У хедері:


<head itemscope itemtype="http://schema.org/WPHeader">
<title itemprop="headline">Заголовок</title>
<meta name="description" itemprop="description" content="тут опис" />
<meta name="keywords" itemprop="keywords" content="ключові слова" />
</head>

Задамо основну частину сторінки:

<body  itemscope itemtype="http://schema.org/WPAdBlock">

У футері у нас має бути лише дата копірайту:

<footer itemscope itemtype="http://schema.org/WPFooter">
<span itemprop="copyrightYear">2012-2015</span>
</footer>

Читаємо - про правильний копірайт

Задамо бокову панель сайту

<aside  itemscope itemtype="http://schema.org/WPSideBar">
<h6 itemprop="name">заголовок блоку</h6>
<h6 itemprop="name">заголовок блоку</h6>
<h6 itemprop="name">заголовок блоку</h6>
</aside>

Мікророзмітка окремої сторінки на сайті:

Можуть бути використані такі елементи:

itemscope itemtype="https://schema.org/Article" — вказує, що індексований документ є статтею і для нього вибрана схема Article;
itemprop="name" — вказує назву сторінки;
itemprop="description" — вказує короткий опис статті;
itemprop="headline" — вказує заголовок статті; може бути більш розгорнутим, ніж name;
itemprop="datePublished" — вказує дату публікації;
itemprop="author" — вказує автора статті;
itemprop="about" — вказує анонс статті;
itemprop="articleBody" — вказує тіло статті;
itemprop="dateModified" — вказує дату зміни статті;
itemprop="relatedLink" — вказує посилання на пов'язані зі статтею інші сторінки сайту.


<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="genre" content="{category}">
<h1 itemprop="headline">{title}</h1>
<div class="fullstory" itemprop="description">
{full-story limit="150"}
</div>
<div class="fullstory" itemprop="articleSection">
{full-story}
</div>

Розмітка короткої новини:

itemscope itemtype="http://schema.org/BlogPosting"

Розмітка коментаря:


<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime">Час створення комента</span>
<span itemprop="creator">Автор комента</span>
</div>

Повний фарш:


<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:11:51">27.02.2014 10:11:51</span>
<span itemprop="creator">Борис</span>:
<div itemprop="commentText">Здравствуйте, Сергей! Я использую модуль поиска по товарам от Virtuemart. Как его исключить из кэширования(шаг 5 вашей инструкции)?</div>
</div>
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:18:47">27.02.2014 10:18:47</span>
<span itemprop="creator">Борис</span> отвечает:
<div itemprop="commentText">кажется понял - опять через <jot> теги?</div>
</div>
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:43:15">27.02.2014 10:43:15</span>
<span itemprop="creator">Сергей</span> отвечает:
<div itemprop="commentText">Здравствйте, Борис. Да, через теги. Только не уверен, что есть смысл запрещать модуль поиска к кешированию, там и так кешировать нечего. А вот com_search из шага 5 лучше исключить из кеша.</div>
</div>

Мікророзмітка рейтингу:

<div id="block_rating" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="10">
<meta itemprop="ratingValue" content="8.8">
<a href="/film/447301/votes/" class="continue rating_link rating_ball_green">
<span class="rating_ball">8.789</span>
<span class="ratingCount" itemprop="ratingCount">285 091</span>
</div>

Мікророзмітка для зображення:

HTML5 рекомендує для розмітки діаграм, ілюстрацій, фотографій, прикладів коду та подібне обгортати в елемент <figure> в поєднанні з <figcaption>. Увага! figcaption має знаходитись в серединні figure.

<figure itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
<picture>
      <source srcset="http://site.ru/images/image.png" media="(min-width: 900px)">                         
      <source srcset="http://site.ru/images/image-240-180.jpg, 
                      http://site.ru/images/image.jpg 2x" media="(min-width: 450px)">                                                           
      <img itemprop="url contentUrl" src="http://site.ru/images/image-120-90.jpg" 
              srcset="http://site.ru/images/image-240-180.jpg 2x" 
              alt="Альтернативный заголовок изображения" 
              title="Заголовок изображения">
</picture>
<meta itemprop="width" content="120">
<meta itemprop="height" content="90">
<meta itemprop="datePublished" content="2015-05-07T09:00-04:00"/>
<figcaption itemprop="caption description">Подпись под изображением</figcaption>
</figure>

або спрощено:


<figure itemscope itemtype="http://schema.org/ImageObject">
<h2 itemprop="name">Назва картинки</h2>
<img itemprop="contentUrl" src="http://site.ru/pic-150-120.jpg" alt="" />
<figcaption>
<span itemprop="author">Максим Рильський</span>
<span itemprop="contentLocation">вул. Сагайдачного 25, Київ, Україна</span>
<meta itemprop="datePublished" content="2008-01-25">Дата фотогрфії
<span itemprop="description">Опис картинки</span>
</figcaption>
</figure>

Мікророзмітка для Організації і Адреси:

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Название организации</span>
Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Адрес:
<span itemprop="streetAddress">Мясницкая, 26А</span>
<span itemprop="postalCode">101000</span>
<span itemprop="addressLocality">Москва</span>,
</div>
Телефон:<span itemprop="telephone">+7 495 000–00–00</span>,
Факс:<span itemprop="faxNumber">+7 495 000–00–00</span>,
Электронная почта: <span itemprop="email">info@audit4web.ru</span>
</div>

Мікророзмітка для товару:

<table itemscope itemtype="http://schema.org/Product"><tr><td>
<a itemprop="url" href="#">Ссылка на товар</a>
<div itemprop="name">Товарное предложение</div>
<img itemprop="image" src="/obj/img/img.png" />
<div itemprop="description">Описание товарного предложения</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.5" />
<meta itemprop="reviewCount" content="12" />
<img src="/obj/img/star4.png" alt="" title="" />
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="acceptedPaymentMethod" content="CreditCard" />
<meta itemprop="priceCurrency" content="RUB" />
<meta itemprop="availability" content="http://schema.org/InStock" />В наличии
<span class="price">
<span itemprop="price">1000</span>.-
<span class="valute">руб.</span>
</span>
</div></td></tr>
</table>

Мікророзмітка для опису людини:

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Юрий Гагарин</span>
<img src="gagarin.jpg" itemprop="image"/>
<span itemprop="jobTitle">Летчик-космонавт</span>
<span itemprop="colleague">Валентина Терешкова</span>
<link itemprop="nationality"href="http://ru.wikipedia.org/wiki/Россия">Россия
<time itemprop="birthDate" datetime="1934-03-09">9 марта 1934</time>
<span itemprop="memberOf">Военно-воздушные силы СССР</span>
<span itemprop="knows">Сергей Королев</span>
<time itemprop="deathDate" datetime="1968-03-27">27 марта 1968</time>
<span itemprop="award">Герой Советского союза</span>
<a href="http://ru.wikipedia.org/wiki/Гагарин,_Юрий_Алексеевич" itemprop="sameAs">Страница на Википедии</a>
<a href="http://example.com/Гагарин" itemprop="url">Сайт Юрия Гагарина</a>
</div>

Офіційний сайт - Schema.org

Зразки мікророзмітки - дивитись

Мікророзмітка для вордпреса - тут

Чітко про мікророзмітку - тут

Зразок сайту з мікророзміткою - дивитись

Розробка сайтів | Створення сайтів

⟪ Попередня Наступна ⟫