From 2a1eb365fd828e30fb8bf4db4c692629d3e3f4f2 Mon Sep 17 00:00:00 2001 From: Wei Gao Date: Sun, 21 Jul 2019 00:03:05 +0800 Subject: [PATCH] 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 --- website/docs/reaching-users.md | 21 +++--------- website/docs/seo.md | 61 +++++++++++++++++++++++++++++----- website/sidebars.js | 3 +- 3 files changed, 58 insertions(+), 27 deletions(-) diff --git a/website/docs/reaching-users.md b/website/docs/reaching-users.md index 8ed5c28887..28e4566d87 100644 --- a/website/docs/reaching-users.md +++ b/website/docs/reaching-users.md @@ -1,6 +1,10 @@ --- id: reaching-users title: Reaching Users +keywords: + - docusaurus + - seo + - analytics --- ## Search @@ -15,23 +19,6 @@ References - [Algolia documentation](https://www.algolia.com/doc/) --> -## SEO - -_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ - - - ## Analytics _This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ diff --git a/website/docs/seo.md b/website/docs/seo.md index 44a1ae2e82..1dbd2c6e60 100644 --- a/website/docs/seo.md +++ b/website/docs/seo.md @@ -1,18 +1,43 @@ --- id: seo title: SEO -keywods: +keywords: - docusaurus - - svg -description: Adding SEO to docs -image: 'https://i.imgur.com/mErPwqL.png' + - seo --- -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 @@ -23,8 +48,8 @@ To add SEO to your doc, use the following fields in your doc's front matter: keywords: - docs - docusaurus -description: 'How do I find you when I cannot solve this problem' -image: 'https://i.imgur.com/mErPwqL.png' +description: How do I find you when I cannot solve this problem +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. 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 = () => ( + <> + + + + + + +); +``` diff --git a/website/sidebars.js b/website/sidebars.js index e1c309eb2a..0d1676d5fa 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -23,7 +23,8 @@ module.exports = { items: ['markdown-features', 'sidebar'], }, 'blog', - 'reaching-users', + 'seo', + // 'reaching-users', // add back analytics and search 'using-plugins', 'using-themes', 'deployment',