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

Рассмотрим, два стандарта микроразметки сайта: 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="{ccылка_на_лого}" />
    <meta itemprop="name" content="{название_сайта}">
</div>

Или так

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="{ваш_домен}">
        <img itemprop="logo" src="{ccылка_на_лого}" />
    </a>
    <meta itemprop="name" 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>

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

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

    <!-- дата публикации -->
    <time itemprop="datePublished" datetime="{дата_публикации}">
        {дата_публикации}
    </time>

    <!-- дата последнего изменения статьи -->
    <meta itemprop="dateModified" content="{дата_изменения}" />

    <!-- каноническая ссылка статьи -->
    <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"
    itemid="{каноническая_ссылка}"/>

    <!-- ссылка на превью статьи -->
    <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        <img itemprop="url image" src="{ссылка_на _превью}" />
    </span>

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

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

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

</article>

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

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

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

8. Микроразметка контактов - 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>

9. Микроразметка подвала сайта - 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

19/11/2019 09:44

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