Prawidłowe użycie <title>, <header>, <h1> i <h2> na stronie HTML5?

Studiowałem ten temat od kilku dni i znalazłem wiele sprzecznych sugestii dotyczących indeksowania wyszukiwania. Pracuję nad projektem, który ma wiele różnych stron, od prostych opisów produktów do szczegółowej dokumentacji użytkownika.

Podzieliłem to pytanie na sekcje, ponieważ uważam, że uczyni to bardziej przydatnym dla przyszłych czytelników tego pytania.

Niektóre z moich ustaleń

Wygląda na to, że kilka stron internetowych przyjęło następujące kontury dokumentów:

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

Interesujące jest dla mnie to, że powyższy przykład nie wykorzystuje <nav>elementu z odpowiednim nagłówkiem. Podoba mi się prostota obrysu i będąc Google jestem całkiem pewien, że wiedzą, co robią, jeśli chodzi o to.

Ale jestem zdezorientowany, ponieważ powyższy zarys nie wspomina o „Dart”. Jedyna wzmianka o „Dart” w sensie semantycznym wydaje się znajdować w głównym <title>elemencie dokumentu „Przewodnik programisty | Dart: Strukturalne aplikacje internetowe”.

MDN (Mozilla Developer Network) to kolejny świetny przykład strony internetowej, która podąża za tą zasadą. Wiele <h1>tytułów zapewnia pełny kontekst ( sekcje i kontury dokumentu 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

Podczas gdy inni nie mają większego sensu w kontekście ( Przestarzałe praktyki, których należy unikać ). Na przykład, czy poniższy zarys HTML5 odnosi się do CSS, HTML5 lub C # ... z tylko szkicem dokumentu, kto wie!

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

Na domiar złego, co jeśli MDN zawiera 2 tematy o tym samym (lub bardzo podobnym) tytule „Przestarzałe praktyki, których należy unikać”, gdzie jeden jest częścią ich przewodnika CSS, a drugi jest częścią ich przewodnika HTML ...

Na drugim końcu spektrum witryny wydają się używać <body>nagłówka głównego poziomu nazwy produktu (Foo) lub kontenera tematów (Podręcznik użytkownika dla Foo). Tam, gdzie wszystkie kolejne strony używają <h2>rzeczywistego tytułu strony.

Pytanie

W jaki sposób wyszukiwarki wywnioskują kontekst strony internetowej takiej jak te znalezione na stronie MDN przy użyciu DOM i konturu HTML5?

Jaki jest właściwy sposób na oznaczenie następującej strony HTML5, aby Google mógł zaindeksować stronę w odpowiednim kontekście? Obejmuje to użycie <title>, <header>a <h1>elementy.

Nazwa firmy
Nazwa produktu
Podręcznik użytkownika
Pierwsze kroki

Najbardziej znaczący nagłówek HTML, który jest przeglądany w przeglądarce internetowej, powinien reprezentować kontekst całej witryny (nazwa firmy lub nazwa produktu), zbiór tematów (przewodnik użytkownika) lub aktualny temat w ręce (wprowadzenie) ?

Moje najlepsze przypuszczenie

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

Prowadząc do konspektu:

1. Getting Started

— Lea Hayes
źródło

Czy dobrze rozumiem, że szukasz dokumentacji, jeśli i jak wyszukiwarki używają konspektu? (a nie po porady, których znaczników użyć, niezwiązane z SEO)

— lub

@unor Chcę dowiedzieć się, dlaczego technika zastosowana w dokumentacji MDN / Dart działa i jeśli brakuje mi jakiejkolwiek kluczowej wiedzy. Wydaje się, że polegają na <title>zapewnieniu kontekstu. Na przykład, czy złym pomysłem jest umieszczanie tego samego <h1>User Guide for Ubermachine</h1>na każdej stronie, na której jest wyświetlany nagłówek tematu <h2>Getting Started</h2>..., czy też powinien zaczynać się <h1>Getting Started</h1>od towarzyszącego, <title>Getting Started | User Guide for Ubermachine</title>aby zapewnić przydatny kontekst dla wyszukiwarek. To jest pytanie SEO.

— Lea Hayes

Jeśli byłyby 2 oddzielne produkty, bardzo prawdopodobne jest, że byłyby 2 instrukcje obsługi zawierające własny temat „Pierwsze kroki”. Stąd część moich obaw związanych z podejściem MDN i dlaczego chcę wiedzieć, czy <title>zapewnia wystarczający kontekst.

— Lea Hayes

Nie martwiłbym się o wyszukiwarki. Jeśli myślisz na tym poziomie, reszta witryny prawdopodobnie będzie w porządku i wystarczająco dobra dla wyszukiwarek. Zamiast tego pomyśl o swoich użytkownikach.

— John Mueller

Nie podałeś adresu URL. Jest to również ważny mechanizm przyjazny dla człowieka i robota. Na przykład, podczas gdy twoje dwa przykłady MDN <h1> s są niespójne. w kontekście oba adresy URL zawierają / web / guide / html / przed tytułem strony.

— Martin F

Odpowiedzi:

Podczas moich obszernych wyszukiwań w Internecie znalazłem cytat, który uważam za użyteczny i podejrzewam, że również przyszli czytelnicy tego pytania.

Użyj <h1>dla nagłówka najwyższego poziomu

<h1> jest elementem HTML nagłówka pierwszego poziomu dokumentu:

Jeśli dokument jest w zasadzie samodzielny, na przykład Rzeczy do zobaczenia i zrobienia w Genewie, nagłówek najwyższego poziomu jest prawdopodobnie taki sam jak tytuł.

Jeśli jest to część kolekcji, na przykład sekcja Psy w zbiorze stron o zwierzętach domowych, nagłówek najwyższego poziomu powinien przyjmować pewien kontekst; po prostu napisz, <h1>Dogs</h1>a tytuł powinien działać w dowolnym kontekście: Psy - Twój przewodnik po zwierzętach.

Oryginalne źródło: http://www.w3.org/QA/Tips/Use_h1_for_Title

Powyższy cytat wydaje się sugerować, że <h1>element na poziomie dokumentu może zakładać, że kontekst bieżącej strony jest definiowany za pomocą <title>samego siebie. Więc przypuszczalnie, gdyby było wiele stron z dokładnie takim samym, <h1>byłoby to w porządku ...

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

Zobacz też : <title>: najważniejszy element wysokiej jakości strony internetowej

Przed zaakceptowaniem odpowiedzi chciałbym poczekać i zobaczyć, co myślą inni.

— Lea Hayes
źródło

Ładne aktualizacje pytań i odpowiedzi uzupełniające. Może inni wkroczą, jeśli nie zaakceptują twojej odpowiedzi, jeśli uważasz, że to jest właściwa.

— dan

Kwestionowałbym użycie H1 lub dowolnego poziomu nagłówka dla „Nazwa produktu” w nagłówku.
H1 reprezentuje tytuł strony, a nie produkt, aplikację lub witrynę.
Zarówno pod względem dostępności, jak i SEO powtarzanie H1 na każdej stronie byłoby szkodliwe. Niestety w tym przypadku nie ma semantycznego znacznika HTML, który oznacza „tytuł strony”, więc jedyną opcją jest znacznik <div>lub, <p>a może nawet <strong>znacznik, który nadaje mu semantyczny nacisk.

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>

— davidelrizzo
źródło

Nie ma jednej właściwej odpowiedzi, istnieją różne opcje.

Poniżej znajduje się kilka opcji, ale wszystkie mają zalety i wady:

Ta opcja jest mniej więcej taka, którą przedstawiłeś, ale pokazuje nieco więcej nagłówków i tam, gdzie pójdzie treść, plus pomysł, że logo byłoby bardziej złożonym elementem niż tylko obraz / tekst, miałby wszystkie powiązane elementy, które robią wrażenie osobowości firmy, dlatego sekcja. Jeszcze raz. to nie może być sekcja, ale po prostu 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>

Ten następny wprowadza główny tag, aby pokazać, która jest odpowiednia część strony. Ten tag jest nadal szkicowy na temat wsparcia i przyszłości, ale wyraźnie wskazuje, że nawigacja nie ma nic wspólnego z produktem lub stroną. Tag sekcji może być innym kontenerem, a głównym może być artykuł dla niektórych osób.

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

Następny używa artykułu, ponieważ większość ludzi jest skłonna z niego korzystać.

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

Użyłbym czegoś podobnego do następnego, ponieważ jestem bardzo modułowy i zorientowany na bloki, więc każdy element byłby niezależny od perspektywy bazy danych powiązanej tylko z odpowiednimi kluczami. Chociaż najprawdopodobniej pominęłbym tagi sekcji.

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

a jednak jest więcej opcji.

— PatomaS
źródło

Wszystkie wydają mi się zbyt skomplikowane.

— Martin F

Prawidłowe użycie <title>, <header>, <h1> i <h2> na stronie HTML5?

Niektóre z moich ustaleń

Pytanie

Moje najlepsze przypuszczenie

Użyj <h1>dla nagłówka najwyższego poziomu

Użyj `<h1>`dla nagłówka najwyższego poziomu