Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)

Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)
Original-URL: http://segmentfault.com/blog/ciaocc/1190000002407912
Autor:ciaocc
Das Copyright liegt bei youciaocc. Bei Nachdruck bitte das Copyright angeben.

Zusammenfassung

Das -Tag stellt Metadaten zu einem HTML-Dokument bereit. Die Metadaten werden nicht auf der Seite angezeigt, sind aber maschinenlesbar. Es kann von Browsern (zum Anzeigen von Inhalten oder Neuladen einer Seite), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden. ——W3Schule

Erforderliche Attribute

Eigentum Wert beschreiben
Inhalt etwas Text Definiert Metainformationen, die sich auf das http-equiv- oder Name-Attribut beziehen.

Optionale Attribute

Eigentum Wert beschreiben
http-Äquiv Inhaltstyp / Ablauf / Aktualisierung / Cookie setzen Ordnen Sie das Inhaltsattribut dem HTTP-Header zu.
Name Autor / Beschreibung / Schlüsselwörter / Generator / überarbeitet / andere Verknüpft die Inhaltseigenschaft mit einem Namen.
Inhalt etwas Text Definiert das zum Übersetzen von Inhaltsattributwerten verwendete Format.


SEO-Optimierung

Referenzdokumentation

Seiten-Schlüsselwörter : Jede Webseite sollte über einen einzigartigen Satz von Schlüsselwörtern verfügen, die den Inhalt der Seite beschreiben.
Verwenden Sie beschreibende und repräsentative Schlüsselwörter und Ausdrücke, nach denen Benutzer suchen könnten und die die auf der Seite bereitgestellten Informationen genau beschreiben. Wenn Ihr getaggter Inhalt zu kurz ist, erachten Suchmaschinen ihn möglicherweise nicht als relevant. Außerdem sollte das Tag nicht länger als 874 Zeichen sein.


Code kopieren
Der Code lautet wie folgt:
<meta name="keywords" content="Ihre Tags" />


Seitenbeschreibung : Jede Webseite sollte ein Beschreibungs-Tag mit nicht mehr als 150 Zeichen haben, das den Inhalt der Webseite genau wiedergibt.

Code kopieren
Der Code lautet wie folgt:
<meta name="description" content="150 Wörter" />

Die Indizierungsmethode der Suchmaschine, Robotterms, besteht aus einer Reihe von durch Kommas (,) getrennten Werten, normalerweise mit den folgenden Werten: none, noindex, nofollow, all, index und follow. Stellen Sie sicher, dass Sie die Attributwerte „nofollow“ und „noindex“ korrekt verwenden.


Code kopieren
Der Code lautet wie folgt:

<meta name="robots" content="index,follow" />
<!--
alle: Dateien werden abgerufen und Links auf der Seite können abgefragt werden;
keine: Die Datei wird nicht abgerufen und die Links auf der Seite können nicht abgefragt werden;
Index: Die Datei wird abgerufen;
folgen: Die Links auf der Seite können abgefragt werden;
noindex: Die Datei wird nicht indiziert;
nofollow: Die Links auf der Seite können nicht abgefragt werden.
-->

Seitenumleitung und Aktualisierung : Die Zahl im Inhalt stellt die Zeit (in Sekunden) dar, d. h. die Aktualisierung erfolgt nach einer bestimmten Zeitspanne. Wenn Sie eine URL hinzufügen, erfolgt eine Weiterleitung auf die angegebene Webseite (Suchmaschinen können dies automatisch erkennen, es kann von der Engine jedoch auch leicht als irreführend angesehen und abgestraft werden).


Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="aktualisieren" content="0;url=" />

andere


Code kopieren
Der Code lautet wie folgt:

<meta name="author" content="author name" /> <!-- Definieren Sie den Autor der Webseite -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="überprüfen" content="index,folgen" />


Mobilgerät

 Ansichtsfenster: kann die Anzeige mobiler Browser optimieren. Wenn es sich nicht um eine responsive Site handelt, verwenden Sie keine Initial-Scale und deaktivieren Sie die Skalierung nicht.
Die Ansichtsfensterbreite der meisten 4,7–5-Zoll-Geräte ist auf 360 Pixel eingestellt, bei 5,5-Zoll-Geräten auf 400 Pixel, beim iPhone 6 auf 375 Pixel und beim iPhone 6 Plus auf 414 Pixel.


Code kopieren
Der Code lautet wie folgt:

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein"/>
<!-- `width=device-width` führt dazu, dass schwarze Ränder erscheinen, wenn die Seite im WebApp-Vollbildmodus geöffnet wird, nachdem sie zum Home-Bildschirm auf dem iPhone 5 hinzugefügt wurde -->

1.width: Breite (Zahl/Gerätebreite) (Bereich von 200 bis 10.000, Standard ist 980 Pixel)
2.height: Höhe (numerischer Wert/Gerätehöhe) (Bereich von 223 bis 10.000)
3.initial-scale: Anfangsskala (Bereich von >0 bis 10)
4.minimum-scale: Der minimale Maßstab, auf den der Benutzer zoomen darf
5.maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf
6.user-scalable: ob der Benutzer manuell herunterskalieren kann (nein, ja)
7.minimal-ui: Sie können die obere und untere Statusleiste beim Laden der Seite minimieren. (Veraltet)
Beachten Sie, dass viele Benutzer auf nicht reagierenden Websites initial-scale=1 verwenden. Dies führt dazu, dass die Website mit 100 % Breite gerendert wird und der Benutzer die Seite manuell verschieben oder zoomen muss. Wenn Sie user-scalable=no oder maximum-scale=1 gleichzeitig mit initial-scale=1 verwenden, können Benutzer die Webseite nicht vergrößern/verkleinern, um den gesamten Inhalt anzuzeigen.

WebApp-Vollbildmodus: getarnte App, Offline-Anwendung.


Code kopieren
Der Code lautet wie folgt:

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- WebApp-Vollbildmodus aktivieren -->

Statusleiste ausblenden/Statusleistenfarbe festlegen: wird nur wirksam, wenn der Vollbildmodus der WebApp eingeschaltet ist. Die Werte von content sind default | black | black-translucent.


Code kopieren
Der Code lautet wie folgt:

<meta name="apple-mobile-web-app-status-bar-style" content="schwarz-durchscheinend" />

Titel nach dem Hinzufügen zum Home-Bildschirm


Code kopieren
Der Code lautet wie folgt:
<meta name="apple-mobile-web-app-title" content="Titel">

Nummern ignorieren und automatisch als Telefonnummern identifizieren

Code kopieren
Der Code lautet wie folgt:
<meta content="Telefonnummer" name="Formaterkennung" />

Identifikationspostfach ignorieren


Code kopieren
Der Code lautet wie folgt:
<meta content="email=no" name="format-detection" />

Fügen Sie ein Smart-App-Banner hinzu: Teilen Sie dem Browser die App mit, die dieser Website entspricht, und zeigen Sie auf der Seite ein Download-Banner an (wie unten gezeigt). Referenzdokumentation


Code kopieren
Der Code lautet wie folgt:
<meta name="apple-itunes-app" content="app-id=meineAppStoreID, affiliate-data=meineAffiliateData, app-argument=meineURL">

Weitere Referenzdokumente

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!-- Optimiert für Handheld-Geräte, vor allem für einige alte Browser, die das Ansichtsfenster nicht erkennen, wie z. B. BlackBerry -->   
  2. < Meta   Name = "HandheldFriendly"   Inhalt = "wahr" >   
  3. <!-- Der alte Browser von Microsoft -->   
  4. < Meta   Name = "Für Mobilgeräte optimiert"   Inhalt = "320" >   
  5. <!-- uc erzwingt vertikalen Bildschirm -->   
  6. < Meta   Name = "Bildschirmausrichtung"   Inhalt = "Porträt" >   
  7. <!-- QQ erzwungener vertikaler Bildschirm -->   
  8. < Meta   Name = "x5-Ausrichtung"   Inhalt = "Porträt" >   
  9. <!-- UC erzwungener Vollbildmodus -->   
  10. < Meta   Name = "Vollbild"   Inhalt = "ja" >   
  11. <!-- QQ erzwungener Vollbildmodus -->   
  12. < Meta   Name = "x5-Vollbild"   Inhalt = "wahr" >   
  13. <!-- UC-Anwendungsmodus -->   
  14. < Meta   Name = "Browsermodus"   Inhalt = "Anwendung" >   
  15. <!-- QQ-Anwendungsmodus -->   
  16. < Meta   Name = "x5-Seitenmodus"   Inhalt = "App" >   
  17. <!-- Keine Hervorhebung beim Klicken auf Windows Phone -->   
  18. < Meta   Name = "msapplication-tap-highlight"   Inhalt = "nein" >   

Webbezogen

Deklarationscode


Code kopieren
Der Code lautet wie folgt:
<meta charset='utf-8' />

Priorisieren Sie die neueste Version von IE und Chrome


Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />
<!-- Über X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6"><!-- IE6 verwenden -->
<meta http-equiv="X-UA-Compatible" content="IE=7"><!-- IE7 verwenden -->
<meta http-equiv="X-UA-Compatible" content="IE=8"><!-- IE8 verwenden -->

Steuerung des Browserkernels : Viele inländische Browser verfügen über einen Dual-Kernel (WebKit und Trident). Der WebKit-Kernel dient zum schnellen Surfen und der IE-Kernel ist mit Webseiten und alten Versionen von Websites kompatibel. Websites, die Meta-Tags hinzufügen, können steuern, welchen Kernel der Browser rendert. Referenzdokumentation


Code kopieren
Der Code lautet wie folgt:
<meta name="renderer" content="webkit|ie-comp|ie-stand">


Der Standard-Kernelmodus inländischer Dual-Core-Browser ist wie folgt:

1. Sogou-Hochgeschwindigkeitsbrowser, QQ-Browser: IE-Kernel (kompatibler Modus)
2. 360 Speed ​​Browser, Maxthon Browser: Webkit-Kernel (Speed-Modus)

Verhindern, dass Browser auf Seiteninhalte aus dem Cache des lokalen Computers zugreifen: Mit dieser Einstellung können Besucher nicht offline surfen.


Code kopieren
Der Code lautet wie folgt:
<meta http-equiv="Pragma" content="kein-cache">

Windows 8


Code kopieren
Der Code lautet wie folgt:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8-Kachelfarbe -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8-Kachelsymbol -->

Site-Anpassung: wird hauptsächlich für die Korrespondenz zwischen PC- und Mobilseiten verwendet.


Code kopieren
Der Code lautet wie folgt:

<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5] Wählen Sie entsprechend dem Protokoll der mobilen Seite eine der folgenden Sprachen aus.
url="url" Letzteres stellt die URL der mobilen Seite dar, die der aktuellen PC-Seite entspricht, und die beiden müssen in einer Eins-zu-eins-Entsprechung stehen.
-->

Transkodierungsanweisung: Wenn Sie eine Webseite mit Baidu öffnen, kann sie transkodiert werden (z. B. beim Posten von Werbung). Um die Transkodierung zu vermeiden, können Sie die folgenden Metadaten hinzufügen


Code kopieren
Der Code lautet wie folgt:
<meta http-equiv="Cache-Steuerung" content="no-siteapp" />

Weitere Referenzdokumente

VOLLSTÄNDIGE LISTE DER HTML-META-TAGS
W3C-META-TAGS
METATAGES in HTML5
MDN-META-TAGS

<<:  Einführung in das MySQL Connection Control Plugin

>>:  Ein Artikel zum Verständnis der erweiterten Funktionen von K8S

Artikel empfehlen

Tutorial zur Installation von MongoDB unter Linux

MongoDB ist plattformübergreifend und kann sowohl...

Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

In diesem Artikel werden die spezifischen Schritt...

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

Unter Linux treten häufig Situationen auf, in den...

So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung

Einführung: Dieser Artikel stellt hauptsächlich v...

Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung

1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...

Vue.js implementiert eine einfache Timerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Verwendung der hasOwnProperty-Methode des js-Attributobjekts

Die Methode hasOwnProperty() des Objekts gibt ein...

Eine kurze Diskussion über die Matching-Regeln von Host und Benutzer, wenn Mysql eine Verbindung zur Datenbank herstellt

--Beim Verbinden mit der Datenbank die Matching-R...

Funktionsprinzip und Implementierungsmethode der Vue-Anweisung

Einführung in Vue Die aktuelle Ära der großen Fro...

Zeichnen eines Feuerwerkseffekts von 2021 basierend auf JS mit Quellcode-Download

Diese Arbeit nutzt das Wissen der Front-End-Entwi...

Tiefes Verständnis der Verwendung von ::before/:before und ::after/:after

Teil 1: Grundlagen 1. Im Gegensatz zu Pseudoklass...

Detaillierte Erklärung des Konzepts, Prinzips und der Verwendung von MySQL-Triggern

Dieser Artikel erläutert anhand von Beispielen di...

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

1. Was ist Master-Slave-Replikation? Die DDL- und...

Lösungen für Probleme bei der Leistungsoptimierung von MySQL-Indizes

Die von MySQL erstellte Optimierung besteht im Hi...

Grafische Installationsschritte für VMware vSphere 6.7 (ESXI 6.7)

Umgebung: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-...