Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2025-02-28 06:50:47 +01:00
Code Issues Releases Wiki Activity

Generalized meta tags documentation

Browse Source
This commit is contained in:
squidfunk 2020-08-10 12:50:37 +02:00
parent 889a9f03d4
commit c09e5f1cad
1 changed files with 47 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,14 +77,22 @@ extra:
## Customization ## Customization
### Open Graph In order to add `meta` tags to your document, you can [extend the theme][7] and
simply [override the `extrahead` block][8] with the respective tags, e.g. to set
In order to add [Open Graph][1] data to your document, you can [extend the policies for search engines:
theme][7] and [override the `extrahead` block][8] to add the respective `meta`
tags to the template:
``` html ``` html
{% block extrahead %} {% block extrahead %}
<meta property="robots" content="noindex, nofollow" />
{% endblock %}
```
Some further examples, including [Open Graph][1] and [Twitter Cards][9]:
=== "Open Graph"
``` html
{% block extrahead %}
{% set title = config.site_name %} {% set title = config.site_name %}
{% if page and page.meta and page.meta.title %} {% if page and page.meta and page.meta.title %}
{% set title = title ~ " - " ~ page.meta.title %} {% set title = title ~ " - " ~ page.meta.title %}
@ -99,20 +107,13 @@ tags to the template:
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" /> <meta property="og:image:height" content="630" />
{% endblock %} {% endblock %}
``` ```
[7]: ../customization.md#extending-the-theme === "Twitter Cards"
[8]: ../customization.md#overriding-blocks
### Twitter Cards ``` html
{% block extrahead %}
When you post links to your project documentation on [Twitter][9], it's
highly recommended to add [Twitter's `meta` tags][10] to optimize the preview
of your tweet:
``` html
{% block extrahead %}
{% set title = config.site_name %} {% set title = config.site_name %}
{% if page and page.meta and page.meta.title %} {% if page and page.meta and page.meta.title %}
{% set title = title ~ " - " ~ page.meta.title %} {% set title = title ~ " - " ~ page.meta.title %}
@ -125,11 +126,9 @@ of your tweet:
<meta name="twitter:title" content="{{ title }}" /> <meta name="twitter:title" content="{{ title }}" />
<meta name="twitter:description" content="{{ config.site_description }}" /> <meta name="twitter:description" content="{{ config.site_description }}" />
<meta name="twitter:image" content="<url>" /> <meta name="twitter:image" content="<url>" />
{% endblock %} {% endblock %}
``` ```
You should also [check the preview][11] of your Twitter Card. [7]: ../customization.md#extending-the-theme
[8]: ../customization.md#overriding-blocks
[9]: https://twitter.com [9]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
[10]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
[11]: https://cards-dev.twitter.com/validator