Die Verwendung von H -Tag, insbesondere die Verwendung von H1, war schon immer ein kontroverses Thema und ist auch eine Frage, die unsere Studie würdig ist. Basierend auf den Erfahrungen meiner Vorgänger habe ich diesen Artikel auf der Grundlage meines Verständnisses von H -Tags geschrieben, in der Hoffnung, dass er für alle hilfreich sein wird. Was ist H -Tag?
W3C weist darauf hin, dass die H1-H6-Tags Titel definieren können. H1 definiert den größten Titel. H6 definiert den kleinsten Titel.
H1, H2, H3, H4, H5, H6 als Titel -Tags und abnimmt nach Bedeutung. Ich denke, es ist notwendig, solchen Prinzipien zu befolgen, die die hierarchischen Beziehungen der Seite klarer machen und es den Suchmaschinen ermöglichen, den Themeninhalt der Seite besser zu kriechen und zu analysieren, um ein besseres Verständnis zu erhalten, finden Sie im folgenden Code:
<body> <h1>First-level title</h1> <p>Paragraph</p> <div> <h2>Second-level title</h2> <p>...</p> <div> <h3>Second-level title</h3> <p>...</p> <div> <h4>Second-level title</h4> <p>...</p> </div> </div> </div></body>
Der Standardstil des Browsers nimmt auch aufgrund von Bedeutung ab, und die Schriftgröße ändert sich von groß nach H1 bis H6. Es gibt einige Unterschiede in den Stilen in verschiedenen Browsern. Aufgrund dieses Unterschieds verwenden wir normalerweise CSS, um sie in Layout zu vereinen.
Wie benutzt du es?Heutzutage verwenden viele Websites (einschließlich bekannter Websites wie Taobao, Sina, Sohu) H1 auf dem Logo, wie im Bild gezeigt:
Es ist nicht ohne Grund für alle, dies zu verwenden, aber tatsächlich gibt es ziemlich viele Vorteile: Es fasst den Inhalt der gesamten Seite zusammen, und das Logo ist sehr nahe am Körper, was es für Suchmaschinen bequem macht, das Thema am schnellsten zu ergreifen, und in Bezug auf die Semantik ist es auch genauer.
Natürlich verwenden nicht alle Websites H1 auf Logo. Die Verwendung von Netease ist ein besonderer Beispiel:
Netease legt das Display fest: Keiner Stil, um es zu verbergen, was nicht nur den Widerspruch löst, nicht zu wissen, wo man H1 platziert, sondern auch die Rolle der SEO -Optimierung spielt, von der gesagt werden kann, dass sie zwei Vögel mit einem Stein töten kann.
Und Tencents Homepage H1 ist die Schlagzeilennachrichten, wie im Bild gezeigt:
Aus dem obigen Beispiel können wir sehen, dass die Verwendung von H1 für wichtige Websites unterschiedlich ist. Wo kann man es auf H1 setzen? Es war schon immer ein kontroverses Problem, aber ich glaube nicht, dass es eine absolute Antwort darauf gibt, wo sie es ausdrücken können. Ich denke, es sollte anhand der Faktoren wie der Positionierung, dem Typen und der Benutzersuchgewohnheiten der Webseite berücksichtigt werden. Zum Beispiel können Sie für Nachrichten -Websites H1 in die Headline -Nachrichten setzen. Für umfassende Portal -Websites können Sie H1 auf das Logo setzen. Wenn die Unternehmenswebsite auch H1 auf das Logo setzen kann, da Benutzer im Allgemeinen nach dem Namen des Unternehmens suchen. Wenn es Website -Slogans gibt, können Sie auch H1 auf den Slogan setzen, was auch eine gute Wahl ist. Kurz gesagt, es ist am besten, den besten zu wählen, der am besten passt.
In Bezug auf H2 benutze ich es normalerweise gerne auf der großen Spalte der Homepage, wie im Bild gezeigt:
Für die Inhaltsseite bin ich eher daran gewöhnt, H2 für den Artikeltitel zu geben, und der Spaltenentitel wird durch H3 dargestellt, wie in der Abbildung gezeigt:
H3 wird hauptsächlich für Säulentitel verwendet, wie in der Abbildung gezeigt:
Das H -Tag, das auf der Homepage von R & F -Produkten verwendet wird, hat nicht nur klare hierarchische Beziehungen, sondern unterstreicht auch die Bedeutung von Produktinhalten, was auch für Suchmaschinen sehr vorteilhaft ist.
Das folgende Beispiel ist auch sehr interessant, wie in der Abbildung gezeigt:
Der Spalte Titel verwendet H2 und der Nachrichtentitel verwendet H1. Wenn ihre Ordnung nach hierarchischen Beziehungen umgekehrt ist, ist sie nicht falsch. Wenn wir tatsächlich H -Tags verwenden, können wir es auch basierend auf der Bedeutung des Inhalts definieren. Daher kann nur durch flexible Anwendung der grundlegenden Theorien maximiert werden.
Aus den obigen Beispielen ist es nicht schwer zu erkennen, dass die Verwendung von H -Tag sehr flexibel ist und nicht auf diese Verwendung beschränkt ist. In unserer Anwendung müssen wir nur dem Prinzip der Verringerung der Bedeutung folgen und aus einem Beispiel lernen und auf andere Aspekte anwenden. Gleiches gilt für H4-H6.
Fasste einige zusammenBasierend auf dem Verständnis und der Anwendung von H-Tags durch Referenzmaterialien, Front-End-Produktionsexperten, bekannte Websites usw. habe ich die folgenden Spezifikationen zusammengefasst, um Ihnen einen gewissen Referenzwert zu erzielen.
H1 Erster Titel
Es stellt die oberste Priorität dar und seine Position ist genauso wichtig wie die Position von Schlüsselwörtern auf der Seite. Es wird im Allgemeinen in Website -Titeln oder Schlagzeilen verwendet, und einige große Websites werden auch in Logos verwendet. Obwohl H1 -Codes multiplikum geschrieben werden können, sind sie tatsächlich semantisch einzigartig. Es ist am besten, nur einmal oder nicht auf einer Seite zu erscheinen.
H2 Level 2 Titel
Es wird hauptsächlich im Artikel Titel und Spaltentitel des Hauptinhalts der Seite angezeigt. Die dreispaltige Struktur befindet sich im Allgemeinen in der Mitte und die zweispaltige Struktur ist im Allgemeinen auf der wichtigsten Seite. Kann mit H3 verwendet werden.
H3 Level Dreier Titel
Im Allgemeinen die Seitenleiste der Hauptseite. H4 ist sein Auxiliary und erscheint nicht sehr häufig.
Die Beziehung zwischen Seitenebene kann nicht zu tief sein, daher erscheint H4, H5, H6 im Allgemeinen weniger.