WordPress社交营销优化之OpenGraph
2022年5月14日 23:34
最近主题想实现一个分享链接自动解析 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)
