Можно ли использовать несколько тегов h1 на одной странице, но стилизовать их по-разному?

У меня есть веб-страница, на которой я использую теги h1 несколько раз в разных DIVs, и я стиль h1 для каждого div, чтобы быть подходящим размером.

например...

#content h1 {
  font-size:22px;
}

#left-nav h1 {
  font-size:14px;
}

#content .recent-news h1 {
  font-size:16px;
}

это нормально? Я беспокоюсь о SEO.

каков наилучший способ сделать это? Или я волновался?

11 ответов


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

H1 обозначает часть вашего содержимого как заголовок первого уровня. Поэтому, если у вас есть заголовок первого уровня в вашем навигационном div (например,<H1>Navigation Menu</H1>), конечно, это должно быть #nav h1.

Если у вас должно быть несколько H1s в вашем содержимом, зависит: если у вас есть блог, и каждая запись имеет свой собственный заголовок, это будут H1s. Однако, если у вашего блога есть заголовок (например,<H1>My Blog!</H1>), блог заголовок входа должен быть H2.

но это только теория. Перейти к тому, что читается, семантическая разметка. Вы можете лучше всего решить это, посмотрев на свой html и спросив себя: "это читается? Улучшится ли читаемость, если я сделаю это по-другому?'Ответ будет варьироваться от проекта к проекту.


Мэтт Каттс из Google ответил на более одного H1 на странице: хорошо или плохо? (5 марта 2009) с:

Ну, если есть логическая причина иметь несколько разделов, это не так плохо иметь, вы знаете, несколько h1s. Я бы обратил внимание на перестарался. Если вся ваша страница h1, Это выглядит довольно Creti, правильно? Так что не делайте все h1 а затем вы CSS, чтобы сделать его похожим обычный текст, потому что мы видим людей, которые являются конкурентами жаловаться что если пользователи когда - либо выключат CSS или CSS не загружается, это выглядит действительно плохой. Итак, вы знаете, это нормально иметь немного h1 здесь и тогда, возможно, есть два раздела на странице, и, возможно, есть немного h1 здесь.

но вы действительно должны использовать его для заголовков или заголовки, что намерение есть. Не просто бросить h1 везде, где вы можете на странице. Потому что я могу сказать вам, если вы просто бросите h1 везде на странице, люди пытались злоупотреблять этим, и поэтому наши алгоритмы пытаются взять это с учетом того, что это на самом деле не приносит вам много пользы. Так что я бы использовать его там, где это имеет смысл и более экономно, но вы можете иметь его несколько раз.


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

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


В общем случае у вас должен быть только один h1 на странице, и этот h1 должен кратко представлять содержимое на этой странице. Пока вы готовы к стилю с CSS, узнайте, какой уровень заголовков (h2, h3, h4 и т. д.), которые правильно представляют заголовки, которые вы хотите использовать, а затем стиль их вместо этого.


семантически, я предпочитаю использовать один H1 на странице, в основном, для заголовка страницы. Вероятно, это не имеет большого значения с SEO, и с тем, как html идет с HTML5, generic header tag сделает его намного проще, и этот аргумент устареет.


мне не нравится идея нескольких H1s. H1 - это верхний уровень, самый важный заголовок, и страница в основном будет посвящена этой теме. Если у вас есть не менее важная вторая тема, не помещайте ее в другую H1 тег, просто поместите его на другую страницу. Он этого заслуживает, верно?


пытаясь ответить на тот же вопрос, я опубликовал этот вопрос, который может иметь некоторую полезную информацию. Моя проблема с использованием одного и того же H1, H2, H3 в разных местах заключается в том, что если вы не всегда указываете "родительский" стиль, как в вашем примере*, то вы можете столкнуться с проблемами.

дилемма в принятии решения о создании CSS для H1, H2, H3 etc.

* Это значит, что вы никогда не определяете " h1 " само по себе


Я стараюсь иметь только один H1 на странице и иметь его почти, но немного перестроить из содержимого тега заголовка / H1-это основная идея отдельной страницы, все остальное должно быть тегом h2 и ниже....


Если это касается seo, лучше использовать теги h1, и если вы хотите использовать его только для целей sytling, используйте таблицы стилей css.

самое главное, что: Если на веб-странице используется более одного тега h1, google может рассматривать эту страницу как спам. использование может другие теги заголовка, кроме h1, как h2 h3 h4 h5 h6 любое количество раз.


все зависит от того, что ваш doctype есть. С html5 это нормально использовать несколько h1 теги в разделе. (не читай, Пер!--3-->!) При использовании в Примере XHTML 1.0 Transitional doctype, Я бы избегал использования нескольких h1 теги на одной странице.

при использовании в Примеру XHTML 1.0 Transitional doctype, Я часто ходил на что-то вроде этого:

  • h1: Макс. один раз на страницу
  • h2: Макс. два раза в страница
  • etc.

также @joel, хотя ваш ответ вроде как в порядке, пожалуйста, не пытайтесь никого запутать... Я могу сказать, что я инженер-программист Google, потому что я просто работаю с Google (не компанией, а продуктом), и я инженер... Пожалуйста, перечислите Название вашей компании и любые сертификаты при утверждении вещей как таковых.


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

Это очень эффективный метод SEO, который я нашел, поэтому люди, говорящие вам не делать этого, пытаются удержать вас от участия в наших выигрышах.