Render pure text into the og:description meta tag

[sebqq]

🐛 Bug Report

Currently, after my Pull Request #1054 I realized that maybe it's not best option to render raw HTML into the og:description meta tag. I think that It just doesn't look nice or at least it doesn't help a readability at all. Maybe we could stick to the option of rendering a pure "text-like" output into the og:description.

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Start any of your doc.md files with markdown formatted text including i.e. pictures, links, bold/italic text, etc.
2. Run your application to render the changes.
   3 .Navigate and then copy a URL address of the doc that you just prepared.
3. Check tags in header of your doc file inside your browser dev tools or paste url link, that you copied in previous step into the Open Graph Check and look for your og:description meta tag.

Expected behavior

In my opinion, it could be way more user-friendly if we could show to the user potentially as much of clear text as possible.

So from example described in Actual Behavior part of this issue, I think that rendered og:description can look like:

Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.

Actual Behavior

Let's say your actual Doc page starts with:

Docusaurus was _designed_ from the ground up to be easily [installed](https://nodejs.org/en/download/) and used to get your website up and **running** quickly.

Currently, after running your app in Open Graph Preview you will see something like:

or in a browser dev tools something like this:

<p>Docusaurus was <em>designed</em> from the ground up to be easily <a href="https://nodejs.org/en/download/">installed</a> and used to get your website up and <strong>running</strong> quickly.</p>

Reproducible Demo

You can find reproducible demo on my github fork repository sinodko/Docusaurus. But in overall I think it is a lot more simpler to just copy/paste Actual Behavior example into any of your own Doc file.

If you want to use my fork anyways then there are some steps to make it work:

1. Clone my fork and run yarn install from root and yarn start from v1/ folder. After development server is started just head to Docs -> Installation or url: http://localhost:3000/docs/en/installation.

2. That should be it :) Look for your og:description tag.

Note: If you would like to check it by Open Graph Preview then you need to make localhost dev server accessible from "other side" of your router :D. The most simple way to do so is by my opinion to use ngrok. Continue by installation of ngrok and after installation run command ./ngrok http 3000 which will create a public IP address that will somehow point to your Docusaurus development server... After this you are free to use Open Graph Preview, but instead http://localhost:3000/docs/en/installation write http://ngrok-generated-key.ngrok.io/docs/en/installation.

[endiliey]

opinion @yangshun @JoelMarcey ??

[AoDev]

Hello, is there any news on this issue?

I'd like to suggest that the description could be set as pure text from front matter.

Example:

---
id: some_page
title: "Some Page"
description: "This description will be set in the corresponding meta tag."
---
...page content...

My pages description don't make any sense at the moment, like:

<h2><a class="anchor" aria-hidden="true" id="install">
</a><a href="#install" aria-hidden="true" class="hash-link">
<svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</svg>
</a>
Install</h2>

[endiliey]

Accepting PR on this for v1 😉

I agree we shouldnt render markdown.