mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-03 03:12:35 +02:00
docs(v2): SEO (#1677)
* docs(v2): SEO * docs(v2): add section on customized SEO * remove unnecessary comment * docs(v2): separate SEO doc and fix typos
This commit is contained in:
Wei Gao
GitHub
parent
ae620cd530
commit
2a1eb365fd
3 changed files with 58 additions and 27 deletions
|
|
@ -1,6 +1,10 @@
|
||||||
---
|
---
|
||||||
id: reaching-users
|
id: reaching-users
|
||||||
title: Reaching Users
|
title: Reaching Users
|
||||||
|
keywords:
|
||||||
|
- docusaurus
|
||||||
|
- seo
|
||||||
|
- analytics
|
||||||
---
|
---
|
||||||
|
|
||||||
## Search
|
## Search
|
||||||
|
|
@ -15,23 +19,6 @@ References
|
||||||
- [Algolia documentation](https://www.algolia.com/doc/)
|
- [Algolia documentation](https://www.algolia.com/doc/)
|
||||||
-->
|
-->
|
||||||
|
|
||||||
## SEO
|
|
||||||
|
|
||||||
_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._
|
|
||||||
|
|
||||||
<!--
|
|
||||||
|
|
||||||
Covers adding SEO to doc site
|
|
||||||
- SEO for the whole site
|
|
||||||
- SEO for each page
|
|
||||||
|
|
||||||
References
|
|
||||||
---
|
|
||||||
- [source code](/packages/docusaurus/src/client/exports/Head.js)
|
|
||||||
- [The Essential Meta Tags for Social Media](https://css-tricks.com/essential-meta-tags-social-media/)
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
## Analytics
|
## Analytics
|
||||||
|
|
||||||
_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._
|
_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,43 @@
|
||||||
---
|
---
|
||||||
id: seo
|
id: seo
|
||||||
title: SEO
|
title: SEO
|
||||||
keywods:
|
keywords:
|
||||||
- docusaurus
|
- docusaurus
|
||||||
- svg
|
- seo
|
||||||
description: Adding SEO to docs
|
|
||||||
image: 'https://i.imgur.com/mErPwqL.png'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
SEO helps your users reach your site. Page-specific SEO helps your users to have a higher chance of finding answers to their questions quickly.
|
Docusaurus takes care of both site level SEO and page specific SEO based on the content of your site.
|
||||||
|
|
||||||
## Site SEO
|
Site SEO helps users reach your site. Page specific SEO helps your users find answers to their questions quickly.
|
||||||
|
|
||||||
Your site title and logo are by default used in each page of your docs.
|
## Site level SEO
|
||||||
|
|
||||||
|
Docusaurus' classic theme generates the essential meta tags for SEO using the site meta information you provide in `docusaurus.config.js`. For site level SEO to work correctly, make sure that you provide the following fields correctly:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// docusaurus.config.js
|
||||||
|
module.exports = {
|
||||||
|
/**
|
||||||
|
* the following two fields are used for title as well as image alt
|
||||||
|
* - `${title} · ${tagline}`
|
||||||
|
* - `Image for ${title} · ${tagline}`
|
||||||
|
*/
|
||||||
|
title: 'Docusaurus',
|
||||||
|
tagline: 'Easy to Maintain Open Source Documentation Websites',
|
||||||
|
/**
|
||||||
|
* The following fields are used for `og:image` and `twitter:image`
|
||||||
|
*/
|
||||||
|
baseUrl: '/',
|
||||||
|
siteUrl: 'https://docusaurus.io',
|
||||||
|
themeConfig: {
|
||||||
|
/**
|
||||||
|
* relative to your site's "static" directory
|
||||||
|
* cannot be svg
|
||||||
|
*/
|
||||||
|
image: 'img/docusaurus.png',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
## Page specific SEO
|
## Page specific SEO
|
||||||
|
|
||||||
|
|
@ -23,8 +48,8 @@ To add SEO to your doc, use the following fields in your doc's front matter:
|
||||||
keywords:
|
keywords:
|
||||||
- docs
|
- docs
|
||||||
- docusaurus
|
- docusaurus
|
||||||
description: 'How do I find you when I cannot solve this problem'
|
description: How do I find you when I cannot solve this problem
|
||||||
image: 'https://i.imgur.com/mErPwqL.png'
|
image: https://i.imgur.com/mErPwqL.png
|
||||||
---
|
---
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -50,3 +75,21 @@ Consider putting key information about this page, error messages, searchable ter
|
||||||
`image` is used by search engines and Twitter for a cover or thumbnail image when displaying the link to your post.
|
`image` is used by search engines and Twitter for a cover or thumbnail image when displaying the link to your post.
|
||||||
|
|
||||||
Note that the file of this image cannot be SVG.
|
Note that the file of this image cannot be SVG.
|
||||||
|
|
||||||
|
## Customize SEO
|
||||||
|
|
||||||
|
To add customized SEO, use the `Head` component from `@docusaurus/Head`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Head from '@docusaurus/Head';
|
||||||
|
|
||||||
|
const MySEO = () => (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
</Head>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,8 @@ module.exports = {
|
||||||
items: ['markdown-features', 'sidebar'],
|
items: ['markdown-features', 'sidebar'],
|
||||||
},
|
},
|
||||||
'blog',
|
'blog',
|
||||||
'reaching-users',
|
'seo',
|
||||||
|
// 'reaching-users', // add back analytics and search
|
||||||
'using-plugins',
|
'using-plugins',
|
||||||
'using-themes',
|
'using-themes',
|
||||||
'deployment',
|
'deployment',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue