HTML-Semantik und einige einfache Optimierungen

1. Was ist Semantik?

Erklärung aus dem Bing Online Dictionary

Semantik bezieht sich auf die Verwendung sinnvoller HTML-Tags und ihrer eindeutigen Attribute zum Formatieren von Dokumentinhalten. Laienhaft ausgedrückt ist Semantik die Verarbeitung von Daten und Informationen, um sie für Maschinen verständlich zu machen. Semantische (X)HTML-Dokumente tragen dazu bei, die Benutzerfreundlichkeit Ihrer Website für Besucher zu verbessern, beispielsweise für diejenigen, die PDAs, Textbrowser und Menschen mit Behinderungen verwenden davon profitieren. Für Suchmaschinen oder Crawler-Software hilft es beim Aufbau von Indizes und kann zu einer höheren Gewichtung führen. Tatsächlich besteht eine der effektivsten Methoden für SEO darin, die HTML-Struktur der Webseite zu rekonstruieren, bei der es sich im Wesentlichen um Semantik handelt.

Einfach ausgedrückt basiert es auf der Struktur des Inhalts (Inhaltssemantik) und der Auswahl geeigneter Tags (Codesemantik), um Entwicklern das Lesen und Schreiben eleganterer Codes zu erleichtern und gleichzeitig Browser-Crawlern und der Maschine die Analyse zu ermöglichen sehr gut und verwendet welche Art von Tags für welche Art von Inhalt.

2. Welche Vorteile bietet Semantik?

Die Seite kann auch dann eine gute Inhaltsstruktur präsentieren, wenn die CSS-Datei nicht erfolgreich geladen wurde.

Es ist vorteilhaft für SEO, da Suchmaschinen und Crawler-Software mehr nützliche Informationen crawlen und erstellen können Indizes und höheres Gewicht erhalten;

Praktisch für andere Geräte zum Parsen (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen

3 , Die Semantik von HTML5

Das neueste HTML5 fügt der Struktur von Webseiten ein System strukturierter Tags hinzu

Struktur:

<header>头部</header>
<nav>导航</nav>
<article>
    <section>内容1</section>
    <section>内容2</section>
    <section>内容3</section>
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

4. Beim Schreiben von HTML zu beachtende Punkte

Tag-Abschluss>, />;

Verwenden Sie die Tag-Verschachtelung korrekt, um Inline-Elemente um Blockelemente herum zu vermeiden;

Verwenden Sie Tags rational und verwenden Sie so wenig semantische Tags wie div und span. Die Seite kann auch dann eine gute Inhaltsstruktur darstellen, wenn die CSS-Datei nicht erfolgreich geladen wurde.

,

,

,

,

werden als Titel verwendet, und in absteigender Reihenfolge der Wichtigkeit ist

die höchste Ebene;

verwendet

um Absätze zu unterscheiden und die Verwendung von für Zeilenumbrüche zu vermeiden;

Verwenden Sie keine reinen Stil-Tags, b, Schriftart, u usw., wechseln Sie zu CSS-Einstellungen;

Bei der Verwendung von Tabellen , verwenden Sie

,

,

, um den Kopfteil, den Hauptinhalt und die Tabelle zu umgeben.

5. Was muss in Bezug auf die SEO-Optimierung mit HTML getan werden?

Dokumenttypen verwenden HTML5-Dokumenttyp

;

Meta-Tag-Optimierung, hauptsächlich einschließlich Titel, Beschreibung, Schlüsselwörter, verwenden Sie nicht „ />“ am Ende, Sie sollten „>“ direkt schreiben "; CSS-Dateien werden am besten verwendet und im Header-

-Tag platziert;

JS-Dateien werden am besten unten platziert, um eine Blockierung der HTML-Wiedergabe aufgrund des Ladens von JS-Dateien zu vermeiden;

Verwenden Sie externe Dateien, um das direkte Schreiben von CSS- und JS-Code in HTML zu vermeiden.

Verwenden Sie absolute Adressen, wenn Sie Dateien einführen. Die absoluten Adressen enthalten den Domänennamen der Website.

img Tag Das Hinzufügen von Alt-Keywords ist für die SEO-Optimierung von Vorteil. Vermeiden Sie die Verwendung von „of“, „up“, „good“, „usw.“ usw., die nicht standardmäßig in Suchmaschinendatenbanken enthalten sind

-Tag, die Suchmaschine verwendet standardmäßig das h1-Tag. Dieser Titel ist die wichtigste Information auf der Webseite, daher fügen wir die wichtigsten Informationen in das

Ob die HTML-Webseite den Standards entspricht, können Sie auf dieser Webseite überprüfen und direkt den Link eingeben, um die Prüfergebnisse anzuzeigen

https://validator.w3.org/nu /