Vuepress 分享卡片配置

念念不忘
384 阅读3分钟

前言

最近在做的项目中使用了Vuepress这个框架，但是因为是To B 所以希望我们的文档在分享中能正常的显示内容，这样的体验会好一些，所以想到SEO优化title description等配置信息。

meta 标签

在掘金打开的文章没有对应的meta标签设置，但打开思否任意一篇文章，查看 DOM 元素，我们可以在 head 中找到这样一段 meta 标签：

image.png 我们可以发现 name 都是以 og: 开头，这是什么意思呢，又是什么作用呢？

其实这是 Facebook 提出的 Open Graph Protocol，官方地址：ogp.me/，用来标注页面类型和描述页面内容，从而方便在社交媒体中进行传播。如果网页搜索采用OG协议，在搜索结果会结构化展示，这样对站点在网页搜索中有更丰富内容的展现，同时对站点有较高的转化率提升。

OG协议     

 OG是一种新的HTTP头部标记，即Open Graph Protocol：即这种协议可以让网页成为一个“富媒体对象”。简单的来说，按照这个协议描述页面信息，社交网站按就会按照页面上 og 标签的内容呈现给用户，由于使用广泛，目前也已经被搜索引擎支持。

参与到 Open Graph Protocol 的好处：　

  • 能够正确被蜘蛛抓取您的内容到百度网页搜索
  • 帮助您的内容更有效的在百度结构化展现
  • 应用了 OG 协议将会有更丰富的内容展现

标记示例

参照网站管理员分享指南，以下就是一个使用 OG 协议标记文章、新闻动态或博文：

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

这些属性包括我们在用户分享文章时具体想要呈现的与文章有关的描述性元数据。

其中 og:type，表示内容的媒体类型。此标签会影响内容在动态中的显示方式。完整的类型参阅对象类型参考文档。

这里我选择的是 article 类型，查看 The Open Graph protocol，可以看到 article 类型下还有其他可以展示的属性：

image.png

使用 OG 协议

虽然我们可以借助 config.js 和 Front Matter 自定义每个页面的 og 属性，但我们也可以借助现有的插件比如vuepress-plugin-seo来快速的实现

1. 安装

yarn add vuepress-plugin-seo@0.1.4 -D

注意，因为我使用的是 vuepress 1.x，所以对应的插件应该使用 v0.1.4，如果是用的 2.x，就安装最新的版本即可。

2. 配置

// config.js

module.exports = {
    title: 'title',
    description: 'description',
      plugins: [
      ['seo', {
        siteTitle: (_, $site) => 'Vuepress中文文档',
        title: $page => $page.title,
        description: $page => $page.frontmatter.description,
        author: (_, $site) => '念念不忘',
        type: $page => 'article',
        url: (_, $site, path) => 'https://juejin.cn/post/7117266134222503967' + path,
        image: ($page, $site) => "https://www.vuepress.cn/hero.png",
        publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
        modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
        }]
      ]
}

这里我根据自己的情况，自定义了一些属性的展示，要注意这里的 publishedAt，即发布时间，是需要借助 Front Matter 以 date 为名称，写在每个 md 文件中的：

title: VuePress中文文档_入门指南
description: VuePress 由两部分组成：第一部分是一个极简静态网站生成器 ，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。。
date: 2022/06/06 06:06:06

3.效果展示

现在我们查看 DOM 元素，就会有 og 标签了，不仅如此，seo 这个插件还为我们写了 twitter 标签，至于这个标签，你可以理解为这是 twitter 推出的协议，与 og 一样，都是为了方便展示。

image.png

avatar
文章
阅读
粉丝