pukiwiki/Open Graph Protocol (OGP)

(2123d) 更新


公開メモ

概要

twitter や Facebook に張られたリンクをキレイに表示することを目的に、 Open Graph Protocol 対応のタグを仕込むことにしました。

これにより、

before

みたいに表示されていたのが、

after

みたいに表示されるようになりました。

以下やったこと

https://www.agilegroup.co.jp/technote/magnolia-ogp.html

https://liginc.co.jp/325552

http://oxynotes.com/?p=3177

とを参考に、スキンの <head>~</head> に以下を追加しました。

LANG:php
 <!-- ここからOGPコード-->
 <meta property="og:title" content="<?php echo $title ?>">
 <meta property="og:type" content="article">
 <meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 <meta property="og:description" content="<?php
   $str = $body;
   $pos = strpos($str, '<div class="contents">'); // 目次を取り除く
   if($pos) {
     $str = substr($str, strpos($str, '</div>', $pos)+5);
   }
   $str = preg_replace('/.*?<\/h[1-5]>/', '', $str); // 見出しを取り除く
   $str = preg_replace('/<script(.|\n)*?<\/script>/', '', $str); // スクリプトを取り除く
   $str = strip_htmltag($str, $all = TRUE); // タグを取り除く
   $str = htmlspecialchars($str); // & などをエスケープ
   echo $str = str_replace(array("\r\n","\r","\n"," "," "), '', mb_strcut($str,0,400,"UTF-8"));
 ?>">
 <meta property="og:site_name" content="<?php echo $page_title ?>">
 <?php
   $str = $body; // data-ogp が付いた画像を優先する
   $result = preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?data-ogp.*?>/i', $str, $imgurl);
   if(!$result) {
     $result = preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?>/i', $str, $imgurl);
   }
   if($result) {
     echo '<meta property="og:image" content="' . htmlspecialchars_decode($imgurl[2][0]) . '">';
   }
 ?>
 <!-- ここまでOGPコード-->

ref で読み込む画像に data-ogp を付けられるようにした

plugins/ref.inc.php にて、

LANG:php
// 戻り値
$params = array(
  'ogp'    => FALSE, 	// opg 画像
...

// 拡張パラメータをチェック
if (! empty($params['_args'])) {
  $_title = array();
  foreach ($params['_args'] as $arg) {
    if ($arg == 'ogp'){
      $params['ogp'] = 'ogp';
    } else ...
...

if ($params['ogp']) {
  $info .= ' data-ogp="true"';
}

if ($is_image) { // 画像

こんな風にして、pukiwiki ソースにて

&ref('image.png',,ogp);

とすることで、その画像をカードに表示できるようになりました。

テストするには

https://liginc.co.jp/325552 で紹介されているように、

Facebook デバッガー

https://developers.facebook.com/tools/debug/

Twitter Card validator

https://cards-dev.twitter.com/validator

を使うといい。

なんだかうまく行ってない場合もありありそう

description をうまく取り出すのが結構難しいみたい。

http://dora.bk.tsukuba.ac.jp/~takeuchi/?%E7%B7%9A%E5%BD%A2%E4%BB%A3%E6%95%B0%EF%BC%A9%2F%E9%80%A3%E7%AB%8B%E4%B8%80%E6%AC%A1%E6%96%B9%E7%A8%8B%E5%BC%8F

とか。

コメント・質問





添付ファイル: filebefore.png 783件 [詳細] fileafter.png 734件 [詳細]

Counter: 3366 (from 2010/06/03), today: 1, yesterday: 0