Микроразметка WPHeader и WPFooter: что такое, зачем нужна, примеры
|
Содержание |
Об авторе: Валерий Рыков В интернет-маркетинге с 2014 года |
Разметка информации, размещенной на сайте, необходима для явного указания поисковым роботам, что именно содержится на странице. В стандарте schema.org существует множество форматов для разных типов ресурсов и блоков контента, а WPHeader и WPFooter, как следует из названий, необходимы для информации в шапке и футере сайта соответственно – они указывают на общий контент, размещенный в данных блоках.
Данные форматы, в первую очередь, подойдут информационным сайтам – блогам, инфопорталам. Отметим, что для СМИ микроразметка очень важна, так как такие ресурсы обходят «быстророботы», а разметка позволит ускорить индексацию. Кроме того – на них не получится использовать разметку по типу Organization, так как они не содержат контактных данных/организационной информации, поэтому для информации о компании без указания контактов отлично подойдут WPHeader и WPFooter (однако заметим, что можно использовать и на коммерческих площадках, одновременно вместе с Organization, ниже в тексте будет пример).
Еще отметим важный момент, что настройка данных типов микроразметки не влияет на представление страниц в результатах поиска.
WPHeader
Сразу приведем пример кода разметки в теле <head>:
<head itemscope itemtype="https://schema.org/WPHeader">
<title itemprop="name">Агентство интернет-маркетинга полного цикла в Москве | Рекламная digital студия «Increase Sales»</title>
<meta itemprop="description" name="description" content="✔ Маркетинговое интернет агентство полного цикла «INCREASE SALES» предлагает заказать услуги по комплексному продвижению Вашего бизнеса в сети Интернет. Узнать условия рекламы и актуальные цены можно по телефону в Москве: ☎ 8 920 230 70 83">
<meta itemprop="keywords" name="keywords" content="маркетинговое агентство продвижение бизнеса интернет реклама digital agency marketing москва">
<div itemscope itemtype="https://schema.org/ImageObject">
<a href="https://ics-media.ru/" rel="home">
<img itemprop="url image" src="https://ics-media.ru/images/logo.png" alt="Логотип Increase Sales">
</a>
</div>
<link itemprop="cssSelector" href="/stylesheets/style.css" type="text/css" rel="stylesheet">
<link itemprop="cssSelector" href="/stylesheets/custom.css" type="text/css" rel="stylesheet">
</head>
Данную разметку можно настраивать как в теле <head>, так и в теле <header>.
Несколько пояснений к приведенному коду:
- WPHeader не имеет возможности указания в себе изображения (ссылки на логотип в шапке), поэтому для него в коде используется отдельный формат https://schema.org/ImageObject;
- В коде используются селекторы name (его указываем в основном заголовке страницы – в Title, можно использовать и в H1, но, как правило, данный заголовок указывается уже не в шапке сайта, а в области контента), description, keywords (для соответствующих тегов);
- Селектор cssSelector предназначен для указания ссылки на CSS файлы.
Все поддерживаемые поля можно посмотреть на странице формата микроразметки: https://ruschema.org/WPHeader.
Отметим, что можно разметить по формату WPHeader только основные теги, тогда код будет проще:
<head itemscope itemtype="https://schema.org/WPHeader">
<title itemprop="name">Агентство интернет-маркетинга полного цикла в Москве | Рекламная digital студия «Increase Sales»</title>
<meta itemprop="description" name="description" content="✔ Маркетинговое интернет агентство полного цикла «INCREASE SALES» предлагает заказать услуги по комплексному продвижению Вашего бизнеса в сети Интернет. Узнать условия рекламы и актуальные цены можно по телефону в Москве: ☎ 8 920 230 70 83">
<meta itemprop="keywords" name="keywords" content="маркетинговое агентство продвижение бизнеса интернет реклама digital agency marketing москва">
</head>
WPFooter
Обычно данный формат используют для разметки информации о «копирайте», пример кода:
<div itemscope itemtype="https://schema.org/WPFooter">
<meta itemprop="copyrightYear" content="2022">
<meta itemprop="copyrightHolder" content="Increase Sales">
(C) 2022. Increase Sales
</div>
В приведенном примере селектор copyrightYear отвечает за указание года (поддерживается только одна цифра в параметре, то есть указать в формате 2000-2022 нельзя), а селектор copyrightHolder указывает правообладателя. Аналогично WPHeader, все поддерживается селекторы можно посмотреть по ссылке https://ruschema.org/WPFooter.
Также как раз в футере коммерческих сайтов обычно указываются и контактные данные, поэтому можно совместить WPFooter и Organization, например, следующим образом:
<div itemscope itemtype="https://schema.org/WPFooter">
<div itemscope="" itemtype="https://schema.org/Organization">
<meta itemprop="name" content="Increase Sales">
Контактная информация:
<div itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress">
Почтовый адрес:
<span itemprop="streetAddress">Мичуринский проспект, 31 к7 3 этаж</span>
<span itemprop="postalCode">119607</span>
<span itemprop="addressLocality">Раменки район, Москва</span>
</div>
<p>
Звоните: <span itemprop="telephone"><a href = "tel:89202307083">8 920 230 70 83</a></span>
,E-mail: <span itemprop="email"><a href = "mailto:ps@ics-media.ru">ps@ics-media.ru</a></span>
</p>
</div>
<div class="copyright">(C)<span itemprop="copyrightYear">2022</span>. <span itemprop="copyrightHolder">Increase Sales</span></div>
</div>
В данном коде указан пример разметки контактных данных с помощью Organization (подробнее о данном типе разметки можно прочитать в этой статье) и информации о «копирайте» с помощью WPFooter.
Итоги
Несмотря на то, что форматы WPHeader и WPFooter не изменяют сниппеты страниц в поисковой выдаче, их настройка все равно рекомендуется, особенно для информационных ресурсов, чтобы улучшить индексирование поисковыми роботами и помочь им определить принадлежность контента соответствующим параметрам поиска и разметки.
Другие статьи в данном разделе:
