Правильное использование <title>, <header>, <h1> и <h2> на веб-сайте HTML5?

15

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

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

Некоторые из моих выводов

Некоторые веб-сайты, похоже, обрисовали в общих чертах следующие документы:

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

Мне интересно, что в приведенном выше примере не используется <nav>элемент с подходящим заголовком. Мне нравится простота схемы и, будучи Google, я уверен, что они знают, что делают, когда дело доходит до этого.

Но я запутался, поскольку в приведенном выше наброске не упоминается «Дарт». Кажется, единственное упоминание о «Dart» в семантическом смысле находится в основном <title>элементе документа «Руководство программиста | Dart: Структурированные веб-приложения».

MDN (Mozilla Developer Network) - еще один блестящий пример веб-сайта, который следует этому принципу. Многие из <h1>заголовков обеспечивают полный контекст ( разделы и схемы документа HTML5 ):

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

В то время как другие не имеют большого смысла вне контекста ( устаревшие методы следует избегать ). Например, относится ли следующий набросок HTML5 к CSS, HTML5 или C # ... с одним лишь наброском документа, кто знает!

1. Obsolete practices to avoid
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Doctype
    4. <meta> element and charset attribute

Что еще хуже, что, если MDN содержит 2 темы с одинаковым (или очень похожим) названием «Устаревшие практики, которых следует избегать», где одна часть является частью их руководства по CSS, а другая - частью их руководства по HTML ...

На другом конце спектра веб-сайты, похоже, используют <body>заголовок основного уровня для названия продукта (Foo) или контейнера тем (Руководство пользователя для Foo). Где все последующие страницы затем использовать <h2>для фактического заголовка страницы.

Вопрос

Как поисковые системы выводят контекст веб-страницы, подобной тем, которые можно найти на сайте MDN, используя DOM и схему HTML5?

Как правильно разметить следующую страницу HTML5, чтобы Google мог проиндексировать страницу в подходящем контексте? Это включает в себя использование <title>, <header>и <h1>элементы.

  • Название компании
  • наименование товара
  • Гид пользователя
  • Начиная

Наиболее значимый заголовок в HTML, который просматривается в веб-браузере, должен представлять контекст всего веб-сайта (название компании или название продукта), набор тем (руководство пользователя) или актуальную тему в руке (начало работы) ?

Моя лучшая догадка

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
    <header role="banner"> <!-- Note: Lack of <h1> in here -->
        <a id="logo" href="http://example.com">Company Name</a>
        <nav>
            <h1>Site Navigation</h1>
            <ul> ... </ul>
        </nav>
    </header>
    <main role="main">
        <div class="product-name">Product Name</div>
        <div class="document">User Guide</div>

        <h1>Getting Started</h1>

        <p>blah</p>
    </main>
</body>
</html>

Ведущие к контуру:

1. Getting Started
seo html google-search html5 semantic-web Леа Хейс
источник
Правильно ли я вас понимаю, что вы ищете документацию, если & как поисковые системы используют схему? (а не за совет , который пометки для использования, не связанные с SEO)
ОООНР
@unor Я хочу узнать, почему методика, используемая в документации MDN / Dart, работает, и если мне не хватает каких-либо ключевых знаний. Кажется, они полагаются на <title>обеспечение контекста. Например, является ли плохой идеей включать одно и то же <h1>User Guide for Ubermachine</h1>на каждой странице, где представлен заголовок темы <h2>Getting Started</h2>... или следует набросок начать с <h1>Getting Started</h1>сопровождающего, <title>Getting Started | User Guide for Ubermachine</title>чтобы обеспечить полезный контекст для поисковых систем. Это вопрос SEO.
Леа Хейс
Если бы было 2 отдельных продукта, то вполне вероятно, что было бы 2 руководства пользователя, содержащие собственную тему «Начало работы». Отсюда часть моей заботы о подходе MDN и почему я хочу знать, <title>предоставляет ли достаточно контекст.
Леа Хейс
2
Я не буду беспокоиться о поисковых системах. Если вы думаете на этом уровне, остальная часть вашего сайта, вероятно, будет технически исправна и достаточно хороша для поисковых систем. Вместо этого подумайте о своих пользователях.
Джон Мюллер
1
Вы не упомянули URL. Это также важный механизм для дружелюбия человека и робота. Например, в то время как ваши два примера MDN <h1> не соответствуют друг другу. контекст, оба их URL включают / web / guide / html / перед заголовком страницы.
Мартин Ф

Ответы:

8

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

Использовать <h1>для заголовка верхнего уровня

<h1> HTML-элемент заголовка документа первого уровня:

  • Если документ в основном автономный, например, «Что посмотреть и чем заняться в Женеве», заголовок верхнего уровня, вероятно, совпадает с заголовком.
  • Если это часть коллекции, например, раздел «Собаки» в коллекции страниц о домашних животных, тогда заголовок верхнего уровня должен иметь определенный контекст; просто напишите, в <h1>Dogs</h1>то время как название должно работать в любом контексте: Собаки - ваш путеводитель по домашним животным.

Первоисточник: http://www.w3.org/QA/Tips/Use_h1_for_Title

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

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

Смотрите также : <title>: самый важный элемент качественной веб-страницы

Прежде чем принять ответ, я хотел бы подождать и посмотреть, что думают другие.

Леа Хейс
источник
Хорошие вопросы обновления и последующий ответ. Возможно, другие присоединятся, если не примут ваш ответ, если вы считаете, что он правильный.
Дан
1

Я бы оспорил использование H1 или любого уровня заголовка для «Название продукта» в заголовке.
H1 представляет заголовок страницы, а не продукт, приложение или сайт.
И для доступности, и для целей SEO повторный H1 на каждой странице будет вредным. К сожалению, в этом случае нет семантического HTML-тега, который означает «заголовок сайта», поэтому единственным вариантом является <div>или, <p>или, возможно, даже <strong>тег, чтобы придать ему смысловой смысл.

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
davidelrizzo
источник
0

Правильного ответа нет, есть разные варианты.

Ниже приведены несколько вариантов, но все они имеют свои плюсы и минусы:

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

Следующая использует статью, так как большинство людей склонны использовать эту.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

и все же есть еще варианты.

PatomaS
источник
2
Все они выглядят слишком сложными для меня.
Мартин Ф