指南

Mr.Hope ... 2021-2-28 大约 4 分钟

本插件会通过向网站 <head> 注入 <meta> 标签，让你的网站完全支持开放内容协议 OGP (opens new window) 以增强站点的搜索引擎优化性。

# 开箱即用

插件开箱即用，在不做任何配置的情况下，会尽可能通过页面内容，提取对应的信息补全 OGP 所需的必要标签。

默认情况下，插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动生成。诸如站点名称，页面标题，页面类型，写作日期，最后更新日期，文章标签均会自动生成。

# 默认的 OGP 生成逻辑

属性名称	值
`og:url`	`options.hostname` + `path`
`og:site_name`	`siteConfig.title`
`og:title`	`page.title`
`og:description`	`page.frontmatter.description` \|\| 自动生成 (当插件选项中的 `autoDescription` 为 `true` 时)
`og:type`	`"article"`
`og:image`	`options.hostname` + `page.frontmatter.image` \|\| 页面的第一张图片\|\| 插件选项的 `fallbackImage`
`og:updated_time`	`page.git.updatedTime`
`og:locale`	`page.lang`
`og:locale:alternate`	`siteData.locales` 包含的其他语言
`twitter:card`	`"summary_large_image"` (仅在找到图片时)
`twitter:image:alt`	`page.title` (仅在找到图片时)
`article:author`	`page.frontmatter.author` \|\| `options.author`
`article:tag`	`page.frontmatter.tags` \|\| `page.frontmatter.tag`
`article:published_time`	`page.frontmatter.date` \|\| `page.git.createdTime`
`article:modified_time`	`page.git.updatedTime`

# 直接添加 meta 标签

你可以在页面的 frontmatter 中配置 meta 选项，自主添加特定 Meta 标签到页面 <head> 以增强 SEO。

如:

---
meta:
  - name: keywords
    content: SEO plugin
---

1
2
3
4
5

会自动注入 <meta name="keywords" content="SEO plugin" />。

# 自定义生成过程

本插件也支持你完全控制生成逻辑。

# 页面类型

对于大多数页面，基本只有文章和网页两种类型，所以插件提供了 isArticle 选项让你提供辨别文章的逻辑。

选项接受一个 (page: Page) => boolean 格式的函数，默认情况下从 Markdown 文件生成的非主页页面都会被视为文章。

注

如果某个网页的确符合图书、音乐之类的“冷门”类型，你可以通过设置下方三个选项处理它们。

# seo

你可以使用插件选项的 seo 传入一个函数来按照你的需要修改默认 OGP 对象并返回。

function seo(
  /** 插件自动推断的 OGP 对象 */
  ogp: SeoContent,
  /** 页面对象 */
  page: Page,
  /** VuePress Context */
  context: Context
): SeoContent;

1
2
3
4
5
6
7
8

详细的参数结构详见配置。

比如你在使用某个第三方主题，并按照主题要求为每篇文章在 Front Matter 中设置了 banner，那你可以传入这样的 seo:

({
  seo: (ogp, page) => ({
    ...ogp,
    "og:image": page.frontmatter.banner || ogp["og:image"],
  }),
});

1
2
3
4
5
6

# 自定义 meta 标签

有些时候你可能需要符合其他协议或按照其他搜索引擎提供的格式提供对应的 SEO 标签，此时你可以使用 customMeta 选项，其类型为:

function customMeta(
  meta: Meta,
  /** 页面对象 */
  page: Page,
  /** VuePress Context */
  context: Context
): void;

1
2
3
4
5
6
7

你应该直接修改传入的 meta 参数。

# SEO 介绍

搜索引擎优化 (Search Engine Optimization)，是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。

# 相关文档

开放内容协议 OGP (opens new window) (Open Graph Protocal)

本插件完美支持该协议，会自动生成符合该协议的 <meta> 标签。
JSON-LD 1.1 (opens new window)

由于 VuePress 未提供插件或主题向 SSR 渲染内容的 <head> 标签注入 <script> 的能力，所以 JSON-LD 无法实现。
RDFa 1.1 (opens new window)

RDFa 主要标记 HTML 结构。这是插件无法支持的内容，vuepress-theme-hope (opens new window) 使用了这一功能通过了谷歌的富媒体结构测试。你可以考虑搭配使用。
Schema.Org (opens new window)

结构标记的 Schema 定义站点

# 相关工具

你可以使用 Google 富媒体结构测试工具 (opens new window) 测试本站点。

指南