前言

《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档

本篇讲 SEO 中的 JSON-LD。

JSON-LD

如果我们打开掘金任意一篇文章,比如这篇《VuePress 博客优化之增加 Vssue 评论功能》,查看 DOM 元素,我们可以在 head 中找到这样一段 script 标签:

在思否等其他平台也是可以看到的:

那这个 type 为 application/ld+json 的 script,到底是什么意思呢? 又是什么作用呢?

这就是我们今天要介绍的 JSON-LD,英文全程:JavaScript Object Notation for Linked Data,官方地址:https://json-ld.org/,简单的来说,就是用来描述网页的类型和内容,方便搜索引擎做展现。

比如如果我们在 Google 搜索 「Chocolate in a mug」,我们会看到这样的搜索结果:

我们打开页面,就可以看到搜索展示的内容对应了 application/ld+json 中的内容:

添加 JSON-LD

如果我们也要实现这样的效果,方便搜索引擎展现,该怎么做呢?

在页面加入结构化数据的方法很简单,只用在页面添加这样一段脚本就可以了:

<script type="application/ld+json">
// ...
</script>

具体里面的内容需要参考比如 Google 搜索中心提供的《结构化数据常规指南》,因为我写的是具体的文章,所以参考 Article 章节后,我决定写入以下这些属性:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "这里填写标题",
"image": [
"https://ts.yayujs.com/icon-144x144.png"
],
"datePublished": "2021-11-10T22:06:06.000Z",
"dateModified": "2022-03-04T16:00:00.000Z",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "https://github.com/mqyqingfeng/Blog"
}]
}
</script>

VuePress 实现

经过搜索,我并没有发现现成的插件,由于每个页面的标题、发布时间、更新时间都不同,那成吧,那就自己写个本地插件实现吧。

其实要实现的内容很简单,就是在编译的时候在 head 中写入一个 script 脚本,脚本的内容根据页面的属性而定,但毕竟我用的是 vuepress 1.x,实现方式受制于工具,完全看工具提供了什么 API 来实现,我们直接看最终的实现方式:

vuepress-plugin-jsonld

在 .vuepress 目录下建立 vuepress-plugin-jsonld 文件夹,然后执行 npm init ,创建 package.json

创建 index.js,代码写入:

const { path } = require('@vuepress/shared-utils')

module.exports = options => ({
name: 'vuepress-plugin-jsonld',
enhanceAppFiles () {
return [path.resolve(__dirname, 'enhanceAppFile.js')]
},
globalUIComponents: ['JSONLD']
})

创建 enhanceAppFile.js,代码写入:

import JSONLD from './JSONLD.vue'

export default ({ Vue, options }) => {
Vue.component('JSONLD', JSONLD)
}

创建 JSONLD.vue,代码写入:

<template></template>

<script>
export default {
created() {
if (typeof this.$ssrContext !== "undefined") {
this.$ssrContext.userHeadTags +=
`<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "${this.$page.title}",
"url": "${'https://yayujs.com' + this.$page.path}",
"image": [
"https://ts.yayujs.com/icon-144x144.png"
],
"datePublished": "${this.$page.frontmatter.date && (new Date(this.$page.frontmatter.date)).toISOString()}",
"dateModified": "${this.$page.lastUpdated && (new Date(this.$page.lastUpdated)).toISOString()}",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "https://github.com/mqyqingfeng/Blog"
}]
}
<\/script>`;
}
}
};
</script>

这里之所以能够给所有的页面都注入脚本内容,是因为借助了 globalUIComponents

你可能想注入某些全局的 UI,并固定在页面中的某处,如 back-to-top, popup。在 VuePress 中,一个全局 UI 就是一个 Vue 组件。

config.js

接下来我们修改 config.js:

module.exports = {
title: 'title',
description: 'description',
plugins: [
require('./vuepress-plugin-jsonld')
]
}

注意我们在本地运行的时候并不能看到,我们可以关闭 deploy.sh 推送到远程的命令,然后本地编译一下,查一下输出的 HTML:

验证

发布到线上后,我们可以在 Google 提供的富媒体搜索测试中进行验证,打开网址,输入页面地址,就可以看到抓取的结构化数据:

如果有错误,这里也会展示警告。

系列文章

博客搭建系列是我至今写的唯一一个偏实战的系列教程,预计 20 篇左右,讲解如何使用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 31 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog

微信:「mqyqingfeng」,进冴羽的读者群。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

VuePress 博客之 SEO 优化(五)添加 JSON-LD 数据的更多相关文章

  1. VuePress 博客之 SEO 优化(三)标题、链接优化

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  2. VuePress 博客之 SEO 优化(二)重定向

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  3. VuePress 博客之 SEO 优化(一) sitemap 与搜索引擎收录

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  4. VuePress 博客之 SEO 优化(六)站长工具

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇接着 ...

  5. 2022 年了,还不了解 PWA ? 教你 VuePress 博客如何快速兼容 PWA

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇我们 ...

  6. Hexo + Github 个人博客设置以及优化

    原文地址: Hexo + Github 个人博客设置以及优化 一.博客设置 分类.标签云.关于等页面 在站点目录下分别执行: hexo new page "categories" ...

  7. 基于django的个人博客网站建立(五)

    基于django的个人博客网站建立(五) 前言 网站效果可点击这里访问 之前鸽了两天,今天继续再写点 主要内容 今天加了个展示照片的功能,就叫他生活记录吧 先建表 class Record(model ...

  8. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

  9. Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

    上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护. ...

随机推荐

  1. C快速指南

    https://seleniumhq.github.io/docs/quick.html QUICK TOUR Selenium is not just one tool or API but it ...

  2. [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (2)

    [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (2) 目录 [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (2) 0x00 摘要 0x01 总体流程 ...

  3. LRU缓存及实现

    一.淘汰策略 缓存:缓存作为一种平衡高速设备与低速设备读写速度之间差异而引入的中间层,利用的是局部性原理.比如一条数据在刚被访问过只有就很可能再次被访问到,因此将其暂存到内存中的缓存中,下次访问不用读 ...

  4. Winds10 安装JDK8.0教程

    首先下载一个jdk,可以通过这个链接下载:https://pan.baidu.com/s/1aP6SdL8UQK_C2GvALLb6Wg也可以去官网下载:https://www.oracle.com/ ...

  5. CentOS 7 升级 gcc-4.8.5 到 gcc-5.4.0

    文章目录 1.环境介绍 2.下载gcc-5.4.0源码包 3.编译安装gcc 4.验证gcc版本 5.更新gcc连接 1.环境介绍 [root@localhost ~]# gcc -v Using b ...

  6. 【论文考古】联邦学习开山之作 Communication-Efficient Learning of Deep Networks from Decentralized Data

    B. McMahan, E. Moore, D. Ramage, S. Hampson, and B. A. y Arcas, "Communication-Efficient Learni ...

  7. Anchor-free目标检测综述 -- Keypoint-based篇

      早期目标检测研究以anchor-based为主,设定初始anchor,预测anchor的修正值,分为two-stage目标检测与one-stage目标检测,分别以Faster R-CNN和SSD作 ...

  8. libc++abi.dylib: terminating with uncaught exception of type NSException

    这是微信sdk注册时候报的错误 解决方法 选择Build Setting,在"Other Linker Flags"中加入"-Objc -all_load"

  9. jmeter参数化文件路径问题

    问题 win下做好的带参数化文件的脚本,放到linux下运行,由于参数化文件路径不正确,导致脚本运行失败,如果解决这个问题呢? 方案一:参数化路径 比如,参数化文件我放到jmeter的bin目录下,参 ...

  10. [杂记]CodeBlocks下载、安装及设置

    zyy安装codeblocks十次有九次都会卡在奇怪的地方,所以写篇博文以提醒自己少犯蠢[叹气] 下载 http://www.codeblocks.org/downloads/26 这是官网,以win ...