Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen
|
1. Was ist Semantisierung? Erklärung zum Bing-Wörterbuch Unter Semantisierung versteht man die Verwendung sinnvoller HTML-Tags und ihrer eindeutigen Attribute zum Formatieren von Dokumentinhalten. Einfach ausgedrückt ist Semantik die Verarbeitung von Daten und Informationen, damit sie von Maschinen verstanden werden können. Semantische (X)HTML-Dokumente tragen dazu bei, die Benutzerfreundlichkeit Ihrer Website für Besucher zu verbessern, beispielsweise für Benutzer von PDAs, Textbrowsern und Menschen mit Behinderungen. Suchmaschinen oder Crawler-Software unterstützt es beim Aufbau von Indizes und kann diesen eine höhere Gewichtung verleihen. Tatsächlich besteht eine der wirksamsten Möglichkeiten zur Verbesserung der SEO darin, die HTML-Struktur einer Webseite zu rekonstruieren, was im Wesentlichen einer Semantisierung gleichkommt. Einfach ausgedrückt geht es darum, geeignete Tags (Codesemantik) entsprechend der Struktur des Inhalts (Inhaltssemantik) auszuwählen, um es Entwicklern zu erleichtern, eleganteren Code zu lesen und zu schreiben, während Browser-Crawler und Maschinen ihn gut analysieren können. Verwenden Sie geeignete Tags für unterschiedliche Inhalte. 2. Was sind die Vorteile der Semantik? Die Seite kann eine gute Inhaltsstruktur präsentieren, auch wenn die CSS-Datei nicht erfolgreich geladen wurde. Es ist gut für SEO, da Suchmaschinen und Crawler mehr nützliche Informationen crawlen, Indizes erstellen und höhere Gewichte erhalten können. Es ist bequem für andere Geräte (wie Bildschirmlesegeräte, blinde Leser, mobile Geräte) zu analysieren und Webseiten auf sinnvolle Weise darzustellen.3. Semantisierung von HTML5 Das neueste HTML5 fügt der Webseitenstruktur ein System strukturierter Tags hinzu
Struktur: XML/HTML-CodeInhalt in die Zwischenablage kopieren
4. Was Sie beim Schreiben von HTML beachten sollten Tag schließen</>, />; Verwenden Sie die Tag-Verschachtelung richtig, um zu vermeiden, dass Inline-Elemente Blockelemente umgeben. Gehen Sie mit Tags sinnvoll um und verwenden Sie möglichst wenig nicht-semantische Tags wie „div“ und „span“, damit die Seite auch dann eine gute Inhaltsstruktur aufweisen kann, wenn die CSS-Datei nicht erfolgreich geladen wird. Verwenden Sie <h1>, <h2>, <h3>, <h4>, <h5>, <h6> als Titel in absteigender Reihenfolge der Wichtigkeit, wobei <h1> die höchste Ebene ist; Verwenden Sie <p>, um Absätze zu trennen, und vermeiden Sie die Verwendung von <br /> zum Zeilenumbruch. Verwenden Sie keine reinen Style-Tags wie b, font, u usw., sondern nutzen Sie stattdessen CSS-Einstellungen. Wenn Sie eine Tabelle verwenden, umgeben Sie die Kopfzeile, den Textinhalt und die Tabelle mit <thead>, <tbody> und <tfoot>. 5. Was muss HTML im Hinblick auf die SEO-Optimierung leisten? Der Dokumenttyp verwendet einheitlich den HTML5-Dokumenttyp <!DOCTYPE HTML>; Die Meta-Tag-Optimierung umfasst hauptsächlich Titel, Beschreibung und Schlüsselwörter. Verwenden Sie am Ende nicht "/>", sondern schreiben Sie direkt ">". Am besten verwenden Sie eine CSS-Datei und fügen sie in das <head>-Tag ein. Am besten platzieren Sie die JS-Datei ganz unten, um zu vermeiden, dass die Darstellung von HTML durch das Laden der JS-Datei blockiert wird. Verwenden Sie externe Dateien, um das Schreiben von CSS- und JS-Codes direkt in HTML zu vermeiden. Verwenden Sie beim Importieren von Dateien eine absolute Adresse. Die absolute Adresse enthält den Domänennamen der Website. Das Hinzufügen von Alt-Keywords zum img-Tag ist gut für die SEO-Optimierung. Vermeiden Sie Wörter wie „的“, „上“, „好“, „等“ usw., die standardmäßig nicht in der Datenbank der Suchmaschine enthalten sind. Fügen Sie dem Logo ein h1-Tag hinzu. Suchmaschinen gehen davon aus, dass das h1-Tag die wichtigste Information auf der Webseite ist, daher platzieren wir die wichtigsten Informationen im <H1>-Tag. Ob die HTML-Seite den Normen entspricht, können Sie auf dieser Seite prüfen. Rufen Sie dazu einfach den Link auf und Sie gelangen zum Prüfergebnis. https://validator.w3.org/nu/ Das Obige ist der gesamte Inhalt der kurzen Diskussion des Herausgebers über die Semantik von HTML und einige einfache Optimierungen. Ich hoffe, jeder wird 123WORDPRESS.COM unterstützen~ |
<<: Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue
>>: Reines CSS, um den Listen-Pulldown-Effekt auf der Seite zu erzielen
Artikel empfehlen
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
Rahmenstil Die Eigenschaft „Border-Style“ gibt an...
Einführung und Verwendung von Triggern und Cursorn in MySQL
Trigger-Einführung Ein Trigger ist eine spezielle...
mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)
Dies ist das Installationstutorial von mysql5.7.1...
Benutzerdefinierte optionale Zeitkalenderkomponente von Vue
In diesem Artikelbeispiel wird der spezifische Co...
Tatsächlicher Datensatz zur Wiederherstellung der MySQL-Datenbank nach Zeitpunkt
Einführung: MySQL-Datenbankwiederherstellung nach...
Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker
My97DatePicker ist ein sehr flexibles und benutze...
Ausführliche Erläuterung der gespeicherten MySQL-Prozeduren (in, out, inout)
1. Einleitung Es wird seit Version 5.0 unterstütz...
Vollständige Liste der CentOS7-Firewall-Betriebsbefehle
Inhaltsverzeichnis Installieren: 1. Grundlegende ...
VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration
1. Laden Sie das CentOS-Image herunter 1.1 Downlo...
So fügen Sie einem laufenden Docker-Container dynamisch ein Volume hinzu
Jemand hat mich schon einmal gefragt, ob es mögli...
CSS-Stil zum Zentrieren des HTML-Tags im Browser
CSS-Stil: Code kopieren Der Code lautet wie folgt:...
Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5
Samba-Dienste: Dieser Inhalt dient als Referenz f...
Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3
Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...
Vue realisiert den Prozentbalkeneffekt
In diesem Artikel wird der spezifische Code von V...
CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen
1. Wenn das mobile Endgerät die Listenverschiebun...