Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Improved SEO (meta tags support)

未关闭
  • 哪里不对？
#1,235 20 条评论 6 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 2 天内回复

@anikethsaha 已经在做这个了。

开始于 2020年6月23日。

评估

这个 Issue 还没有评估数据。

描述

enhancement needs discussion semver-minor

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 allows you to write slides using Markdown, and each file has a small header like this:

---
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:

---
<!-- Primary Meta Tags -->
meta-title: Site title: Page title
meta-description: This is the summary that appears on search engine results or preview links
<!-- Open Graph -->
meta-og-type: 
meta-og-url: 
meta-og-title: 
meta-og-description: 
meta-og-image: https://yourdomain.com/path/to/image.jpg
<!-- Twitter -->
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.

<!-- markdownlint-disable MD033 -->
<!-- SEO tags -->
<title>(TITLE) (SEPARATOR) Title of this page</title>
<meta name="title" content="(TITLE) (SEPARATOR) Title of this page">
<meta name="description" content="A description that is specific to this page.">

# TITLE_HERE

failed attempt

It didn't work. Those tags were added inside <body> ... <article>, but we need them to exist in the <head> 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!

主要语言
JavaScript
星标
31.5k
派生
5.8k
平均合并
2 天 14 小时
30 天内合并 PR
5

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

docsifyjs/docsify 的其他 Issue

查看 docsifyjs/docsify 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。