docsifyjs / docsifyjs/docsify

Improved SEO (meta tags support)

Open
#1,235 20 comments 6 reactions 1 assignee Claimed by @anikethsaha View on GitHub
enhancement needs discussion semver-minor
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 😢 ):

Screenshot 2020-06-20 at 22 12 05

#### 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
```

![failed attempt](https://user-images.githubusercontent.com/2140450/85221761-7fead800-b3ae-11ea-979b-d6ebdd10d7ed.png)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.