H1 vs H2 vs Other для названия сайта /логотипа и SEO
Общепринятой практикой для начинающих разработчиков является размещение названия сайта или логотипа в теге H1 и заголовке в H2. Но большую часть времени название страницы /статьи более важно, поскольку оно несет значение содержимого. Поэтому мой вопрос - это лучший подход с точки зрения семантики и SEO. Примеры:
- логотип - H1, название - H1
- logo - H1, название - H2
- логотип - H2, название - H1
- логотип - другой тег, название - H1
Предоставляются другие варианты, если вы думаете, что они будут иметь больший эффект.
9 ответов
Я обычно не помещаю логотип или название сайта в H1. То, как я люблю смотреть, это то, что каждая страница является документом. Этот документ посвящен конкретному вопросу, как это отражено в заголовке страницы, а также в главном заголовке. Сам сайт является только издателем документа. Таким образом, семантически неправильно использовать логотип сайта или имя в качестве основного заголовка каждой страницы. Логотипы отображаются на видном месте, чтобы напоминать пользователю о том, где они находятся и для целей брендинга, но они фактически не являются частью содержимого или документа.
Я имею в виду, когда вы смотрите новость, вы можете увидеть небольшой логотип канала новостей в углу, но новость не будет озаглавлена «CNN» или «BBC News». Заголовок будет посвящен истории, а не сети публикации истории. Аналогично, когда вы читаете журнал, в заголовке используется только заголовок статьи, а не название публикации.
Также семантически некорректно использовать тег H1 для имени логотипа /сайта и один для названия документа. Заголовки определяют иерархическую структуру содержимого на странице; используя один для названия сайта, а другой для названия документа - это как сказать: на этой странице есть 2 основных раздела: «mydomain.com» и «свяжитесь с нами».
См. страницу # 37 страницы отчет о SEO-отчете :
На большинстве основных страниц продукта есть возможность использовать один тег
<h1>
, например пример выше, но они в настоящее время используется только другой заголовок теги (<h3>
в этом случае) или больше стилизация шрифтов. При стилизации текста поэтому он может оказаться более значительным то же визуальное представление, это не обеспечивают тот же смысловой смысл поисковая система, в которой тег<h1>
делает. Название продукта и /или несколько слова о его особенностях великолепны имеют в теге<h1>
для продукта главная страница.
В соответствии с собственным анализом своих предложений Google, я пришел к выводу, что Google ожидает, что в H1 будет отображаться уникальное значение
Вот хорошее обоснование: Ваш логотип - это изображение, не <h1>
Семантически, для названия страницы следует использовать <h1>
, а заголовок страницы должен быть уникальным на странице. Ваш логотип или название сайта not заголовок страницы (кроме, возможно, главной страницы).
Ваш логотип /название сайта должно быть в виде простого div, возможно, с идентификатором «заголовок». Или тег <header>
при использовании HTML5.
IMO должен быть только один H1 на странице. И H1 всегда должен быть до H2 - для поддержания правильной иерархии вашего контента.
Логотип часто повторяется на каждой странице, и, как вы говорите, на большинстве страниц название почти всегда более важно.
На домашней странице я бы рассмотрел использование:
логотип /название - H1 [, название - H2]
Хотя на вашей домашней странице логотип вполне может быть вашим названием.
Однако на на всех последующих страницах я бы пошел:
логотип - другой тег, название - H1
Даже имея логотип в качестве фонового изображения, если это необходимо.
То, что вы действительно ищете в своем теге H1, - это название страницы или то, что делает эту страницу уникальной. Если вы используете изображение в нем, вам нужно сделать это с помощью резервного метода для разлагаемости:
& л; стиль >
h1 {background: url ('imagePathHere.gif'); width: 60px; height: 10px;}
h1 span {display: none}
& Lt; /тип >
<h1 <span> Уникальное название страницы </span> </h1>
Таким образом вы можете установить изображение, отображаемое для H1 (которое люди часто неправильно используют в качестве области логотипа) и все еще имеют хороший контент внутри него для людей, использующих деградировавшие интернет-события. Это также делает вашу оценку SEO счастливой.
Это потрясающий вопрос, связанный с практикой (и шаблонами), которые находятся там.
Лично мне нравится ссылаться на логику «Outlining 101», учитывая следующее:
H1 похож на заголовок (конечно, вам нравится дополнить ваш заголовок HTML), и должно быть только одно на странице, так же как страница имеет только один заголовок
H2 похожа на римские цифры в схеме: I., II., III. и т. д.
H3 будет эквивалентным контуров A., B., C.
Часто практическое использование этой логики трудно обеспечить на веб-странице именно так: существует так много случайных бит информации, которые просто не свертываются в эту иерархию. Однако, если вы садитесь и пытаетесь сломать эту логику, я чувствую, что есть польза от дисциплины.
Я h1
для главного героя. И главное название - название сайта, или, как вы его называете, логотип. Вот точка - в заголовке веб-сайта, логотип на самом деле не является логотипом, это иллюстрированный заголовок сайта. Дизайнеры просто хотят создать его как логотип.
Что не так с LOGO -> H1
& л; DIV > Google & л; /дел >
<h1> О нас </h1>
Теперь, когда h1
является самым важным разделом, поскольку он сообщает посетителю, в чем дело, посетитель не может понять страницу, потому что h1
слишком специфичен. О том, кто?
& л; h1 > Google & л; /h1 >
<h2> О нас </h2>
Эта страница о Google. Вот раздел о нас. Понимаете ... нет вопросов? Все ясно.
Вторая точка.
Структура страницы. Если вы поместите основной заголовок сайта в div или p, с ним нет ничего, чтобы связать его.
& л; р > Google & л; /р >
<h1> О нас </h1>
Как я могу связать «О U» с Google, если после h1
? Потому что все, что приходит ПОСЛЕ H1
, связано с ним, а не тем, что раньше.
& л; h1 > Google & л; /h1 >
<h2> О нас </h2>
«О нас» принадлежит Google. Нет вопросов.
Третья точка.
HTML - это язык для информации DESCRIBE. Поэтому вы не показываете информацию, вы ее описываете. И каждая страница независима. Поэтому вы описываете одну страницу, потому что между страницами нет связей. Просто ссылки, которые связывают отдельные страницы.
& л; р > Google & л; /р >
<h1> О нас </h1>
ЭТА страница О нас. Кто /что это? Не понятно. Он просто описывает что-то, что называется «О нас».
& л; h1 > Google & л; /h1 >
<h2> О нас </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/). В этом случае темами FAQ являются все теги h2.
Том Роджерс
Логотип не обязательно должен быть вложен в заголовок - достаточно простого связанного изображения в заголовке . Но и название вашего сайта, и название страницы /статьи должно быть
<h1>
. Эта статья является информативной: Правда о нескольких тегах H1 в эпохе HTML5 .