HTML-Meta erklärt

Einführung

Der Meta-Tag ist ein Hilfstag im HEAD-Bereich der HTML-Sprache.

Meta wird häufig verwendet, um Seitenbeschreibungen, Schlüsselwörter, das Datum der letzten Änderung und andere Metadaten zu definieren. Diese Metadaten dienen Browsern (zum Layout oder Neuladen der Seite), Suchmaschinen und anderen Webdiensten.

Das Mata-Tag enthält globale Attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)

Zeichensatz

Geben Sie die Zeichenkodierung der Webseite an:

<meta charset="UTF-8">

Inhalt

Der Inhalt des Inhaltsattributs ist der Wert des http-equiv- oder Name-Attributs, je nachdem, welches Sie verwenden.

http-Äquiv

Dieses Attribut kann den Namen eines HTTP-Headers enthalten. Der vollständige Name des Attributs entspricht http. Es definiert Anweisungen, die das Verhalten des Servers und des Benutzeragenten ändern können. Der Wert dieser Anweisung wird im Inhaltsattribut definiert und kann einer der folgenden sein:

Inhaltssprache (veraltet)

Definiert die Standardsprache für die Seite. Es kann durch das Lang-Attribut jedes beliebigen Elements überschrieben werden.

Pragma

Verhindert, dass der Browser auf Seiteninhalte aus dem Cache des lokalen Computers zugreift. wie:

<meta http-equiv="Pragma" content="kein-cache">

läuft ab

Kann verwendet werden, um die Ablaufzeit einer Webseite festzulegen. Wenn eine Webseite abläuft, muss sie erneut an den Server übertragen werden.

Cache-Steuerung

Gibt den Cache-Mechanismus an, der für Anforderungen und Antworten verwendet werden soll. Es gibt mehrere Verwendungsmöglichkeiten:

no-cache: Senden Sie zuerst eine Anfrage, um beim Server zu bestätigen, ob die Ressource geändert wurde. Wenn sie nicht geändert wurde, verwenden Sie den Cache.
no-store: Es ist kein Caching zulässig und die gesamte Antwort muss jedes Mal vom Server heruntergeladen werden. (Sicherheitsmaßnahmen)
öffentlich: Alle Antworten werden zwischengespeichert, sind aber nicht erforderlich. Denn max-age kann auch den gleichen Effekt erzielen
privat: Cache nur für einen einzelnen Benutzer, daher ist kein Zwischenspeichern durch Relays gestattet. (Beispielsweise erlaubt CDN kein Caching privater Antworten)
max-age: Gibt an, wie lange die Antwort zwischengespeichert und ab der aktuellen Anfrage wiederverwendet werden kann, ohne den Server erneut anzufordern. Beispiel: max-age=60 bedeutet, dass die Antwort zwischengespeichert und für weitere 60 Sekunden wiederverwendet werden kann.

Inhaltssicherheitsrichtlinie

Ermöglicht Seitenautoren, die Inhaltsrichtlinie für die aktuelle Seite festzulegen. Die Inhaltsrichtlinie gibt in erster Linie zulässige Serveradressen und Skriptendpunkte an, wodurch Cross-Site-Scripting-Angriffe verhindert werden können.

Das Wesentliche von CSP ist das Whitelist-System. Entwickler teilen dem Client explizit mit, welche externen Ressourcen geladen und ausgeführt werden können, was der Bereitstellung einer Whitelist entspricht. Die Implementierung und Ausführung erfolgt vollständig durch den Browser, und die Entwickler müssen lediglich die Konfiguration bereitstellen.

CSP erhöht die Sicherheit von Webseiten erheblich. Selbst wenn ein Angreifer eine Schwachstelle findet, kann er kein Skript einschleusen, es sei denn, er kontrolliert auch einen vertrauenswürdigen Host, der in der Whitelist enthalten ist. Es gibt zwei Möglichkeiten, CSP zu aktivieren. Eine Möglichkeit ist das Feld „Content-Security-Policy“ der HTTP-Headerinformationen.

Inhaltssicherheitsrichtlinie: Skript-Quelle „selbst“; Objekt-Quelle „keine“;
style-src cdn.example.org third-party.org;child-src https:

Eine andere Möglichkeit besteht über die Tags der Webseite.

<meta http-equiv="Inhaltssicherheitsrichtlinie" content="script-src 'selbst'; object-src 'keine'; style-src cdn.example.org third-party.org; child-src https:">

Im obigen Code ist CSP wie folgt konfiguriert:

Skripte: Vertrauen Sie nur dem aktuellen Domänennamen. Tags: Vertrauen Sie keiner URL, d. h. laden Sie keine Ressourcen. Stylesheets: Vertrauen Sie nur cdn.example.org und third-party.org.
Frame: Andere Ressourcen müssen mit dem HTTPS-Protokoll geladen werden: Keine Einschränkungen. Wenn aktiviert, wird das Laden externer Ressourcen, die nicht CSP-konform sind, blockiert.

Weitere Informationen finden Sie unter: Content Security Policy – ​​Erste Schritte

Inhaltstyp (veraltet)

Definiert den MIME-Typ des Dokuments, gefolgt von seiner Zeichenkodierung.

Verwenden Sie diesen Wert nicht, da er veraltet ist. Es wird empfohlen, das Zeichensatzattribut für das Element zu verwenden.
Da Sie den Dokumenttyp in der XHTML-Serialisierung für XHTML oder HTML5 nicht ändern können, verwenden Sie „MIME-Typ festlegen“ nicht auf den XHTML-MIME-Typ.
Aktualisieren

Diese Richtlinie legt fest:

Wenn das Inhaltsattribut nur eine positive Ganzzahl enthält, gibt es die Anzahl der Sekunden an, die zum Neuladen der Seite benötigt werden.
Wenn das Inhaltsattribut eine positive Ganzzahl gefolgt von der Zeichenfolge „; url =“ enthält, wird die aktuelle Seite nach XX Sekunden auf eine andere gültige URL umgeleitet.

<meta http-equiv="aktualisieren" content="2; URL=https://www.jb51.net/">
 //Das bedeutet, nach 2 Sekunden zu 123WORDPRESS.COM zu springen

set-cookie (veraltet)

Definiert das Cookie der Seite. Der entsprechende Inhaltswert muss der IETF HTTP Cookie Specification (https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14) entsprechen.

Verwenden Sie diese Anweisung nicht, sondern den HTTP-Header Set-Cookie (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie).

X-UA-kompatibel

Wird verwendet, um dem Browser mitzuteilen, in welcher Version die Seite gerendert werden soll.

<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1"/>
 //Geben Sie IE und Chrome an, die neueste Version zum Rendern der aktuellen Seite zu verwenden

Name

Das Namensattribut wird als Metadaten auf Dokumentebene definiert und kann nicht gleichzeitig mit den folgenden Attributen festgelegt werden: itemprop, http-equiv oder charset.

Dieser Metadatenname ist mit dem im Inhaltsattribut enthaltenen Wert verknüpft. Mögliche Werte für das Name-Attribut sind:

Anwendungsname

Definiert den Namen der Anwendung, die auf der Webseite ausgeführt wird.

Autor

Wird verwendet, um den Autor einer Webseite zu kennzeichnen.

Beschreibung

Fügen Sie eine kurze, aber genaue Beschreibung des Seiteninhalts hinzu. Einige Browser wie Firefox und Opera verwenden dies als Standardbeschreibung für Web-Lesezeichen.

Generator

Wird verwendet, um anzugeben, aus welcher Software die Webseite besteht.

Schlagwörter

Wird verwendet, um Suchmaschinen die Schlüsselwörter Ihrer Webseite mitzuteilen

erneut besuchen nach

Wenn die Seite nicht häufig aktualisiert wird, können Sie eine Crawler-Wiederbesuchszeit festlegen, um die Belastung des Servers durch die Crawler der Suchmaschinen zu verringern. Wenn die Wiederbesuchszeit zu kurz ist, führen die Crawler den Wiederbesuch zur von ihnen festgelegten Standardzeit durch. Beispiel:

<meta name="revisit-after" content="7 Tage">

Renderer

Renderer ist für Dual-Core-Browser vorbereitet und wird verwendet, um anzugeben, wie Dual-Core-Browser Seiten standardmäßig rendern. Beispielsweise 360-Browser. Beispiel:

<meta name="renderer" content="webkit"> 
//Standard-WebKit-Kernel <meta name="renderer" content="ie-comp"> 
//Standard-IE-Kompatibilitätsmodus <meta name="renderer" content="ie-stand"> 
//Standardmäßiger IE-Standardmodus

Referrer

referrer steuert den Referrer-HTTP-Header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer), der an die vom Dokument initiierte Request-Anforderung angehängt wird. Der entsprechende Wert befindet sich im Inhalt:

Roboter

Mithilfe von Robotern wird den Crawlern mitgeteilt, welche Seiten indiziert werden sollen und welche nicht.

Ansichtsfenster

Gibt einen Hinweis auf die anfängliche Größe des Ansichtsfensters. Nur für den mobilen Einsatz.

Allgemeine Verwendung

Zoomen deaktivieren:

<meta name=”viewport” content=”initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

Webseiten automatisch aktualisieren

Sie können einen Zeitraum zum Aktualisieren der Seite festlegen. Mit meta http-equiv="refresh" können Sie festlegen, dass der Browser die automatische Seitenaktualisierung für einen bestimmten Zeitraum verzögert. Der folgende Meta-Tag weist den Browser an, alle 5 Sekunden automatisch zu aktualisieren.

<meta http-equiv=”aktualisieren” content=”5″ />

Automatische Weiterleitung

Wir können das Refresh-Meta-Tag verwenden, um die Seite umzuleiten. Das folgende Beispiel besucht www.jb51.net nach 5 Sekunden.

<meta http-equiv=”aktualisieren” content=”5;url='https://www.jb51.net'” />

Browser-Caching deaktivieren

Wenn wir eine Webseite lokal testen, wird der neue Inhalt nicht rechtzeitig aktualisiert, was am Browser-Cache liegen kann. Derzeit können wir das Problem lösen, indem wir den Browser-Cache mithilfe von Meta-Tags deaktivieren. Der allgemeine Code lautet wie folgt:

<meta http-equiv="läuft ab" content="0">
<meta http-equiv="pragma" content="kein-cache">
<meta http-equiv="Cache-Steuerung" content="kein Cache">

Baidu-Transkodierung ist verboten

<meta http-equiv="Cache-Steuerung" content="no-siteapp"/>

In der mobilen Entwicklung der Code zum Blockieren von Nummern als Telefonnummern:

<meta content=”Telefonnummer” name=”Formaterkennung” />

siehe

MDN-HTML-Element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)