Enable custom meta description for custom pages

[endiliey]

Motivation

1. Fixes Add <meta /> "description" tag #751
2. Enable user to set their own description (Inspired from Enable setting of title for custom pages #704)

For Your Information

<meta name="description" content="" />
Search engines show the meta description in search results mostly when the searched for phrase is contained in the description. Optimizing the meta description is a very important aspect of on-page SEO

<meta property="og:description" content="" />
This is used for Open Graph description meta. Usually used by crawler of social media like Facebook / Twitter

Have you read the Contributing Guidelines on pull requests?

Yes

Changes

Previously, all custom pages description will always be tagline because we never pass description props.

https://github.com/facebook/Docusaurus/blob/18c01327a3082962165263c37b4a49d5426fbf53/lib/core/Site.js#L31

Adding custom description for your custom pages is as simple as adding description class property to your React component.

Example:

class Index extends React.Component {
  // ... some code
}
Index.description = 'Endilie is an undergraduate student at Nanyang Technological University (2019). He likes to write & code in his free time';

Test Plan

Facebook URL Linter
https://developers.facebook.com/tools/debug/

Before

After

https://totheweb.com/learning_center/tool-test-google-title-meta-description-lengths/

Before

After

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 87dcf6a

https://deploy-preview-752--docusaurus-preview.netlify.com

[JoelMarcey]

Nice catch. We only had og:description.

Enable user to set their own description (Inspired from #704)

So, by default, we just use the tagline from siteConfig.js for setting th description. Do we need to document anything that says that they can override that per custom page? Or is that self-explanatory?

[endiliey]

@JoelMarcey this is only for custom pages like index.js, versions.js. Docs & Blogs had their own algorithm for description. Unless we want to add description header on markdown to set a custom description.

https://github.com/facebook/Docusaurus/blob/18c01327a3082962165263c37b4a49d5426fbf53/lib/core/DocsLayout.js#L43-L47

https://github.com/facebook/Docusaurus/blob/18c01327a3082962165263c37b4a49d5426fbf53/lib/core/BlogPostLayout.js#L101-L106

You can try Facebook URL Linter to crawl & check docusaurus open graph description 😄

[JoelMarcey]

Adding custom description for your custom pages is as simple as adding description class property to your React component.

I just didn't know of most people who use Docusaurus realized that they could do the above by adding the class property. 😄

[JoelMarcey]

💯 Thanks!

[endiliey]

Oh this is actually a new feature. I should document it like #712

[endiliey]

Docs updated. Feel free to modify 👍

http://localhost:3000/docs/en/next/api-pages

[JoelMarcey]

Good documentation!