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

Рассмотрим, два стандарта микроразметки сайта: Schema.org и Open Graph на примере меню, хлебных крошек, сайдбара, картинок, подвала сайта и многое другое.

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

Внедрить микроразметку, используя словарь schema.org, можно двумя способами:

с помощью микроданных
с помощью JSON-LD

Микроразметка schema.org - микроданные

Микроразметка schema.org внедряется в тело HTML страницы при помощи специальных атрибутов: itemscope, itemtype, itemprop и др.

Примерный план внедрения микроразметки schema.org с помощью микроданных:

Микроразметка сайта с помощью schema.org

Таким образом, рассмотрим, как внедрить микроразметку schema.org для следующих элементов:

логотип;
меню;
поиск по сайту;
"хлебные крошки";
сайдбар;
статья;
товар (отзывы, рейтинг);
изображения;
контакты;
комментарии;
подвал сайта.

В представленных примерах ниже {ссылка}, {анкор} и т.п. - замените на свои значения

1. Микроразметка логотипа и названия компании - Organization

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="{Ваш домен}">Главная</a>
    <img itemprop="logo" src="{Ссылка на лого}" />
    <meta itemprop="name" content="{Название сайта}">
    <div itemscope itemprop="address" itemtype="http://schema.org/PostalAddress">
        <meta itemprop="postalCode" content="{Почтовый индекс}">
        <meta itemprop="addressLocality" content="{Город}">
        <meta itemprop="streetAddress" content="{Улица}, {дом}">
    </div>
    <meta itemprop="telephone" content="{Телефон}">
</div>

Или так

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="{Ваш домен}">
        <img itemprop="logo" src="{Ссылка на лого}" />
    </a>
    <meta itemprop="name" content="{Название сайта}">
    <div itemscope itemprop="address" itemtype="http://schema.org/PostalAddress">
        <meta itemprop="postalCode" content="{Почтовый индекс}">
        <meta itemprop="addressLocality" content="{Город}">
        <meta itemprop="streetAddress" content="{Улица}, {дом}">
    </div>
    <meta itemprop="telephone" content="{Телефон}">
</div>

2. Микроразметка меню - SiteNavigationElement

<nav>
    <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
        <li itemprop="name">
            <a itemprop="url" href="{ссылка}">{Анкор}</a>
        </li>
        <li itemprop="name">
            <a itemprop="url" href="{ссылка}">{Анкор}</a>
        </li>
        <li itemprop="name">
            <a itemprop="url" href="{ссылка}">{Анкор}</a>
        </li>
    </ul>
</nav>

3. Микроразметка поиска по сайту - SearchAction

<div itemscope itemtype="https://schema.org/WebSite">
    <meta itemprop="url" content="{Ваш домен}"/>
    <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
        <meta itemprop="target" content="{Ваш домен}/search?q={search_term_string}" />
        <input itemprop="query-input" type="text" name="search_term_string" required />
        <input type="submit" />
    </form>
</div>

4. Микроразметка хлебных крошек - BreadcrumbList

<nav>
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">

        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="{Ссылка}">
                <span itemprop="name">{Анкор}</span>
            </a>
            <meta itemprop="position" content="1">
        </li>

        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="{Ссылка}">
                <span itemprop="name">{Анкор}</span>
            </a>
            <meta itemprop="position" content="2">
        </li>

        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <span itemprop="name">{Анкор}</span>
            <meta itemprop="position" content="3">
        </li>

    </ol>
</nav>

Микроразметка Breadcrumbs на php (OpenCart, WordPress) будет примерно следующей.

<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <?php $end_breadcrumb = array_pop($breadcrumbs); ?>
    <?php foreach ($breadcrumbs as $key => $breadcrumb) {
        $key++; ?>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="<?php echo $breadcrumb['href']; ?>" itemprop="item">
                <span itemprop="name"><?php echo $breadcrumb['text']; ?></span>
            </a>
            <meta itemprop="position" content="<?php echo $key; ?>" />
        </li>
    <?php } ?>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span itemprop="name"><?php echo $end_breadcrumb['text']; ?></span>
        <meta itemprop="item" content="<?php echo $end_breadcrumb['href']; ?>" />
        <meta itemprop="position" content="<?php echo count($breadcrumbs) + 1; ?>" />
    </li>
</ul>

5. Микроразметка сайдбара - WPSideBar

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <div>
        <h3 itemprop="name">{Заголовок блока/секции}</h3>
        ...
    </div>
    <div>
        <h3 itemprop="name">{Заголовок блока/секции}</h3>
        ...
    </div>
</aside>

6. Микроразметка статьи - Article

<article itemscope itemtype="http://schema.org/Article">

    <!-- h1 -->
    <h1 itemprop="headline">{Главный заголовок статьи}</h1>

    <!-- Ссылка на статью -->
    <link itemprop="url" href="{Ссылка на статью}" />

    <!-- Каноническая ссылка статьи -->
    <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="{Дата публикации}">
    <meta itemprop="dateModified" content="{Дата изменения}" />

    <!-- основной текст статьи -->
    <div itemprop="articleBody">
        { ... статья ... }
    </div>

    <!-- Автор статьи -->
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">{Автор статьи}</span>
    </div>

    <!-- Контактная информация о сайте/организации -->
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="image url" src="{Ссылка на логотип}" alt="{Название сайта/организации}" />
        </div>
        <meta itemprop="name" content="{Название сайта/организации}" />
        <meta itemprop="address" content="{Адрес}" />
        <meta itemprop="telephone" content="{Телефон}" />
    </div>

</article>

Дата должна иметь формат ISO 8601. Пример даты: 2019-09-23T00:00:00+03:00

7. Микроразметка товара - Product

Рассмотрим пример микроразметки товара (валюта, отзыв, рейтинг со звёздами).

<!-- Карточка товара - «Product» -->
<main itemscope itemtype="http://schema.org/Product">

    <h1 itemprop="name">{Название товара}</h1>
    <meta itemprop="brand" content="{Бренд}" />
    <img itemprop="image" src="{Путь до изображерния товара}" />
    <meta itemprop="description" content="{Описание_товара}">

    <!-- Цены с валютой - «Offer» -->
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="RUB" />
        <div itemprop="price">{Цена}</div>
        <link itemprop="availability" href="http://schema.org/InStock" /><!-- В наличии -->
        <link itemprop="availability" href="http://schema.org/OutOfStock" /><!-- Отсутствует -->
        <link itemprop="url" href="{Ссылка на товар}" />
    </div>

    <!-- Отзыв - «Review» -->
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">

        <div itemprop="itemreviewed">{Название товара}</div>
        <div itemprop="author" itemscope itemtype="http://schema.org/Person">
            <div itemprop="name">{Автор отзыва}</div>
        </div>

        <meta itemprop="datePublished" content="{Дата отзыва}">
        <div itemprop="reviewBody">{Текст отзыва}</div>

        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="bestRating" content="{Максимальный рейтинг}" />
            <meta itemprop="ratingValue" content="{Средний рейтинг}"/>
        </div>

    </div>

    <!-- Рейтинг (Звёзды) - «AggregateRating» -->
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <meta itemprop="bestRating" content="{Максимальный рейтинг}" />
        <meta itemprop="reviewCount" content="{Количество голосов}" />
        <meta itemprop="ratingValue" content="{Средний рейтинг товара}" />
    </div>

</main>

Теги span и div можно изменять на meta (и наоборот).

<div itemprop="name">{Название товара}</div>
Идентично
<meta itemprop="name" content="{Название товара}" />

8. Микроразметка картинок - ImageObject

<div itemscope itemtype="http://schema.org/ImageObject">
    <h3 itemprop="name">{Название картинки}</h3>
    <img itemprop="contentUrl" src="{Путь}">
    <span itemprop="description">{Описание картинки}</span>
</div>

9. Микроразметка контактов - Organization, PostalAddress

Данную микроразметку можно использовать, например, на странице "О компании" или "Наши контакты", или на любой другой, где необходимо указать данные организации.

<div itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">{Название организации/фирмы}</span>
        Контакты:
    <div itemscope itemtype="http://schema.org/PostalAddress" itemprop="address">
        Адрес:
        <span itemprop="streetAddress">{Улица}, {дом}</span>
        <span itemprop="postalCode">{Почтовый индекс}</span>
        <span itemprop="addressLocality">{Город}</span>,
    </div>
        Телефон: <span itemprop="telephone">{Телефон}</span>,
        Факс: <span itemprop="faxNumber">{Факс}</span>,
        Электронная почта: <span itemprop="email">{E-mail}</span>
</div>

10. Микроразметка комментариев - UserComments

Чтобы разметить пользовательские комментарии на сайте используйте код ниже.

<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>

В теге time для атрибута datetime можете использовать следующие форматы даты и времени:

2020 - год (ГГГГ)
2017-02 - месяц и год (ГГГГ-ММ)
2014-03-16 - полная дата (ГГГГ-ММ-ДД)
2014-03-16T:12:12 - дата с часами и минутами (ГГГГ-ММ-ДДТчч:мм)
2014-03-16 - дата со временем (ГГГГ-ММ-ДДТчч:мм:сс)
2015-05-14T15:16:11+03:00 - дата со временем и часовым поясом (ГГГГ-ММ-ДДTчч:мм:сс±чч:мм)

11. Микроразметка подвала сайта - WPFooter

<footer itemscope itemtype="http://schema.org/WPFooter">
    <span itemprop="copyrightYear">{Год}</span> - 2020 © 
    <span itemprop="creator">Only to top</span>
</footer>

Обратите внимание, copyrightYear - указывается год, в течение которого впервые было заявлено авторское право.

Микроразметка JSON-LD

Данный формат микроразметки использует словарь schema.org, но описывается в JSON-формате в теге <script>

Пример микроразметки статьи, используя формат JSON-LD

<script type="application/ld+json">
{
    "@context" : 'http://schema.org',
    "@type" : 'Article',
    "mainEntityOfPage" : {
        "@type" : 'WebPage',
        "@id" : '{ссылка_на_статью}'
    },
    "url" : '{ссылка_на_статью}',
    "headline" : '{заголовок_статьи}',
    "image" : {
        "@type" : 'ImageObject',
        "url" : '{изображение_статьи}'
    },
    "datePublished" : '{дата_размещения_статьи}',
    "dateModified" : '{дата_изменения_статьи}',
    "author" : {
        "@type" : 'Person',
        "name" : '{автор_сайта}'
    },
    "publisher" : {
        "@type" : 'Organization',
        "name" : '{название_организации}',
        "logo" : {
            "@type" : 'ImageObject',
            "url" : '{ссылка_на_логотип}'
        }
    },
    "description" : '{описание_статьи}''
}
</script>

Словарь schema.org огромнейший, поэтому с помощью JSON-LD также можно разметить отдельные элементы сайта: меню, хлебные крошки и многое другое. Полный список всех типов "@type" для разметки на официальном сайте.

Open Graph

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

Для использования данного типа разметки необходимо добавить метаданные в шапке сайта в тег <head>

Основные метаданные

og:type - тип объекта. В зависимости от типа, можно задавать дополнительные свойства.
og:title - заголовок
og:image - URL-адрес изображения
og:url - URL-адрес на вашу страницу (статью)

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

Пример использования Open Graph для статейного сайта

<!-- Open Graph -->
<meta property="og:type"                content="article" />

<meta property="article:published_time" content="{Дата размещения статьи}" />
<meta property="article:modified_time " content="{Дата изменения статьи}" />
<meta property="article:author"         content="{Автор статьи}" />
<meta property="article:section"        content="{Категория}" />
<meta property="article:tag"            content="{Тег статьи}" />

<meta property="og:title"               content="{Заголовок статьи}" />
<meta property="og:description"         content="{Описание статьи}" />
<meta property="og:url"                 content="{Ссылка на статью}" />
<meta property="og:image"               content="{Ссылка на изображение статьи}" />
<meta property="og:site_name"           content="{Название сайта}" />
<meta property="og:locale"              content="ru_RU" />
<!-- /Open Graph -->

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

<meta property="article:tag" content="javascript" />
<meta property="article:tag" content="php" />

admin

10/03/2020 17:37

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.