Блог

Как получить больше кликов с помощью микрозаметки Ч2

09 апреля, 2019

Как получить больше кликов с помощью микроразметки (ч.2)

В предыдущей статье «Как получить больше кликов с помощью микроразметки»(ч.1) мы рассказали о том, что такое микроразметка, ее основных видах и важности структурированных данных на сайте.

Благодаря микроразметке:

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

Шаблоны микроразметки с помощью schema.org

По словарю Schema.org существует большое количество подтипов элементов, каждый из которых имеет много тегов для описания. Поэтому вид разметки можно подобрать для проектов разного вида: творческая работа (фотоснимки, книги, кинофильмы, статьи) мероприятия (концерты, фестивали, спектакли, выставки), некоммерческие, промышленные и сервисные организации, места с фиксированной локацией (парк, музей, театр), товары на продажу (кроссовки, велосипед или детская одежда).

Для микроразметки статьи используют такие данные – дата публикации, заголовок, изображение, автор, издатель и другие данные, как в примере:

<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="name">Заголовок статьи</h1>
    <p itemprop="description">Описание</p>
    <link itemprop="image" href="Картинка">
    <span itemprop="datePublished" content="Дата размещения">Дата размещения</span>
    <meta itemprop="dateModified" content="Дата изменения">
    <div itemprop="author" itemtype="http://schema.org/Person">
        <img itemprop="image" src="Фото автора"/>
        <span itemprop="name">Имя автора</span><
    </div>
</div>

Шаблон микроразметки для карточки товара выглядит так:

<div itemscope itemtype="http://schema.org/Product">
    <p itemprop="brand">Бренд</p>
    <h1 itemprop="name">Название товара</h1>
    <img itemprop="image" src="картинка"/>
    <р itemprop="description">Описание</p>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="Валюта"/>
        <span itemprop="price">Цена</span>
        <link itemprop="availability" href="http://schema.org/InStock"/>
    </div>
</div>⁠

Пример микроразметки организации, чаще всего используется для страницы контактов и имеет такие данные, как название,логотип, номер телефона и адрес месторасположения:

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

Шаблоны микроразметки с помощью Open Graph

Улучшение внешнего вида ссылок, размещенных в социальных сетях, можно начать с главных свойств Open Graph: заголовок страницы, тип объекта, URL изображения, канонический URL объекта.

Также можно внедрять дополнительные свойства: описание, локацию, видео- или аудиоматериал, язык и страну.

Пример микроразметки страницы Open Graph:

<meta property="og:title" content="Название" />
<meta property="og:description " content="Описание" />
<meta property="og:type" content="Тип объекта" />
<meta property="og:url" content="Ссылка" />
<meta property="og:image" content="Путь к картинки" />
<meta property="og:locale" content="Локация" />
<meta property="og:audio" content="URL-адрес звукового файла, который сопутствует этому объекту" />
<meta property="og:video" content="URL-адрес видео-файла, который сопутствует этому объекту" />
...