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)