Как и где прописывается h1 и h2 ?

В H1 обычно прописывается заголовок статьи, а H2, H3 внутри статьи. Желательно соблюдать иерархию (расположение на примерной странице):

H1 - 1 раз на странице
текст
H2 (это позаголовок внутри статьи)
текст
H2
текст

Или так:

H1 - 1 раз на странице
текст
H2 (это позаголовок внутри статьи)
текст
H3
текст
H3
текст
H2
текст
H3
Текст
H3
текст

Спасибо за пример!
А сколько H1 должно прописываться на всём сайте, у меня интернет-магазин ?

Не всегда именно так, хотя в целом верно. H1 может быть же и в хедере сайта. В этом случае заголовок статьи должен быть H2.

Один H1 на страницу

Не обязательно один

обязательно

Если я правильно понял, страница это например: категория, товар,
Т.е. к каждой категории и товару по одному H1 ?

Страница - эта любая одна страница, которая в данный момент открыта во вкладке браузера, хоть страница товара, хоть страница категории. H1 - только один, остальные - хоть сколько, но не злоупотреблять. По идее, H2 - это подзаголовки, которые делают текст более понятным, делят его на логические куски и т.д.

Спасибо, что на пальцах объяснил, а то я уже все уши сломал.

В спецификациях HTML5 допускается использовать несколько H1 на странице.
Пруф: https://www.w3schools.com/tags/tag_main.asp
Главное правильно расставить секционные элементы. Один H1 на страницу - это устаревшее правило.

Может кто объяснить, скопировал из кода страницы <h1>Кровати</h1> Начальная h1 выделена красным, а закрывающая h1 выделена жёлтым, как это понимать?

Я очень подробно изучал этот подход с точки зрения семантического анализа поисковыми роботами. Перечитал множество англоязычных ресурсов. Увы, не могу сейчас быстро найти подходящие ссылки на пруфы, но спецы по машинному анализу дают советы всё же не использовать более одного H1.

Важно понимать, что спецификация HTML5 слабо связана с работой поисковых систем. Они могут её учитывать, а могут и не учитывать. В спецификации говорится "Допустимо использовать H1", а не "Нужно использовать H1". Там однозначно указано "Секционный элемент должен содержать заголовок", так как его отсутствие вызывает ошибку валидатора. Однако для второстепенных секционных элементов H3 и ниже предпочтительнее.

Штааа? Ошибка валидатора? H3 и ниже предпочтительнее? Дикая дичь...

Да, ошибка валидатора. Проверь, прежде чем писать. H3 имеется в виду для второстепенного содержимого. Например, когда используется <section> и в нем список последних статей. Заголовок такого <section> должен быть H3 и ниже.

Тут важно понимать, что World Wide Web Consortium пишет стандарты не для поисковых машин. Он делает это для пользователей интернета. HTML5 улучшает семантику с помощью <article>, <main>, <aside> и др. Семантика, прежде всего для людей с ограниченными возможностями, использующих экранные дикторы. Такая программа может ему однозначно сказать - «здесь навигация, здесь основное содержимое, а здесь блок информации не относящийся к основному содержимому.

Поисковой робот может лишь сделать себе отметку, что ты способствуешь улучшению доступности интернета за счет HTML5, но базовые принципы семантического анализа ещё никто не отменял. Единственный возможный анализ важности текстового содержимого по-прежнему жестко привязан к структуре заголовков.