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

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Installieren Sie Jenkins über Yum 1. Installation...

Ein kurzer Vortrag über den Diff-Algorithmus in Vue

Inhaltsverzeichnis Überblick Virtueller Dom Prinz...

Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

Ich habe mich schon immer für drahtlose Interakti...

Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10

InhaltHyperledger Fabric1.4-Umgebungseinrichtung ...

Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites

Da der Datenbindungsmechanismus von Vue und ander...

Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro

Inhaltsverzeichnis 1. Konfigurieren Sie das Vue-F...

Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.

Gelegentlich werden Sie in den Daten Zeichen wie ...

Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung

1. Vertikaler Tisch und horizontaler Tisch Vertik...

Shell-Skript erstellt Docker halbautomatische Kompilierungs-, Verpackungs- und Freigabeanwendungsvorgänge

Die Docker-Veröffentlichungsmethode bietet viele ...

Ein kurzes Verständnis der drei Prinzipien zum Hinzufügen von MySQL-Indizes

1. Die Bedeutung von Indizes Indizes werden verwe...

Der DOCTYPE-Modusauswahlmechanismus bekannter Browser

Dokumentumfang Dieser Artikel behandelt den Modus...

Der Unterschied und die Verwendung von einzeiligem und zweizeiligem Layout im Flex-Mobillayout

Hier ist ein einzeiliges Layout mit ul>li für ...

So implementieren Sie das automatische Herunterfahren von Linux bei schwacher Batterie

Vorwort Die Stromversorgung in meiner Wohnung ist...

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Inhaltsverzeichnis Zusammenfassung der Verzögerun...

Implementierungscode für die Verwendung von „Select“ zum Auswählen von Elementen in Vue+Openlayer

Effektbild: Implementierungscode: <Vorlage>...