WordPress の OGP をプラグインを使わずに設定する。og:description は本文から自動生成。

Twitter のタイムラインを久しぶりに眺めていたら、投稿内に Facebook で URL をシェアしたときみたいな画像付きのリンクが生成されるようになっているではないですか。

どうやらそいつは Twitter Card というものみたいですね。Twitter Card を使用するためには、meta(OGP) の設定が必要ということで、良い機会なので WordPress の設定を見直しました。

もともと、OGP の設定には Open Graph Pro というプラグインを使用していたのですが、あまりプラグインは使いたくないので、テーマファイルをいじることにしました。

 WordPress用 OGP サンプルコード

調べたらすぐにサンプルコードを掲載くださってるブログを見つけたので、それをベースにカスタマイズしました。

<!-- ここからOGP -->
<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>blog<?php } else { ?>article<?php }?>">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_the_excerpt().'">';echo "\n";//本文から抜粋を生成
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="画像URL">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="画像URL">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="app_id">
<meta name="twitter:card" content="summary">
<!-- ここまでOGP -->

こちらをご使用の際は、

  • 画像URL
  • app_id

を書き換えて header.php に使用してください。

 どこをカスタマイズしたか

 get_the_excerpt で og:description は本文から自動生成

もともと参考にさせていただいたコードは、投稿画面の抜粋フィールドを og:description の値として拾ってくるようになっていましたが、残念ながら抜粋フィールドは全く使っておらずからっぽ・・・。面倒だったのかな、、そもそも入力フィールドは非表示設定になってました。

ということで、本文から文章をとって来て自動的に生成するようにしました。

echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋を表示

↓

echo '<meta property="og:description" content="'.get_the_excerpt().'">';echo "\n";//本文から抜粋を生成

 og:type をページによって変更

og:type が全ページ blog で固定になってたので、トップページは blog , 記事ページ article になるように分岐の記述を追加しました。

<meta property="og:type" content="blog">

↓

<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>blog<?php } else { ?>article<?php }?>">

こちらもサンプルコードを掲載してくださってるブログを参考にさせていただいています。

 必須ではない Facebook , Twitter 専用のプロパティを追加・削除

追加
<meta property="fb:app_id" content="app_id">
<meta name="twitter:card" content="summary">

削除・追加しない
<meta name="twitter:site" content="@[Twitter ID]">
<meta property="fb:admins" content="管理者ID">

 Facebook , Twitter の OGP デバッグ

・・・ん、チェックすると「Warnings」が出てるけど、後で対応しよ、、、

 参考にさせていただいたウェブサイト・ブログ

ありがとうございました。

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。