Open Graph 社会化分享优化

Open Graph Protocol 是一套 Metatags 的规范,用来标注页面的类型和描述页面的内容,由 Facebook 在 2010 年 F8 会议上公布。

在页面添加这种协议可以让网页成为一个“富媒体对象”,表示同意网页内容可以被其他社会化网站引用等,任何网页只要遵守该协议,SNS 就能从页面上提取最有效的信息并呈现给用户。

以 Telegram 为例,如果没有 "og" 标签,Telegram 就会读取 description,这时候只会有文字预览,但使用 Open Graph 之后情况就大不一样了。

添加标签以自定义链接信息

本站使用 Typecho,我们需要加入 meta 标签并填上相应的内容,编辑当前主题的 header.php ,在 <head> 内加入以下内容(请自行替换部分内容):

<!-- 首页输出 -->
<?php if($this->is('index')): ?>
<meta property="og:url" content="https://nekosc.com/"/>
<meta property="og:type" content="blog"/>
<meta property="og:title" content="零件's Blog"/>
<meta property="og:image" content="https://nekosc.com/usr/themes/next/images/avatar.jpg"/>
<meta property="og:author" content="零件"/>
<meta property="og:site_name" content="零件's Blog"/>
<meta property="og:description" content="Tech Oakus Save The World"/>
<meta property="og:locale:alternate" content="zh_CN"/>
<?php endif; ?>

<!-- 文章和独立页面输出 -->
<?php if($this->is('post')||$this->is('page')): ?>
<meta property="og:url" content="<?php $this->permalink(); ?>"/>
<meta property="og:type" content="blog"/>
<meta property="og:title" content="<?php $this->title(); ?>"/>
<meta property="og:image" content="<?php showThumbnail($this); ?>"/>
<meta property="og:author" content="<?php $this->author(); ?>"/>
<meta property="og:site_name" content="<?php $this->options->title(); ?>"/>
<meta property="og:description" content="<?php $this->description(); ?>"/>
<meta property="og:locale:alternate" content="zh_CN"/>
<?php endif; ?>

不知道什么原因,首页用 typecho 的函数输出会变成某篇文章的内容,所以干脆就让首页独立输出静态内容了。

获取文章内第一张图片

注意文章和独立页面输出的 og:image ,这里的 <?php showThumbnail($this); ?> 是需要在当前主题的 functions.php 末尾加入以下内容的,不需要请直接把 showThumbnail 替换成指定图片,否则会报错。

function showThumbnail($widget)
{ 
    //当文章无图片时的默认缩略图
    $random = $widget->widget('Widget_Options')->themeUrl . '/images/avatar.jpg';
    $attach = $widget->attachments(1)->attachment;
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 

if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
         echo $thumbUrl[1][0];
    } else     if ($attach->isImage) {
      echo $attach->url; 
    } else {
        echo $random;
    }
}

这里参考了Typecho缩略图实现的方法。


部分效果预览

Telegram
Twitter

标签: 折腾 互联网


已有 3 条评论
  1. 已添加测试,tg 没有显示出来,连预览都没有

    1. 随机选了你首页两篇文章在 TG 都是有预览的

  2. ?添加到我我的博客里了:)

添加新评论