Выводим микроразметку в разных ситуациях
Created
September 25, 2018 12:04
-
-
Save aktaumag/0bd19b252f4cee771b1a106cd0025e31 to your computer and use it in GitHub Desktop.
WPHeader - разметка шапки сайта
Обязательно: заголовок, описание
НЕ обязательно: ключевики
<header itemscope itemtype="http://schema.org/WPHeader">
<meta itemprop="headline" content="Название сайта">
<meta itemprop="description" content="Описание сайта">
<meta itemprop="keywords" content="асфальт, москва, недорого, доставка">
</header>
или
<header itemscope itemtype="http://schema.org/WPHeader">
<h1 itemprop="headline">Название сайта</h1>
<span itemprop="description">Описание сайта</span>
<meta itemprop="keywords" content="асфальт, москва, недорого, доставка">
</header>
SiteNavigationElement - разметка для главного меню сайта
Для себя принял решение, что правильно делать так:
(вложенные/выпадающие подменюшки не размечаем)
<?php $wsmmlinkpos = 0; ?>
<ul itemscope itemtype = "http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<meta itemprop="position" content="<?=++$wsmmlinkpos?>">
<a itemprop="url" href="урл адрес первой ссылки"><span itemprop="name">Название первой страницы</span></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<meta itemprop="position" content="<?=++$wsmmlinkpos?>">
<a itemprop="url" href="урл адрес второй ссылки"><span itemprop="name">Название второй страницы</span></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<meta itemprop="position" content="<?=++$wsmmlinkpos?>">
<a itemprop="url" href="урл адрес третей ссылки"><span itemprop="name">Название третей страницы</span></a>
</li>
</ul>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ItemList",
"itemListElement": [{
"@type": "SiteNavigationElement",
"position": "1",
"url": "урл адрес первой ссылки",
"name": "Название первой страницы"
},{
"@type": "SiteNavigationElement",
"position": "2",
"url": "урл адрес второй ссылки",
"name": "Название второй страницы"
},{
"@type": "SiteNavigationElement",
"position": "3",
"url": "урл адрес третей ссылки",
"name": "Название третей страницы"
}]
}
</script>
хотя везде советуют так:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="#">Link</a></li>
<li itemprop="name"><a itemprop="url" href="#">Link</a></li>
<li itemprop="name"><a itemprop="url" href="#">Link</a></li>
</ul>
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="mysite.com/news/"><span itemprop="name">Новости</span></a>
<a itemprop="url" href="mysite.com/articles/"><span itemprop="name">Статьи</span></a>
<a itemprop="url" href="mysite.com/contact/"><span itemprop="name">Контакты</span></a>
</nav>
WPFooter - разметка футера
обязательно: год копирайта
<footer itemscope itemtype="http://schema.org/WPFooter">
<div>MySite.com<span itemprop="copyrightYear">2017</span>. Все права защищены</div>
</footer>
PostalAddress - разметка адреса (можно разметить просто в футере)
<address itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="name">название сайта</div>
<div>
<span itemprop="postalCode">110575</span>,
<span itemprop="addressLocality">Россия, Москва</span>,
<span itemprop="streetAddress">ул. Ленина</span>
</div>
<div itemprop="telephone">8-212-85-06</div>
<div itemprop="email">[email protected]</div>
</address>
WPSideBar - разметка сайдбара (название виджетов в боковой колонки)
<aside itemscope itemtype="http://schema.org/WPSideBar">
<section>
<h3 itemprop="name">Группа ВКонтакте</h3>
<!-- код виджета -->
</section>
<section>
<h3 itemprop="name">Страница Facebook</h3>
<!-- код виджета -->
</section>
<section>
<h3 itemprop="name">Последние новости</h3>
<!-- код новостей -->
</section>
<section>
<h3 itemprop="name">Мой опрос</h3>
<!-- код опроса -->
</section>
</aside>
mainEntityOfPage - указываем главную разметку сайта (основной элемент страницы)
Все страницы по умолчанию имеют разметку WebPage.
Как-будто вместо <body> написано <body itemscope itemtype="http://schema.org/WebPage">
На странице может быть много разных разметок и даже если вставить только одну, то по сути их как-будто две, учитывая WebPage.
Нужно вставить этот тег внутрь самой важной из разметок <link itemprop="mainEntityOfPage" href="канонический-адрес"> , чтобы указать её приоритет над другими.
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="mainEntityOfPage" href="канонический-адрес-текущей-страницы">
<span itemprop="name">Название продукта</span>
...
</div>
itemprop="mainEntity" - как и первый вариант, но вроде бы хуже и кажется валидацию не проходит. Если не известна каноническая ссылка, то указываем так:
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Название продукта</span>
...
</div>
AggregateRating - разметка рейтинга
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="3.92">
<meta itemprop="ratingCount" content="133">
</div>
Organization +Review +AggregateRating - разметка организации с отзывами и рейтингом
разметка для организации +Place (место), +LocalBusiness (местная фирма), +Restaurant (ресторан)...
Без рейтинга отзывы не разметить.
<div itemscope itemtype="http://schema.org/Organization">
<link itemprop="mainEntityOfPage" href="https://mysite.com/">
<link itemprop="url" href="https://mysite.com/">
<meta itemprop="name" content="MySite.com">
<meta itemprop="description" content="Это мой сайт для меня">
<meta itemprop="image" content="https://mysite.com/og-img.jpeg">
<meta itemprop="logo" content="https://mysite.com/logo.jpeg">
<div class="container">
<h2>Отзывы</h2>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="5">
<meta itemprop="ratingCount" content="3">
</div>
<div>
<div class="rewiew_item" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="rewiew_text" property="reviewBody">Текст отзыва</div>
<meta property="reviewRating" content="5">
<div property="datePublished">2006-06-19</div>
<div itemprop="author">Имя автора</div>
</div>
<div class="rewiew_item" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="rewiew_text" property="reviewBody">Текст отзыва</div>
<meta property="reviewRating" content="5">
<div property="datePublished">2006-06-14</div>
<div itemprop="author">Имя автора</div>
</div>
<div class="rewiew_item" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="rewiew_text" property="reviewBody">Текст отзыва</div>
<meta property="reviewRating" content="5">
<div property="datePublished">2006-05-28</div>
<div itemprop="author">Имя автора</div>
</div>
</div>
</div>
</div>
Ещё, чтобы не забыть расписать
http://schema.org/Article - разметка статьи с контентом (статья, блог, новость)
(обязательно: ) (НЕ обязательно: ) - название статьи, текст статьи, описание, имя автора статьи, дату публикации, рубрику, изображения, видео и т.д.
http://schema.org/Comment - разметка комментария
(обязательно: ) (НЕ обязательно: ) - имя комментатора, дата, текст комментария
http://schema.org/Product - разметка товара +Offer (предложение), +AggregateOffer (сводное предложение)
http://schema.org/ItemList - разметка списка любых сущностей (чаще всего применяется к товарам на странице каталога)
https://schema.org/HowTo (http://schema.org/HowToSection) (http://schema.org/HowToTip) - Для инструкций по самостоятельной работе (подходит для пошаговых руководств и т.д.)
http://schema.org/BlogPosting - Область списка анонсов на главной, рубриках и архивов
(обязательно: ) (НЕ обязательно: ) - название статьи, текст статьи, описание, имя автора статьи, дату публикации, рубрику, изображения, видео и другие;
http://schema.org/ContactPage - Страница контактов
http://schema.org/Person (http://schema.org/Person) Персона (тип для описания человека)
http://schema.org/Event Событие (тип для проводимых мероприятий)
http://schema.org/WPAdBlock - Реклама
разметка рекламного блока (наверное своей внутренней рекламы, когда можно разметить название, описание и т.д.)
https://schema.org/Question - Вопросы и ответы (блок с часто задаваемыми вопросами)
Творческие произведения: CreativeWork (творческое произведение), Book (книга), Movie (фильм), MusicRecording (музыкальная запись), Recipe (рецепт), TVSeries (телесериал)...
Встроенные нетекстовые объекты: AudioObject (аудио), ImageObject (изображение), VideoObject (видео)
Изображение (itemscope="" itemtype="https://schema.org/ImageObject")
https://schema.org/LikeAction - узнать подробнее. Есть и другие Акшионы.
https://schema.org/WebSite (разузнать подробности применения) (WebSite представляет собой набор связанных веб-страниц и других элементов, обычно обслуживаемых из одного веб-домена и доступных через URL-адреса.)
BreadcrumbList - разметка для хлебных крошек
Обращаем внимание, что у последнего элемента нет ссылки и ссылка прописана в meta теге
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="item" content="https://example.com/dresses/real/man" />
<span itemprop="name">Real Dresses</span>
<meta itemprop="position" content="3" />
</li>
</ol>
Источник: https://t.me/drmaxseo/56
Как выбрать категорию бизнеса для микроразметки.
Все компании должны добавлять разметку Organization - Schema.org на свои сайты. С помощью этой разметки вы подтверждаете поисковым системам кто вы и чем занимаетесь.
Если у вас правильная, развернутая страница «О компании» с расписанными видами деятельности, юридическими и физическими реквизитами, с корпоративными изображениями компании/завода/офиса – то рекомендую внедрять структурированные данные Organization и на главную, и на страницу «О компании». Разметка (структурированные данные) должны быть максимально заполнены.
В иных местах и на иных страницах эта разметка не нужна.
Здесь указываем (и это минимум, который вы должны включить в разметку):
• Тип компании
• Название компании
• Официальный сайт
• Адрес
• Официальный логотип
• Описание
• Социальные аккаунты
• Уникальный идентификационный URL
Оффлайн компании должны использовать «Корпорацию», а не более общую «Организацию». Собственно говоря, большинство компаний должны использовать Corporation, как более точный тип, чем просто "Организация" (если нет иных типов первого уровня, более подходящих для вас).
Большинство местных (локальных/региональных) предприятий также найдут свою категорию, которая им больше подходит.
В идеале вы должны выбрать ту же категорию, что и в Google My Business (GBP). Однако, поскольку My Business и Schema.org не используют одну и ту же категоризацию, это не всегда возможно. Выберите максимально близкое совпадение. Их более 100 штук, так что можно выбрать подходящее.
Если вы не нашли максимально подходящую категорию для своего бизнеса, вы можете создать ее. Найдите страницу в Википедии, которая раскрывает вашу бизнес-категорию, добавьте ее в конец этого URL
http://www.productontology.org/doc/
и добавьте «additonalType» к вашей разметке.
Например, если я управляю пивнушкой – разливушкой и хочу достаточно точно описать свой магазинчик, то LiquorStore не совсем подходит.
Ищем описание пивного магазина (Beer Shop) в Википедии:
https://en.wikipedia.org/wiki/Beer_shop
берем Beer_shop - часть URL после /wiki/ и подставляем эту часть к productontology.org. Вот что выходит:
http://www.productontology.org/doc/Beer_shop
Для нас крайне важно описание (реферат), которое продуктонтология подтягивает из вики. Опираясь на это описание Google и будет выстраивать сущности, связанные с этой пивнушкой.
В итоге получаем вот такую конструкцию:
"additionalType" : "http://www.productontology.org/doc/Beer_shop "
Которую и добавляем в свою микроразметку
————————-
цитируется по "SEO Монстр Next"
Разметка формы поиска
Легче добавить это после формы поиска, чем в саму форму пытаться внедрить разметку.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://wseo.pw/",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://wseo.pw/search/?q={input-name}"
},
"query-input": "required name=input-name"
}
}
</script>
Search
- Wrap search components in a parent element
role="search"to increase their discoverability to assistive technologies. - Whenever possible, use the
labelelement to explicitly associate text with form elements. Theforattribute of the label must exactly match theidof the form control. - Some form fields do not need explicit
labelelements, when next to a button with descriptive text. Ex. search field next to a button labeled search. In these cases you should still have alabelin the markup, but you can hide it visually. - Note that placeholders are not recognized by all assistive technologies, and thus are not adequate replacements for appropriate labeling. Additionally, assistive technologies that do announce placeholders will read the placeholder first, then the input's label and then type of input. So be sure not to repeat an input's label as its placeholder, otherwise it will be announced multiple times.
WCAG 2.1 Guidelines
1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)
4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
Option #1: Search Input with Visible Label
<div role="search">
<label for="search_1" style="display: block;">Search the site:</label>
<input type="search" name="search" id="search_1" class="search-form__input">
<button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
</div>
Option #2: Hide the label element
<div role="search">
<label for="search_2" class="visuallyhidden">Search the site</label>
<input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for...">
<button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
</div>
Option #3: Use aria-label
<div role="search">
<input type="search" name="search" aria-label="Search">
<button type="submit"><span class="visuallyhidden">Perform </span>Search</button>
</div>
Show Markup Example
Copy
<section class="search-section"> <h3>Option #1: Search Input with Visible Label</h3> <div role="search"> <label for="search_1" style="display: block;">Search the site:</label> <input type="search" name="search" id="search_1" class="search-form__input" /> <button type="submit"><span class="visuallyhidden">Perform</span>Search</button> </div><div class="break"></div>
<h3>Option #2: Hide the label element</h3>
<div role="search">
<label for="search_2" class="visuallyhidden">Search the site</label>
<input type="search" name="search" id="search_2" class="search-form__input" placeholder="search for..." />
<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>
</div><div class="break"></div>
<h3>Option #3: Use aria-label</h3>
<div role="search">
<input type="search" name="search" aria-label="Search">
<button type="submit"><span class="visuallyhidden">Perform</span>Search</button>
</div>
</section>
Copy
Copied!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
LocalBusiness +условие для WordPress, чтобы выводить только на главной