0x06-给 hexo 博客添加 OGP 协议支持

description: 最近了解到有一种预览网址的协议叫 OGP，想在 hexo 博客里添加，找到了这个插件

安装¶

yarn add hexo-tag-link-preview

# usage

在文章中添加 \{\% linkPreview https://www.amazon.com/ _blank nofollow \%\}

预览¶

想要好看的预览需要如下的标签

Title 最长 65 个字符，否则 Google 结果就会被截断
Meta description 最好小于 155 字符
og:title 最好不超过 35 个字符，否则预览会截断
og:description 65 字符
og:url 页面 url
og: image JPG 或者 PNG，最小分辨率 300 × 200 像素
favicon 网站 logo， 32 × 32 像素

上面的网站目前支持很多聊天工具，比如 WhatsApp, Telegram, Skype ，还有社交网站 Facebook，Twitter 等等。

# 可以用下面的代码内嵌到 hexo 的文章中
{% linkPreview https://www.amazon.com/ _blank nofollow %}

{% linkPreview https://hackettyu.com/ _blank nofollow %}

{% linkPreview https://baidu.com/ _blank nofollow %}

在 .\themes\next\layout\_partials\head.swig 下添加了下面代码

<meta property="og:title" content="hackettyu.com" />
<meta property="og:description" content="OGP" />
<meta property="og:url" content="http://hackettyu.com/" />
<meta property="og:image" content="http://richpreview.com/richpreview.jpg" />
<link rel="shortcut icon" href="https://hy-picgo.oss-cn-shenzhen.aliyuncs.com/img/blog-hackettyu-com/weekly_01_falling_through_code.gif" type="image/x-icon" />

感觉没用

使用 hexo 自带的 open graph 参数¶

插入 open graph 资源。

<%- open_graph([options]) %>

+ {{ open_graph([options]) %> }}
- <%- open_graph([options]) %>

参数	描述	默认值
title	页面标题	(og:title) page.title
type	页面类型 (og:type)	blog
url	页面网址 (og:url)	url
image	页面图片 (og:image)	内容中的图片
site_name	网站名称 (og:site_name)	config.title
description	页面描述 (og:description)	内容摘要或前 200 字
twitter_card	Twitter 卡片类型 (twitter:card)	summary
twitter_id	Twitter ID (twitter:creator)
twitter_site	Twitter 网站 (twitter:site
google_plus	Google+ 个人资料链接
fb_admins	Facebook 管理者 ID
fb_app_id	Facebook 应用程序 ID

附录¶

最后更新: 2021-07-26
创建日期: 2021-03-04