Ordnungsgemäße Verwendung von <title>, <header>, <h1> und <h2> in einer HTML5-Website?

15

Ich habe dieses Thema mehrere Tage lang studiert und viele widersprüchliche Vorschläge in Bezug auf die Suchindizierung gefunden. Ich arbeite an einem Projekt, das viele verschiedene Seiten umfasst, von einfachen Produktbeschreibungen bis hin zur ausführlichen Benutzerdokumentation.

Ich habe diese Frage in Abschnitte unterteilt, da ich der Meinung bin, dass sie für zukünftige Leser dieser Frage nützlicher sein wird.

Einige meiner Erkenntnisse

Einige Websites scheinen Dokumentgliederungen wie die folgenden angenommen zu haben:

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

Ich finde es interessant, dass im obigen Beispiel das <nav>Element mit einer geeigneten Überschrift nicht verwendet wird. Ich mag die Einfachheit der Gliederung und als Google bin ich mir ziemlich sicher, dass sie wissen, was sie tun, wenn es darum geht.

Aber ich bin verwirrt, da der obige Umriss "Dart" nicht erwähnt. Die einzige Erwähnung von "Dart" im semantischen Sinne scheint im <title>Hauptdokumentelement "Programmer's Guide | Dart: Structured Web Apps" zu sein.

Das MDN (Mozilla Developer Network) ist ein weiteres hervorragendes Beispiel für eine Website, die diesem Prinzip folgt. Viele der <h1>Titel bieten vollständigen Kontext ( Abschnitte und Umrisse eines HTML5-Dokuments ):

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

Während andere aus dem Kontext nicht viel Sinn machen ( veraltete Praktiken, die zu vermeiden sind ). Bezieht sich die folgende HTML5-Gliederung beispielsweise auf CSS, HTML5 oder C #?

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

Was wäre, wenn das MDN zwei Themen mit dem gleichen (oder sehr ähnlichen) Titel "Obsolete Praktiken zum Vermeiden" enthielte, wobei eines Teil des CSS-Leitfadens und das andere Teil des HTML-Leitfadens war?

Am anderen Ende des Spektrums scheinen Websites die <body>Überschrift main -level für den Produktnamen (Foo) oder den Themencontainer (User Guide for Foo) zu verwenden. Wobei alle nachfolgenden Seiten dann <h2>für den eigentlichen Seitentitel verwendet werden.

Die Frage

Wie leiten Suchmaschinen mithilfe des DOM und der HTML5-Gliederung den Kontext einer Webseite ab, wie sie auf der MDN-Website zu finden ist?

Wie kann die folgende HTML5-Seite richtig markiert werden, damit Google die Seite im entsprechenden Kontext indizieren kann? Dazu gehören Nutzung <title>, <header>und <h1>Elemente.

  • Name der Firma
  • Produktname
  • Benutzerhandbuch
  • Beginnen

Die wichtigste Überschrift im HTML-Code, die in einem Webbrowser angezeigt wird, sollte den Kontext der gesamten Website (Firmenname oder Produktname), die Themensammlung (Benutzerhandbuch) oder das aktuelle Thema (Erste Schritte) darstellen. ?

Meine beste Vermutung

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

Zum Abriss führen:

1. Getting Started
seo html google-search html5 semantic-web Lea Hayes
quelle
Verstehe ich Sie richtig, dass Sie nach Dokumentation suchen, wenn und wie Suchmaschinen die Gliederung verwenden? (und nicht für Ratschläge, welche Markup zu verwenden, unabhängig von SEO)
oder
@unor Ich möchte erfahren, warum die in der MDN / Dart-Dokumentation verwendete Technik funktioniert und ob mir wichtige Kenntnisse fehlen. Sie scheinen sich darauf zu verlassen <title>, den Kontext zu liefern. Ist es beispielsweise eine schlechte Idee, dasselbe <h1>User Guide for Ubermachine</h1>auf jeder Seite einzufügen, auf der die Themenüberschrift angezeigt wird <h2>Getting Started</h2>... oder sollte die Gliederung <h1>Getting Started</h1>mit einem Begleittext beginnen <title>Getting Started | User Guide for Ubermachine</title>, um einen nützlichen Kontext für Suchmaschinen bereitzustellen. Dies ist eine SEO-Frage.
Lea Hayes
Wenn es zwei separate Produkte gäbe, ist es sehr wahrscheinlich, dass zwei Benutzerhandbücher vorhanden sind, die ein eigenes Thema "Erste Schritte" enthalten. Aus diesem Grund beschäftige ich mich auch mit dem MDN-Ansatz und warum ich wissen möchte, ob <title>der Kontext ausreicht.
Lea Hayes
2
Ich würde mir keine Sorgen um Suchmaschinen machen. Wenn Sie auf dieser Ebene denken, ist der Rest Ihrer Website wahrscheinlich technisch in Ordnung und für Suchmaschinen gut genug. Denken Sie stattdessen an Ihre Benutzer.
John Mueller
1
Sie haben die URL nicht erwähnt. Das ist auch ein wichtiger Mechanismus für die Mensch- und Roboterfreundlichkeit. Zum Beispiel, während Ihre beiden MDN-Beispiele <h1> inkonsistent sind. Im Kontext enthalten beide URLs / web / guide / html / vor dem Seitentitel.
Martin F

Antworten:

8

Während meiner umfangreichen Websuche habe ich ein Zitat gefunden, das ich nützlich finde und vermute, dass zukünftige Leser dieser Frage es auch tun werden.

Verwenden Sie diese Option <h1>für Überschriften der obersten Ebene

<h1> ist das HTML-Element für die Überschrift der ersten Ebene eines Dokuments:

  • Wenn das Dokument im Grunde genommen eigenständig ist, z. B. Dinge, die in Genf zu sehen und zu tun sind, entspricht die Überschrift auf oberster Ebene wahrscheinlich dem Titel.
  • Wenn es Teil einer Sammlung ist, z. B. ein Abschnitt über Hunde in einer Sammlung von Seiten über Haustiere, sollte die Überschrift der obersten Ebene eine gewisse Menge an Kontext annehmen. Schreiben Sie einfach, <h1>Dogs</h1>während der Titel in jedem Kontext funktionieren sollte: Hunde - Ihr Leitfaden für Haustiere.

Ursprüngliche Quelle: http://www.w3.org/QA/Tips/Use_h1_for_Title

Das obige Zitat scheint darauf hinzudeuten, dass das <h1>Element auf Dokumentebene den Kontext der aktuellen Seite annehmen kann, der mit dem <title>selbst definiert wird . Wenn es also vermutlich mehrere Seiten mit genau denselben Seiten <h1>gäbe, wäre das in Ordnung ...

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

Siehe auch : <title>: Das wichtigste Element einer Qualitätswebseite

Bevor ich eine Antwort annehme, möchte ich abwarten, was andere denken.

Lea Hayes
quelle
Nette Frage Updates und Follow-up-Antwort. Vielleicht mischen sich andere ein, wenn Sie Ihre Antwort nicht akzeptieren, wenn Sie denken, dass es die richtige ist.
Dan
1

Ich würde die Verwendung eines H1 oder einer beliebigen Überschriftenebene für den 'Produktnamen' in der Überschrift bestreiten.
Der H1 steht für den Titel der Seite, nicht für das Produkt, die Anwendung oder die Website.
Sowohl für Zugänglichkeits- als auch für SEO-Zwecke wäre ein wiederholtes H1 auf jeder Seite nachteilig. Leider gibt es in diesem Fall kein semantisches HTML-Tag, das "Site-Titel" bedeutet. Die einzige Option ist ein <div>oder <p>oder vielleicht sogar ein <strong>Tag, um ihm eine semantische Betonung zu geben.

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

Es gibt keine richtige Antwort, es gibt verschiedene Möglichkeiten.

Im Folgenden sind einige Optionen aufgeführt, die jedoch alle Vor- und Nachteile haben:

Diese Option ist mehr oder weniger die, die Sie vorgestellt haben, zeigt jedoch etwas mehr Überschriften und wohin der Inhalt gehen würde, sowie die Idee, dass das Logo ein komplexeres Element als nur das Bild / der Text wäre, es würde alle damit verbundenen Elemente enthalten Elemente, um einen Eindruck von der Persönlichkeit des Unternehmens zu machen, warum der Abschnitt. Nochmal. Es konnte kein Abschnitt sein, sondern nur ein 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>

Das nächste führt das Haupt-Tag ein, um den relevanten Teil der Seite anzuzeigen. Dieses Tag ist in Bezug auf Support und Zukunft immer noch lückenhaft, gibt jedoch einen klaren Hinweis darauf, dass die Navigation nichts mit dem Produkt oder der Seite zu tun hat. Das Abschnitts-Tag kann ein anderer Container sein, und main kann für einige Leute ein Artikel sein.

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

Der nächste verwendet Artikel, da die meisten Leute dazu neigen, diesen zu benutzen.

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

Ich würde so etwas wie das nächste verwenden, da ich sehr modular und blockorientiert bin, sodass jedes Element aus Datenbanksicht unabhängig ist und nur durch relevante Schlüssel in Beziehung steht. Obwohl ich höchstwahrscheinlich die Abschnitts-Tags überspringen würde.

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

und dennoch gibt es mehr Möglichkeiten.

PatomaS
quelle
2
Sie sehen alle zu kompliziert für mich aus.
Martin F