Semantisches HTML5 bietet uns die Möglichkeit, unsere Webseiten zu verbessern und für Suchmaschinen zu optimieren. Wir können diese Möglichkeiten voll ausschöpfen, indem wir maschinenlesbare semantische HTML5-Elemente zur Beschreibung von Seitengliederungen verwenden. Speziell benannte Container können Suchmaschinen und Browsern helfen, die Anordnung unserer Seiten leichter zu erkennen.

Zum Beispiel ist <header> jetzt ein eigenes Element, ebenso wie <nav>, und so weiter. Sie haben die Möglichkeit, ihren Seitenaufbau mit diesen Befehlen zu beschreiben. Übrigens ist es wichtig, <header> nicht mit Heading-Containern (<h1>) zu verwechseln. Diese haben auch semantische Regeln, denen wir folgen sollten.

In diesem Beitrag gebe ich Ihnen einen Überblick darüber, welche Möglichkeiten HTML5 für SEO bietet und warum man sie nutzen sollte.

Article.

Das vielleicht wichtigste semantische HTML5-Element ist <article>. Dies kann so verwendet werden, dass Ihr Content in Screenreadern und Reader Views analysiert wird und Suchmaschinen ein fest kodiertes Signal für einzigartige Inhalte auf der Seite finden. Sie können testen, wie dies mit einer in Ihrem Browser geladenen Seite funktioniert, indem Sie die Leseransicht wechseln.

Wenn Sie Ihren Toggle Switch nicht sehen oder es keinen <article> Container im Seitencode gibt, erhalten Sie die Option überhaupt nicht oder es wird nichts separat geladen. Wenn Sie Inhalte in der Leseransicht erhalten, sind es die Inhalte, die der Webmaster in einem einzigen <article> Container verpackt hat. Als Entwickler können wir diese Container mit direkter Spezifität gestalten.

Mehrere Articles.

Obwohl es nicht syntaktisch falsch ist, mehr als ein <article>-Element pro Seite zu haben, ist es dennoch keine gute Idee. Auf diese Weise erhalten Sie keine Leseransichtsoptionen, und es gibt auch keine Vorteile für Suchmaschinen. Bei Blog-Homepages, die Beiträge auflisten, können Sie jeden Blogbeitrag als „Artikel“ betrachten, außer dass ein Auszug aus einem Artikel nicht echt ist.

Versuchen Sie stattdessen, das semantisch korrekte <section>-Element für jede Post Summary zu verwenden, in der zugehörige Details gesammelt werden. <section> kann in diesem Fall als Kind von <article> korrekt funktionieren. Die Parent-Child-Beziehung zwischen <article> und <section> kann umgekehrt werden, aber ich würde es nicht empfehlen, es sei denn, die Umstände sorgen dafür, dass es logisch erscheint.

Lassen Sie einen einzelnen <article> den einzigartigen Content einer Seite umhüllen:

Copy to Clipboard

Technical Debt.

Mit technical Debt wird alternder Code in der Codebasis bezeichnet. Dieser wird ersetzt oder refaktorisiert. Die gebräuchlichste technische Debt besteht in Form von unauffälligen Variablen- und Datenbankspaltennamen.

SEOs geben oft Ratschläge, wie Sie auf Ihre eigenen technischen Debts reagieren. Die Implementierung von HTML5 kann dieser Arbeit ähneln.

Wenn Sie ein modernes Framework mit einer Templating-Sprache wie JSX verwenden und alles ein <div> oder ein <span> ist, kann die Umbenennung für die erfolgreiche Implementierung von <main>, <article>, <header>, <nav>, <footer>, <aside> und <section> sehr ermutigend erscheinen, wenn Sie sich noch früh im Prozess befinden. Je länger Sie warten, desto mehr kommt es zu technischen Debts.

Semantische Details.

Viele von uns bevorzugen es, die anfänglich kleinen Details zu überspringen, um Code zu schreiben, der funktioniert, vor allem wenn dieser unter Zeitvorgaben läuft. Wir verwenden die von uns eingesetzten Verfahren, um Webseiten und Apps mit minimalem Aufwand zu veröffentlichen, um produktiv zu sein. Wir verwenden Frameworks, Task Runners und Tooling mit großer Effektivität. Wir beobachten ständig glänzende neue Dinge, die wir lernen müssen.

Wir wissen auch, dass unadressierte Details die technischen Debts enorm erhöhen können. Auf lange Sicht wollen Sie nicht, dass alle Ihre Elemente nach den gleichen <div>- und <span>-Elementen benannt werden. Ihr Code wird mit der Zeit immer wenig erkennbar sein. Organisieren Sie Ihren Code in logische Elemente. Verwenden Sie die Elemente, die HTML5 standardmäßig bereitstellt.

Semantische SEO-Gliederung.

In SEO kennen wir seit langem die Überschriften, insbesondere die Top-Level <h1> Überschrift. Das Besondere an ihnen ist die Bedeutung, die sie über Dokumenten- und Section-Gliederungen vermitteln. Beginnen Sie Ihre Dokumentenübersicht mit den Elementen <main>, <header> und vielleicht einem oder zwei <nav> Containern (einer pro Link-Gruppierung). Dann werden Sie wahrscheinlich <article> verwenden wollen, um einzigartige Inhalte mit <Kopfzeilen>, Überschriften und vielleicht einem eigenen <footer> zu verpacken

Copy to Clipboard

Schlusswort.

Die wichtigste Sache, die Sie beachten sollten, wenn Sie ansonsten ein semantisch sinnvolles <div> verwenden, um einen Teil des Contents als Gruppierung für eines der oben genannten zu verpacken, ist, sich die Frage zu stellen: Kann ich ein beschreibendes Element verwenden? Wird es mit meinem Anwendungscode funktionieren? Kann ich es z.B. mit Row Class Namen oder anderer Grid-Logik gestalten? Ihre Anwort sollte ja sein, bis Sie die semantische HTML5-Auszeichnung vollständig genutzt haben.

Vielen Dank für Ihren Besuch.