H1 vs H2 vs Other für Website-Titel / Logo und SEO

Es ist üblich, dass Front-End-Entwickler den Titel oder das Logo der Website in das H1-Tag und den Titel in das H2-Tag einfügen. In den meisten Fällen ist jedoch der Titel der Seite / des Artikels wichtiger, da er den inhaltlichen Wert enthält. Meine Frage ist also, was aus semantischer und SEO-Sicht der beste Ansatz ist. Beispiele:

• Logo - H1, Titel - H1
• Logo - H1, Titel - H2
• Logo - H2, Titel - H1
• Logo - Anderer Tag, Titel - H1

Vorausgesetzt, andere Varianten, wenn Sie glauben, dass sie größere Wirkung haben werden.

Normalerweise füge ich das Logo oder den Site-Titel nicht in ein H1 ein. Ich sehe es gerne so, dass jede Seite ein Dokument ist. In diesem Dokument geht es um ein bestimmtes Thema, das sich im Seitentitel und in der Hauptüberschrift widerspiegelt. Die Website selbst ist nur der Herausgeber des Dokuments. Semantisch gesehen ist es daher falsch, das Logo oder den Namen der Website als Hauptüberschrift jeder Seite zu verwenden. Logos werden deutlich sichtbar angezeigt, um den Benutzer daran zu erinnern, wo sie sich befinden, und zu Branding-Zwecken. Sie sind jedoch nicht Teil des Inhalts oder Dokuments.

Ich meine, wenn Sie sich eine Nachricht ansehen, sehen Sie vielleicht ein kleines Nachrichtensender-Logo in der Ecke, aber die Nachricht trägt nicht den Titel "CNN" oder "BBC News". In der Überschrift steht die Geschichte, nicht das Netzwerk, das die Geschichte veröffentlicht. Wenn Sie eine Zeitschrift lesen, wird in der Überschrift nur der Titel des Artikels verwendet, nicht der Name der Veröffentlichung.

Es ist auch semantisch falsch, ein H1-Tag für den Logo- / Site-Namen und eines für den Dokumenttitel zu verwenden. Überschriften definieren die hierarchische Struktur des Inhalts auf der Seite. Wenn Sie einen für den Site-Namen und einen für den Dokumenttitel verwenden, besteht diese Seite aus zwei Hauptabschnitten: "mydomain.com" und "contact us".

Siehe Seite 37 des Dokuments " SEO Report Card" von Google :

Die meisten Produktseiten bieten die Möglichkeit, ein <h1>Tag zu verwenden, wie im obigen Beispiel. Derzeit werden jedoch nur andere Überschriften-Tags ( <h3>in diesem Fall) oder ein größeres Schriftdesign verwendet. Wenn Sie Ihren Text so formatieren, dass er größer erscheint, wird möglicherweise dieselbe visuelle Darstellung erzielt, die Suchmaschine erhält jedoch nicht dieselbe semantische Bedeutung wie ein <h1>Tag. Der Name des Produkts und / oder ein paar Worte zu seinen Funktionen sind in einem <h1>Tag für die Produkthauptseite großartig .

Aus der Analyse der Angebote durch Google würde ich den Schluss ziehen, dass Google erwartet , dass in einem H1 ein eindeutiger, seitenbezogener Wert erscheint (die Abbildung im verlinkten Dokument veranschaulicht dies).

Hier ist eine gute Begründung: Ihr Logo ist ein Bild, kein <h1>

Semantisch <h1>sollte für den Seitentitel verwendet werden, und der Seitentitel sollte pro Seite eindeutig sein. Der Name Ihres Logos oder Ihrer Website ist nicht der Seitentitel (abgesehen von der Startseite).

Der Name Ihres Logos / Ihrer Website sollte in einem einfachen Div stehen, möglicherweise mit der ID "Überschrift". Oder das <header>Tag, wenn HTML5 verwendet wird.

IMO sollte es nur ein H1 auf der Seite geben. Und das H1 sollte immer vor dem H2 stehen - um eine korrekte Hierarchie Ihrer Inhalte aufrechtzuerhalten.

Das Logo wird oft auf jeder Seite wiederholt und wie Sie sagen, ist auf den meisten Seiten der Titel fast immer wichtiger.

Auf der Homepage würde ich folgendes in Betracht ziehen:
logo / title - H1 [, title - H2]
Obwohl das Logo auf Ihrer Homepage durchaus Ihr Titel sein könnte.

Auf allen folgenden Seiten würde ich mich jedoch für Folgendes entscheiden :
logo - other tag, title - H1
Gegebenenfalls sogar mit dem Logo als Hintergrundbild.

Was Sie wirklich in Ihrem H1-Tag suchen, ist der Seitentitel oder was diese Seite einzigartig macht. Wenn Sie ein Image darin verwenden, müssen Sie es aus Gründen der Abbaubarkeit mit einer Fallback-Methode ausführen:

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

Auf diese Weise können Sie festlegen, dass ein Bild für den H1 angezeigt wird (der häufig als Logo-Bereich missbraucht wird) und dennoch gute Inhalte für Benutzer mit eingeschränkten Interneterfahrungen enthält. Es macht auch Ihren SEO-Wert glücklich.

Dies ist aufgrund der Praktiken (und Vorlagen), die es gibt, eine großartige Frage.

Persönlich beziehe ich mich gerne auf die "Outlining 101" -Logik, wobei Folgendes berücksichtigt wird:

H1 ist wie ein Titel (sicherlich möchten Sie Ihren HTML-Titel ergänzen) und es sollte nur einen pro Seite geben, genau wie eine Seite nur einen Titel hat

H2 ähnelt in etwa den römischen Ziffern im Umriss: I., II., III. Usw.

H3 wäre das Umrissäquivalent von A., B., C.

Oft ist die praktische Anwendung dieser Logik auf einer Webseite nur schwer zu erzwingen - es gibt so viele zufällige Informationen, die einfach nicht in diese Hierarchie passen. Wenn Sie sich jedoch hinsetzen und versuchen, diese Logik zu durchbrechen, hat die Disziplin meines Erachtens einen Vorteil.

Ich bin h1für Haupttitelkerl. Und der Haupttitel ist der dekorierte Site-Name oder, wie Sie es nennen, das Logo. Hier ist der Punkt: In der Kopfzeile der Website ist das Logo kein Logo, sondern die Kopfzeile der illustrierten Website. Designer gestalten es gerne als Logo.

Was ist los mit LOGO -> H1?

<div>Google</div>
<h1>About Us</h1>

Nun, da dies h1der wichtigste Abschnitt ist, in dem dem Besucher erklärt wird, worum es geht, kann der Besucher die Seite nicht verstehen, weil sie h1zu spezifisch ist. Über wen?

<h1>Google</h1>
<h2>About Us</h2>

Diese Seite handelt von Google. Hier ist der Abschnitt über uns. Sehen Sie - es gibt keine Frage? Alles ist klar.

Zweiter Punkt.

Seitenstruktur. Wenn Sie die Hauptüberschrift der Site in div oder p setzen, können Sie sie nicht zuordnen.

<p>Google</p>
<h1>About us</h1>

Wie kann ich "About U" mit Google verknüpfen, wenn es danach h1kommt? Weil alles, was NACHHER H1kommt, damit verbunden ist, nicht das, was vorher wird.

<h1>Google</h1>
<h2>About Us</h2>

"Über uns" gehört zu Google. Keine Fragen.

Dritter Punkt.

HTML ist die Sprache, mit der Informationen beschrieben werden können. Deshalb zeigen Sie keine Informationen an, Sie beschreiben sie. Und jede Seite ist unabhängig. Deshalb beschreiben Sie eine Seite, weil es keine Assoziationen zwischen Seiten gibt. Nur Links, die einzelne Seiten verlinken.

<p>Google</p>
<h1>About us</h1>

DIESE Seite ist Über uns. Wer / was ist das Unklar. Es beschreibt nur etwas, das "Über uns" genannt wird.

<h1>Google</h1>
<h2>About Us</h2>

Diese Seite beschreibt Google. Und es gibt einen Abschnitt über uns. Us = höchstwahrscheinlich google, weil die Struktur es so beschreibt.

Ich hoffe, ich habe meinen Standpunkt klargestellt :)

PS! Sie können h2- h1- nicht verwenden, h3da es unlogisch ist, daher ein großer Fehler. Nur weil w3c nicht gesagt hat, dass es nicht erlaubt ist, macht es nicht gültig. Es ist unlogisch, denke darüber nach.

Logo als h2-Tag?

Ich habe mich gerade bei SitePoint (www.sitepoint.com) umgesehen, einem WordPress-Blog mit einer Mischung aus regulären Seiten und Blogs. Im Allgemeinen stellte ich fest, dass sie den Seitentitel als h1-Tag und das Logo als h2 festgelegt haben. Sie können dies auf einer Blog-Seite wie www.blogs.sitepoint.com/category/design/ sehen. Während Sie auf der Website herumfahren, finden Sie verschiedene Setups. Ich konnte das h1-Tag häufig nicht finden, beispielsweise auf der Hauptproduktseite (http://products.sitepoint.com/). Wenn Sie auf dieser Seite auf ein bestimmtes Produkt klicken, um weitere Informationen zu erhalten (www.sitepoint.com/books/design2/), wird erneut festgestellt, dass h1 der Seitentitel und h2 das Logo ist. Eine typische Webseite ähnelt dem Blog (siehe www.sitepoint.com/help/). In diesem Fall sind die Themen der FAQ alle h2-Tags.

Tom Rogers

Ihr Logo muss nicht in einer Überschrift verschachtelt sein - ein einfaches verknüpftes Bild in der headergenügt. Aber sowohl der Titel Ihrer Website als auch der Titel Ihrer Seite / Ihres Artikels sollten sein <h1>. Dieser Artikel ist informativ: Die Wahrheit über mehrere H1-Tags in der HTML5-Ära .