钧言极客站钧言极客

钧言极客

typecho社交应用分享小卡片优化

看见wp主题很多通过浏览器分享的页面,都会生成一个小卡片。看着炫酷,总比看着一寸长长的链接好吧,后来发现浏览器是通过OG协议去抓取相当于的内容。og是一种新的HTTP头部标记,即Open Graph Protocol,有兴趣的可以查看去OG官网文档了解一下。

微信图片.jpg

第一个带卡片的是微信的分享只显示一个链接的图片,下面两个为谷歌浏览器的分享已经可以看到og协议已经生效。

OG协议大致包含以下信息:

og:type 页面内容类型,博客通常使用article文章类型即可。
og:title 这里是文章标题
og:description 页面的简单描述,可以使用文章摘要
og:site_name 页面所在网站名,使用博客网站名称
og:url 文章页面url地址
og:image 文章略缩图地址

那么typecho怎么添加og协议

在当前主题目录中,找到header.php文件,在head标签内插入以下内容

<meta property="og:type" content="<?php if ($this->is('index')): ?>website<?php else: ?>acticle<?php endif; ?>">
<meta property="og:title" content="<?php if ($this->is('index')): ?><?php $this->options->title(); ?><?php else: ?><?php $this->archiveTitle('/','',' - '); ?><?php $this->options->title(); ?><?php endif; ?>">
<meta property="og:site_name" content="<?php $this->options->title();?>">
<meta property="og:description" content="<?php if ($this->is('index')): ?><?php $this->options->description() ?><?php else: ?><?php $this->excerpt(80) ?><?php endif; ?>">
<meta property="og:url" content="<?php $this->permalink(); ?>"/>
<meta property="og:image" content="<?php if ($this->is('index')): ?><?php $this->options->themeUrl('img/logo.png'); ?><?php else: ?><?php echo showThumb($this,null,true); ?><?php endif; ?>">

这里要提醒一下,不要照搬要仔细看一下,其中og:description是根据首页和文章页来判断,首页显示站点的描述,文章页是截取文章的前60个字也可以自己修改和og:image首页是调用logo,文章页调用的自己主题的缩略图函数,默认选取文章第一张图片,如果要实现主题匹配,需要修改为自己的typecho主题缩略图函数调用。

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《typecho社交应用分享小卡片优化 》
文章链接:https://www.jinjun.top/270.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 1

  1. 博主,请问handsome博客如何适配og协议

    逍遥隐士 2021年07月04日    回复