H1 против H2 против другого для названия сайта / логотипа и SEO

Для разработчиков переднего плана принято ставить заголовок веб-сайта или логотип в тег H1, а заголовок - в H2. Но в большинстве случаев заголовок страницы / статьи важнее, поскольку он несет в себе ценность контента. Так что мой вопрос в том, каков наилучший подход с точки зрения семантики и SEO. Примеры:

• логотип - H1, название - H1
• логотип - H1, название - H2
• логотип - H2, название - H1
• логотип - другой тег, заголовок - H1

При условии других вариантов, если вы думаете, они будут иметь больший эффект.

Я обычно не помещаю логотип или название сайта в H1. Мне нравится смотреть на это так, что каждая страница является документом. Этот документ посвящен определенной теме, что отражено в заголовке страницы, а также в главном заголовке. Сам сайт является просто издателем документа. Так что семантически некорректно использовать логотип или название сайта в качестве основного заголовка каждой страницы. Логотипы отображаются на видном месте, чтобы напомнить пользователю, где они находятся и для целей брендинга, но на самом деле они не являются частью содержимого или документа.

Я имею в виду, что когда вы смотрите новость, вы можете увидеть маленький логотип канала новостей в углу, но новость не будет называться «CNN» или «BBC News». Заголовок будет об истории, а не о сети, публикующей историю. Аналогично, когда вы читаете журнал, в заголовке используется только заголовок статьи, а не название публикации.

Также семантически некорректно использовать тег H1 для логотипа / названия сайта и один для заголовка документа. Заголовки определяют иерархическую структуру контента на странице; использование одного для названия сайта и другого для заголовка документа - все равно что сказать, что на этой странице есть 2 основных раздела: «mydomain.com» и «свяжитесь с нами».

См. Страницу № 37 документа Google по отчетам о поисковой оптимизации .

Большинство главных страниц продукта имеют возможность использовать один <h1>тег, как в примере выше, но в настоящее время они используют только другие теги заголовка ( <h3>в данном случае) или более крупный стиль шрифта. Несмотря на то, что стилизация вашего текста так, чтобы он казался больше, может привести к тому же визуальному представлению, он не обеспечивает того же семантического значения для поисковой системы, как <h1>тег. Название продукта и / или несколько слов о его функциях - это здорово иметь в <h1>теге главной страницы продукта.

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

Вот хорошее обоснование: ваш логотип - это изображение, а не <h1>

Семантически, <h1>должен использоваться для заголовка страницы, и заголовок страницы должен быть уникальным для каждой страницы. Ваш логотип или название сайта не является заголовком страницы (кроме, возможно, домашней страницы).

Ваш логотип / название сайта должны быть в простом формате, возможно, с идентификатором «заголовок». Или <header>тег, если используется HTML5.

ИМО должен быть только один H1 на странице. И H1 должен всегда перед H2 - поддерживать правильную иерархию вашего контента.

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

На домашней странице я хотел бы рассмотреть возможность использования:
логотипа / заголовка - H1 [, заголовок - H2]
Хотя на вашей домашней странице логотип вполне может быть вашим названием.

Тем не менее, на всех последующих страницах я бы выбрал:
логотип - другой тег, заголовок - H1
Даже с логотипом в качестве фонового изображения, если это уместно.

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

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

Таким образом, вы можете настроить изображение для отображения в H1 (которое люди часто используют как область логотипа) и при этом иметь хороший контент для людей, использующих ухудшенный интернет-опыт. Это также делает вашу ценность SEO счастливой.

Это потрясающий вопрос, из-за практики (и шаблонов), которые существуют.

Лично мне нравится ссылаться на логику «Outlining 101», учитывая следующее:

H1 похож на заголовок (конечно, вы хотите дополнить заголовок HTML), и на странице должен быть только один заголовок, точно так же, как у страницы только один заголовок

H2 в общих чертах напоминает римские цифры: I., II., III. И т. Д.

H3 будет контурным эквивалентом A., B., C.

Зачастую практическое использование этой логики трудно навязать точно на веб-странице - существует так много случайных битов информации, которые просто не попадают в эту иерархию. Однако, если вы сядете и попытаетесь разобраться с этой логикой, я чувствую, что дисциплина принесет пользу.

Я h1за главный титул парень. А основным названием является оформленное название сайта или, как вы это называете, логотип. Суть в том, что в заголовке сайта логотип на самом деле не логотип, а иллюстрированный заголовок сайта. Дизайнеры просто любят оформлять его как логотип.

Что не так с LOGO -> H1?

<div>Google</div>
<h1>About Us</h1>

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

<h1>Google</h1>
<h2>About Us</h2>

Эта страница о Google. Вот раздел о нас. Видите - нет вопросов? Все чисто.

Второй момент

Структура страницы. Если вы поместите основной заголовок сайта в div или p, связать его не с чем.

<p>Google</p>
<h1>About us</h1>

Как я могу связать "About U" с Google, если h1придет после? Потому что H1с этим связано все, что приходит ПОСЛЕ , а не то, что происходит раньше.

<h1>Google</h1>
<h2>About Us</h2>

«О нас» принадлежит Google. Нет вопросов.

Третий пункт.

HTML это язык для описания информации. Поэтому вы не отображаете информацию, вы описываете ее. И каждая страница независима. Поэтому вы описываете одну страницу, потому что нет никаких связей между страницами. Просто ссылки, которые ссылаются на отдельные страницы.

<p>Google</p>
<h1>About us</h1>

Эта страница о нас. Кто / что это? Неясно. Это просто описывает то, что называется "О нас".

<h1>Google</h1>
<h2>About Us</h2>

Этот сайт описывает Google. И есть раздел О нас. Us = наиболее вероятно, Google, потому что структура описывает это так.

Я надеюсь, что сделал свою точку зрения :)

PS! Вы не можете использовать h2- h1- h3как это нелогично, поэтому большой провал. То, что w3c не сказал, что это не разрешено, не делает его действительным. Это нелогично, подумай об этом.

Логотип как тег h2?

Я просто просматривал SitePoint (www.sitepoint.com), блог WordPress с обычными страницами и блогами. В общем, я обнаружил, что у них есть заголовок страницы как тег h1, а логотип установлен как h2. Вы можете увидеть это на странице блога, как www.blogs.sitepoint.com/category/design/. Круиз по сайту, вы найдете различные настройки. Я часто не мог найти тег h1, как пример на главной странице продукта (http://products.sitepoint.com/). Хотя с этой страницы, если вы нажмете на конкретный продукт для получения дополнительной информации www.sitepoint.com/books/design2/, вы снова обнаружите, что h1 - это заголовок страницы, h2 - это логотип. Типичная веб-страница похожа на блог (см. Www.sitepoint.com/help/). В этом случае темы часто задаваемых вопросов - это h2-теги.

Том Роджерс

Ваш логотип не обязательно должен быть вложен в заголовок - достаточно простого связанного изображения header. Но должно быть и название вашего сайта, и заголовок страницы / статьи <h1>. Эта статья является информативной: Правда о нескольких тегах H1 в эпоху HTML5 .