OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improved meta tags documentation

Browse Source
This commit is contained in:
squidfunk 2021-05-01 19:04:44 +02:00
parent 9fadf6dfaa
commit 4feba2ebcf
1 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/reference/meta-tags.md
View File

@ -6,8 +6,8 @@ template: overrides/main.html
In HTML, `meta` tags allow to provide additional metadata for a document, e.g. In HTML, `meta` tags allow to provide additional metadata for a document, e.g.
page titles and descriptions, additional assets to be loaded, and [Open Graph] page titles and descriptions, additional assets to be loaded, and [Open Graph]
[1] data. While metadata can always be added via [customization][2], some tags [1] data. While arbitrary metadata can always be added via [customization][2],
can be configured. some common `meta` tags can be configured.
[1]: https://ogp.me/ [1]: https://ogp.me/
[2]: #customization [2]: #customization
@ -66,21 +66,25 @@ document `head` for the current page to the provided value.
### Adding a web app manifest ### Adding a web app manifest
A [web app manifest][6] is a simple JSON file that specifies how your web application should behave when installed on the user's mobile device or desktop, which can be set via `mkdocs.yml`: A [web app manifest][6] is a simple JSON file that specifies how your web
application should behave when installed on the user's mobile device or desktop,
which can be set via `mkdocs.yml`:
``` yaml ``` yaml
extra: extra:
manifest: manifest.webmanifest manifest: manifest.webmanifest
``` ```
[6]: https://developers.google.com/web/fundamentals/web-app-manifest/ [6]: https://developers.google.com/web/fundamentals/web-app-manifest/
## Customization ## Customization
### Custom meta tags ### Custom meta tags
In order to add `meta` tags to your document, you can [extend the theme][7] and #### on all pages
simply [override the `extrahead` block][8] with the respective tags, e.g. to set
In order to add custom `meta` tags to your document, you can [extend the theme
][7] and simply [override the `extrahead` block][8], e.g. to add indexing
policies for search engines: policies for search engines:
``` html ``` html
@ -89,7 +93,35 @@ policies for search engines:
{% endblock %} {% endblock %}
``` ```
Some further examples, including [Open Graph][1] and [Twitter Cards][9]: [7]: ../customization.md#extending-the-theme
[8]: ../customization.md#overriding-blocks
#### on a single page
If you want to set a `meta` tag on a single page, or want to set different
values for different pages, you can use the `page.meta` object inside your
template override, e.g.:
``` html
{% block extrahead %}
{% if page and page.meta and page.meta.robots %}
<meta property="robots" content="{{ page.meta.robots }}" />
{% else %}
<meta property="robots" content="index, follow" />
{% endif %}
{% endblock %}
```
You can now use `robots` exactly like [`title`][9] and [`description`][10] to
set values. Note that in this case, the template defines an `else` branch, which
would set a default if none was given.
[9]: #setting-the-page-title
[10]: #setting-the-page-description
### Social meta tags
Some further examples, including [Open Graph][1] and [Twitter Cards][11]:
=== "Open Graph" === "Open Graph"
@ -131,6 +163,4 @@ Some further examples, including [Open Graph][1] and [Twitter Cards][9]:
{% endblock %} {% endblock %}
``` ```
[7]: ../customization.md#extending-the-theme [11]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
[8]: ../customization.md#overriding-blocks
[9]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards