Главная » SEO

Микроразметка Schema.org для Блога

Микроразметка Schema.org для Блога SEO
Автор На чтение 25 мин Просмотров 6к. Комментарии 2 Опубликовано Обновлено
Содержание
  1. Структурируем блог пошагово
  2. 1. WebPage — разметка тела сайта
  3. 2. Organization — разметка данных компании и логотип
  4. 3. WPHeader — разметка названия, описания сайта и изображения в header.
  5. 4. SiteNavigationElement — разметка меню сайта.
  6. 5. Blog — разметка главной страницы блога (категории блога)
  7. 6. BlogPosting, Person и Organization — разметка статьи блога
  8. ImageObject — разметка изображений
  9. WPSideBar — разметка сайдбара
  10. WPFooter — разметка футера
  11. WPAdBlock — разметка рекламного баннера
  12. Дополнительно
  13. Как проверить микроразметку

Чтобы помочь поисковым системам верно понять содержание страниц сайта, необходимо внедрить в HTML-код разметку Schema. Разметить данные желательно в самом начале создания сайта, прежде чем поисковики проиндексируют ваш контент и создадут сниппеты .

Структурируем блог пошагово

Рассмотрим все значения структурирования и их порядок для блогов. В каждом пункте сначала укажу HTML-код и как реализовать всё это в наш ранее созданный блог на MODX Revolution в рамках курса по Fenom.

1. WebPage — разметка тела сайта

Первым делом размечаем всё тело нашего сайта указывая его как веб-страницу. Для этого в тег <body> добавьте следующие значения:

<body itemscope itemtype="https://schema.org/WebPage">

Для внедрения открываем наш базовый шаблон «base.tpl» и к тегу body дописываем itemscope itemtype="https://schema.org/WebPage"

Размечаем body

2. Organization — разметка данных компании и логотип

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

Обычному блогу, не относящегося к организации эти значения размечать нет необходимости. Если вы частное лицо, то атрибуты для разметки ссылок на ваши социальные сети, адреса и прочих личных данных добавьте в тип схемы Person (персона), о которой речь пойдет ниже в этой статье. Если в вашей теме есть логотип, то разметьте его как itemprop=«image» и включите в схему WPHeader.

Вот пример микроразметки Organization для организаций.

<div itemscope itemtype="https://schema.org/Organization"><!-- Тип схемы Organization (для компаний)  -->
   <meta itemprop="name" content="Название блога (организации)">
   <meta itemprop="address" content="Город">
   <meta itemprop="telephone" content="+70000000000">
 
   <!-- Размечаем социальные сети  -->
   <link itemprop="url" href="https://example.com/"><!-- URL-адрес блога (организации)-->
      <ul>
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Мы в Facebook</a></li><!-- Ссылки на ваши соцсети или сайт автора -->
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Мы в Linked</a></li>
         <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Подпишись в Twitter</a></li>
      </ul>
   <!-- Размечаем логотип  -->
   <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
     <a href="https://example.com/" class="" rel="home" itemprop="url image"><img width="Ширина лого" height="Высота лого" src="https://example.com/logo.jpg" class="logo" alt="Микроразметка Schema.org для Блога" itemprop="url image"></a>
     <meta itemprop="width" content="Ширина лого">
     <meta itemprop="height" content="Высота лого">
   </div>
</div>

Если необходимо указать адрес организации полностью, то внутри Organization создайте схему PostalAddress. Если адрес будет отображаться для посетителей, то оборачивайте блок в ul li или в span, если разметка нужна только для поисковиков, то используйте тег meta. Пример:

<span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">ул. Советская, 37</span>
    <meta itemprop="addressLocality" content="Город">
    <meta itemprop="addressRegion" content="Регион">
    <meta itemprop="addressCountry" content="Страна">
    <meta itemprop="postalCode" content="000000">
</span>

Реализация микроразметки Organization в MODX:

Я делаю сайт не от имени организации, по этому размечу только логотип (который нужно добавить), вот пример html разметки:

<div itemscope itemtype="https://schema.org/ImageObject"><!-- добавляем тип схемы разметки -->
    <a href="http://site.ru/" class="custom-logo-link" rel="home" itemprop="url">
        <img width="200" height="100" src="#" class="custom-logo" alt="Микроразметка Schema.org для Блога" itemprop="url image">
    </a>
    <meta itemprop="width" content="200">
    <meta itemprop="height" content="100">
</div>

Для внедрения в MODX создадим конфигурацию c именем «logo» и типом «ввода изображение», сохраним и добавим туда логотип.

У нас сейчас логотип текстовый

<a class="navbar-brand" href="/">{'site_name' | config}</a>

Модифицируем его с учетом выше показанной разметки и заодно уберем циклическую ссылку на главной странице, получим следующее:

<div class="navbar-brand" itemscope itemtype="https://schema.org/ImageObject">
    {if $_modx->resource.id != 1}
    <a class="link-dark text-decoration-none" href="{$_modx->makeUrl(1)}" rel="home" itemprop="url">
        <img src="{'logo' | config}" alt="{'site_name' | config}" width="37" height="38" itemprop="url image"> {'site_name' | config}
        <meta itemprop="width" content="37">
        <meta itemprop="height" content="38">
    </a>
    {else}
    <img src="{'logo' | config}" alt="{'site_name' | config}" width="37" height="38" itemprop="url image"> {'site_name' | config}
    <meta itemprop="width" content="37">
    <meta itemprop="height" content="38">
    {/if}
</div>

3. WPHeader — разметка названия, описания сайта и изображения в header.

Данная разметка для тех у кого чисто блог — в моем случае я не стал ее не чего размечать, привожу чисто для информации.

HTML пример.

<div itemscope itemtype="https://schema.org/WPHeader"><!-- размечаем название, описание сайта в header -->
<h1 id="site-title" itemprop="name">Название блога</h1>
    <p class="site-description" itemprop="description">Краткое описание блога</p>
    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img itemprop="url image" src="https://example.com/img.jpg" width="750" height="200" alt="Мой сайт">
        <meta itemprop="width" content="750">
        <meta itemprop="height" content="200">
    </span>
</div>

На главной странице оборачиваем заголовок сайта в тег <h1> и убираем ссылку. На всех прочих страницах указываем ссылку на главную, а заголовок оборачиваем в тег <span>.

4. SiteNavigationElement — разметка меню сайта.

Размечая меню сайта мы выделяем весь блок меню и задаем свойства Schema ссылкам.

HTML пример

<nav class="mainNav" itemscope itemtype="https://www.schema.org/SiteNavigationElement"><!-- размечаем блок меню -->
   <ul>
       <li itemprop="name"><a itemprop="url" href="/home">Блог</a></li>
       <li itemprop="name"><a itemprop="url" href="#">Об авторе</a></li>
       <li itemprop="name"><a itemprop="url" href="#">Контакты</a></li>
   </ul>
</nav>

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

5. Blog — разметка главной страницы блога (категории блога)

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

HTML

<div itemscope="itemscope" itemtype="https://schema.org/Blog">
    <div class="" itemprop="description">
        <p>Текст.</p>
    </div><!-- Описание главной страницы блога -->
    <div>
        <div id="post-1"><!-- анонс №1 -->
            <div class="entry-image"><!-- если есть изображение анонса  -->
                <a href="#" title="">
                    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                        <img alt="Микроразметка Schema.org для Блога" height="высота" itemprop="url contentUrl" src="#" width="ширина" height="высота">
                    </span>
                </a>
            </div>
             
            <h2 class="entry-title" itemprop="headline">
                <a href="#" itemprop="mainEntityOfPage">Название анонса записи</a>
            </h2><!-- Заголовок анонса  -->
             
            <span class="entry-date">
                <time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">16.07.2018</time>
                <time class="updated" datetime="2018-12-26T16:39:44+00:00" itemprop="dateModified">26.12.2018</time>
            </span><!-- Если нужно показать дату публикации или обновления -->
             
            <div class="entry-content" itemprop="description"><!-- Анонс статьи  -->
                <p>Текст.</p>
            </div>
        </div>
             
        <div id="post-2"><!-- анонс №2 -->
            <div class="entry-image"><!-- если есть изображение анонса  -->
                <a href="#" title="">
                    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                        <img alt="Микроразметка Schema.org для Блога" itemprop="url contentUrl" src="#" width="ширина" height="высота">
                    </span>
                </a>
            </div>
             
            <h2 class="entry-title" itemprop="headline">
                <a href="#" itemprop="mainEntityOfPage">Название анонса записи</a>
            </h2><!-- Заголовок анонса  -->
             
            <span class="entry-date">
                <time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">16.07.2018</time>
                <time class="updated" datetime="2018-12-26T16:39:44+00:00" itemprop="dateModified">26.12.2018</time>
            </span><!-- Если нужно показать дату публикации или обновления -->
             
            <div class="entry-content" itemprop="description"><!-- Анонс статьи  -->
                <p>Текст.</p>
            </div>
        </div>    
    </div>
</div>

Теперь посмотрим пример разметки главной страницы блога MODX. Открываем файловый шаблон «CatBlogTemplate.tpl» и вносим изменения, на выходе у меня получилось следующее:

{extends 'file:templates/base.tpl'} 
{block 'content'}
<header class="bg-light pt-2 border-bottom">
    <div class="container">
        {'!pdoCrumbs' | snippet : [
            'showHome' => 1,
            'showAtHome' => 0,
            'tpl' => '@INLINE <li class="breadcrumb-item"><a title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplHome' => '@INLINE <li class="breadcrumb-item"><a rel="nofollow" title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplWrapper' => '@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">{$output}</ol></nav>',
            'tplCurrent' => '@INLINE <li class="breadcrumb-item active" aria-current="page">{$menutitle}</li>'
        ]}
    </div>
</header> 
<section class="bg-white py-4" itemscope="itemscope" itemtype="https://schema.org/Blog">
    <div class="container">
        <div class="row">
    		<div class="col-lg-9 col-md-8">
                <h1 itemprop="headline">{$_modx->resource.pagetitle}</h1>
                <div itemprop="description">{$_modx->resource.introtext}</div>
                <div class="row">
                {'!pdoPage' | snippet : [
                    'depth' => '0',
                    'tpl' => '@FILE chunks/blog/article.tpl',
                    'includeTVs' => 'img',
                    'tvPrefix' => '',
                    'sortdir' => 'ASC',
                    'limit' => '4',
                    'tplPageWrapper' => '@INLINE <nav aria-label="pagination"><ul class="pagination">{$prev}{$pages}{$next}</ul></nav>',
                    'tplPageFirst' => '',
                    'tplPageLast' => '',
                    'tplPage' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}">{$pageNo}</a></li>',
                    'tplPageActive' => '@INLINE <li class="page-item active"><a class="page-link" href="{$href}">{$pageNo}</a></li>',
                    'tplPagePrev' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}"><span aria-hidden="true">«</span></a></li>',
                    'tplPageNext' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}"><span aria-hidden="true">»</span></a></li>',
                    'tplPagePrevEmpty' => '@INLINE <li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">«</span></a></li>',
                    'tplPageNextEmpty' => '@INLINE <li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">»</span></a></li>',
                    'tplPageFirstEmpty' => '',
                    'tplPageLastEmpty' => ''
                ]}
                </div>
                {'page.nav' | placeholder}
                {$_modx->resource.content}
            </div>
            {include 'file:chunks/blog/aside.tpl'}
        </div>
    </div>
</section>
{/block}

где чанк «article.tpl» имеет следующий код:

<div class="col-sm-6 mb-3">
    <div class="card h-100">
        <a href="{$uri}" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img class="card-img-top" itemprop="url contentUrl" src="{$img | pthumb : 'w=354&h=156&zc=1'}" alt="{$pagetitle}"></a>
        <div class="card-body">
            <h3 class="h6 card-title" itemprop="headline"><a class="link-dark" itemprop="mainEntityOfPage" href="{$uri}">{$pagetitle}</a></h3>
            <div class="card-text small" itemprop="description">{$introtext | truncate : 100 : ' ... ':true:true}</div>
        </div>
    </div>
</div>

6. BlogPosting, Person и Organization — разметка статьи блога

Статья блога размечается схемой BlogPosting, кроме всех прочих свойств задаваемых содержимому, проверка структурированных данных потребует указать схему Person, а также свойство publisher (издатель). В том случае если у нас блог частного лица, то мы бы хотели добавить это свойство в схему Person, но publisher поисковики (на момент написания статьи) относят к схеме Organization, несмотря на то, что данное свойство есть в спецификации обеих схем. Поэтому в разметке статьи блога обычно указывают обе схемы. (Но совсем необязательно указывать данные, которые вы не хотите показывать в сниппете.)

HTML

<div itemscope itemtype="https://schema.org/BlogPosting"><!-- размечаем схему BlogPosting -->
     
    <meta content="https://example.com/zagolovok-statyi/" itemprop="mainEntityOfPage"><!-- сообщаем, что содержимое блока относится к данной странице, в свойстве content указываем ссылку на эту статью (каноническая)-->
     
    <h1 class="post-title" itemprop="headline">Заголовок статьи</h1><!-- Размечаем заголовок статьи  -->
     
    <span class="entry-date">
        <time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">16.07.2018</time>
        <time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time>
    </span> <!-- Дата публикации и обновления -->
     
    <span itemprop="articleSection"><!-- Рубрика статьи -->
        <a href="https://example.com/modx/">MODX</a>
    </span>
     
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img alt="Микроразметка Schema.org для Блога" itemprop="url contentUrl" src="https://example.com/thumbnail.jpg" width="" height="">
        <meta content="ширина" itemprop="width">
        <meta content="высота" itemprop="height"><!-- изображение -->
    </div>
     
    <div class="entry-description" itemprop="description"><!-- Краткое содержание статьи  -->
        <p>Текст.</p>
    </div>
     
    <div class="entry-content" itemprop="articleBody"><!-- Статья  -->
        <p>Текст.</p>
    </div>    
     
    <span itemprop="keywords"><!-- Метки (теги) или ключевые слова-->
        <a href="https://example.com/tag/metka/">Метка</a>
    </span>
     
    <div class="" itemprop="author" itemscope itemtype="https://schema.org/Person"><!-- Схема Person -->
        <a href="https://example.com/author/" itemprop="url" rel="author"><!-- ссылка на страницу автора -->
            <span itemprop="name">Имя автора</span>
        </a><!-- Имя автора -->
        <ul>
            <li>
                <a href="#" itemprop="sameAs" rel="external" target="_blank">Мы в Facebook</a>
            </li><!-- Ссылки на соцсети автора -->
            <li>
                <a href="#" itemprop="sameAs" rel="external" target="_blank">Я в Linked</a>
            </li>
            <li>
                <a href="#" itemprop="sameAs" rel="external" target="_blank">Наш Twitter</a>
            </li>
        </ul>
    </div>
     
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <!-- Указываем издателя, логотип и контакты -->
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <link itemprop="url image" href="https://example.com/logo.jpg"><!-- Если дизайн позволяет показать логотип, то тег link замените на img -->
            <meta content="ширина" itemprop="width">
            <meta content="высота" itemprop="height">
        </div>
        <meta content="Название сайта" itemprop="name">
        <meta content="+70000000000" itemprop="telephone"><!-- Номер телефона (необязательно для Google, но обязательно для Яндекс) -->
        <meta content="Город" itemprop="address"><!-- Адрес полностью или город/страна (необязательно для Google, но обязательно для Яндекс) -->
    </div>
</div>

У нас весь вывод содержимого статьи находится в шаблоне «ArticleTemplate.tpl». Открываем его и размечаем таким образом:

{extends 'file:templates/base.tpl'} 
{block 'content'}
<header class="bg-light pt-2 border-bottom">
    <div class="container">
        {'!pdoCrumbs' | snippet : [
            'showHome' => 1,
            'showAtHome' => 0,
            'tpl' => '@INLINE <li class="breadcrumb-item"><a title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplHome' => '@INLINE <li class="breadcrumb-item"><a rel="nofollow" title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplWrapper' => '@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">{$output}</ol></nav>',
            'tplCurrent' => '@INLINE <li class="breadcrumb-item active" aria-current="page">{$menutitle}</li>'
        ]}
    </div>
</header> 
<section class="bg-white py-4">
    <div class="container">
        <div class="row">
    		<div class="col-lg-9 col-md-8">
                <article class="card" itemscope itemtype="https://schema.org/BlogPosting">
                    <meta content="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" itemprop="mainEntityOfPage">
                    {if $_modx->resource.video?}
                        <div class="embed-responsive embed-responsive-16by9">
                             <iframe class="embed-responsive-item" src="{$_modx->resource.video}" title="{$_modx->resource.pagetitle}" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <link rel="stylesheet" href="/template/css-js/responsive-video.css">
                        {else}
                        <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                            <img class="card-img-top" itemprop="url contentUrl" src="{$_modx->resource.img | pthumb : 'w=830&h=337&zc=1'}" alt="{$_modx->resource.pagetitle}">
                            <meta content="830" itemprop="width">
                            <meta content="337" itemprop="height">
                        </div>
                    {/if}
                    <div class="border-bottom row g-0">
                        <div class="col-md-3 col-6">
                            <svg class="float-start ms-lg-4 pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                              <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                            </svg>
                            Автор <br>
                            <a class="link-dark" href="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}#autor"><strong itemprop="author">{$_modx->resource.createdby | user : 'fullname'}</strong></a>
                        </div>
                        <div class="col-md-3 col-6">
                            <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                              <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
                            </svg>
                            <a itemprop="articleSection" class="link-dark" href="{$_modx->resource.parent | resource : 'uri'}">{$_modx->resource.parent | resource : 'menutitle'}</a>
                        </div>
                        <div class="col-md-3 col-6">
                            <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                            </svg>
                            Опубликовано <br><time class="fw-bold" datetime="{$_modx->resource.publishedon | date : "%Y-%m-%dT%H:%M"}" itemprop="datePublished">{$_modx->resource.publishedon | date : "d.m.Y"}</time>
                        </div>
                        <div class="col-md-3 col-6">
                            <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
                              <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                            </svg>
                            Обновлено <br><time class="fw-bold" datetime="{$_modx->resource.editedon | date : "%Y-%m-%dT%H:%M"} itemprop="dateModified">{$_modx->resource.editedon | date : "d.m.Y"}</time>
                        </div>
                    </div>
                    <div class="card-body mb-2">
                        <h1 class="h2" itemprop="headline">{$_modx->resource.pagetitle}</h1>
                        <div itemprop="description">{$_modx->resource.introtext}</div>
                        <div itemprop="articleBody">{$_modx->resource.content}</div>
                        {if $_modx->resource.tags?}{include 'file:chunks/blog/tags.tpl'}{/if}
                        {'pdoNeighbors' | snippet : [
                            'sortby' => 'publishedon',
                            'sortdir' => 'asc',
                            'includeTVs' => 'img',
                            'tvPrefix' => '',
                            'tplWrapper' => '@INLINE <div class="row border-top pt-3">{$prev}{$next}</div>',
                            'tplPrev' => '@FILE chunks/blog/neighborsPrev.tpl',
                            'tplNext' => '@FILE chunks/blog/neighborsNext.tpl',
                            'sortdir' => 'ASC'
                        ]}
                    </div>
                </article> 
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="row" id="author" itemprop="author" itemscope itemtype="https://schema.org/Person">
                            <div class="col-4 col-md-2">
                                 <img class="rounded-circle img-fluid" src="template/img/{$_modx->resource.createdby | user : 'photo'}" alt="{$_modx->resource.createdby | user : 'fullname'}">
                            </div>
                            <div class="col-8 col-md-10">
                                <p><a class="h5 link-dark" href="{$_modx->makeUrl(10,'','',1)}" itemprop="url" rel="author"><span itemprop="name">{$_modx->resource.createdby | user : 'fullname'}</span></a></p>
                                <p>Эксперт по микрозаймам и микрофинансовым организациям. Блогер, журналист.</p>
                                <p>Мы в: 
                                    {if $_modx->config.vk?}<a href="{$_modx->config.vk}" itemprop="sameAs" rel="noopener external" target="_blank" title="мы вконтакте"><svg class="icon icon-vk"><use xlink:href="symbol-defs.svg#icon-vk"></use></svg></a>{/if} 
                                    {if $_modx->config.facebook?}<a href="{$_modx->config.facebook}" itemprop="sameAs" rel="noopener external" target="_blank" title="мы в фейсбуке"><svg class="icon icon-facebook2"><use xlink:href="symbol-defs.svg#icon-facebook2"></use></svg></a>{/if} 
                                    {if $_modx->config.twitter?}<a href="{$_modx->config.twitter}" itemprop="sameAs" rel="noopener external" target="_blank" title="мы twitter"><svg class="icon icon-twitter"><use xlink:href="symbol-defs.svg#icon-vk"></use></svg></a>{/if} 
                                    {if $_modx->config.instagram?}<a href="{$_modx->config.instagram}" itemprop="sameAs" rel="noopener external" target="_blank" title="мы в instagram"><svg class="icon icon-facebook2"><use xlink:href="symbol-defs.svg#icon-instagram"></use></svg></a>{/if} 
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {include 'file:chunks/blog/aside.tpl'}
        </div>
        <p class="h3" id="comments">Комментарии</p>                 
        <div id="wpac-comment"></div>
        <script src="template/css-js/comments.js"></script>
    </div>
</section>
{/block}

Тут может возникнуть вопрос, почему статью мы размечаем схемой BlogPosting, а не Article? Схема BlogPosting — это дочерний тип schema.org/Article. Каждый BlogPosting является статьей, но не каждая статья размечается как BlogPosting, потому что статья может относится к различным типам разметки: BlogPosting, NewsArticle (новости), ScholarlyArticle (научная статья). Другими словами, если у вас есть типичный блог, будет лучшим решением использовать schema.org/Blog с schema.org/BlogPosting.

ImageObject — разметка изображений

С разметкой изображений на HTML сайте нет никаких затруднений.

HTML

<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><!-- сообщаем, что это изображение-->
    <img alt="Микроразметка Schema.org для Блога" height="высота" itemprop="url contentUrl" src="https://example.com/thumbnail.jpg" width="ширина"><!-- Укажем ссылку на изображение -->
    <meta content="" itemprop="width"><!-- укажем ширину изображения -->
    <meta content="" itemprop="height"><!-- и высоту -->
</span>

Что касается разметки изображений на сайте MODX, то c изображений выводимых из TV полей проблем нет (пример есть выше). А вот если хотите разметить изображения уже непосредственно в контенте, тогда можете воспользоваться вот этим решением: MODX обернуть фотки в микроразметку.

HTML микроразметка для сайдбара.

<div class="widget-area" id="sidebar" itemscope itemtype="http://schema.org/WPSideBar" role="complementary">
</div>

WPFooter — разметка футера

Добавьте в тег footer соответствующую схему, как в примере ниже. Если у вас в подвале добавлено много различной информации, свойства к ним можно найти на сайте Schema.

<footer id="footer" itemscope itemtype="https://schema.org/WPFooter">
</footer>

WPAdBlock — разметка рекламного баннера

Для рекламного блока тоже есть своя разметка.

<div itemscope itemtype="https://schema.org/WPAdBlock">
        <span>Реклама</span>
        <a href="ad-target-1.html" itemprop="url" rel="external"><img alt="Пример рекламного объявления 1" height="250" itemprop="image" src="ad-1.png" width="300"></a>
        <a href="ad-target-2.html" itemprop="url" rel="external"><img alt="Пример рекламного объявления 2" height="250" itemprop="image" src="ad-2.png" width="300"></a>
</div>

Дополнительно

Еще если есть хлебные крошки, то для них тоже есть своя разметка, у тех кто проходит курс за нее отвечает сниппет «breadSchema».

Вот его код (сам сниппет выводиться в head):

$res = $modx->resource;
$site_url = $modx->getOption('site_url');
$site_start = $modx->getOption('site_start') ?: 1;
$ids = $modx->getParentIds($res->id, 10, array('context' => $modx->context->key));
$pids = ($res->id != $site_start) ? [$res->id] : [];
foreach($ids as $id) {
    if($res->id != $id) {
        $pids[] = $id;    
    }
}
$pids = array_reverse($pids);
$output = [];
$index = 0;
foreach($pids as $id) {
    if ($id == 0) {
        $id = $site_start;
    }
    if($res->id != $id) {
        $res = $modx->getObject('modResource', $id);
    }
    
    $uri = $site_url . $res->get('uri');
    if($res->get('id') == $site_start) {
        $uri = $site_url;
    }
    $output[] = '{
        "@type": "ListItem",
        "position": '.++$index.',
        "name": "'.$res->get('pagetitle').'",
        "item": "'.$uri.'"
    }';
}
$wrapper = implode(',', $output);
return '<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": ['.$wrapper.']
}
</script>';

Как проверить микроразметку

Проверка структурированных данных на странице обычное выполняется с помощью соответствующих инструментов Яндекса и validator.schema.org.

validator.schema.org

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

 

<
>
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий

  1. артем

    Здравствуйте. А каким образом можно внедрить разметку в современные темы, например, в ту же Twenty Twenty-Four? Там нет практически файлов темы, где можно внедрить разметку в html-код.

    Ответить
    1. Алексей автор

      Здравствуйте. Twenty Twenty-Four — это WordPress, а здесь больше про саму разметку и как ее внедрить в MODX. Для WP достаточно скачать специальные плагины.

      Ответить

Условия использования | Конфиденциальность

© 2012-2024 web-revenue.ru

Цитирование документа разрешается только при обязательном указании активной гиперссылки на сайт. Полное заимствование документа не разрешается и является нарушением российского и международного законодательства.

Работает на теме Reboot for WordPress
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.