搜索引擎优化(seo)知识完全手册(《一篇带你用VuePress+GithubPages搭建博客》中的OpenGraph)
优采云 发布时间: 2022-04-20 13:00搜索引擎优化(seo)知识完全手册(《一篇带你用VuePress+GithubPages搭建博客》中的OpenGraph)
前言
在《一篇带你用VuePress + Github Pages搭建博客》中，我们使用VuePress搭建博客，查看最终效果：TypeScript中文文档。
本文讨论了 SEO 优化中的 Open Graph 协议。
元标记
如果我们打开 Sifu 的任意一个文章，比如这个“VuePress 博客优化：添加 Vssue 评论”，查看 DOM 元素，我们可以在 head 中找到这样的 meta 标签：
我们可以发现名字都是以og:开头的，这是什么意思，有什么作用？
其实这就是Facebook提出的Open Graph Protocol，官方地址：，用于标记页面类型和描述页面内容，以便于在社交媒体中传播。
简单来说就是按照这个协议来描述页面信息，社交网站press会根据页面上og标签的内容呈现给用户。由于它的广泛使用，它也得到了搜索引擎的支持。请参阅旧帖子的内容：
参与 Open Graph 协议的好处：
标记示例
请参阅网站管理员共享指南，这里是使用 OG 协议的 文章、新闻或博客文章的示例：
这些属性包括关于 文章 的描述性元数据，我们特别希望在用户共享 文章 时呈现这些元数据。
其中 og:type 表示内容的媒体类型。此标记会影响内容在提要中的显示方式。查看完整类型。
这里我选择文章类型，勾选The Open Graph协议，可以看到文章类型下还有其他可以显示的属性：
使用 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) => 'TypeScript中文文档',
title: $page => $page.title,
description: $page => $page.frontmatter.description,
author: (_, $site) => '冴羽',
type: $page => 'article',
url: (_, $site, path) => 'https://ts.yayujs.com' + path,
image: ($page, $site) => "https://www.typescriptlang.org/icons/icon-144x144.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: TypeScript中文文档_入门进阶必备
description: TypeScript 系列文章由官方文档翻译、重难点解析、实践技巧与总结三个部分组成，预计 40 篇左右。目前已完成了官方文档 Handbooks 的翻译，正在准备重难点解读部分。
date: 2021/11/11 06:06:06
3.订单问题
在实际开发过程中，如果还使用@vuepress/last-updated和sitemap，建议按照这个顺序：
// config.js
module.exports = {
title: 'title',
description: 'description',
plugins: [
[
'@vuepress/last-updated',
{
transformer: (timestamp, lang) => {
return new Date(timestamp).toLocaleDateString();
}
}
],
[
'sitemap',
{
hostname: 'https://ts.yayujs.com'
}
],
['seo', {
...
}]
]
}
否则modifiedAt将不显示。
4.效果展示
现在我们看一下 DOM 元素，会有一个 og 标签。不仅如此，seo插件还为我们写了一个twitter标签。至于这个标签，你可以理解为这是推特推出的一个协议。和og一样，都是为了方便展示。
5.工具验证
可以使用Facebook Object Debugger提供的官方工具来验证：
此工具将显示在 Facebook 上分享的效果，并提供一些警告。
系列文章
博客构建系列是我目前为止写的唯一的实用教程系列。预计会有20篇左右，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。这是全系列第30篇文章地址：
如有错误或不准确之处，请务必纠正我，非常感谢。如果喜欢或者有灵感，欢迎star，也是对作者的鼓励。
