ogp.inc.php

pukiwiki

Pukiwikiに様々なカスタマイズを加えてきたが、一般のブログサイトに似せたデザインにはできてもOGPの実装がなかなか難しいと感じていた。このPukiwikiのほかに「はてなブログ」を使っていたので、はてなブログの「ブログカード」は魅力的だと感じていた。また、このPukiwikiのURLをTwitterなどのSNSに貼ってもらった場合にもOGP情報を利用してもらえるとクリック数が増えてよいのではないかと考えていた。

Pukiwikiにブログカードを表示するプラグインがないか調べてみたが、簡単に実装できるものはなかなかなさそうだった。一方でWordpressにブログカードを実装する方法に関する記事はたくさんある。またOGPの取得を容易にするPHPライブラリ（opengraph.php）も提供されている。これを利用すればPukiwikiにもブログカードを表示することができるようになりそうだと考えた。

Amazon | 【Amazon.co.jp限定】ロジクール ワイヤレスマウス トラックボール 無線 M575S Bluetooth Unifying 5ボタン トラックボールマウス ワイヤレス マウス windows mac iPad 電池寿命最大24ケ月 M575 ブラック 国内正規品 | Logicool(ロジクール) | 家電＆カメラ

【Amazon.co.jp限定】ロジクール ワイヤレスマウス トラックボール 無線 M575S Bluetooth Unifying 5ボタン トラックボールマウス ワイヤレス マウス windows mac iPad 電池寿命最大24ケ月 M575 ブラック 国内正規品が家電＆カメラストアでいつでもお買い得。当日お急ぎ便対象商品は、当日お届け可能です。アマゾン配送商品は、通常配送無料（一部除く）。

https://amzn.to/3F046BR

外部のOGPを取得してブログカードとして表示するプラグイン ogp.inc.php

外部のサイトのHTMLに記載されたmetaタグからOGP情報を取得して、そのタイトル・description・URLおよびアイキャッチ画像のサムネイルをコンパクトなブログカードの体裁にして掲載するプラグインです。プラグイン本体（ogp.inc.php）のほかに、opengraph.phpをインストール（ダウンロードしてプラグインフォルダに設置）しておく必要があります。また、スタイルシートでデザインを自由に変えられるようにプラグイン本体はclass付きのdivタグを吐くだけにしています。別途、スタイルシートに必要なデザインを記述してください。

プラグイン

PHPファイル（pluginフォルダにインストールしてください）

ogp.inc.php

opengraph.php

スタイルシート（ご自由にカスタマイズしてご利用ください）

ogp.css

使い方

1. まず、opengraph.php を入手してpluginフォルダに設置します。
2. ogp.inc.phpをpluginフォルダに設置します。
3. cacheフォルダにogpのフォルダを作成し、書込み可能なパーミッションを与えます（666など）。
4. スタイルシートは適宜調整して見栄えを良くします。参考までに、スタイルシートの一例も添付しています。
5. #ogp(取得したいURL) を行頭に記載します。
6. AMP対応のサイトで使用したい場合は、#ogp(取得したいURL,amp)とすることでamp-img対応のHTMLを出すようになります。（ver 1.2以降）

更新履歴

ver1.0（2019.9.10）

ひとまずOGPを取得して表示する機能を実装しました。

現状ではPukiwikiにアクセスがあるたびに参照先サイトのOGPを取得しに行っている。アクセス数がそれほど多くない場合は負荷も無視できる程度であるが、もしアクセス数が非常に多いPukiwikiの場合はいちいち参照先にデータを取得しにゆくのは効率が悪い。何らかの方法でOGPデータや画像をキャッシュすることができればと思うが、現状では荷が重い（PHP技術的に）。

ver1.1（2019.9.17）

キャッシュ機能を実装しました。CACHE.DIRのogpというサブフォルダにキャッシュを配置します。またキャッシュ機能を実装したことでHTTPS外へのリンクを張った際に「安全でないサイト」と表示される問題も初回キャッシュ作成時以降は表示されなくなり、（ほぼ）解決しました。

しかし古いキャッシュを破棄する機能はまだ実装していません。また画像の拡張子を判断するステップを省略しているため、jpegもPNGも'.img'としています。主要ブラウザでは問題なく表示されるようですが、いずれ修正しなければならない。

また、URLを省略したOGPを提供するサイト（NCBI Pubmedなど）へのリンクを貼れるようにしました。

ver1.2（2019.11.10）

第2引数にampを入れることでimgタグをamp-imgに変更できるようにしました。

AMP対応したサイトの場合はimgタグを使用することができません。そのためOGPプラグインが書き出すタグもimgではなくamp-imgタグを使用するようにしています。これにともなってスタイルシートも若干複雑になります。ver1.2対応のスタイルシートを使用してください。

サンプル

レ点腫瘍学ノート

腫瘍内科 / 臨床腫瘍学 / がんの生物学 / がんゲノム / JSMO / 医学史 / PHP+Pukiwiki

https://oncologynote.jp/

opengraph.phpの参考サイト

OGPを超簡単にパース可能なPHPスクリプト　OpenGraph.php | ITかあさん

OGPを超簡単にパース可能な　OpenGraph.php Open Graph protocolを超簡単にパースするスクリプトを見つけましたのでご紹介します。 その前にOGP(The Open Graph protocol)とは何ですか？ 割と最近までOGPの存在すら知らなかったのですが、FacebookなんかであるURLをシェアしたり、タイムラインの中にURLを書き込んだりすると FacebookのOGP取得結果 こんな風に写真やちょっとしたテキストが表示されます。 SNSとウェブページを連携させるための情報をコンピュータが読めるように記述したもの それがOGPですね。 FacebookOGPの書き方 タイムラインなど、URLがシェアされたとき　ここぞ、と言うところの画像やテキストを指定します。 ヘッダー内に書くのが基本ですね。 これはある日あるときの私のTweetpicのOGP情報です。 こんな風に、metaタグとして、ヘッダーに書いてあげまず。 ここからが本題。OGPのパース方法

http://www.kaasan.info/archives/1982

文字化け解消のために参考になったサイト

【PHP】OGP出力 文字化け解消[対症療法] - 海老太の日々是備忘録

OGPとは Open Graph protocolの略。 SNSでURLがシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みのこと やりたかったこと 自サイトの掲示板にURLが書き込まれたとき、リンク先のウェブサイトがOGPを設定をしていれば、その情報を出力する。 トラブル 文字コードが正常に表示されるはずのUTF-8であるにも関わらず、一部のウェブサイトのサイト名や概要が文字化けした。 原因 文字化けしてしまうウェブサイトのサイト名や概要は、utf8_encodeされたUTF-8だった。 解決方法 文字化けするテキスト(…

http://evita.hatenablog.com/entry/2017/07/19/222312

今後の課題

Lazy Loadの問題

PHPのレベルで参照先サイトにデータを取得しにゆく関係で、このプラグインを使用するとページの表示がわずかに遅くなるという問題がある。PHPのほかにjavascriptで実装してブラウザ側でOGPを取得してもらうという方法もあるが、これはopengraph.phpを使えないほか、ブラウザと参照先OGPに依存してブログカードの高さ（height）が決まらないのでアンカーリンクがずれるという問題が生じるかもしれない。なんとかしてブログカードのLazy Load（遅延読み込み）を実装すればページの表示そのものの速度は維持できるのではないかと思われる。

faviconの問題

はてなブログのブログカードではURLの前に参照先サイトのfaviconを表示する機能がある。しかしopengraph.phpでは参照先サイトのfaviconを取得できない。opengraph.phpに依存しない方法でOGPを取得できれば、faviconの表示も可能になると思う。

OGPを提供していないURLを指定した場合に動作が非常に重くなる問題

おそらくopengraph.phpが、参照先URLの存在しないOGPを探しに行ってその処理がtimeoutになるのを待っているのだと思われる。ogp.inc.phpを使用しているページ全体の動きが悪くなってしまうので、なんとかしたい。

HTTPSでないサイトへのブログカードを設置した場合に「安全ではない」となる問題

SSL化（HTTPS化）しているサイトの場合は、サイト内でHTTPS化されていないURLへリンクを張ったりすると安全ではないというアラートが表示されてしまう。ブログカードでも同様で、HTTPS化されていないサイトへのリンクを張った場合には安全ではないというアラートが出てしまう。 →上記のとおり、キャッシュ機能を実装したver1.1でほぼ解決しました。

HTML5とCSS3の問題

現状ではCSS 2.1以上対応のスタイルシートでデザインを整えているが、HTML5とCSS3でレイアウトすればよりブラウザによる表示のばらつきは減らせそう。とくにCSS3のflexレイアウトができればスタイルシートはより簡単に置き換えられそう。

pukiwiki公式へのアップロード

現状ではpukiwiki公式サイトにアップロードしようとすると500エラーが起きてうまくいかないのだが、このプラグインに限らず全般に起こっているようなのでpukiwiki公式サイト全体の問題だろうか。

更新日：2020-04-27 閲覧数：495 views.