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

Проверяем подвал сайта

  • Это дочерний элемент для 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, если информация остаётся актуальной ещё долгое время
  • Автор контента
    • Поместить в 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>
    • ... и многие другие >>>

Видео с докладом

Полезные ссылки

Комментарии


Как обычно, мы открыты для общения и вы можете смело писать свои комментарии, задавать вопросы и просто делиться мнением. Ваши отзывы очень важны для нас!