docsifyjs / docsifyjs/docsify

Improved SEO (meta tags support)

Đang mở
#1,235 20 bình luận 6 reaction 1 người được giao Được @anikethsaha nhận Xem trên GitHub
enhancement needs discussion semver-minor
Ngôn ngữ chính
JavaScript
Star
31.5k
Fork
5.8k
Merge trung bình
9 ngày 8 giờ
Pull request đã merge (30 ngày)
2

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.