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

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

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

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

31 голос | спросил Ilian Iliev 28 +04002010-10-28T13:55:41+04:00312010bEurope/MoscowThu, 28 Oct 2010 13:55:41 +0400 2010, 13:55:41

9 ответов


37

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

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

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

ответил Lèse majesté 28 +04002010-10-28T14:50:42+04:00312010bEurope/MoscowThu, 28 Oct 2010 14:50:42 +0400 2010, 14:50:42
22

См. страницу # 37 страницы отчет о SEO-отчете :

  

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

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

ответил danlefree 28 +04002010-10-28T14:20:49+04:00312010bEurope/MoscowThu, 28 Oct 2010 14:20:49 +0400 2010, 14:20:49
5

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

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

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

ответил DisgruntledGoat 28 +04002010-10-28T16:06:35+04:00312010bEurope/MoscowThu, 28 Oct 2010 16:06:35 +0400 2010, 16:06:35
4

IMO должен быть только один H1 на странице. И H1 всегда должен быть до H2 - для поддержания правильной иерархии вашего контента.

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

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

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

ответил MrWhite 28 +04002010-10-28T14:25:12+04:00312010bEurope/MoscowThu, 28 Oct 2010 14:25:12 +0400 2010, 14:25:12
3

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

& л; стиль >
h1 {background: url ('imagePathHere.gif'); width: 60px; height: 10px;}
h1 span {display: none}
& Lt; /тип >

<h1 <span> Уникальное название страницы </span> </h1>

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

ответил XOPJ 28 +04002010-10-28T17:50:54+04:00312010bEurope/MoscowThu, 28 Oct 2010 17:50:54 +0400 2010, 17:50:54
2

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

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

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

H2 похожа на римские цифры в схеме: I., II., III. и т. д.

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

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

ответил Chris Adragna 12 52010vEurope/Moscow11bEurope/MoscowFri, 12 Nov 2010 21:20:22 +0300 2010, 21:20:22
1

Я 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 не сказал, что это запрещено, не делает его действительным. Это нелогично, подумайте об этом.

ответил 30 ThuEurope/Moscow2010-12-30T15:01:43+03:00Europe/Moscow12bEurope/MoscowThu, 30 Dec 2010 15:01:43 +0300 2010, 15:01:43
0

Логотип как тег 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.

Том Роджерс

ответил 20 Jpm1000000pmThu, 20 Jan 2011 20:21:32 +030011 2011, 20:21:32
0

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

ответил Mori 25 Jam1000000amMon, 25 Jan 2016 08:58:22 +030016 2016, 08:58:22

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132