设计笔记

  • OpenGraph是什么
  • 实际应用
  • WordPress如何添加OpenGraph元信息
  • 首页
  • 作品
  • 代码
  • 随笔
  • 关于博主
    • 豆瓣书影
  • 友情链接
  • 文章归档
  • 榜上有名
  • RSS Feed
  • GitHub
  • Twitter
  • Link

喜欢这款主题

抢先体验

WordPress社交营销优化之OpenGraph

  • Tokin
  • 2022-05-14
  • 54

最近主题想实现一个分享链接自动解析 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)
© 2025 设计笔记
Theme by Wing
  • {{ item.name }}
  • {{ item.name }}