mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-02 16:29:47 +02:00
feat(pages): add support for missing SEO front matter + improve SEO docs (#9071)
Co-authored-by: Thad Guidry <thadguidry@gmail.com>
This commit is contained in:
Sébastien Lorber
GitHub
parent
117cbac702
commit
9866af7f44
11 changed files with 146 additions and 22 deletions
|
|
@ -194,7 +194,7 @@ const config = {
|
|||
|
||||
## Markdown front matter {#markdown-front-matter}
|
||||
|
||||
Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line `---` on either side.
|
||||
Markdown documents can use the following Markdown [front matter](../../guides/markdown-features/markdown-features-intro.mdx#front-matter) metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ const config = {
|
|||
|
||||
## Markdown front matter {#markdown-front-matter}
|
||||
|
||||
Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line `---` on either side.
|
||||
Markdown documents can use the following Markdown [front matter](../../guides/markdown-features/markdown-features-intro.mdx#front-matter) metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const config = {
|
|||
|
||||
## Markdown front matter {#markdown-front-matter}
|
||||
|
||||
Markdown pages can use the following Markdown front matter metadata fields, enclosed by a line `---` on either side.
|
||||
Markdown pages can use the following Markdown [front matter](../../guides/markdown-features/markdown-features-intro.mdx#front-matter) metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
|
|
@ -93,7 +93,9 @@ Accepted fields:
|
|||
| --- | --- | --- | --- |
|
||||
| `title` | `string` | Markdown title | The blog post title. |
|
||||
| `description` | `string` | The first line of Markdown content | The description of your page, which will become the `<meta name="description" content="..."/>` and `<meta property="og:description" content="..."/>` in `<head>`, used by search engines. |
|
||||
| `wrapperClassName` | `string` | Class name to be added to the wrapper element to allow targeting specific page content. |
|
||||
| `keywords` | `string[]` | `undefined` | Keywords meta tag, which will become the `<meta name="keywords" content="keyword1,keyword2,..."/>` in `<head>`, used by search engines. |
|
||||
| `image` | `string` | `undefined` | Cover or thumbnail image that will be used when displaying the link to your post. |
|
||||
| `wrapperClassName` | `string` | | Class name to be added to the wrapper element to allow targeting specific page content. |
|
||||
| `hide_table_of_contents` | `boolean` | `false` | Whether to hide the table of contents to the right. |
|
||||
| `draft` | `boolean` | `false` | Draft pages will only be available during development. |
|
||||
| `unlisted` | `boolean` | `false` | Unlisted pages will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link. |
|
||||
|
|
|
|||
|
|
@ -72,6 +72,16 @@ more_data:
|
|||
---
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
The API documentation of each official plugin lists the supported attributes:
|
||||
|
||||
- [Docs front matter](../../api/plugins/plugin-content-docs.mdx#markdown-front-matter)
|
||||
- [Blog front matter](../../api/plugins/plugin-content-blog.mdx#markdown-front-matter)
|
||||
- [Pages front matter](../../api/plugins/plugin-content-pages.mdx#markdown-front-matter)
|
||||
|
||||
:::
|
||||
|
||||
## Quotes {#quotes}
|
||||
|
||||
Markdown quotes are beautifully styled:
|
||||
|
|
|
|||
|
|
@ -14,13 +14,40 @@ Docusaurus supports search engine optimization in a variety of ways.
|
|||
|
||||
## Global metadata {#global-metadata}
|
||||
|
||||
Provide global meta attributes for the entire site through the [site configuration](./configuration.mdx#site-metadata). The metadata will all be rendered in the HTML `<head>` using the key-value pairs as the prop name and value.
|
||||
Provide global meta attributes for the entire site through the [site configuration](./configuration.mdx#site-metadata). The metadata will all be rendered in the HTML `<head>` using the key-value pairs as the prop name and value. The `metadata` attribute is a convenient shortcut to declare `<meta>` tags, but it is also possible to inject arbitrary tags in `<head>` with the `headTags` attribute.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
metadata: [{name: 'keywords', content: 'cooking, blog'}],
|
||||
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
|
||||
// Declare some <meta> tags
|
||||
metadata: [
|
||||
{name: 'keywords', content: 'cooking, blog'},
|
||||
{name: 'twitter:card', content: 'summary_large_image'},
|
||||
],
|
||||
headTags: [
|
||||
// Declare a <link> preconnect tag
|
||||
{
|
||||
tagName: 'link',
|
||||
attributes: {
|
||||
rel: 'preconnect',
|
||||
href: 'https://example.com',
|
||||
},
|
||||
},
|
||||
// Declare some json-ld structured data
|
||||
{
|
||||
tagName: 'script',
|
||||
attributes: {
|
||||
type: 'application/ld+json',
|
||||
},
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org/',
|
||||
'@type': 'Organization',
|
||||
name: 'Meta Open Source',
|
||||
url: 'https://opensource.fb.com/',
|
||||
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
@ -37,13 +64,24 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
|
|||
# A cooking guide
|
||||
|
||||
<head>
|
||||
<meta name="keywords" content="cooking, blog">
|
||||
<meta name="keywords" content="cooking, blog" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<link rel="preconnect" href="https://example.com" />
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
'@context': 'https://schema.org/',
|
||||
'@type': 'Organization',
|
||||
name: 'Meta Open Source',
|
||||
url: 'https://opensource.fb.com/',
|
||||
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
|
||||
})}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
Some content...
|
||||
```
|
||||
|
||||
Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
|
||||
Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through [front matter](./guides/markdown-features/markdown-features-intro.mdx#front-matter):
|
||||
|
||||
```md
|
||||
---
|
||||
|
|
@ -58,7 +96,17 @@ When creating your React page, adding these fields in `Layout` would also improv
|
|||
|
||||
:::tip
|
||||
|
||||
Prefer to use front matter for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `<head>` tag.
|
||||
Prefer to use [front matter](./guides/markdown-features/markdown-features-intro.mdx#front-matter) for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `<head>` tag.
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
The official plugins all support the following [front matter](./guides/markdown-features/markdown-features-intro.mdx#front-matter): `title`, `description`, `keywords` and `image`. Refer to their respective API documentation for additional [front matter](./guides/markdown-features/markdown-features-intro.mdx#front-matter) support:
|
||||
|
||||
- [Docs front matter](./api/plugins/plugin-content-docs.mdx#markdown-front-matter)
|
||||
- [Blog front matter](./api/plugins/plugin-content-blog.mdx#markdown-front-matter)
|
||||
- [Pages front matter](./api/plugins/plugin-content-pages.mdx#markdown-front-matter)
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -74,6 +122,17 @@ export default function page() {
|
|||
<Layout title="Page" description="A React page demo">
|
||||
<Head>
|
||||
<meta property="og:image" content="image.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<link rel="preconnect" href="https://example.com" />
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
'@context': 'https://schema.org/',
|
||||
'@type': 'Organization',
|
||||
name: 'Meta Open Source',
|
||||
url: 'https://opensource.fb.com/',
|
||||
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
|
||||
})}
|
||||
</script>
|
||||
</Head>
|
||||
{/* ... */}
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue