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

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

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

Деякі мої висновки

Деякі веб-сайти, схоже, прийняли такі контури документів, як:

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)

— unor

@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>достатньо контексту.

— Леа Хейс

Я б не переймався пошуковими системами. Якщо ви думаєте на цьому рівні, решта вашого сайту, ймовірно, буде технічно чудовою та достатньо хорошою для пошукових систем. Натомість подумайте про своїх користувачів.

— Джон Мюллер

Ви не згадали URL-адресу. Це також важливий механізм дружелюбності людини та робота. Наприклад, поки ваші два приклади MDN <h1> s несуперечливі. контекст, обидві їх URL-адреси включають / web / guide / html / перед заголовком сторінки.

— Мартін Ф

Відповіді:

Під час моїх обширних пошуків в Інтернеті я знайшов цитату, яку вважаю корисною і підозрюю, що і майбутні читачі цього питання.

Використовуйте <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>: найважливіший елемент якісної веб-сторінки

Перш ніж прийняти відповідь, я хотів би зачекати і подивитися, що думають інші.

— Леа Хейс
джерело

Приємні оновлення запитань та відповіді на подальшу роботу. Можливо, інші прозвучать, якщо не приймуть вашу відповідь, якщо ви вважаєте, що це правильно.

— дан

Я б заперечував використання H1 або будь-якого рівня заголовка для "Назва продукту" у заголовку.
H1 відображає заголовок сторінки, а не продукту, програми чи сайту.
Як для Доступності, так і для оптимізації SEO повторна H1 на кожній сторінці буде згубною. Unfortunetaly в цьому випадку немає семантичного 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
джерело

Немає однієї правильної відповіді, є різні варіанти.

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

Ця опція є більш-менш тією, яку ви представили, але показує трохи більше заголовків і куди піде вміст, а також ідея про те, що логотип буде складнішим елементом, ніж лише зображення / текст, він матиме всі відповідні елементи, щоб скласти враження як особистість компанії, саме тому розділ. Знову. це може бути не розділ, а просто дів.

<!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>

Цей наступний вводить основний тег, щоб показати, що є відповідною частиною сторінки. Цей тег все ще є схематичним щодо підтримки та майбутнього, але чітко свідчить про те, що навігація не має нічого спільного з продуктом чи сторінкою. Тег розділу може бути іншим контейнером, а основним може бути стаття для деяких людей.

<!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
джерело

Всі вони виглядають надто складно для мене.

— Мартін Ф

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

Деякі мої висновки

Питання

Моя найкраща здогадка

Використовуйте <h1>для заголовка верхнього рівня

Використовуйте `<h1>`для заголовка верхнього рівня