Микроразметка на сайте для пользователей

от автора

Меня зовут Иван Жданович руководитель проекта Seo House Почему мне можно доверять Я занимаюсь клиентским продвижением сайтов в Снг, Европу и США. Опыт работы с клиентскими проектами более 15 лет. Сегодня пойдет речь про структурную разметку сайтов.

Микроразметка сайта – это способ структурирования информации для поисковых систем, облегчающий их работу по индексации страниц. Это достигается путем внедрения в HTML-код страницы специальных тегов, которые помогают поисковикам лучше понимать содержание сайта и отображать его в результатах поиска более привлекательно. Применение микроразметки увеличивает видимость сайта в поисковой выдаче и может положительно сказаться на его кликабельности.

Что дает микроразметка

Микроразметка даёт ряд важных преимуществ для веб-сайтов, особенно в контексте поисковой оптимизации (SEO) и улучшения взаимодействия с поисковыми системами:

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

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

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

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

Пример разметки

Пример разметки

В чем преимущество сниппетов расширенных

Расширенные сниппеты, создаваемые при помощи микроразметки, имеют несколько значительных преимуществ по сравнению с обычными сниппетами в поисковой выдаче:

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

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

  3. Целевой трафик и повышение конверсии: благодаря более подробной информации в сниппете пользователи заранее получают представление о содержании страницы, поэтому если они переходят на сайт, то их интерес к представленной там информации или продукту уже подтвержден. Это привлекает более качественный трафик на сайт и может способствовать повышению конверсии.

Эти преимущества делают микроразметку важным инструментом для вебмастеров и маркетологов, стремящихся максимизировать видимость и эффективность своих сайтов в интернете.

Пример разметки рейтингов

Пример разметки рейтингов

Основные виды разметки

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

  1. Schema.org (Схема): Самый популярный и универсальный словарь микроразметки, поддерживаемый крупнейшими поисковыми системами, включая Google, Bing, Yahoo!, и Yandex. Schema.org предоставляет обширный набор типов для разметки различного рода информации на веб-сайтах, включая товары, людей, организации, местоположения, события и многое другое.

  2. Microformats (Микроформаты): Этот тип микроразметки позволяет встроить информацию о контактах (hCard), событиях (hCalendar), отзывах и других данных напрямую в классы HTML. Микроформаты легко читаемы как людьми, так и машинами, что делает их полезными для поисковой оптимизации.

  3. RDFA (Resource Description Framework in Attributes): Стандарт, основанный на использовании ат

Виды разметки с кодом для Google

Микроразметка для страницы контактов

<div itemscope="" itemtype=">  <span itemprop="name"> </span>  Контактная информация:   <div itemprop="address" itemscope="" itemtype=>  Почтовый адрес:  <span itemprop="streetAddress">номер дома, улица</span>  <span itemprop="postalCode">почтовый индекс</span>  <span itemprop="addressLocality">город, страна</span>  </div>    Телефон:<span itemprop="telephone">контактный телефон</span>,  Факс:<span itemprop="faxNumber">факс</span>,  E-mail: <span itemprop="email">корпоративный e-mail</span> </div>

Микроразметка карточки товара

<div itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">Футболка с топорами</h1> <img src="/images/article/1556011480370.jpg" itemprop="image"> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div>700 руб.</div> <meta itemprop="price" content="700.00"> <meta itemprop="priceCurrency" content="RUB"> </div> <div>Производитель: <span itemprop="brand">Макс-Экстрим</span></div> <div>Модель: <span itemprop="model">3774438</span></div> <div itemprop="description">Дизайнерская футболка, перевод надписи - <br> "Нечего делать с ножом там, где нужен топор". Футболка с классным <br> дизайном, изготовлена из качественных материалов и стойкой краски.</div> </div>

Микроразметка категории товаров

<div itemscope itemtype="http://schema.org/Product"> <p itemprop="name">Мужские футболки</p> <div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers"> <div>40 товаров</div> <meta content="40" itemprop="offerCount"> <div>от 500 руб.</div> <meta content="500" itemprop="lowPrice"> <div>до 1000 руб.</div> <meta content="1000" itemprop="highPrice"> <meta content="RUB" itemprop="priceCurrency"> </div> </div>

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

<section itemscope itemtype="http://schema.org/Article"> <h1 itemprop="headline">Микроразметка для статьи</h1> <time itemprop="datePublished" datetime="2019-04-26T20:10:00+00:00">26 апреля 2019</time> <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject"> <img itemprop="url contentUrl" src="/images/article/microrazmetka-schema-org.png" alt="Микроразметка статьи"> </div> <h2 itemprop="alternativeHeadline">Подзаголовок</h2> <article itemprop="articleBody"> <p>Текст статьи</p> </article> <div>Автор: <span itemprop="author">Артем Абловацкий</span></div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="logo.svg" /> </div> <meta itemprop="name" content="Артем Абловацкий"> <meta itemprop="telephone" content="+7 909 45 45 396"> <meta itemprop="address" content="г. Москва, ул. Пушкина Дом Колотушкина"> </div> <meta itemprop="dateModified" content="2019-04-26T23:30:40+00:00" /> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="Ссылка на статью" /> </section>

Микроразметка для отзывов

<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Превосходная статья!</span> <span itemprop="author">Артем Абловацкий Старший Сео специалист RUSH</span> <meta itemprop="datePublished" content="2022-26-04"> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "0"> <span itemprop="ratingValue">10</span> <span itemprop="bestRating">10</span> </div> <span itemprop="reviewBody">Очень познавательная и информативная статья! Узнал много нового.</span> </div> </div>

Микроразметка для изображений

<div itemscope itemtype="http://schema.org/ImageObject">   <h2 itemprop="name">Винни-Пух</h2>   <img src="vinni.jpg" itemprop="contentUrl" />   <span itemprop="description">Винни-Пух залезает на дерево.</span> </div>

Микроразметка для видео

<div itemscope itemtype="http://schema.org/VideoObject" > <a itemprop="url" href="https://www.mysite.com/view/306/">     <h1 itemprop="name">Что такое Schema.org</h1></a>     <p itemprop="description">Schema.org - это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Цель семантической разметки — сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.</p>     <meta itemprop="duration" content="PT6M58S">     <meta itemprop="isFamilyFriendly" content="true">     <p>Дата загрузки:<span itemprop="uploadDate">2013-06-05T00:00:00</span></p>     <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="contentUrl" src="https://www.mysite.com/images/preview/img1.jpg">     <meta itemprop="width" content="250">     <meta itemprop="height" content="120">     </span> </div>

Микроразметка страницы Q&A

<span itemprop="name">Почем опиум для народа</span> <div><span itemprop="answerCount">Количество ответов на вопрос</span></div> <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"> <div itemprop="text">Религия-опиум для народа</div>

Микроразметка для кулинарных сайтов

<div itemscope itemtype="http://schema.org/Recipe">   <h1 itemprop="name" >Бефстроганов</h1>   Впервые это блюдо появилось в конце XIX века и было названо в честь графа Строганова А.Г.   <img itemprop="resultPhoto" src="profit.jpg" />   <ul>     <li>Автор рецепта: <span itemprop="author">Граф Строганов</span></li>     <li>После приготовления вы получите <span itemprop="recipeYield" >7 порции</span></li>     <li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>40 минут</li>   </ul>   <h2>Ингредиенты</h2>   <ul>     <li itemprop="ingredients">       говядина     </li>     <li itemprop="ingredients" >       сметана     </li>     <li itemprop="ingredients" >       соль     </li>     <li itemprop="ingredients" >       свежемолотый перец     </li>     <li itemprop="ingredients" >       мука     </li>   </ul>   <h2>Способ приготовления</h2>   <ul itemprop="recipeInstructions">     <li><img itemprop="image" src="creks.jpg" alt="нарезанная ломтиками говядина"/>       Положить мясо между двумя слоями пищевой пленки (или в пакет) и тонко отбить.     </li>     <li><img itemprop="image" src="feks.jpg" alt="лук нарезанный четвертькольцами"/>        Отбивные нарезать тонкой соломкой поперек волокон.     </li>     <li><img itemprop="image" src="peks.jpg" alt="из любого мяса"/>       обжарить до мягкости на медленном огне, периодически помешивая.     </li>   </ul>   <span itemprop="recipeCategory">Блюда из говядины</span>   <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">

Все примеры взяты из FAQ Google. Если необходимо примеры, то welcom в help Google! Если необходимо внедрить разметку без ошибок, то обращайтесь ко мне, я все помогу сделать. Мой сайт и контакты в профиле!


ссылка на оригинал статьи https://habr.com/ru/articles/801575/


Комментарии

Добавить комментарий

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