HackettYu’s blog

简介

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

安装

1
2
3
4
5

yarn add hexo-tag-link-preview



在文章中添加 {% 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 等等。

1
2
3
4
5
6
7

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

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

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

在 .themesnextlayout_partialshead.swig 下添加了下面代码

1
2
3
4
5

<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]) %>

1
2

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

附录

• OGP 简介
• hexo open graph
• hexo-tag-link-preview
• 让网站在分享时预览更美观
• hexo 加上 Open Graph