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

Микроразметка сайта для поисковых систем Яндекс и Google в формате Schema.org, JSON-LD и Open Graph. Разметку старался делать без js, т.к. Яндекс ее не учитывает. Микроформат Schema.org подходит для Яндекс/Google. Преимущество данного метода - не нужно ждать бота, который придет, просканирует страницу с включенным js и поймет что там находится. Ускоряет обработку данных в микроданных.

Приветствую. Меня зовут Толстенко Александр. Я SEO-специалист, маркетолог с опытом продвижения: Медицинских клиник, b2b и b2c клиентов, оптовиков, производителей, сайтов услуг и интернет-магазинов.

При помощи SEO-оптимизации сайта и платной рекламы, помогаю своим клиентам вывести сайт на первые позиции в Яндекс/Google и увеличить поток клиентов до 10 раз за месяц.

📍 Провожу 10 бесплатных консультаций в месяц. Если актуально, пишите в личку и бронируйте место https://t.me/tolstenkoaa.

Telegram канал: Толстенко PRO Маркетинг

ВК: https://vk.com/tolstenkoaa

Рутуб https://rutube.ru/channel/37807177/

Ютуб https://www.youtube.com/channel/UCP9el99pUCTNIZwc0O_6FlQ/

Занимаясь SEO продвижением одного крупного СМИ портала, была необходимость собрать по максимуму определенные виды микроразметок и внедрить их на сайт, чтобы Яндекс и Google корректно понимали какой контент находится на сайте и данные в ней побыстрее попадали в сниппеты результатов выдачи, делая сайт заметным на поиске.

У Яндекса есть проблемы с пониманием JSON-LD, а Google сканирует сайт не сразу с включенным js, из-за чего данные в микроформате не сразу учитываются роботом.

Поэтому, пришлось собирать нужную разметку и переделывать JSON-LD в Schema.org, чтобы все поисковые машины смогли распознать информацию на сайте корректно.

Как так, в валидаторе же, при проверке данные видны? Пример проверки js микроразметки на скрине.

Специально, задал этот вопрос техподдержке Яндекса. Ответ на скрине ниже.

Итак, погнали. Начну с определения и немного примеров, потом будет мясцо.

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

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

Из справки Яндекс https://yandex.ru/support/webmaster/schema-org/

С помощью семантической разметки html документа, сайт можно выделить на первой странице результатов выдачи Яндекс и Google.

Что это дает? Выделение ресурса на поиске, из за чего увеличивается количество переходов из органического поиска клиентов и продаж.

Сравните примеры ниже. Сайты, которые имеют микроразметку, намного заметнее в Яндекс/Google, чем без нее.

Некоторые примеры из выдачи Яндекса

Некоторые примеры из выдачи Гугл

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

Для продвижения сайта в Яндекс и Google SEOшники используют только три вида разметки: Schema.org, Open Graph, JSON-LD, чтобы объяснить роботу какой текст, находится в каком блоке на сайте и по возможности (алгоритмы постоянно меняются), эта информация попала в описание площадки на поиске. Другие встречаются очень редко.

Формат Schema.org рекомендует использовать Яндекс, JSON-LD - Google.

Open Graph хоть и разработан социальной сетью Facebook (на момент публикации, запрещенная соцсеть в РФ), но на сайт его тоже интегрируют, чтобы сделать более привлекательное отображение площадки, когда делятся ссылками в сообщениях. Пример, на скрине ниже.

Ниже примеры разметки. Она может не подходить под текущую структуру верстки на сайте, нужно применить примеры к текущему формату разметки. Там где она есть, проверить. В случае надобности скорректировать/добавить отсутствующие поля разметки.

В Яндексе: https://webmaster.yandex.ru/tools/microtest/ - некоторая разметка в может показываться с ошибкой в онлайн сервисе проверки. В Google ошибок не было.

В Гугле: https://search.google.com/structured-data/testing-tool

P.S.: При проверки примеров микроразметки в Яндлекс.Вебмастере, кое какая будет выдавать ошибку, в Гугл - ошибки не будет. Проверял все по Гуглу. Если, где то будет ошибка, прошу строго не судить, я не прогер, за обратную связь буду благодарен.

Ниже находятся примеры разных методов разметки данных. По максимуму старался сделать в формате Schema.org, но использовал и другие. Разметка подойдет для сайта услуг, блога, информационного портала СМИ. Что то можно взять и для интернет магазина. Кому надо, берите правьте под себя.

P.S.: в коде, где прописан класс DisplaNone - нужно css стилями скрыть лишную техническую информацию от глаз пользователей. Все пояснения заменить на нужную информацию. Комменты, можно удалить при необходимости.

Добавить в блок head микроразметку для og и twitter. Пример кода:

<head> {содержание head}  <meta property="og:type" content="website"> <meta property="og:title" content="{Заголовок статьи h1}"> <meta property="og:url" content="текущий_url_материала"> <meta property="og:image" content="ссылка на фото материала. Еcли нет, вставить заглушку с логотипом сайта формат jpg"> <meta property="og:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя сайта}"> <meta property="og:site_name" content="Название домена или Компании и описание, чем занимается сайт"> <meta property="og:locale" content="{Язык. Пример: ru_RU, ru-UA, ru-KZ, ru-BY, ru-UZ, ru-TJ}" /> <meta property="article:published_time" content="{Дата размещения статьи. Формат: 2015-05-20T10:31:27+00:00}" /> <meta property="article:modified_time " content="{Дата изменения статьи. Формат: 2020-01-20T11:31:27+00:00}" /> <meta property="article:author" content="{Автор статьи, если пусто то: Название домена или Компании}" /> <meta property="article:section" content="{Категория}" /> <meta property="article:tag" content="{Тег статьи}" /> <meta name="referrer" content="origin-when-crossorigin">  <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="{Название домена или Компании}"/> <meta name="twitter:title" content="{Заголовок материала}"> <meta name="twitter:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя Сайта}"/> <meta name="twitter:creator" content="https://site.ru/"/> <meta name="twitter:image:src" content="ссылка на фото материала. Если нет, вставить заглушку с логотипом сайта формат jpg"/> <meta name="twitter:domain" content="https://site.ru/"/> <meta name="content-language" content="{Язык. Пример: ru, ua, kz, by, uz, tj}" /> </head>

Подробнее можно в справке тут: https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=ru

Сделать хлебные крошки и их микроразметку — ПОСЛЕДНЮЮ КРОШКУ, НЕ ДЕЛАТЬ ССЫЛКОЙ!

<nav> <ul itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="url_ссылки" title="Основной раздел" itemprop="item"> <span itemprop="name">Основной раздел</span><meta itemprop="position" content="0"> </a> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="url_ссылки" title="Подраздел уровня 1" itemprop="item"><span itemprop="name">Подраздел уровня 1</span><meta itemprop="position" content="1"></a> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="url_ссылки" title="Подраздел уровня 2" itemprop="item"><span itemprop="name">Подраздел уровня 2</span><meta itemprop="position" content="2"></a> </li> </ul> </nav>

Для меню в шапке

<div itemscope itemtype="http://schema.org/SiteNavigationElement"> <menu itemprop="about" itemscope itemtype="http://schema.org/ItemList"> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт 1</a><meta itemprop="name" content="Пункт_1" /></li> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_2<meta itemprop="name" content="Пункт_2" /></a></li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_3</a> <meta itemprop="name" content="Пункт_3" /> <menu> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_1<meta itemprop="name" content="Пункт_3_1" /></a></li> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_2<meta itemprop="name" content="Пункт_3_2" /></a></li> </menu> </li> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_4<meta itemprop="name" content="Пункт_4" /></a></li> </menu> </div>

Для меню в футере (другая верстка)

<menu itemscope itemtype="http://schema.org/SiteNavigationElement"> <li><a itemprop="url" href="ссылка">название_пункта_меню_1</a></li> <li><a itemprop="url" href="ссылка">название_пункта_меню_2</a></li> </menu>

Для новостей заменить http://schema.org/Blog на http://schema.org/NewsArticle

<div itemscope itemtype="http://schema.org/Blog"> <h1 itemprop="description">{Название документа/раздела}</h1> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <h2 itemprop="headline">{название_статьи_N}</h2> <meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" /> <img itemprop="articleSection" content="{название раздела}"> <img itemprop="image" src="{ссылка_на_фото_материала}"> <meta itemprop="description" content="{краткое_описание_статьи N}" /> <meta itemprop="author" content="{Автор статьи}" /> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" class=”DisplaNone”> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="ссылка_на_логотип" /> </div> <meta itemprop="name" content="Название домена или Компании"> </div> <meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{ссылка_на_статью}"/> </article> </div>  <div itemscope="" itemtype="http://schema.org/Organization"> <meta itemprop="name" content="Название_страницы"> <meta itemprop="description" content="description"> <link itemprop="url" href="url_страницы"> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <meta itemprop="worstRating" content="1">  <meta itemprop="bestRating" content="5"/>  <meta itemprop="ratingValue" content="4.6">  <meta itemprop="ratingCount" content="8864">  </div> <div itemprop="review" itemtype="http://schema.org/Review" itemscope=""> <div itemprop="author" itemtype="http://schema.org/Person" itemscope=""> <meta itemprop="name" content="Название домена или Компании"> <link itemprop="url" href="https://site.ru/"> </div> </div> </div>

Для новостей заменить http://schema.org/Article на http://schema.org/NewsArticle

<article itemscope itemtype="http://schema.org/Article"> <meta itemprop="headline" content="title" /> <h1 itemprop="name">{Заголовок документа}</h1>  <meta itemprop="url" content="{Ссылка на статью}" /> <meta itemprop="description" content="{description}" /> <img itemprop="articleSection" content="{название раздела}">  <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{Каноническая ссылка}" content="{Заголовок статьи}" />  <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="url contentUrl" src="{Ссылка на превью}" alt="{Заголовок статьи}" /> </div>  <meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" /> <meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}" /> <meta itemprop="inLanguage" content="ru-RU" />   <div itemprop="articleBody"> {текст_материала в html} </div>  <div itemprop="author" itemscope itemtype="http://schema.org/Person"> <meta itemprop="name" content=”{Автор статьи}”> </div>  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url" src="{Ссылка на логотип}" alt="Название домена или Компании" /> <meta itemprop="width" content="200" /> <meta itemprop="height" content="200" /> </div> <meta itemprop="name" content="Название домена или Компании" /> <meta itemprop="url" content="https://site.ru/" /> </div> </article>  <div itemscope="" itemtype="http://schema.org/Organization"> <meta itemprop="name" content="Название_страницы"> <meta itemprop="description" content="description"> <link itemprop="url" href="url_страницы"> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <meta itemprop="worstRating" content="1">  <meta itemprop="bestRating" content="5"/>  <meta itemprop="ratingValue" content="4.6">  <meta itemprop="ratingCount" content="8864">  </div> <div itemprop="review" itemtype="http://schema.org/Review" itemscope=""> <div itemprop="author" itemtype="http://schema.org/Person" itemscope=""> <meta itemprop="name" content="Название домена или Компании">  <link itemprop="url" href="https://site.ru/"> </div> </div> </div>

<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments"> <h2>Комментарии</h2> <ul> <li> <div itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">{Имя пользователя}</span> </div> <time itemprop="commentTime" datetime="{2020-01-14T07:20:10+03:00}">{2020-01-14}</time> <p itemprop="commentText">{Текст комментария}</p> </li> <li> <div itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">{Имя другого пользователя}</span> </div> <time itemprop="commentTime" datetime="{2020-02-27T08:21:11+03:00}">{2020-02-27}</time> <p itemprop="commentText">{Другой комментарий}</p> </li> </ul> </div>

<div itemprop="review" itemtype="http://schema.org/Review" itemscope=""> <div itemprop="author" itemtype="http://schema.org/Person" itemscope=""> <meta itemprop="name" content="{Имя_пользователя_или_ник}"> <link itemprop="url" href="ссылка_на_страницу_профиля_или_соц_сети_если_есть_если_нет_не_выводим"> <link itemprop="image" href="url_картинки_пользователя">  </div> <meta itemprop="datePublished" content="2018-09-07">  <span itemprop="reviewBody">Текст_отзыва</span> <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope=""> <meta itemprop="worstRating" content="1">  <meta itemprop="bestRating" content="5"/>  <meta itemprop="ratingValue" content="5">  </div> <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization"> <meta itemprop="name" content="Название домена или Компании"> </div> </div>

<div itemscope itemtype="http://schema.org/VideoObject" > <link itemprop="thumbnailUrl" href="ссылка_на_превью_фото_для_видео"> <h2 itemprop="name">{Заголовок видео}</h2> <meta itemprop="description" content="{Описание видео}"> <meta itemprop="duration" content="PT6M58S">  <meta itemprop="isFamilyFriendly" content="true">  <meta itemprop="uploadDate" content="2013-06-05T00:00:00">  <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" class=”DisplayNone”> <img itemprop="contentUrl" src="{https://www.mysite.com/images/preview/img1.jpg}">   <meta itemprop="width" content="250"> <meta itemprop="height" content="120"> </span> <span itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <span itemprop="interactionType" itemscope itemtype="http://schema.org/WatchAction"></span> <meta itemprop="userInteractionCount" content="102111" />  </span> </div>

<div itemscope itemtype="https://schema.org/QAPage"> <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"> <h2 itemprop="name">How many ounces are there in a pound?</h2> <div itemprop="upvoteCount">52</div> <div itemprop="text">I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?</div> <div> <div><span itemprop="answerCount">3</span> answers</div> <div><span itemprop="upvoteCount">26</span> votes</div> <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"> <div itemprop="upvoteCount">1337</div> <div itemprop="text"> 1 pound (lb) is equal to 16 ounces (oz). </div> <a itemprop="url" href="https://example.com/question1#acceptedAnswer">Answer Link</a> </div> <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div itemprop="upvoteCount">42</div> <div itemprop="text"> Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water. </div> <a itemprop="url" href="https://example.com/question1#suggestedAnswer1">Answer Link</a> </div> <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div itemprop="upvoteCount">0</div> <div itemprop="text"> I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that. </div> <a itemprop="url" href="https://example.com/question1#suggestedAnswer2">Answer Link</a> </div> </div> </div> </div>

Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/qapage?hl=ru#микроданные

<div itemscope itemtype="https://schema.org/HowTo"> <b><span itemprop="name">How to tie a tie</span></b> <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div> <div itemprop="video" itemscope itemtype="https://schema.org/VideoObject"> <meta itemprop="name" content="Tie a Tie" /> <meta itemprop="description" content="How to tie a four-in-hand knot." /> <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" /> <link itemprop="contentUrl" content="https://www.example.com/videos/123_600x400.mp4" /> <link itemprop="embedUrl" content="https://www.example.com/videoplayer?id=123" /> <meta itemprop="duration" content="P1MT10S" /> <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" /> <video>...</video> </div> <div>Necessary Items:</div> <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A tie</div> <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A collared Shirt</div> <div itemprop="tool" itemtype="https://schema.org/HowToTool">A mirror</div> <div> <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <div itemprop="name">Preparations</div> <div itemprop="text">Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.</div> <div itemprop="image">https://example.com/1x1/photo1.jpg</div> <meta itemprop="url" content="https://example.com/tie#step1" /> </div> <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <div itemprop="name">Crossing once</div> <div itemprop="text">Cross the long end over the short end. This will form the basis for your knot.</div> <div itemprop="image">https://example.com/1x1/photo2.jpg</div> <meta itemprop="url" content="https://example.com/tie#step2" /> </div> <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <div itemprop="name">Second crossing</div> <div itemprop="text">Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.</div> <div itemprop="image">https://example.com/1x1/photo3.jpg</div> <meta itemprop="url" content="https://example.com/tie#step3" /> </div> <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <div itemprop="name">Loop in</div> <div itemprop="text">Now pull the long end through the loop near your neck, forming another loop near your neck.</div> <div itemprop="image">https://example.com/1x1/photo4.jpg</div> <meta itemprop="url" content="https://example.com/tie#step4" /> </div> <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <div itemprop="name">Pull and tighten</div> <div itemprop="text">Pull the long end through that new loop and tighten to fit!</div> <div itemprop="image">https://example.com/1x1/photo5.jpg</div> <meta itemprop="url" content="https://example.com/tie#step5" /> </div> </div> </div>

Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/how-to?hl=ru

SaleEvent (Распродажа/Бонус)

Микроразметка Логотипа

Разметка автора на странице js

Карусель Статей/Новостей js

Разметка голосового поиска (Speakable)

Добавить документу доп поле, в котором можно будет написать информацию о чем этот текст.

Рекомендации поисковых систем: текст должен быть не больше 2-3 предложений, чтобы озвучка текста не занимал более 30 секунд. Подробнее о разметке можно почитать тут https://developers.google.com/search/docs/data-types/speakable?hl=ru

Для продвижения конкретного ресурса нужна была не вся микроразметка.

1) Можно посмотреть, что поддерживается в Google Поиске тут: https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ru

2) Взять свойства и примеры схемы schema.org, ознакомиться можно на официальном сайте https://schema.org/ и собрать нужную самостоятельно при необходимости.

На этом все, спасибо за внимание.

======================

👇 Пишите в личные сообщения кодовое слово: "VC-Микроразметка"

https://t.me/tolstenkoaa

☝ Уточню кое какие вопросы, определим дату и время созвона по видео связи.

1.) За 10-15 минут проведу БЕСПЛАТНУЮ диагностику вашего бизнеса и отвечу на все ваши вопросы.

2.) Определим нужный функционал сайта, составлю смету разработки, и продвижения сайта

3.) Расскажу, какие инструменты использовать для продвижения, чтобы создать стабильную систему привлечения клиентов.

Все это по записи в личных сообщениях.

👉 https://t.me/tolstenkoaa

☝ В месяц на продвижение беру не более пяти новых проектов. Количество бесплатных диагностик: 10 шт на месяц. Есть ли места, уточняйте в личных сообщениях.

----

Телеграм: https://t.me/tolstenkoaa

Telegram канал: Толстенко PRO Маркетинг

ВК: https://vk.com/tolstenkoaa

Рутуб https://rutube.ru/channel/37807177/

Ютуб https://www.youtube.com/channel/UCP9el99pUCTNIZwc0O_6FlQ/

Яндекс не понимает JSON-LD?

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

Для чего нужна микроразметка сайта при SEO продвижении?

Словари микроразметки

Инфа для программистов!

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

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

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

Разметка для поиска по сайту

Хлебные крошки

Разметка меню навигации

Страница(ы) контактов

Разметка футера сайта

Разметка списка статьи блога (Blog) (список)

Разметка конкретного материала: Статьи/Новости

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

Микроразметка отзывов о сайте (если они есть)

Разметка видео в контенте

Разметка мобильного приложения

FAQ (вопрос/ответы)

How-To (Инструкция)

Разметка в формате ld json для Google

Если, каких то структурированных данных в примерах нет

📍 ХОТИТЕ УВЕЛИЧИТЬ ЗАКАЗЫ В 2-5 РАЗ ЗА 30 ДНЕЙ

📕 ЧТО ВЫ ПОЛУЧИТЕ ОТ КОНСУЛЬТАЦИИ?