pukiwiki/Open Graph Protocol (OGP) の変更点

更新 
[[公開メモ]]

* 概要 [#s5dc47bd]

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

これにより、

&ref(before.png,,before);

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

&ref(after.png,,after,ogp);

みたいに表示されるようになりました。
* 以下やったこと [#a061ea40]

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 を付けられるようにした [#xb93f65d]

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);

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

* テストするには [#zb56ad94]

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

Facebook デバッガー

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

Twitter Card validator

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

を使うといい。

* なんだかうまく行ってない場合もありありそう [#f2b08672]

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

とか。

* コメント・質問 [#ta656a57]

#article_kcaptcah
#article_kcaptcha
Counter: 3869 (from 2010/06/03), today: 1, yesterday: 1