Wiki-Quellcode von Metabereich
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{content/}} | ||
| 2 | |||
| 3 | {{figure image="metatab1_en.png"}} | ||
| 4 | Im Metabereich können zusätzliche Elemente in den head eines HTML-Dokuments eingefügt werden. | ||
| 5 | {{/figure}} | ||
| 6 | |||
| 7 | {{figure image="metatab2.png"}} | ||
| 8 | Die rot markierten Elemente wurde im Metabereich hinzugefügt. | ||
| 9 | {{/figure}} | ||
| 10 | |||
| 11 | == Erläuterung == | ||
| 12 | |||
| 13 | Im Metabereich können zusätzliche Elemente in den //head// des erzeugten HTML-Dokuments eingefügt werden. Dies kann etwa dazu genutzt werden, um zusätzliche externe JavaScript- oder CSS-Dateien einzubinden oder //meta//-Elemente einzubinden. | ||
| 14 | |||
| 15 | Der eingegebene Text im Metabereich muss gültiges HTML darstellen und im //head//-Element erlaubt sein. | ||
| 16 | |||
| 17 | == Einbinden externer Schriftarten == | ||
| 18 | |||
| 19 | Wie folgt kann eine durch durch einen externen Anbieter bereitgestellte Schriftart eingefügt werden. | ||
| 20 | |||
| 21 | {{code language="html"}} | ||
| 22 | <link type="text/css" rel="stylesheet" href="https://fonts.example.com/css?family=EB+Garamond"> | ||
| 23 | {{/code}} | ||
| 24 | |||
| 25 | == Meta-Tags für Suchmaschinenoptimierung == | ||
| 26 | |||
| 27 | Es können auch meta-Elemente eingefügt werden, etwa zu Zwecken der Suchmaschinenoptimierung. | ||
| 28 | |||
| 29 | {{code language="html"}} | ||
| 30 | <meta name="description" content="Mein tolles Formular"> | ||
| 31 | <meta name="keywords" content="HTML,CSS,XML,JavaScript"> | ||
| 32 | <meta name="author" content="Maria Mustermann"> | ||
| 33 | {{/code}} | ||
| 34 | |||
| 35 | == Meta-Tags für das Setzen von HTTP-Headern == | ||
| 36 | |||
| 37 | Über Meta-Tags mit dem Attribut "http-equiv" und einem entsprechenden Wert ist es ebenso möglich nicht vorhandene HTTP-Header zu setzten. Dies sieht beispielsweise für den Header "Content-Security-Policy" wie folgt aus: | ||
| 38 | |||
| 39 | {{code language="html"}} | ||
| 40 | <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:"> | ||
| 41 | {{/code}} | ||
| 42 | |||
| 43 | Zu beachten ist hier, dass Header welche durch die Anwendung oder den (Web-)Server ausgeliefert werden hiermit nicht überschrieben werden können! |