WordPress社交营销优化之OpenGraph
最近主题想实现一个分享链接自动解析 URL，并以卡片形式展示目标链接内容的功能，几经调研发现这个需求早在10多年前就已经有相应的标准了，它就是有 FaceBook 提出的 OpenGraph 协议（开放图谱协议）
OpenGraph是什么
我们知道，构建一个网站采用的技术和实现方式并不相同，普通方法无法完美地解析目标页面的基本信息，导致没有 OpenGraph 协议时分享的链接展示形式相当有限，而且看起来没有非常大的点击欲望。
OpenGraph 协议简单来说就是向网页 head 下插入一些统一标准的 meta 元信息，支持标题、描述、缩略图等信息，大大方便了第三方网站和应用地解析出目标页面的基本信息，并加以优化展示链接的目标页面，使其点击率可以大大提升。
比较直观的讲就是，网页只需要加入 OpenGraph 元信息，当页面被分享到微博、FB、Twitter 时，URL 会被智能地解析成一个非常精美地卡片显示：
实际应用
了解了这么多，我们自己的网站和应用如果想要优化链接展示让然也可以读取 OpenGraph 元信息。
其中PHP就可以使用 get_meta_tags 方法从一个URL中提取所有的 meta 标签 content 属性，并返回一个数组：
<?php
$tags = get_meta_tags('https://biji.io/about');
// 注意所有的键（key）均为小写，而键中的‘.’则转换成了‘_’。
echo $tags['title'];
echo $tags['description'];
echo $tags['image'];
echo $tags['geo_position'];
?>WordPress如何添加OpenGraph元信息
// 附加元信息
function head_append_meta() {
$metas = [
'og:title' => get_the_title(),
'og:site_name' => get_bloginfo( 'name' ),
'og:type' => 'website',
];
if ( is_single() || is_page() ) {
$metas['og:url'] = get_permalink();
$metas['og:description'] = get_the_excerpt();
if ( has_post_thumbnail() ) {
$meta_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
if ( $meta_image_url ) {
$metas['og:image'] = $meta_image_url[0];
}
}
$metas['og:type'] = 'article';
}
foreach ( $metas as $key => $value ) {
echo '<meta property="' . $key . '" content="' . $value . '" />' . "\n";
}
}
add_action( 'wp_head', 'head_append_meta', 1 );当然，你也可以访问 The Open Graph protocol (ogp.me) 来了解所有 OpenGraph 元信息和其含义，并灵活地运用到你的网站上。
可以 FaceBook 的分享调试器来调试和预览 OpenGraph 元信息展示能力：分享调试器 - Facebook 开发者
本文参考资料：
【WordPress教程】 什么是 Open Graph（property=”og:type”）_细说外贸推广_杭州 SEO 研究_ISEOer (rrdaj.com)
前端应该知道的：开放图谱协议（The Open Graph protocol） - SegmentFault 思否
The Open Graph protocol (ogp.me)
你博客没有实际应用吗？
先把OG标签加上了
这个好
兄弟请教一个问题，高亮代码块的垂直滚动条改成水平滚动条怎么调整呢？手机上显示时会自动下一行，如果是代码的话可能有点乱乱的😀
这个我看了一下，是WordPress的样式让其强制换行的。你可以后台-主题-自定义-额外CSS，给 .wp-block-code code 设置换行模式为：white-space: pre;
但是这么设置的话，横向滚动的样式会有问题。
我之前用Enlighter插件试过，没有什么问题，只是尝试设置框的颜色和按钮固定并不是很好弄，我暂时没有这个能力去调整配合夜间显示，你的这个配合夜间下和框的效果很好，关于水平滚动条的情况后期有望调整吗？
原生的代码块夜间模式我优化了，但是横向的问题还是建议通过自行设置css来调整，或者安装代码高亮插件。
好的，谢谢。
有高亮插件推荐么？
没有诶，我对这个要求不高，主题自带的这个轻量级高亮就能满足需求：方便阅读、方便拷贝。其它的功能都是冗余
想法很不错，不过要加个缓存和超时停止抓取
我比较排斥静态缓存，会导致各种小bug，就不开缓存了。超时停止抓取似乎没找到有什么可以控制的属性
这个功能不错哎，俺也去了解了解👏
不错不错 copy 代码 哈哈 在美化一下就更棒了！我记得还有一种是内链卡片，和这个差不多，你可以看看 （不能粘贴链接？？）
可以粘贴链接的呀。这个是给第三方平台用的，样式是第三方平台定的，不是我能美化的。。。😂
360站长里面的智能摘要也是用的og实现的。还有谷歌结构化数据，只是后来觉得意义没那么大，就都去掉了。到没有想太多分享的事情。
其实是想站内文章相互引用的时候解析成卡片的，了解了一下顺便先实现分享的这个东西。
感谢分享。
哦豁，学习到了，感谢分享 😋
博主你好，你的网站做得真好，可以跟你换个友链吗？
学习了 大牛
高手啊,学习了不少原理，站长有空也指点一下我的网站，谢谢
[url=http://www.gz1988.cn/]贵州旅游包车[/url] http://www.gz1988.cn/
你写得非常清晰明了，让我很容易理解你的观点。
+1，写的非常好😀
很好的教程
最近也是刚刚接触，现在博客程序都自带了相关功能，不需要太多设置就可用状态，所以相关概念很多人了解的还不深入，学习了
写的很清晰，适合我们写博客的人
写的很好的教程