備忘録！ワードプレスにOGPを設定する超簡単かつ強力な5ステップ

公開日： 2014/01/06 : FBのネタ

Facebookとブログを組み合わせるなら、
絶対に忘れてはいけないのが「OGP設定」です。

OGP設定をしていないと、記事に「いいね」や「シェア」されたとき、
下の画像のように適切にフィードに流れてくれません。これは正直、致命的です。

備忘録も兼ねて、その最も簡単で効果的な方法をメモしておきます。

Step1　HTMLタグを書き換える

ワードプレス管理画面の「外観⇒テーマ編集」で「header.php」を開き、
HTMLの開始タグを以下のようにします。

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

Step2　</head>の直前にコピペする

同じく「header.php」内に</head>があると思いますので、
その直前に以下のコードをコピペします。
このコードはヨス様のブログを参考にしています。

<!--OGP開始-->
<meta property="fb:admins" content="【A】" />
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="blog">
<?php
if (is_single()){// 投稿記事
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';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";//投稿記事パーマリンク
} 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
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
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 {//画像が1つも無い場合
     echo '<meta property="og:image" content="【B】">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
     echo '<meta property="og:image" content="【B】">';echo "\n";
}
?>
<!--OGP完了-->

</head>