Разметка html5 страницы каталога товаров

399

18 февраля 2017, 04:51

Доброго времени суток. С выходом HTML5 появилось множество различных дополнительных тегов и многое другое. А я хочу использовать их правильно и как следует. Изучил несколько статей в интернете (для примера). Но хочу на всякий случай уточнить некоторые нюансы.

Планируется страница, которая выводит список товаров определённой категории. На странице будет: главное меню для навигации по сайту, сайтбар с фильтрами, карточки товаров. Разметку в общем виде я себе представляю следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <nav>Основная навигация по всему сайту</nav>
        <main>
            <h1>Название категории товара</h1>
            <aside>Фильтр</aside>
            <h2>Название товара</h2>
            <h2>Название товара</h2>
            <h2>Название товара</h2>
            <h2>Название товара</h2>
            <h2>Название товара</h2>
        </main>
    </body>
</html>

Насчёт тега <main> у меня сомнения. Быть может стоит выбрать <article> (<content> устарел)? Что касается карточке товаров, то они все в отдельных дивах и т.п. - их я опустил для наглядности.

Если поместить код в HTML 5 Outliner, то окажется, что <nav>, которая не входит в <main> учитывается в структуре и должна иметь заголовок (т.к. его нет, то отображается как Untitled Section). С <aside> схожая ситуация - должен иметь заголовок. Т.е. поскольку они должны иметь заголовки, эти блоки как-то учитываются? И быть может их заменить на обычные div? Или что-то ещё?

Отсюда вытекают вопросы: правильно ли я выбрал способ разметки документа для страницы с карточками товаров? Верный ли порядок представления информации? Использую ли я правильные теги для разметки? Как быть с заголовками у <nav> и <aside>? Как это вообще всё сказывается на SEO и т.п. и т.д.? Есть быть может какие-то дополнительные рекомендации?

Особняком стоит вопрос микроразметки каждого товара. Сейчас в самом приоритете ( если не ошибаюсь) JSON for Linking Data. Есть, конечно, schema.org, но вроде как тот же гугл уже отдаёт предпочтение не этой технологии, а JSON for Linking Data. Оно и ясно - намного удобнее работать. Кто нибудь работал с этой технологией в ключе описания страницы с карточками товаров, а не одного отдельного товара?

upd. В итоге пришёл к структуре документа вида:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <nav>Основная навигация по всему сайту</nav>
        <aside>Фильтр</aside>
        <article>
            <h1>Название категории товара</h1>
            <section><h2>Название товара</h2></section>
            <section><h2>Название товара</h2></section>
            <section><h2>Название товара</h2></section>
            <section><h2>Название товара</h2></section>
            <section><h2>Название товара</h2></section>
        </article>
    </body>
</html>

upd2.

<!DOCTYPE html>
<html>
    <head>
        <title>Сайт</title>
    </head>
    <body>
        <header>
            <h1>Название сайта</h1>
            <nav><h2>Навигация по сайту</h2></nav>
        </header>
        <article>
            <h2>Название категории товара 1</h2>
            <aside><h3>Фильтр</h3></aside>
            <section><h3>Название товара 1</h3></section>
            <section><h3>Название товара 2</h3></section>
            <section><h3>Название товара 3</h3></section>
            <section><h3>Название товара 4</h3></section>
        </article>
    </body>
</html>

Имеет вид:

Однако вопросы всё ещё актуальны. Помогите разобраться, пожалуйста.

Answer 1

Я рекомендую вам следующий исходный код:

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
       <main> 
       <h1>Название магазина/сайта</h1>         
       <nav>Основная навигация по всему сайту</nav> 
            <h2>Название категории товара</h2> 
            <aside>Фильтр</aside> 
            <h3>Название товара</h3> 
            <h3>Название товара</h3> 
            <h3>Название товара</h3> 
            <h3>Название товара</h3> 
            <h3>Название товара</h3> 
       </main> 
    </body> 
</html>

Здесь иерархия идёт вниз от названия магазина.сайта. Данная структура сообщает, что указанная категория товара и все наименования товара являются частью данного магазина/сайта. Не забывайте, что из элементов h поисковики берут информацию, так называемого Длинного Хвоста. Спецификация элемента main:

The tag specifies the main content of a document - Тег <главная> определяет основное содержание документа

Здесь нет четкого требования для этого элемента. Я считаю, что ваше главной содержание указано в этом элементе, но и ваш вариант не является ошибкой. Этот элемент должен применяться на странице только в единственном экземпляре. Элементы article и section могут применяться многократно. Все эти элементы являются семантическими элементами стандарта ХТМЛ5. С ними вы можете фрагментировать/сегментировать исходный код страниц. Кроме указанного вами HTML 5 Outliner, вы можете применять валидатор W3, с выбором фильтра outline. Результат смотрите внизу в секциях Heading-level outline и Structural outline. На мой взгляд этот инструмент даёт более четкую визуализацию структуры страницы. Для списка товаров, я рекомендую вам применять структурированную разметку OfferCatalog. Внизу вы можете видеть примеры этой разметки во всех применяемых формах. Этая разметка является дочерней/уточняющей разметкой ItemList.