Improved SEO (meta tags support)
- Dominant language
- JavaScript
- Stars
- 31.5k
- Forks
- 5.8k
- Avg merge
- 9d 8h
- Merged PRs (30d)
- 2
Description
## Feature request
#### What problem does this feature solve?
It improves SEO of pages generated by Docsify. It makes it easier for search engines to find the relevant content, and when a user shares a link to a Docsify page, the rendered preview is more accurate (title, description and image).
Example (diff pages, same SEO 😢 ):

#### What does the proposed API look like?
[Marp](https://raw.githubusercontent.com/yhatt/marp-cli-example/master/PITCHME.md) allows you to write slides using Markdown, and each file has a small header like this:
```markdown
---
marp: true
title: Marp CLI example
description: Hosting Marp slide deck on the web
theme: uncover
paginate: true
---
```
Docsify could have something similar that would allow us to define the meta tags of each page. Example:
```markdown
---
meta-title: Site title: Page title
meta-description: This is the summary that appears on search engine results or preview links
meta-og-type:
meta-og-url:
meta-og-title:
meta-og-description:
meta-og-image: https://yourdomain.com/path/to/image.jpg
meta-twitter-card:
meta-twitter-url:
meta-twitter-title:
meta-twitter-description:
meta-twitter-image: https://yourdomain.com/path/to/image.jpg
---
# Page title
And the _rest_ of the page.
```
- I think a syntax like this would be good enough for us. I would say the first two fields are the MVP, as that works everywhere.
- Then Open Graph would be helpful, because it allows you to define an image.
- And finally, with the lowest priority/importance, the Twitter meta tags, because if Twitter can't find them it will fallback to the Open Graph tags.
#### How should this be implemented in your opinion?
I checked if it was possible to hack it with the current Docsify version by hardcoding HTML tags in the `.md` file.
```markdown
(TITLE) (SEPARATOR) Title of this page
# TITLE_HERE
```

It didn't work. Those tags were added inside ` ... `, but we need them to exist in the `` section.
I propose this flow:
- When Docsify reads a Markdown file, it checks if it has a header.
- If it doesn't, then everything works as is.
- If it has, it will read each key (e.g. `meta-title`) and override it's value.
Example:
> Docsify detects a header. One key is `meta-dummy`. Docsify doesn't know how to handle this key, so it skips it. The next key is `meta-title`. Docsify knows how to handle this, so it goes to `head.meta.title` and replaces the default value with the value in the file header.
#### Are you willing to work on this yourself?
I don't think I have enough JS and Docsify knowledge to develop this feature. But I can (beta) test it!
Contributor guide
Assessment
This issue has not been assessed yet.