夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

【WordPress用】OGPを正しく設定する方法とは？

wordpressでogpを設定する方法

ブログを書いているならできるだけ多くの人に読んでもらいたいもの。特にブログをはじめて間もない人にとっては尚更でしょう。最近ではfacebookやtwitterなどのSNSを使って記事を広めることが当たり前になってきました。今回はSNSで効果的に記事を広めるためのOGP設定を行っていきます。(twitterカードの設定も一緒に)

この記事の対象となる人

  • wordpressを使っている
  • All in One SEO Packは使いたくない
  • head内を自分で書いている
  • コピペで使いたい
この記事の目次

SNSで効果的に記事を広めるためのOGP設定

まずはogpファイルを作成しましょう。メモ帳でいいので名前をogpに変更したあと、拡張子をphpにしてください。こんな感じですね。

ogpファイルを作成したら、下のコードをコピペしてください。

<!-- OGP -->
<meta property="og:type" content="<?php echo (is_singular() ? 'article' : 'website'); ?>">
<?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";//単一記事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 {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_template_directory_uri().'/images/og-image.jpg';
    echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
  }
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
  } else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
    echo '<meta property="og:image" content="'.get_template_directory_uri().'/screenshot.png">';echo "\n";
  }
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="自分のapp_idをいれる">
<!-- /OGP -->

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">//もしくはsummary_large_image
<meta name="twitter:creator" content="自分のtwitter_idをいれる">//例…@hogehoge115
<meta name="twitter:site" content="自分のtwitter_idをいれる">//例…@hogehoge115
<!-- /Twitter Card -->

このコードは寝ログさんの記事を参考にしています。

参考
プラグイン不要でFacebook OGPをコピペでサクッと設置する方法
寝ログ

細かい内容については寝ログさんの記事を読んでもらうとして、ハイライトしている部分は自分で設定する必要があります。設定するといっても難しいものではありません。

jpg画像を1枚用意する

else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_template_directory_uri().'/images/og-image.jpg';
    echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
}

25〜２８行目の部分です。
投稿ページの場合にサムネイルがあればそれが反映され、なければ記事の中の画像が反映されます。記事の中に画像がない場合はog-image.jpgが使われますが、この画像は自分で用意する必要があります。

jpg画像を用意したら名前をog-imageにして保存してください。保存するフォルダ名はうえのコードだとimagesです。ここは自分のフォルダ名に合わせてコードを変更してください。

app_idを取得する

<meta property="fb:app_id" content="自分のapp_idをいれる">

39行目の部分です。
OGP設定を完了するためにはapp_idを取得してコードにコピペする必要があります。下の記事を参考にしながら自分のapp_idを取得して「自分のapp_idをいれる」と書かれたところに貼り付けてください。

参考
【Facebook】アプリIDを取得する方法
アプリの鎖

twitter_idをいれる

<meta name="twitter:creator" content="自分のtwitter_idをいれる">//例…@hogehoge115
<meta name="twitter:site" content="自分のtwitter_idをいれる">//例…@hogehoge115

４４〜４５行目の部分です。
最後にtwitterカードの設定です。２か所ある「自分のtwitter_idをいれる」に自分のtwitter_idをいれてください。

head内にOGP設定を出力する

すべての設定が完了したら、head内にogp.phpを出力します。head内に下のコードを追加してください。これでOGP設定とtwitterカードがSNSで記事をあげたときに反映されるようになります。

<?php get_template_part('ogp'); ?>

記事を書いたらすぐにSNSに投稿するのではなく、下のサイトでOGP設定とtwitterカードの表示がうまくできているか確認してみてください。

・シェアデバッガー(facebook用)
・Card validator（twitter用）

うまく表示されない場合は、下のように何回かボタンを押すと反映されます。facebookやtwitterで記事をのせるときは必ずこのサイトで確認するようにしましょう。

OGP設定以外にもSEOを意識したhead内の書き方も紹介しています。興味がある方はこちらも参考にしてみてください。

WordPressでSEOを意識したhead内の書き方とは？

さいごに

今回はWordPressでOGPを正しく設定する方法について説明しました。All in One SEO Packなどのプラグインを使わずに実装したい方にオススメです。

個人的にはプラグインを使っても使わなくても正しく設定さえされていればどちらでも良いという考えです。むしろ常に更新しているプラグインであれば自分で実装するより確実です。プラグインに頼らず１からテーマを作りたい方はチャレンジしてみてくてください。

こちらの記事も読まれています