it-swarm.com.de

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

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 dies für zukünftige Leser dieser Frage nützlicher sein wird.

Einige meiner Erkenntnisse

Einige Websites scheinen Dokumentumrisse 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 das obige Beispiel das <nav> -Element mit einer geeigneten Überschrift nicht verwendet. 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 Hauptdokument <title> Element "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 nicht viel Sinn aus dem Kontext machen ( Veraltete Praktiken zu vermeiden ). 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 passiert, wenn das MDN 2 Themen mit demselben (oder sehr ähnlichem) Titel "Veraltete Methoden zum Vermeiden" enthält, wobei eines Teil des CSS-Leitfadens und das andere Teil des HTML-Leitfadens ist?.

Am anderen Ende des Spektrums scheinen Websites die Überschrift der Hauptebene <body> für den Produktnamen (Foo) oder den Themencontainer (User Guide for Foo) zu verwenden. Wo alle folgenden Seiten dann <h2> für den tatsächlichen Seitentitel verwenden.

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? Dies beinhaltet die Verwendung von <title>, <header> und <h1> Elementen.

  • Name der Firma
  • Produktname
  • Benutzerhandbuch
  • Anfangen

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
14
Lea Hayes

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 <h1> für die Überschrift 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, zum Beispiel ein Abschnitt über Hunde in einer Sammlung von Seiten über Haustiere, sollte die Überschrift der obersten Ebene einen gewissen Kontext annehmen. schreibe einfach <h1>Dogs</h1>, während der Titel in jedem Kontext funktionieren sollte: Dogs - Your Guide to Pets.

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 unter Verwendung des <title> selbst definiert wird. Wenn es also vermutlich mehrere Seiten mit genau demselben <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.

8
Lea Hayes

Ich würde die Verwendung eines H1 oder einer beliebigen Überschriftenebene für den 'Produktnamen' in der Überschrift bestreiten.
Das H1 steht für den Titel der Seite, nicht für das Produkt, die Anwendung oder die Website.
Sowohl für die Barrierefreiheit 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>
1
davidelrizzo

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>

In diesem nächsten Abschnitt wird das Haupt-Tag eingeführt, 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.

0
PatomaS