<h1> - Semantische Auswirkung vs. SEO-Auswirkung

Es gibt viele Debatten über die Architektur der Überschriftenstruktur in HTML5. Nachdem ich verschiedene Artikel gelesen habe, bin ich zu drei möglichen Architekturen gekommen, die für mich logisch sinnvoll sind, aber ich bin mir nicht sicher, welche Methode tatsächlich richtig ist. Ich werde sie unten mit Codebeispielen auflisten und hoffentlich kann jemand etwas Licht in die richtige Balance bringen, oder noch schlimmer / besser, sagen Sie das gefürchtete "Sie machen es falsch" und helfen Sie mit.

Ansatz 1: Version A.

Single <h1>: Überschriften nur für seitenspezifischen Inhalt verwenden.

Dadurch bleibt die <h1>Navigation als oberste Ebene für die seitenspezifische Überschrift erhalten, während sie <h2-6>nach Bedarf im Inhaltsbereich fließt. Beim Verlassen der <header>, <nav>und <footer>als "unbenannte" Elemente.

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Ansatz 1: Version 2

Mehrere <h1>: Nur Überschriften nur für seitenspezifischen Inhalt verwenden.

Entspricht 1A mit dem Hinzufügen mehrerer gleich wichtiger Seiteninhaltsthemen. (zB möglich für Blogs oder geteilte Themenseiten)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Ansatz 1 Gliederung: Am logischsten für SEO (meine Meinung aus meiner Forschung)

• KÖRPER ohne Titel
  • NAV ohne Titel
• Hauptüberschrift
  • Bereichsüberschrift
    • Unterabschnitt Überschrift
  • Ohne Titel ABSCHNITT

Ansatz 2:

Mehrere <h1>: Hervorheben der Gliederungsstruktur UND der Inhaltshierarchie

Dies gilt Schriften der standortweiten Elemente <header>, <nav>und <footer>mit mehreren <h1>‚s für Nicht-Inhalte ausgerichteten Elemente.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Ansatz 2 Gliederung: Am logischsten für semantische Gliederung (wieder meine Meinung)

• Kopfzeile
  • Navigationsüberschrift
• Hauptüberschrift
  • Bereichsüberschrift
    • Unterabschnitt Überschrift
• Fußzeile Überschrift
  • Bereichsüberschrift

Ansatz 3

Single <h1>: Fokus auf Inhaltshierarchie; untere Ebene <h1-6>für standortweite Elemente

Dies gilt Schriften auf die standortweite Elemente <header>, <nav>und <footer>ohne die Verwendung von mehreren <h1>‚s für Nicht-Inhalte ausgerichteten Elemente.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Ansatz 3 Überblick: Ein bisschen eine Mischung aus beiden Ansätzen

• Kopfzeile
  • Navigationsüberschrift
• Hauptüberschrift
  • Bereichsüberschrift
    • Unterabschnitt Überschrift
  • Fußzeile Überschrift
  • Bereichsüberschrift

Wie kann ich das alles verstehen? Hat ein Ansatz mehr semantischen Wert als der andere? Ist man in Bezug auf SEO sinnvoller? Gibt es eine glückliche Balance, die erreicht werden kann?

Quellen: Es gab noch viele mehr, an diese kann ich mich im Moment erinnern

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Zu Beginn hat keines Ihrer Beispiele etwas mit Semantik zu tun. Ihre Frage basiert vollständig auf dem Parser-Modell, bei dem die Seite auf herkömmliche Weise von oben nach unten gelesen wird.

Aus diesem Grund ist Ihr erstes Beispiel richtig. Die folgenden Beispiele liefern keine vorhersehbaren Ergebnisse und können zu schwerem Sodbrennen führen.

Bitte haben Sie Verständnis dafür, dass Ihre Webseite auf verschiedene Weise konzeptionell betrachtet wird: erstens nach dem traditionellen DOM-Modell, bei dem HTML und dergleichen aus Benutzersicht bewertet werden; zweitens nur Text mit einfacher Markierung zur Angabe von Titeln, Untertiteln, Inhalten usw.; und drei, wobei eine semantische Ansicht verwendet wird, bei der den Header-Tags im Index basierend auf ihrem Platz in der h1-6-Hierarchie wirklich nur eine geringe Gewichtung zugewiesen wird. Im DOM-Modell erhalten Sie Dinge wie das Titel-Tag, das Beschreibungs-Meta-Tag usw., die in den beiden anderen Ansichten fehlen würden. Die DOM-Ansicht trägt jedoch wenig zur Gewichtung Ihrer Inhalte bei. Die Hauptfunktion besteht darin, Ihre Seite zu verstehen, wo sich Ihre Navigation befindet, wo sich Ihre Kopf- und Fußzeilen befinden, wo Ihr Inhalt beginnt und endet usw.

Was Sie wirklich beachten müssen, sind nur der Text und die semantischen Ansichten. Die semantische Ansicht wird größtenteils aus der Nur-Text-Ansicht abgeleitet, enthält jedoch verschiedene Sprach-, Psychosemantik-, Semanitiken- und andere Analysen Ihres Inhalts.

Ich werde die Semantik nicht noch einmal beschreiben, aber ich werde Sie auf eine Antwort verweisen, die ich vor einiger Zeit geschrieben habe und die ein Mini-Tutorial zu diesem Thema ist: Warum sollte eine Website mit Keyword-Füllung ohne Google-Suchergebnisse einen höheren Rang als eine haben?

Da das Web auf der gedruckten Seite basiert und Parser aus den frühen Tagen diesen Traditionen folgten und weitgehend unverändert sind, ist es unmöglich, ihnen zu entkommen. Hier ist eine Antwort, die die Lesereihenfolge der Überschriften erklärt, die nach dem Parser-Modell die beste Strategie bleibt: Verbessern Sie das Google-Ranking für allgemeine und bestimmte Keywords

Ich gebe zwar zu, dass es einen gewissen Effekt geben könnte, wenn Header-Tags verschoben werden, aber ich frage: Ist es eine kluge Sache, dies zu tun? Auf keinen Fall! Wie Dinge heute gewichtet werden, ist möglicherweise nicht so, wie sie morgen gewichtet werden. Das Befolgen eines herkömmlichen Formats gewährleistet vorhersehbare Ergebnisse, bei denen eine einfache Änderung der Gewichtung Ihre Website in einen Tail-Spin versetzen kann.

Hier ist eine Perspektive, wie dies funktioniert: Domain Name Benefit in SEO Ignorieren Sie den Titel und überspringen Sie den Anfang der Antwort und gelangen Sie zur Programmiererperspektive.

Wenn Sie diese drei Antworten lesen, können Sie die Auswirkungen des Header-Tags leicht verstehen. Es ist sehr gut möglich, die Leistung Ihrer Seite / Website zu ruinieren, wenn Sie diese ordnen. Selbst wenn Sie der Tradition folgen, können Sie Ihr Titel- und h1-Tag extrem schnell rückgängig machen, indem Sie einige Tags mit niedrigeren Headern überoptimieren. Sorgfältiges Gleichgewicht ist der Schlüssel.

Zuletzt werde ich Sie vor all diesen Online-SEO-Ratschlägen von Leuten warnen, die keine Ingenieure sind. Es ist ein Schläger, um Geld zu verdienen und um Ihre Aufmerksamkeit zu wetteifern. Wie Suchmaschinen funktionieren, ist kein Geheimnis. Es ist da draußen, wenn Sie wissen, wo Sie suchen müssen. Die meisten SEO-Experten sind überhaupt keine Experten, da sie Ihnen nicht sagen können, wie die Suchtechnologie zusammengesetzt ist. Ohne Ingenieur für Google oder Bing zu sein, können wir nie genau wissen, wie diese Suchmaschinen funktionieren. Glücklicherweise hat Google uns genug gesagt (und sie haben uns wirklich fast alles gesagt, was wir wissen müssen - und nein, es kam nicht von einem Typen namens Matt), dass, wenn Sie die Wissenschaft und die Technologien kennen, ein ziemlich vernünftiger Satz von Annahmen möglich ist gemacht sein. Aus meiner Sicht sind die meisten SEOs eher falsch als richtig, während einige eine viel höhere Trefferquote als der Durchschnitt haben.

Das Folgende ist aus der Perspektive der HTML5-Spezifikation, basierend auf der Annahme, dass Verbraucher (wie Suchmaschinen) das erwarten und damit arbeiten, was in den HTML-Standards angegeben ist. In der gegenwärtigen Praxis sind solche Markup-Details für SEO wahrscheinlich nicht wichtig, aber sie können für andere Verbraucher und die Zugänglichkeit wichtig sein.

Ich werde Überschriften mit dem entsprechenden Rang verwenden, da dies von HTML5 empfohlen wird , aber es ist auch möglich, sie h1überall zu verwenden (wenn Sie gegebenenfalls immer abschnittsweise Inhaltselemente verwenden).

Sie können Überschriften headeroder footerElemente nicht "anwenden" , da sie keinen Schnittinhalt enthalten (sie können nur Überschriften enthalten, diese Überschrift wäre jedoch nicht auf den Umfang des header/ beschränkt footer).

Jedes sectioning Inhaltselement ( section, article, nav, aside) und jedes Sektionierung Wurzelelement ( body, blockquoteusw.) haben eine Überschrift angewandt.

Diese sectioning Inhalt / root - Elemente und die Überschrift Elemente h1- h6sind die einzigen Elemente , die Materie für die Dokumentgliederung .

Während sich jeder Abschnitt nach einer Überschrift "sehnt", muss keine angegeben werden (in einem solchen Fall erhält er eine "implizite" Überschrift ohne Titel). Während es oft nützlich ist, eine bereitzustellen, gibt es Fälle, in denen dies nicht wirklich notwendig ist. Wenn Sie beispielsweise nur eine Navigation haben, ist eine navohne Überschrift ausreichend. Wenn Ihre Site jedoch über mehrere Navigationen verfügt, ist es möglicherweise sinnvoll, Überschriften zu verwenden, in denen die verschiedenen Zwecke erläutert werden.

In Ihrem Ansatz 1 bodyist dies ein Abschnitt ohne Titel (dies ist jedoch nur der Fall, weil Sie vor dem ersten Überschriftenelement navangezeigt werden ; andernfalls wäre dies die Überschrift für das gesamte Dokument). Ich denke nicht, dass ein Abschnitt ohne Titel eine gute Wahl ist. Es ist der erste Eintrag in der Gliederung, und im Idealfall (aber nicht unbedingt) fällt alles, was folgt, in den Geltungsbereich dieses Eintrags.h1
body

Für eine typische Website mit einer globalen Navigation ist es sinnvoll ( längere Erklärung ), den Site-Namen für die bodyÜberschrift des Abschnitts zu verwenden, da die globale Navigation zur gesamten Site gehört und nicht nur zum aktuellen Dokument:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

Der Hauptinhalt für dieses Dokument sollte auch im Bereich der Site-Überschrift enthalten sein, da die Site den Kontext des Hauptinhalts dieses Dokuments darstellt, dh Teil Ihrer Site ist:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Wenn Sie mehrere Abschnitte des Hauptinhalts haben, z. B. eine Liste von Blog-Posts, ist es häufig sinnvoll, einen zu verwenden section, der all diese enthält article, anstatt die articledirekten Kinder des body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Wenn Sie eine Site-weite Fußzeile haben, die so komplex ist, dass sie Schnittelemente benötigt, sollte sie sich wieder auf derselben Ebene wie der navund der Hauptinhalt befinden (da sie zur Site gehört, nicht zum Hauptinhalt):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(In all diesen Beispielen steht die Navigation vor dem Hauptinhalt, aber es ist oft sinnvoll, zuerst den Hauptinhalt zu haben. Ein Austausch dieser ist möglich. Sie sollten nur sicherstellen, dass das h1mit dem Site-Namen vor allen anderen Abschnitten / Überschriften steht.)