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
Eine detaillierte Diskussion der Komponenten in Vue
Inhaltsverzeichnis 1. Komponentenregistrierung 2....
Detaillierte Erläuterung gängiger Methoden von JavaScript String
Inhaltsverzeichnis 1. charAt Grammatik Parameter ...
Bei der Installation einer virtuellen Maschine auf Thinkpad VMware erscheint die Meldung „Dieser Host unterstützt Intel VT-x, aber Intel VT-x ist deaktiviert“ (Problemlösung)
Als ich heute VMware verwendete, um eine neue vir...
Docker erstellt MySQL-Erklärung
1. MySQL-Image herunterladen Befehl: docker pull ...
Beheben Sie den Gruppierungsfehler Ausdruck Nr. 1 der SELECT-Liste ist nicht in der GROUP BY-Klausel enthalten und enthält nicht aggregierte Werte in MySQL-Versionen über 5.7
Grund: MySQL 5.7.5 und höher implementiert die Er...
Spezifische Verwendung von Lazy Loading und Preloading in js
Verzögertes Laden (Lazy Loading) und Vorladen sin...
So exportieren Sie die MySQL-Tabellenstruktur nach Excel
Die Voraussetzungen sind wie folgt Exportieren Si...
Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben
Debug-Zweig Während der normalen Entwicklung eine...
Einige Fehler, die JavaScript-Anfänger häufig machen
Inhaltsverzeichnis Vorwort Verwechslung von „unde...
Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste
Dieses Projekt teilt den spezifischen Code von Vu...
Sollte ich JQuery aufgeben?
Inhaltsverzeichnis Vorwort Was soll verwendet wer...
js implementiert zufälligen Namensaufruf
In diesem Artikel wird der spezifische Code von j...
HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle
Code kopieren Der Code lautet wie folgt: <!DOC...
Detaillierte Erläuterung des automatischen Füllschreibens von CSS3-Flexboxen
In diesem Artikel wird hauptsächlich die Methode ...