VuePress 博客之 SEO 优化(五)添加 JSON-LD 数据

前言

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

本篇讲 SEO 中的 JSON-LD。

JSON-LD

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

image.png

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

image.png

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

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

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

image.png

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

image.png

添加 JSON-LD

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

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

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

具体里面的内容需要参考比如 Google 搜索中心提供的《结

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值