H2 предшествует h1 в источнике, это нормально?

Question

ЕСЛИ я использую <h2> для заголовка левой боковой панели и <h1> для заголовка основной области содержимого, то в действительности в источнике и, если CSS отключен, в обоих случаях <h2> предшествует <h1>.

Это нормально? или я не должен использовать <h2> для заголовков левой боковой панели?

Обновление: 5 февраля

Пример добавления изображения

Структура заголовка http://easycaptures.com/fs/uploaded/235/1182330679.png

Почему я спрашиваю, потому что я всегда читаю во многих статьях <H1> должен быть первым заголовком на странице.

альтернативный текст http://www.crearecommunications.co.uk/seo-blog/wp-content/uploads/2009/11/heading-subheads.gif

Answer 1

Ну, учитывая семантику h-тегов, это , а не ОК. Ваши заголовки в готовом документе должны содержать схему документа, такую ​​как

 1. H1-Head
     1.1 H2-Head
         1.1.1 H3-Head
         1.1.2 H3-Head
         ...
     1.2 H2-Head
         1.2.1 H3-Head
         ...
     1.3 H2-Head
     ...

и пр.

Конечно, эта схема должна соответствовать хронологии появления тегов.

---

Обновление для вашего обновления

Я бы предложил следующую разметку

<h1><a>Main title of your site</a></h1>
<h2>Sidebar</h2>
    <h3>Sidebar Headline 1</h3>
    <h3>Sidebar Headline 2</h3>
    ....  
<h2>Main content</h2>
    <h3>Headline 1</h3>
    <h3>Headline 2</h3>
    ...

Знаете ли вы Плагин для веб-разработчиков Firefox ? Имеет функцию «Показать схему документа». Там вы можете легко проверить логику вашей разметки. И чтобы дать вам идею, один хороший и один плохой пример от pfizer.com и phizer.de (я думаю, что вы можете понять идею, даже если она немецкая - заголовки красного цвета говорят «Отсутствует заголовок»).

pfizer.com http://img246.imageshack.us/img246/1336/com.png

---

pfizer.de http://img96.imageshack.us/img96/1273/74591264.png

Кстати: Наличие всех этих h-тегов в разметке не обязательно означает, что все они должны быть видны ;-)!

Answer 2

Вы должны подумать об этом семантически . H1 должен предшествовать H2 в документе. H2 является подэлементом H1.

То, как я подхожу к странице, заключается в том, чтобы сначала кодировать ее в HTML, чтобы она имела смысл для пользователя без поддержки JavaScript и CSS.

Только тогда я буду беспокоиться о стилизации контента.

Answer 3

Вероятно, лучшим вариантом было бы иметь боковую панель после содержимого в html и использовать css, чтобы разместить ее там, где вы хотите.

Answer 4

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

На что вы нацелены? Вы продвигаете название компании или что компания делает / продает?

Я полагаю, если компания продает «красные виджеты», я хочу, чтобы «Красные виджеты» были h1 на странице продукта, «Виджеты» - h1 на странице списка продуктов, а «Мы продаем лучший красный» Белые и синие виджеты! быть h1 на домашней странице.

Если кто-то ищет «красные виджеты», они обычно ищут «красные виджеты», а не «ThisWidgetCompanyName». ThisWidgetCompanyName в теге заголовка поймает любого, кто ищет название компании, и, если есть много компаний с одинаковыми именами, они должны появиться в верхней части.

Answer 5

С точки зрения браузера, порядок тегов не имеет значения. Однако порядок h1 и h2 имеет семантическое значение для структуры вашего документа. Таким образом, наличие их в правильном порядке имеет значение.

Конечно, современное веб-приложение состоит не только из одного документа. Существуют «внешние» панели, которые не являются частью документа (боковые панели, панели и т. Д.). Таким образом, если вы хотите быть семантически «правильными», вы должны зарезервировать h1, h2 и остальное только для основного содержимого вашей страницы и использовать div и span для блочных и встроенных контейнеров, не принадлежат к семантической структуре вашего документа.

Answer 6

Семантически, вы захотите, чтобы теги <h2> шли после <h1> для структуры документа. В этом случае - имеет ли смысл боковая панель в потоке заголовков документа?

Из структуры, которую вы описали, кажется, что тег <h2> используется в качестве заголовка для контента, который может не относиться к контенту на конкретной странице. С точки зрения поисковой оптимизации, это может быть неоптимальным, если эти заголовки фактически не используются в контексте, а используются для стиля.

эта статья может прояснить немного больше: http://www.nathanrice.net/blog/ultimate-guide-to-wordpress-seo-optimized-heading-tags/

Answer 7

Поместите H1 вокруг вашего логотипа. Даже если этот логотип просто ссылка вокруг изображения. (Вы используете alt-теги, верно?) Проблема решена.

Answer 8

Вы можете разместить любой тег HTML в любом месте.

Hello

Hello

Отлично.