Отделить порядок разметки заголовка от визуального и концептуального веса?

иллюстрация проблемы

Эти 2 изображения иллюстрируют мою разметку + визуальный вес, который четко подчеркивает самый важный заголовок страницы. Иногда над большим заголовком есть маленький pre-headline .. или subheadline над ним?

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

Вы используете h3, затем h1, затем снова h3. Это просто неправильно, и это снизит наш рейтинг в Google.

(Я очень сомневаюсь в этом, и мое чувство подтвердилось, прочитав этот stack-fred: Должны ли теги заголовков HTML идти по порядку)

Но давайте на секунду предположим, что она совершенно права. Как бы вы решили эту проблему в разметке и css?

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

Вы можете посетить веб-сайт здесь: www.natursteinwerk-villmar.de/


person kater louis    schedule 16.10.2016    source источник


Ответы (3)


Оранжевое решение, которое вы отметили, определенно хуже с точки зрения SEO. Очень важно установить один h1 в главном заголовке. Если SEO-специалист настаивает, лучше всего использовать что-то вроде <span class="h3">Seit...</span> вместо того, чтобы вообще использовать для этого тег заголовка.

Сам Google также игнорирует порядок заголовков, например здесь:

<div class="col-6 section-intro-content">
  <h4 class="section-sub-heading border-blue">
    Advertise
  </h4>
  <h2>
    Advertise with Google.
  </h2>
</div>

Если вы не уверены, спросите специалиста по поисковой оптимизации о наилучшей практике, по его/ее мнению.

person Fabian Schultz    schedule 16.10.2016
comment
Мое исследование показывает, что из всех предложенных решений самое худшее — вообще не иметь h-тегов. Таким образом, использование промежутков не похоже на вариант. Вы получили пример кода с самой опубликованной страницы Google? Я не могу найти его там. - person kater louis; 17.10.2016
comment
Да, это по той ссылке. Это то, о чем я говорил, использование заголовков имеет решающее значение, но вы можете использовать тег span для того единственного, на который жалуется SEO-специалист. - person Fabian Schultz; 17.10.2016
comment
Ах, хорошо, вы посмотрели на исходный код и предположили, что Google сделает свое собственное SEO, верно? ;) - - person kater louis; 17.10.2016
comment
Ну хоть распишитесь. - person Fabian Schultz; 17.10.2016

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

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

При разработке веб-страницы в стиле блога я мог бы сделать что-то вроде этого:

nav h1{
    font-size:18px;
}

main h1{
    font-size:32px;
    color:black;
}

main h2,
main h1 + p{
    font-size:24px;
    color:grey;
}

У меня есть два h1 разных размеров. Вы можете возразить, что main h1 на самом деле должно быть h2. Но мне нравится h1, потому что nav и main на самом деле разные области контента.

У меня также есть h2 и p, которые в конечном итоге имеют одинаковый размер. Вы можете возразить, что p должно быть просто h2. Но мне нравится использовать h2, когда он представляет что-то сам по себе, вместо того, чтобы всегда привязываться к h1, что похоже на пустую трату HTML-тегов.

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

Когда я преподавал веб-дизайн, мне очень понравилось упражнение, состоящее в том, что я давал своим ученикам таблицу стилей «сброса», которая удаляла все стили браузера по умолчанию, и просил их разработать и написать веб-страницу, используя только HTML и без CSS. Это заставило их по-настоящему задуматься о том, что их HTML-теги значат, не зацикливаясь на таких вещах, как «О, если что-то будет выделено жирным шрифтом, оно должно быть в теге strong».

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


Конкретно в вашем случае (имея в виду, что я не говорю по-немецки):

  • Я бы предположил, что есть несколько страниц "Seit über 35 Jahren". Таким образом, несмотря на то, что шрифт маленький, он должен быть h1: он представляет контент на нескольких страницах.
  • "Naturstein - Leidenscha" представляет содержание конкретно этой страницы, поэтому должно быть h2.
  • «Das Unternehmen», кажется, представляет один конкретный раздел на этой странице, поэтому должен быть h3. Я ожидаю, что другие разделы на этой странице будут представлены таким же образом.

Кроме того, наличие .weight3 и .weight2 и прочего сводит с ума. Как вы должны помнить, в чем разница между ними? Именно по этой причине мы больше не используем теги <big> или <center> — если фрагмент текста называется «большой» или «центральный», это не дает вам никакого представления о том, что этот текст делает.

person RobertAKARobin    schedule 16.10.2016
comment
1) Забудьте, как это выглядит при написании HTML — это то, что я сделал. В этом дизайне большой заголовок просто является наиболее значимым; вот почему я сделал это h1. - person kater louis; 17.10.2016
comment
2) Сумасшедший. Я использовал заголовки как бы наоборот. Я думал, что Google должен знать, что происходит НА ЭТОЙ СТРАНИЦЕ, и поэтому смотрит на файл h1. Теперь ваше объяснение имеет для меня большой смысл. Но... тем не менее... как я узнаю, что мое предположение о том, как Google узнает о заголовке, описывающем ЭТУ СТРАНИЦУ, верно, а ваше нет? Я хотел бы знать .. :( - person kater louis; 17.10.2016
comment
3) Если я изменю h-теги на ваш, оранжевая страница отлично сработает для моей SEO-леди. Но тогда первая страница (Контакт) останется вообще без h1, что опять ее разозлит. Также я читал, что Google действительно хочет h1. Что бы вы сделали здесь? - person kater louis; 17.10.2016
comment
4) Я только что проверил еще раз. – Это совпадение, что Seit über 35 Jahren [= с 1970 года] (мой h3) дважды встречается на этой странице. Это не категория или нечто, описывающее несколько страниц. Как ваша логика применима сейчас? Все еще h2 для большого, потому что он описывает контент только на этой конкретной странице? Опять же, h1 вообще нет?! - person kater louis; 17.10.2016
comment
На мой взгляд, h1 не подходит для наиболее важного контента; это для самого высокого содержания — оно знакомит со всем остальным на странице. Но люди, вероятно, будут спорить в обоих направлениях. Я думаю об этом так: когда люди видят это в Google, должно ли название моего сайта быть большим синим текстом или названием статьи? - person RobertAKARobin; 17.10.2016
comment
3) Переместить все на уровень выше? Превратите h2 в h1 и так далее. - person RobertAKARobin; 17.10.2016
comment
Честно говоря, я бы просто пошел с тем, что нравится вашему боссу. Думать с точки зрения SEO, вероятно, самый правильный способ думать о тегах h, поскольку он заставляет вас думать об их иерархии с точки зрения важности/введения. Она все равно оплачивает ваши счета. :) В конце концов, если вы спросите 10 разных дизайнеров, вы, вероятно, получите 10 разных мнений по этому поводу, так что просто выберите что-нибудь и будьте последовательны. - person RobertAKARobin; 17.10.2016
comment
Я в замешательстве... какой заголовок, по-вашему, теперь выбирает Google? h1? - person kater louis; 18.10.2016

Давайте подумаем, что полезно вашим посетителям (особенно тем, которые полагаются на заголовки/схему, например, пользователям программ чтения с экрана), и забудем о «правилах SEO».

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

Ваша домашняя страница в настоящее время имеет этот план:

1. Document
  1.1 Navigation
2. "Seit über 35 Jahren"
3. "Naturstein – unsere Leidenschaft."
  3.1 "Das Unternehmen"
  3.2 "So arbeiten wir"
  3.3 "Referenzen"
  3.4 "Weitere Objekte"

Это полезно? Я бы сказал, что раздела "Seit über 35 Jahren" там быть не должно. Если пользователь переходит к этому заголовку, там ничего нет — ни контента, ни подзаголовков. Это должно быть частью контента; это не должно быть заголовком. Добавление его к следующему заголовку возможно, но кажется более подходящим сделать его подзаголовком/слоганом, например :

<header>
  <p>Seit über 35 Jahren</p>
  <h1>Naturstein – unsere Leidenschaft.</h1>
</header>

Тем не менее, это «Naturstein - unsere Leidenschaft». действительно полезный заголовок? Кажется, это слоган или введение, но не было бы полезнее использовать в качестве заголовка настоящее название ("Natursteinwerk Villmar")? Если бы я разметил этот сайт, я бы выбрал одну из этих схем для домашней страницы:

При использовании имени сайта (которое также может быть логотипом с alt) в качестве заголовка документа (для каждой страницы; см. также):

1. "Natursteinwerk Villmar"
  1.1 Navigation
  1.2 "Das Unternehmen"
  1.3 "So arbeiten wir"
  1.4 "Referenzen"
  1.5 "Weitere Objekte"

(Где последние четыре раздела могут быть частью элемента main. Визуальный дизайн может остаться прежним, поэтому «Naturstein — unsere Leidenschaft.» может по-прежнему быть с тем же большим размером шрифта; единственное отличие состоит в том, что теперь это p.)

Если заголовок документа не используется:

1. Document
  1.1 Navigation
2. "Natursteinwerk Villmar"
  2.1 "Das Unternehmen"
  2.2 "So arbeiten wir"
  2.3 "Referenzen"
  2.4 "Weitere Objekte"

Если вы знаете, какой план вы хотите иметь, выбрать, какие элементы заголовка (h1-h6) использовать, легко: первый уровень получает h1, второй уровень получает h2, … -- заголовки представляет ранг, а не важность.

person unor    schedule 17.10.2016