自从加入typecho阵营,一直在完善主题,最近想给页面添加og标签,来优化在facebook、QQ、微博等SNS平台的分享样式,但是一直没有收到支持og标签的typecho插件。无奈只能自己动手,用最懒的方法来实现啦。

一、og标签介绍

1.含义

og标签是Facebook在2010年F8会议上公布的一套Metatags规范,即在页面添加这种协议可以让网页成为一个“富媒体对象”,表示同意网页内容可以被其他社会化网站引用等。

2.作用

  • 能够正确的分享网站内容到SNS网站
  • 让您分享的内容更有效的的在SNS网站中传播

3.对搜索引擎的影响

给页面添加og标签可以被搜索引擎发现并评估权重,加强meta信息优化内容;对于搜索引擎的权重提升和排名还是很有利的。目前谷歌、百度、360、bing等搜索引擎都加强了对og标签的重视。比如百度的星火计划2.0(点我查看)。

二、具体步骤

1.获取og:image图片

如果页面为首页,或者文章中没有图片,则使用默认图片;如果文章中有图片,则使用第一张图。
打开主题目录下的functions.php,在最后添加一下内容(注意添加默认图片的地址)

//如果文章有图,则用第一张图片作为缩略图,无图则用默认图片。
function showThumbnail($widget)
{ 
    //当文章无图片时的默认缩略图
    $random = 'https://默认图片地址';
    $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;
    }
}

2.在head头部添加og标签信息

打开主题目录下的head.php文件,搜索<title>,在前面添加以下代码:

    <meta property="og:type" content="blog"/>
    <meta property="og:image" content="<?php showThumbnail($this);?>"/>
    <meta property="og:site_name" content="<?php $this->options->title();?>"/>
    <meta property="og:locale:alternate" content="zh_CN"/>
 <?php if ($this->is('index')): ?>
    <meta property="og:url" content="<?php $this->options->siteUrl();?>"/>
    <meta property="og:title" content="<?php $this->options->title();?>"/>
    <meta property="og:author" content="<?php $this->author->name();?>"/>
    <meta property="og:description" content="<?php $this->options->description();?>"/>
    <?php endif;?>
    <?php if ($this->is('post') || $this->is('page')): ?>
    <meta property="og:url" content="<?php $this->permalink();?>"/>
    <meta property="og:title" content="<?php $this->title();?> - <?php $this->options->title();?>"/>
    <meta property="og:author" content="<?php $this->author();?>"/>
    <meta property="og:description" content="<?php $this->description();?>"/>
    <meta property="og:release_date" content="<?php $this->date(); ?>"/>
    <?php endif;?>

三、大功告成

完成以上步骤,刷新网站页面,查看网页源码,看看是不是有显示啦?如下图:
typecho主题添加og标签(Open Graph)通用教程.png
End!

文章目录