Im Abschnitt zur Dokumentstruktur haben Sie mehr über die Komponenten erfahren, die Sie (fast) immer im <head> eines HTML-Dokuments finden. Während alle Elemente im <head>, einschließlich <title>, <link>, <script>, <style> und der weniger verwendeten <base>, eigentlich „Metadaten“ sind, gibt es ein <meta>-Tag für Metadaten, das nicht durch diese anderen Elemente dargestellt werden kann.
Die Spezifikation umfasst mehrere Metatypen und es gibt zahlreiche weitere anwendungsunterstützte Metatypen, die in keiner offiziellen Spezifikation enthalten sind. In diesem Abschnitt werden die in den Spezifikationen enthaltenen Attribute und Werte, einige gängige Metanamen und -inhaltswerte sowie einige Metatypen behandelt, die für die Suchmaschinenoptimierung, das Posten in sozialen Medien und die Nutzererfahrung außerordentlich nützlich sind und nicht offiziell von der WASWG oder dem W3C definiert werden.
Die erforderlichen <meta>-Tags, noch einmal aufgerufen
Sehen wir uns noch einmal die beiden erforderlichen <meta>-Tags an, die bereits behandelt wurden – die Zeichensatzdeklaration und das Meta-Tag des Darstellungsbereichs –, um das <meta>-Tag dabei besser zu verstehen.
Das Attribut charset des Elements <meta> entstand auf eine einzigartige Weise. Ursprünglich wurden die Zeichensatz-Metadaten als <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> geschrieben, aber so viele Entwickler haben das content-Attribut fälschlicherweise als content="text/html" charset="<characterset>" eingegeben, sodass Browser nun den Zeichensatz als Attribut unterstützen. Er ist jetzt im HTML-Live-Standard als <meta charset="<charset>" /> standardisiert, wobei <charset> bei HTML der String „utf-8“ ist, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird.
Vielleicht haben Sie schon bemerkt, dass in der ursprünglichen Metadeklaration des Zeichensatzes das Attribut http-equiv enthalten war. Sie steht für „http-äquivalent“, da das Meta-Tag im Grunde das repliziert, was in einem HTTP-Header festgelegt werden könnte. Mit Ausnahme der charset-Ausnahme enthalten alle in der WASSWG-HTML-Spezifikation definierten Meta-Tags entweder das Attribut http-equiv oder das Attribut name.
Offiziell definierte Meta-Tags
Es gibt zwei Haupttypen von Meta-Tags: Pragma-Anweisungen mit dem http-equiv-Attribut wie das zuvor verwendete Charset-Meta-Tag und benannte Meta-Typen wie das Darstellungsbereich-Meta-Tag mit dem name-Attribut, das wir im Abschnitt Dokumentstruktur erläutert haben. Sowohl der Metatyp name als auch der Metatyp http-equiv müssen das Attribut content enthalten, das den Inhalt für den aufgeführten Metadatentyp definiert.
Pragma-Anweisungen
Das Attribut http-equiv hat als Wert eine Pragma-Anweisung. Diese Anweisungen beschreiben, wie die Seite geparst werden soll. Unterstützte http-equiv-Werte ermöglichen das Festlegen von Anweisungen, wenn Sie HTTP-Header nicht direkt festlegen können.
Die Spezifikation definiert sieben Pragma-Anweisungen, von denen die meisten über andere Methoden zur Festlegung verfügen. Sie können beispielsweise eine Sprachanweisung mit <meta http-equiv="content-language" content="en-us" /> einfügen. Wir haben bereits besprochen, wie Sie das Attribut lang für das HTML-Element verwenden. Dieses Attribut sollte stattdessen verwendet werden.
Die gängigste Pragma-Anweisung ist die refresh-Anweisung.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Sie können zwar eine Anweisung festlegen, dass in einem Intervall von der im content-Attribut festgelegten Anzahl von Sekunden aktualisiert wird, und die Nutzer sogar zu einer anderen URL weiterleiten sollen. Dies ist jedoch nicht empfehlenswert. Das Aktualisieren und Weiterleiten von Inhalten ohne ausdrückliche Aufforderung durch den Nutzer beeinträchtigt die Nutzerfreundlichkeit und wirkt sich negativ auf die Zugänglichkeit aus. Gefällt Ihnen das nicht, wenn Sie sich mitten in einem Absatz befinden und die Seite zurückgesetzt wird? Stellen Sie sich vor, Sie hätten kognitive Probleme oder Sehprobleme und das wäre. Wenn Sie eine Aktualisierung mit einer Weiterleitung einrichten, vergewissern Sie sich, dass der Nutzer genügend Zeit hat, um die Seite zu lesen, einen Link, um den Vorgang zu beschleunigen, und gegebenenfalls eine Schaltfläche zum "Stoppen der Uhr", um die Weiterleitung zu verhindern.
Wir nehmen dies nicht in unsere Website auf, da eine Nutzersitzung ausschließlich dazu dient, unsere Besucher zu verärgern.
Die nützlichste Pragma-Anweisung ist die content-security-policy-Anweisung, mit der eine Inhaltsrichtlinien für das aktuelle Dokument festgelegt werden kann. In den Inhaltsrichtlinien werden meistens zulässige Serverursprünge und Skriptendpunkte festgelegt, um vor Cross-Site-Scripting-Angriffen zu schützen.
<meta http-equiv="content-security-policy" content="default-src https:" />
Wenn Sie keinen Zugriff zum Ändern von HTTP-Headern haben (oder selbst), finden Sie hier eine Liste mit durch Leerzeichen getrennten Inhaltswerten für content-security-policy-Anweisungen.
Benannte Meta-Tags
Meistens fügen Sie benannte Metadaten hinzu. Füge das Attribut name hinzu, wobei der Attributwert der Name der Metadaten ist. Wie bei Pragma-Anweisungen ist das Attribut content erforderlich.
Das Attribut name ist der Name der Metadaten. Neben viewport sollten Sie wahrscheinlich description und theme-color einbeziehen, aber nicht keywords.
Keywords
Die Snake-oil-Vertriebsmitarbeiter der Suchmaschinenoptimierung haben das Meta-Tag für Keywords missbraucht, indem sie diese mit kommagetrennten Listen von Spamwörtern anstelle von Listen mit relevanten Begriffen überfüllt haben, sodass Suchmaschinen diese Metadaten nicht mehr als nützlich erachten. Sie müssen weder Zeit noch Aufwand oder Byte damit verschwenden.
Beschreibung
Der Wert description ist jedoch für die SEO nützlich: Der Wert für den Beschreibungsinhalt ist häufig der Wert, der von Suchmaschinen in den Suchergebnissen unter dem Seitentitel angezeigt wird. Einige Browser, z. B. Firefox und Opera, verwenden dies als Standardbeschreibung für mit Lesezeichen versehene Seiten. Die Beschreibung sollte eine kurze und genaue Zusammenfassung des Seiteninhalts sein.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Falls die zweite Hälfte unserer Beschreibung für Sie keinen Sinn ergibt, haben Sie den Film Zoolander wahrscheinlich noch nicht gesehen.
Robotern
Wenn Sie nicht möchten, dass Ihre Website von Suchmaschinen indexiert wird, können Sie ihnen das mitteilen. <meta name="robots" content="noindex, nofollow" /> weist die Bots an, die Website nicht zu indexieren und keinen Links zu folgen. Bots sollten dem Ersuchen zuhören, aber es gibt kein Gesetz, das sie dazu verpflichtet. Sie müssen <meta name="robots" content="index, follow" /> nicht angeben, um die Indexierung der Website und dem Folgen von Links anzufordern, da dies die Standardeinstellung ist, sofern in den HTTP-Headern nichts anderes angegeben ist.
<meta name="robots" content="index, follow" />
Farbe des Designs
Mit dem Wert theme-color können Sie eine Farbe definieren, um die Benutzeroberfläche des Browsers anzupassen. Der Farbwert des Attributs „content“ wird von unterstützten Browsern und Betriebssystemen verwendet. So können Sie den User-Agents, die das Einfärben der Titelleiste, der Tableiste oder anderer Chrome-Komponenten unterstützen, eine Farbe vorschlagen. Dieses Meta-Tag ist besonders nützlich für progressive Web-Apps. Wenn Sie jedoch eine Manifestdatei einbinden, die für eine PWA erforderlich ist, können Sie stattdessen die Designfarbe einfügen. Durch die Definition in der HTML wird jedoch sichergestellt, dass die Farbe sofort vor dem Rendern gefunden wird. Dies kann beim ersten Laden schneller dauern als das Warten auf das Manifest.
So legen Sie als Designfarbe den blauen Farbton der Hintergrundfarbe unserer Website fest:
<meta name="theme-color" content="#226DAA" />
Das Meta-Tag für die Designfarbe kann ein media-Attribut enthalten, mit dem basierend auf Medienabfragen verschiedene Designfarben festgelegt werden können. Das Attribut media kann nur in dieses Meta-Tag aufgenommen werden und wird in allen anderen Meta-Tags ignoriert.
Es gibt mehrere andere name-Meta-Werte. Die hier besprochenen sind die am häufigsten verwendeten. Außer bei der Angabe unterschiedlicher theme-color-Werte für verschiedene Medienabfragen darf für jedes Meta-Tag nur jeweils ein Meta-Tag angegeben werden. Wenn Sie mehr als einen Meta-Tag-Typ einfügen müssen, um ältere Browser zu unterstützen, sollten die alten Werte nach den neueren Werten stehen, da User-Agents die Regeln so lange durchlesen, bis sie eine Übereinstimmung finden.
Open Graph
Mit Open Graph und ähnlichen Meta-Tag-Protokollen können Sie steuern, wie Social-Media-Websites wie Twitter, LinkedIn und Facebook Links zu Ihren Inhalten anzeigen. Falls sie nicht angegeben werden, erfassen Social-Media-Websites den Titel Ihrer Seite und die Beschreibung korrekt aus dem Meta-Tag „description“, also dieselben Informationen, die auch von Suchmaschinen angezeigt werden. Sie können jedoch absichtlich festlegen, was Nutzer sehen sollen, wenn ein Link auf Ihrer Website gepostet wird.
Wenn Sie auf Facebook oder Twitter einen Link zu MachineLearningWorkshop.com oder web.dev posten, erscheint eine Karte mit Bild, Titel und Beschreibung der Website. Die gesamte Karte ist ein Hyperlink zu der von Ihnen angegebenen URL.
Open Graph-Meta-Tags haben jeweils zwei Attribute: das Attribut property anstelle des Attributs name und den Inhalt oder Wert für diese Eigenschaft. Das Attribut property ist nicht in den offiziellen Spezifikationen definiert, wird jedoch von Anwendungen, die das Open Graph-Protokoll unterstützen, umfassend unterstützt. Durch das Erstellen „neuer“ Attribute wie property wird sichergestellt, dass die für das Attribut des Protokolls erstellten Attributwerte nicht mit zukünftigen Werten der name- oder http-equiv-Attribute in Konflikt stehen.
Facebook-Medienkarte erstellen:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Geben Sie einen Titel Ihres Posts an, der angezeigt werden soll. Dieser Titel wird in der Regel unter dem Bild und über der Beschreibung angezeigt. Die Beschreibung sollte aus bis zu drei Sätzen bestehen und deinen Beitrag zusammenfassen. Diese wird nach dem in og:title definierten Anzeigentitel eingeblendet. Geben Sie die absolute URL für das Bannerbild an, das angezeigt werden soll, einschließlich des https://-Protokolls. Wenn Sie ein Bild in HTML einbinden, fügen Sie immer eine alternative Textbeschreibung für das Bild hinzu, auch wenn das Bild an anderer Stelle angezeigt wird. Definieren Sie für Open Graph-Karten für soziale Medien die alt als Inhaltswert für die og:image:alt-Eigenschaft. Mit og:url können Sie auch eine kanonische URL angeben.
Diese Meta-Tags werden alle im Open Graph-Protokoll definiert. Bei den Werten sollte es sich um die Inhalte handeln, die in der Webanwendung des Drittanbieters angezeigt werden sollen.
Andere soziale Medien haben eine ähnliche Syntax, z. B. Twitter-Karten-Markup. So können Sie je nachdem, wo der Link erscheint, unterschiedliche Nutzererfahrungen bieten. Außerdem können Sie Link-Tracking aktivieren, indem Sie am Ende der URL einen Parameter hinzufügen.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Um bei Twitter sicherzustellen, dass der Wert des name-Attributs nicht mit zukünftigen Spezifikationen in Konflikt steht, sollten Sie für Twitter-Kartendaten nicht ein neues Attribut wie das property-Attribut in Open Graph verwenden, sondern allen Namenwerten das Präfix twitter: vorangestellt.
Auf Twitter und Facebook können Sie sich ansehen, wie Ihre Social-Media-Karte aussehen wird.
Du kannst unterschiedliche Kartenbilder, ‐titel und ‐beschreibungen für verschiedene Social-Media-Websites oder für unterschiedliche Linkparameter verwenden. Beispiel: Mit https://perfmattersconf.com werden je nach Parameter der URL unterschiedliche Werte für og:image, og:title und og:description festgelegt.
Wenn Sie https://perfmattersconf.com?name=erica und https://perfmattersconf.com?name=melanie im Kartenvalidierungstool von Twitter eingeben, werden diese beiden Karten angezeigt. Wir haben unterschiedliche Inhalte bereitgestellt, obwohl beide auf dieselbe Startseite der Konferenz verweisen.
Weitere nützliche Meta-Informationen
Wenn jemand Ihre Website als Lesezeichen speichert, zum Startbildschirm hinzufügt oder wenn es sich bei Ihrer Website um eine progressive Webanwendung handelt, die offline funktioniert oder wenn keine Chrome-Browserfunktionen angezeigt werden, können Sie App-Symbole für den Startbildschirm des Mobilgeräts einfügen.
Mit dem Tag <link> können Sie eine Verknüpfung zu den Start-Images herstellen, die Sie verwenden möchten. Hier ein Beispiel für das Einfügen einiger Bilder in Medienabfragen:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Wenn Ihre Website oder Anwendung Web-Apps unterstützt, d. h. sie mit minimaler Benutzeroberfläche, z. B. ohne Schaltfläche „Zurück“, für sich allein stehen kann, können Sie dem Browser auch mithilfe von Meta-Tags mitteilen:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Geben Sie diese nur an, wenn Ihre App auch tatsächlich App-fähig ist. Falls nicht, werden Sie Ihre hartnäckigsten Unterstützer einrichten, also diejenigen, die Ihre Website zu ihrem Startbildschirm hinzugefügt haben, um die Nutzererfahrung erheblich zu beeinträchtigen. Du wirst ihre Liebe verlieren!
Wenn jemand Ihr Symbol auf dem Startbildschirm seines kleinen Geräts speichern möchte, sollten Sie dem Betriebssystem einen Kurznamen geben, der auf dem Startbildschirm eines kleinen Geräts nicht viel Platz einnimmt. Fügen Sie dazu ein Meta-Tag ein oder verwenden Sie eine Web-Manifest-Datei. Im Folgenden wird die Meta-Tag-Methode veranschaulicht:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Sie haben mehrere Meta-Tags behandelt, die alle Ihren Header verlängern. Wenn du tatsächlich eine Web-App-fähige, offline-freundliche progressive Web-App erstellen möchtest, anstatt diese beiden zusätzlichen Meta-Tags einzubinden, kannst du short_name: MLW einfacher und prägnanter in eine Webmanifest-Datei einfügen.
Die Manifestdatei kann einen unhandlichen Header mit <link>- und <meta>-Tags verhindern. Wir können eine Manifestdatei erstellen, die im Allgemeinen manifest.webmanifest oder manifest.json genannt wird. Anschließend verwenden wir das praktische <link>-Tag mit einem rel-Attribut, das auf manifest gesetzt ist, und das href-Attribut, das auf die URL der Manifest-Datei festgelegt ist:
<link rel="manifest" href="/mlw.webmanifest" />
In dieser Reihe geht es vorrangig um HTML. Weitere Informationen findest du im web.dev-Kurs zu progressiven Webanwendungen oder in der Dokumentation zum Web App Manifest von MDN.
Ihr HTML-Code sieht jetzt ungefähr so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Er ist ziemlich lang, aber es ist fertig.
Da die <head> jetzt fast vollständig ist, können Sie sich mit semantischem HTML beschäftigen.
Wissen testen
Ihr Wissen zu Metadaten testen
Die Anweisung „Refresh pragma“
Open Graph-Meta-Tags.