WordPressで非常に簡単にOGPが実装できることで有名な、WP-OGPプラグインというものがあります。
自分もFacebookのいいね！ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。
ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり（変更するにはプラグインに含まれるファイルを差し替える必要がある）、Facebook用のOGPタグであるfb:app_idがスペルミスっていたりと、少し不満な点もありました。
そんな中、下記サイトでマルチサムネイルに対応したWP-OGPプラグインを配布しているのを見つけました。
ブログ記事の中の画像を利用するというアイデアと、マルチサムネイルというアイデアが素晴らしかったので、自分もインスパイアされて、WP-OGPプラグインを詳細設定が出来るような設定画面付きに改造してみました。
カスタマイズしたWP-OGPプラグインの特徴
本プラグインはWordPress3.0以上での対応となります。(2011.08.28)
下記のような管理画面を新たに設けています。
説明文に利用するテキストをある程度選べる
オリジナル版のプラグインでは、og:descriptionに利用するテキストを、下記のような優先順位で取得して利用しようとします。
- descriptionというキー名のカスタムフィールド
- 投稿の抜粋
- 投稿の本文
本プラグインでも、この利用する優先順位は変更していませんが、下記の項目の設定を可能にしました。
- 利用するカスタムフィールドのキー名を変更可能
- 投稿の抜粋を利用するかどうかを選択可能
設定を行って頂くことで、ある程度ですがog:descriptionに利用されるテキストを、選択できるようになっています。
テキストの抽出方法を単語区切りか文字数かを選べる
オリジナルのWP-OGPプラグインでは、og:descriptionに利用するテキストを、単語数で75単語分を抽出して利用します。
そのため、単語区切りが存在しない日本語では、テキストがそのままズラーッと改行無しで入ってしまい、og:descriptionが異常に長くなるという現象が発生します。
それを防ぐために、
- 単語数で抽出する
- 文字数で抽出する
を選択できるようにしました。
その際、抽出する単語数または文字数を、固定の75単語（文字）ではなく、任意の数値で指定する事が可能になっています。
記事中に利用された画像をog:imageとして利用できる
オリジナルのプラグインでは、og:imageに利用する画像を、投稿のアイキャッチ画像が存在する場合はアイキャッチ画像を、存在しない場合はプラグインに含まれるデフォルトの画像が利用されるようになっています。
この場合、アイキャッチ画像が設定されていないとデフォルトの画像が利用されるため、og:imageに任意の画像を指定するにはアイキャッチ画像を利用しなくてはなりません。
それは少し面倒なので本プラグインでは、画像の利用方法を下記の2つから選べるようにしました。
- アイキャッチ画像を利用する
- 記事中の画像を利用する
og:imageのサイズとアスペクト比の自動チェック
Facebookのog:imageの仕様では、画像のサイズは最低で縦横50px以上、アスペクト比は最大で3:1と規定されています。
og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.
Open Graph protocol – Facebook開発者
本プラグインでは、og:imageを記事中の画像から利用する場合、画像の縦横のサイズとアスペクト比を自動的にチェックして、規格に合わない画像は埋め込まないようにしました。
og:imageの最大数を設定できる
記事中の画像を使う設定の場合、その最大数を設定できるようにしました。
0を指定した場合は、記事中の画像を全てog:imageとして埋め込みます。
デフォルトでog:imageに利用される画像のURLを指定できる
オリジナルのプラグインでは、アイキャッチ画像が無かった場合に、デフォルトでog:imageに利用される画像はプラグインのディレクトリに含まれていて、変更するにはプラグインのファイルに手を加えなくてはいけません。
それが面倒なので、デフォルトでog:imageに利用される画像を、URLで指定できるようにしました。
常にデフォルトの画像を利用するかを指定できる
og:imageに利用する画像を本文から抽出して使う場合、その最後に、必ずデフォルトの画像を含められるようにしました。
これは、og:imageが複数指定されているページでFacebookのシェアボタンをクリックした場合に、ウォールに表示する画像をシェアしたユーザーが選ぶことができるためです。
もし今後、いいね！ボタンでも同等の機能が実装されたり、他のサービスでも複数のog:imageを利用した機能が実装された場合を考えて、本機能を付けてあります。
プラグインのダウンロード
プラグインをgithubでの管理に移行しましたので、改変履歴や過去のバージョンなどはそちらからご覧ください。（2011.07.09）
プラグインファイルは、下記のリンクからダウンロードしてください。
インストール方法
解凍してできたwp-ogp-customizedディレクトリを、wp-content/plugins/ディレクトリにアップロードしてください。
その後、プラグインの一覧から有効化してください。
注意
本プラグインは、オリジナルのWP-OGPプラグインとは共存できませんので、利用する際はオリジナル版を停止してから本プラグインを有効にしてください。
不具合などのご報告
twitterまたはFacebook、もしくは本記事のコメントでご連絡下さると有り難いです。