Wiki source code of Metabereich
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{content/}} | ||
| 2 | |||
| 3 | {{figure image="designer_advanced_variables_example.png"}} | ||
| 4 | The meta tab lets you add additional {{smallcaps}}Html{{/smallcaps}} elements to the head section of the generated form {{smallcaps}}Html{{/smallcaps}} document. | ||
| 5 | {{/figure}} | ||
| 6 | |||
| 7 | == Description == | ||
| 8 | |||
| 9 | Use the meta tab to add additional elements to the head of the generated {{smallcaps}}Html{{/smallcaps}} document. Amongst other use cases, this lets you: | ||
| 10 | |||
| 11 | * Include a font resource from a third-party content provider | ||
| 12 | * Include a CSS or JavaScript library from a network resource, or from a local server (localhost). This is especially useful when you do not edit JavaScript and CSS directly within {{formcycle/}}, but want to write (for example) TypeScript and SCSS with external tools. During development, you can then setup your toolchain to auto transpile your files on changes and include the built files from a locally started server. | ||
| 13 | * Add meta tags, for example to indicate the author of the document, add a description or set some keywords. | ||
| 14 | * Set HTTP headers via meta tags | ||
| 15 | |||
| 16 | The text you enter in the meta tab must be valid {{smallcaps}}Html{{/smallcaps}} and it must be allowed inside the //head// {{smallcaps}}Html{{/smallcaps}} element. | ||
| 17 | |||
| 18 | == Including external fonts == | ||
| 19 | |||
| 20 | To include a font from an external content provider, enter the following in the meta tab. | ||
| 21 | |||
| 22 | {{code language="html"}} | ||
| 23 | <link type="text/css" rel="stylesheet" href="https://fonts.example.com/css?family=EB+Garamond"> | ||
| 24 | {{/code}} | ||
| 25 | |||
| 26 | == Meta tags for search engine optimization == | ||
| 27 | |||
| 28 | One purpose of meta tags is for search engine optimization. The following example adds meta tags to provide more information about the form's content. | ||
| 29 | |||
| 30 | {{code language="html"}} | ||
| 31 | <meta name="description" content="A great from"> | ||
| 32 | <meta name="keywords" content="HTML,CSS,XML,JavaScript"> | ||
| 33 | <meta name="author" content="John Doe"> | ||
| 34 | {{/code}} | ||
| 35 | |||
| 36 | == Meta tags for HTTP-Header == | ||
| 37 | |||
| 38 | Finally you can also use the meta tag attribute //http-equiv// to set some HTTP headers you could not set otherwise. An example for the //Content-Security-Policy// header would look like this: | ||
| 39 | |||
| 40 | {{code language="html"}} | ||
| 41 | <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:"> | ||
| 42 | {{/code}} | ||
| 43 | |||
| 44 | Please note that headers which are sent by the application or the web server can not be overwritten. |