HTML5 и Schema.org
Проверяйте, комментируйте, делитесь результатами.
Проверяем шапку сайта
- Это дочерний элемент для BODY Не вложен в main, article, section, aside, nav, blockquote, details, dialog, fieldset, figure, td
-
Весь блок взят в тег
<header role="banner">
role banner — содержит в основном контент ориентированный на сайт, а не контент специфичный для страницы. -
Разметить логотип
- SRC — очень большой Jpg/Png, а SRCSET — в формате Svg Если нет SVG для SRCSET, то растровый, но в подходящих размерах для выделяемой под логотип области.
- Schema.org — Organization В разметку можно добавить название компании/сайта, слоган (url, logo, name, slogan)
-
Основная сквозная навигация
Есть хорошая инструкция с примерами, но без разметки.
-
Весь раздел взят в тег
<nav aria-label="Main Menu">
-
Есть скрытый заголовок «Main Menu»
Например:
<h2 class="visuallyhidden">Main Menu</h2>
-
Желательно оформить как не нумерованный UL список
<ul role="menubar">
вместе с<li role="menuitem">
Это не обязательно должен быть UL список, но уж точно не OL, если порядок ссылок не имеет значения. - Schema.org — SiteNavigationElement
-
Весь раздел взят в тег
-
Сквозная форма поиска по сайту
Есть хорошая инструкция с примерами, но без разметки.
-
Role search у формы
<form role="search">
-
Type search у поля ввода
<input type="search" placeholder="search for...
- Placeholder в тематику сайта — «Найти ...»
- Label «Поиск по сайту» можно сделать скрытым
- Текст на кнопке «Выполнить поиск» можно сделать скрытым
- Внедрить Schema.org — SearchAction
-
Role search у формы
Проверяем подвал сайта
- Это дочерний элемент для BODY Не вложен в main, article, section, aside, nav, blockquote, details, dialog, fieldset, figure, td
-
Весь блок взят в тег
<footer role="contentinfo">
role contentinfo — идеально подходит для указания навигационных ориентиров, авторских прав, ссылок на заявления о конфиденциальности, контактов самого сайта (а не автора статьи). -
Разметить © copyright
-
Использовать тег
<small>
— для копирайта и прочих юр.примечаний - Schema.org — WPFooter В разметку можно добавить год и владельца (copyrightYear, copyrightHolder)
-
Использовать тег
-
Нижняя сквозная навигация
Может быть отдельно несколько навигационных разделов/колонок.
-
Каждый раздел взят в тег
<nav>
- Заголовки H2-H6 — у всех разделов можно сделать скрытым
- Это не обязательно UL список, но уж точно не OL, если порядок ссылок не имеет значения.
-
Каждый раздел взят в тег
-
Контактная информация
-
Есть тег
<address>
для контактов - Schema.org — PostalAddress Разметить name, telephone, email и пр.
-
Ссылки на юр.страницы в тег
<small>
Слышал рекомендации, что таким ссылкам лучше ставить nofollow, но при этом слышал, что ПС алгоритмы любят политику конфиденциальности и прочие страницы.
-
Есть тег
Проверяем хлебные крошки (BreadCrumbs)
-
Весь раздел взят в тег
<nav aria-label="breadcrumbs">
- Есть скрытый заголовок «Breadcrumbs»
-
Это нумерованный OL список
<ol>
- Есть Schema.org — BreadcrumbList
Проверяем элементы пагинации
На одной странице может быть несколько элементов пагинации у разных разделов.
Есть хорошая инструкция с примерами
-
Весь раздел взят в тег
<nav aria-label="pagination">
- Раздел с пагинацией находится внутри той секции, к элементам которой он относится.
- Есть скрытый заголовок (например: «Pagination»)
-
Это нумерованный OL список
<ol>
-
У ссылки на текущую страницу атрибут aria-current="page"
<a aria-current="page" href="...">
- Ставим aria-disabled="true" — у не активных Next и Prev
Проверяем шаблон основного контента (Main)
У сайта может быть несколько разных шаблонных страниц. Проверять нужно каждый отдельно: шаблон товара, шаблон категории, шаблон статьи в блоге, главная и прочее.
- Это дочерний элемент для BODY Не вложен в article, section, aside, nav, blockquote, details, dialog, fieldset, figure, td
-
Весь блок взят в тег
<main>
Желательно сделать его в коде первым после body, выше всех article, section, aside, nav, blockquote, details, dialog, fieldset, figure, td - Желательно первым элементом внутри main сделать заголовок h1 Может быть вложен в header, но выше всех article, section, aside, nav, blockquote, details, dialog, fieldset, figure, td
-
Разметка Schema.org
- Внедрить разметку Schema.org в зависимости от содержимого Товар/услуга, Статья, Страница контактов, Пошаговая инструкция, Событие, Книга, Фильм, Сериал, Рецепт и прочее…
- Использовать mainEntityOfPage или mainEntity в разметке Schema.org Чтобы указать на самый важный элемент страницы.
-
Дата публикации и дата изменения
-
Использовать тег time с атрибутом datetime
Например:
<time datetime="2022-01-25 19:00">25 января</time>
- Поместить в Header или Footer (зависит от важности даты для контента) Лучше использовать Footer, если информация остаётся актуальной ещё долгое время
-
Использовать тег time с атрибутом datetime
Например:
-
Автор контента
- Поместить в Header или Footer (зависит от важности автора для контента) Использовать Header, только если контент является личным (собственное мнением автора, случай из его жизни и т.д.)
-
Разметить Schema.org — Person
Желательно добавить ссылки на соцсети, личный блог автора и прочее доказательство реальности.
Можно сделать это в скрытом виде используя в разметке
<link itemprop="sameAs" href="ссылка-на-автора">
. Если у автора есть свой персональный сайт или страница о нём, то указываем ссылку в<link itemprop="url" href="ссылка-на-сайт-или-страницу">
.
-
Рейтинг
- Разметить рейтинг контента Schema.org — AggregateRating
-
Отзывы
Этот список можно использовать и для проверки комментариев, но только с соответствующей разметкой Schema.org — Comment
-
Весь раздел взять в тег
<section>
Конечно он должен быть вложен в main и являться именно его дочерним разделом - Заголовок h2 Сделать название заголовком (если оно просто как текстовый элемент) или добавить скрытый (если по дизайну не нужен заголовок).
- Форма для отправки отзыва внутри этой секции Бывает так, что форма для отправки отзыва за пределами секции с самими отзывами, а это не правильно.
-
Каждый отдельный отзыв
-
Отзыв взять в тег
<article>
- Заголовок h3 Номер заголовка не имеет значения, но рекомендую использовать иерархический порядок для сохранения совместимости. Код пытается понять не только гугл )))
- Разметить Schema.org — Review Желательно внутри использовать ещё разметку Person для автора отзыва
-
Для даты отзыва использовать тег time с атрибутом datetime
Например:
<time datetime="2022-01-25 19:00">25 января 22г.</time>
-
Ответ на отзыв вкладывается в раздел при помощи тега
<section>
и имеет заголовок h4
-
Отзыв взять в тег
-
Весь раздел взять в тег
-
Раздел «Похожие» / «Рекомендуемые» / «С этим товаром покупают» / «Акции» / «Популярные»
-
Весь раздел взять в тег
<section>
Должен быть дочерним разделом для main, если выборка зависит от текущего контента, иначе должен быть за пределами блока main и находиться в теге footer - Заголовок h2 Сделать название заголовком (если оно просто как текстовый элемент) или добавить скрытый (если по дизайну не нужен заголовок).
-
Каждая сущность (статья / товар / услуга и прочее)
-
Раздел с сущностью взять в тег
<article>
- Заголовок h3
-
Разметить Schema.org в зависимости от сущности
Можно указать в разметке
<link itemprop="mainEntityOfPage" href="ссылка-на-страницу-сущности">
-
Раздел с сущностью взять в тег
-
Весь раздел взять в тег
-
Ответы на вопросы — FAQ
-
Весь раздел взять в тег
<section>
Должен быть дочерним разделом для main, но если это общие вопросы по сайту, то может быть за пределами блока main и находиться в теге footer - Заголовок h2
- Разметить Schema.org — FAQPage
-
Каждый вопрос с ответом
-
Взять в тег
<section>
или<article>
- Вопрос оформляем как заголовок h3
-
Взять в тег
-
Весь раздел взять в тег
Проверка семантической вёрстки прочих элементов страницы
Сквозной элемент, или шаблонный, или элемент внутри основного контента (просто общие правила для проверки).
-
Секционные элементы размечены правильно
<section>
— является частью родительского раздела. Содержит заголовок.<article>
— относится к родительскому разделу, но при этом сам по себе. Содержит заголовок.<nav>
— любой навигационный раздел. Содержит заголовок.<aside>
— косвенно связанная или не связанная с контентом инфа. Может содержать заголовок.<header>
— важная доп.инфа о контенте.<footer>
— не важная доп.инфа о контенте.<address>
— контакты относящиеся к предку article или body.
-
Группирующие элементы применяются правильно
<p>
— абзац. Можно не использовать и писать прям внутри<div>
элемента, но лучше подбирать наиболее подходящий тег к смыслу текста.<hr>
— переход к другой теме внутри секционного элемента.<pre>
— когда надо сохранить исходное форматирование и отступы. Для отображения блока кода можно использовать<pre><code>
<ul>
+<li>
— список, где порядок не важен.<ol>
+<li>
— список, где важен порядок пунктов.<menu>
+<li>
— список действий (лайк, в сравнения, в корзину…).<dl>
+<dt>
и<dd>
— список значений (цвет: белый; размер: XXL).<blockquote>
— цитата. * Является частью родительского блока, но содержимое цитаты не влияет на него.<figure>
и<figcaption>
— приложение (вложение). * Является частью родительского блока, но содержимое не влияет на него.
-
Проверяем фразовые/текстовые элементы
<strong>
— важная осмысленная фраза в большом тексте.<b>
— ключевые слова страницы или сайта.<i>
— термины, иностранные слова, алегории. Не использовать для вставки шрифтовых иконок.<br>
— НЕ для разделения тематических групп в абзаце и НЕ для переноса отдельных строк. Это для многострочного отображения единой информации (например: стих или почтовый адрес).<time>
— для обозначения даты и/или времени.<data>
+<value>
— это не для обозначения даты, а для указания значения выраженного текстом<data value="7">Семь</data>
- ... и
многие другие >>>
Видео с докладом
Полезные ссылки
- Описание семантических значений тегов — html.spec.whatwg.org
- Проверка ошибок в HTML коде — validator.w3.org
- Проверка ошибок в CSS стилях — jigsaw.w3.org/css-validator
- Список разметок Shema.org — schema.org
- Проверка ошибок в разметке Shema.org — validator.schema.org
- Проверка сниппетов — search.google.com/test/rich-results
Комментарии
Как обычно, мы открыты для общения и вы можете смело писать свои комментарии, задавать вопросы и просто делиться мнением. Ваши отзывы очень важны для нас!