Примеры микроразметки для сайта

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

Навигация (хлебные крошки)



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



Наличие навигационной цепочки – это результат работы вот такой части кода

<ul class="breadcrumb" itemscope="" itemtype="https://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="https://upread.ru" class="hleb" title="Главная">
			<span itemprop="name">Главная</span>
			<meta itemprop="position" content="1">
		</a>
	</li>
	<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"> ⇒ 
			<a itemprop="item" href="blog" class="hleb">
			<span itemprop="name">Блог</span>
			<meta itemprop="position" content="2">
			</a>
		</li><li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"> ⇒ 
		<a itemprop="item" href="blog/notes" class="hleb">
		<span itemprop="name">Заметки</span>
		<meta itemprop="position" content="3">
		</a>
		</li><li itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
		⇒ <span itemprop="name" title="Создание видео из картинок и музыки на C#</span>
	  	<meta itemprop="position" content="4">
   	</li>
</ul>

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

Отдельный товар

Вот пример микроразметки для отдельного товара

<div id="content" class="col-md-12" itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Гуляш из говядины</h1>
  <meta itemprop="description" content="Говяжий гуляш - полуфабрикат из отборного мяса говядины, нарезанный на небольшие кусочки, 
  нежный и сочный после тушения, жарки или запекания. 
    Покупайте гуляш из говядины и наслаждайтесь его вкусом!" />
  <link itemprop="url" href=" /govyadina/gulyash-iz-govyadiny" />
  <link itemprop="image"
    href=" /image/cache/catalog/goods/041-befstroganov-iz-govyadiny/befstroganov-iz-govyadiny-01-1620x1080.jpg"
    alt="Гуляш из говядины" />
  <meta itemprop="brand" content="Бургомистр Мясной город" />
  <meta itemprop="manufacturer" content="Бургомистр Мясной город" />
  <meta itemprop="productID" content="Г-041" />
  <meta itemprop="category" content="Говядина" />
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="5">
    <meta itemprop="reviewCount" content="1">
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <meta itemprop="priceCurrency" content="RUB" />
    <meta itemprop="price" content="700.00" />
    <link itemprop="availability" href="https://schema.org/InStock" />
    <meta itemprop="priceValidUntil" content="2025-12-14" />
</div>

Вручную встраивать придется повозиться.

Вопрос-ответ (FAQ)

Тут всё просто.

<div id="block_faq" itemscope="" itemtype="https://schema.org/FAQPage"> 
    <div class="block_faq_part" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
		<div class="block_faq_part_head">
			<div class="block_faq_part_head_txt" itemprop="name">Сколько стоят оказываемые услуги по программирования?</div>
		</div>
		<div class="block_faq_part_body" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
			<span itemprop="text">Мои услуги стоят 300 рублей в час.</span>
		</div>
	</div>
</div>

Категория товаров

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

  <div id="content" class="category col-md-12" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="Name" content="Говядина"> 
      <span itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
        <meta itemprop="offerCount" content="21">
        <meta itemprop="lowPrice" content="1,300">
        <meta itemprop="highPrice" content="900">  
        <meta itemprop="priceCurrency" content="RUB" >
      </span>
</div>         

Отзывы

<div class="review-item" itemprop="review" itemtype="https://schema.org/Review" itemscope="">
  <meta itemprop="datePublished" content="2023-12-02">
  <div class="row">
  	<div class="col-xs-12">
      <div class="author title pull-left" itemprop="author" itemtype="https://schema.org/Person" itemscope="">
        <meta itemprop="name" content="Shestakova Alla">
        Shestakova Alla</div>
      <div class="rating pull-right" itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope="">
        <meta itemprop="worstRating" content="5">
        <meta itemprop="ratingValue" content="5">
        <meta itemprop="bestRating" content="5">
        <i class="fa fa-star act"></i>  
        <i class="fa fa-star act"></i> 
        <i class="fa fa-star act"></i>    
        <i class="fa fa-star act"></i>
        <i class="fa fa-star act"></i>        
             </div>
      <div class="date pull-right">02.12.2023</div>
    </div>
  </div>
  <div class="text">
    <p>Бефстроганов стал нашим любимым блюдом в семье! Мясо мягкое, нарезано идеально. Не нужно тратить много времени на приготовление, отличная возможность быстро получить готовое блюдо!</p>
  </div>
  <meta itemprop="description" content="Бефстроганов стал нашим любимым блюдом в семье! Мясо мягкое, нарезано идеально. Не нужно тратить много времени на приготовление, отличная возможность быстро получить готовое блюдо!">
</div>

Что-то ещё

Их много, типов микроразметки. Полезные ссылки:

• Актуальные типы: https://schema.org/docs/schemas.html
• Тестирование кода перед внедрением: https://search.google.com/test/rich-results

Ну а если у вас что-то не получается, то я всегда готов онлайн проконсультировать вас по микроразметке или встроить на ваш сайт. Услуга платная, цена договорная. Если нет точного ТЗ, то оплата почасовая.