MODX. Микроразметка Schema.org. OpenGraph. JSON-LD

Вам могут пригодится следующие ресурсы:

Микроразметка, которую чаще всего используют https://schema.org/

Неофициальный русский перевод https://ruschema.org/

Валидатор Yandex https://webmaster.yandex.ru/tools/microtest/

Валидатор Google https://developers.google.com/search/docs/advanced/structured-data

Проверка расширенных результатов https://search.google.com/test/rich-results?hl=ru

Документация Open Graph https://www.ogp.me/

Рекомендую проверять страницу в валидаторе и Яндекса и Google, вполне возможен результат при котором у вас не будет ошибок в одном, но будут ошибки в другом валидаторе.

Примеры разметки schema.org

Контакты

Делать скрытые HTML блоки в данном случае не лучшая идея, воспользуемся JSON-LD форматом, который добавит после основных скриптов, после footer’a

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "[[++site_name]]",
  "url" : "[[++site_url]]",
  "logo": "[[++site_url]][[++logo]]",
  "address":{
    "@type":"PostalAddress",
    "streetAddress":"[[++site_address]]",
    "addressLocality":"Москва",
    "addressRegion":"Московская Область",
    "postalCode":"117546",
    "addressCountry":"Россия"
  },
  "contactPoint" : [{
    "@type" : "ContactPoint",
    "telephone" : "[[++phone1]]",
    "email" : "[[++email]]",
    "contactType" : "customer service"
  }],
  "sameAs" : [
    "соц сети"
  ]
}
</script>

Отзывы на примере easyComm

<div id="ec-{$thread_name}-message-{$id}" class="ec-message" itemscope itemtype="https://schema.org/Review">
    <meta itemprop="datePublished" content="[[+date:strtotime:date=`%Y`]]-[[+date:strtotime:date=`%m`]]-[[+date:strtotime:date=`%d`]]"/>
    <link itemprop="url" href="[[+uri]]" class="d-none">
    <div class="ec-message__meta ec-clearfix">
        <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization" class="d-none">
            <meta itemprop="name" content="Отзыв о компании [[++site_name]]">
            <meta itemprop="telephone" content="[[stripPhone?phone=`[[++phone1]]`]]">
            <link itemprop="url" href="[[++site_url]]"/>
            <meta itemprop="email" content="[[++publick_email]]">
            <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                <meta itemprop="addressLocality" content="Москва">
                <meta itemprop="streetAddress" content="[[++site_address]]">
            </div>
        </div>
        <div class="flex flex-space-between">
            <div class="ec-message-name_subject flex flex-wrap" itemprop="author" itemscope itemtype="https://schema.org/Person">
                <div class="ec-message-name" itemprop="name">{$user_name}</div>
                <div class="ec-message-subject">{$subject}</div>
            </div>
            <div class="ec-message-stars_date" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                <meta itemprop="worstRating" content="1">
                <meta itemprop="bestRating" content="5"/>
                <meta itemprop="ratingValue" content="[[+rating]]">
                <div class="ec-message-stars">
                    <div class="ec-stars">
                        <span class="rating-{$rating}"></span>
                    </div>
                </div>
                <div class="ec-message-date">{$date | dateAgo}</div>
            </div>
        </div>
    </div>
    <div class="text" itemprop="reviewBody">
        {if $text | length > 300}
            <div class="ec-message-spoiler">
                {$text}
            </div>
            <div class="ec-message-spoiler-btn">
                <a href="#">Читать полностью <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        {else}
            {$text}
        {/if}
    </div>
    {if $reply_text}
    <div class="ec-message__reply">
        {if $reply_author}
        <div class="reply_author">Ответ от {$reply_author}</div>
        {/if}
        <div class="reply_text">{$reply_text}</div>
    </div>
    {/if}
</div>

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

    [[pdoCrumbs?
       &showHome = `1`
       &tplWrapper=`breadcrumbs-wrap`
       &outputSeparator = `>`
    ]]
    tplHome
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a itemprop="item" href="[[+link]]">
          <span itemprop="name">[[+menutitle]]</span>
          <meta itemprop="position" content="[[+idx]]" />
      </a>
   </li>
    tpl
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a itemprop="item" href="[[+link]]">
          <span itemprop="name">[[+menutitle]]</span>
          <meta itemprop="position" content="[[+idx]]" />
       </a>
   </li>
   &tplCurrent
   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="active">
       <meta itemprop="item" content="[[++site_url]][[+link]]" />
       <span itemprop="name">[[+menutitle]]</span>
       <meta itemprop="position" content="[[+idx]]" />
    </li>

Чанк breadcrumbs-wrap

    <ul class="" itemscope itemtype="http://schema.org/BreadcrumbList">[[!+output]]</ul>

Статьи

<main itemscope itemtype="http://schema.org/Article">
    <h1 class="" itemprop="name">[[*seo_h1:default=`[[*pagetitle]]`]]</h1>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" class="d-none">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <meta itemprop="url image" content="[[++site_url]][[++site_logo]]"/>
        </div>
        <meta itemprop="name" content="[[++site_name]]">
        <meta itemprop="telephone" content="[[++site_phone]]">
        <meta itemprop="address" content="[[++site_address]]">
    </div>
    <div itemprop="author" itemscope itemtype="https://schema.org/Person">
        <meta itemprop="name" content="[[*article-writer-name]]"/>
        <meta itemprop="url" content="[[++site_url]][[*uri]]"/>
    </div>
    <meta itemprop="url" content="[[++site_url]][[*uri]]"/>
    <meta itemprop="image" content="[[*news-img]]"/>
    <meta itemprop="headline" content="[[*pagetitle]]"/>
    <meta itemprop="datePublished" content="[[*publishedon:date=`%Y-%m-%d`]]T08:00:00+08:00"/>
    <meta itemprop="dateModified" content="[[*publishedon:date=`%Y-%m-%d`]]T08:00:00+08:00"/>
    <meta itemprop="mainEntityOfPage" content="[[~[[*id]]]]"/>
    <div class="" itemprop="articleBody">
        [[*content]]
    </div>
</main>

FAQ Вариант 1

    <div class="accordion" itemscope="" itemtype="http://schema.org/FAQPage">
    <div class="item" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question">
        <div class="" itemprop="name">Вопрос</div>
        <div class="data" itemscope="" itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
            <div itemprop="text">
                Ответ
            </div>
        </div>
    </div>
</div>

FAQ Вариант 2

<div class="accordion">
    {foreach $_modx->resource['srv_faq_listX'] | fromJSON as $k => $item}
    <div class="item" itemscope itemtype="http://schema.org/Question">
        <h2 class="" itemprop="name">{$item['question']}</h2>
        <div class="" itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
            <meta itemprop="upvoteCount" content="1" />
            <div itemprop="text">{$item['answer']}</div>
        </div>
    </div>
    {/foreach}
</div>

Услуга

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Service",
      "serviceType": "[[*seo_h1]]",
      "provider": {
        "@type": "Organization",
        "name": "[[++site_name]]",
        "url": "[[++site_url]]",
        "logo": "[[++site_url]][[++site_logo]]"
      },
      "areaServed": {
        "@type": "State",
        "name": "Московская область"
      },
      "description": "[[*seo_desc]]",
      "offers": {
        "@type": "Offer",
        "url": "[[++site_url]][[*uri]]",
        "price": "[[*microdata-service-price]]",
        "priceCurrency": "RUB"
      }
    }
</script>

Товары

<div class="" itemscope itemtype="http://schema.org/Product">
    <h1 itemprop="name">[[*seo_h1:default=`[[*pagetitle]]`]]</h1>
    <div class="content">[[$msProduct.content.custom]]</div>
</div>
Чанк msProduct.content.custom
<meta itemprop="brand" content="[[++site_name]]">
<meta itemprop="model" content="[[+article:default=`-`]]">
<div id="msProduct">
    <form method="post">
        <input type="hidden" name="id" value="[[*id]]"/>
        <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" style="display: none;">
            <meta itemprop="worstRating" content="1"/>
            <meta itemprop="ratingValue" content="5"/>
            <meta itemprop="bestRating" content="5"/>
            <meta itemprop="ratingCount" content="100"/>
        </div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="price" content="[[+price]]">
            <meta itemprop="priceCurrency" content="RUB">
            <link itemprop="availability" href="http://schema.org/InStock">
            <meta itemprop="category" content="Категория">
            <link itemprop="url" href="[[++site_url]][[*uri]]">
            <time itemprop="priceValidUntil" datetime="2030-12-31"></time>
            <meta itemprop="seller" content="ООО «РогаКопыта»">
            <link itemprop="itemCondition" href="http://schema.org/NewCondition" />
        </div>
    </form>
</div>
<div itemprop="description">Контент</div>

Что это и для чего нужно

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

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

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

Сравните сниппеты в поисковой выдаче для страницы сайта, участвующего в партнерской программе Яндекс Словарей – неразмеченного и размеченного семантической версткой.

Существует большое количество типов микроразметок, Контакты, Хлебные Крошки, Товары, Статьи, Вопросы и Ответы, Отзывы, Рецепты, Кино, Музыка и множество других.

JSON-LD

Иногда бывает, что по тем или иным причинам мы не можем произвести микроразметку в HTML шаблонах, в таком случае нам на помощь приходит вариант формата JSON-LD скрипта.

Хотя и формат HTML более предпочтителен, тем не мнее JSON-LD тоже вполне имеет право на жизнь и даже является одним из вариантов который демонстрирует официальный сайт в каждом из примеров разметки.

Что такое Open Graph и для чего он нужен

Open Graph разработан для контроля текстово-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, правильный заголовок, описание и ссылку.

Зачем нужен Open Graph

• Пользователь увидит релевантный текст и нужное изображение, которое настроит веб-мастер.

• Сниппет будет выглядеть как пост, который можно разместить в соцсети, а не как ссылка, к которой нужны дополнительное описание и картинка.

• Оформленное превью выглядит лучше, а значит улучшает поведенческие факторы, приносит больше кликов.

Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, FB, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

Как интегрировать

Интеграция микроразметки Open Graph осуществляется в теге <head>, на подобии мета-тегов. Доступные свойства вы можете посмотреть в документации https://www.ogp.me/

<meta name="og:title" content="[[*longtitle:default=`[[*pagetitle]]`]] | [[++site_name]]">
<meta name="og:type" content="website">
<meta name="og:url" content="[[++site_url]][[*id:is=`1`:then=`:else=`[[*uri]]`]]">
<meta name="og:image" content="[[++site_url]][[++logotype]]">
<meta name="og:site_name" content="[[++site_name]]">
<meta name="og:description" content="[[*description]]">
<meta name="og:email" content="[[++publick_email]]">
<meta name="og:phone_number" content="[[++phone1]]">
<meta name="og:latitude" content="51.729880">
<meta name="og:longitude" content="36.190967">
<meta name="og:street-address" content="[[++site_address]]">
<meta name="og:locality" content="Moscow">
<meta name="og:region" content="Moscow">
<meta name="og:postal-code" content="117546">
<meta name="og:country-name" content="RUS">
<meta property="og:type" content="website">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="[[++site_url]]">
<meta property="og:url" content="[[++site_url]][[*id:is=`1`:then=`:else=`[[*uri]]`]]">
<meta property="og:title" content="[[*longtitle:default=`[[*pagetitle]]`]] | [[++site_name]]">
<meta property="og:description" content="[[*description]]">
<meta property="og:image" content="[[++site_url]][[++logotype]]">
<meta property="og:image:width" content="213">
<meta property="og:image:height" content="64">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@name">
<meta name="twitter:creator" content="@name">
<meta name="twitter:url" content="[[++site_url]][[*id:is=`1`:then=`:else=`[[*uri]]`]]">
<meta name="twitter:title" content="[[*longtitle:default=`[[*pagetitle]]`]] | [[++site_name]]">
<meta name="twitter:description" content="[[*description]]">
<meta name="twitter:image" content="[[++site_url]][[++logotype]]">