以前、Facebook OGPの設定について以下のような記事を書きました。
これも、かなり簡素化されたOGP設定の方法なんですが、All in One SEO Packのようなプラグインを使う必要があったり、トップページのog:image画像を用意する必要がありました。けれど、今回の方法は、そういった作業も不要にし、さらに簡略化したものに書き換えてみました。
基本的に数回コピペしてFacebook管理者情報の入力をすればOKな方法になっています。
「Facebook OGPとは何ぞや?」という方は上記のリンクを参照してください。
photo by Coletivo Mambembe
目次
プラグイン無しでのOGP設定手順
プラグイン無しでOGPの設定をするには以下をダウンロードして中身のogp.phpをテーマフォルダ内にコピペしてください。
ogp.phpの中身は以下のようになっています。
<!-- OGP --> <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";//単一記事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:admins" content="ADMIN_ID"> <meta property="fb:app_id" content="APP_ID"> <!-- /OGP -->
Facebookへの登録
上記コードの開発者情報部分は、Facebookの「管理者ID」と「アプリID」は自身のものに変更してください。
<meta property="fb:admins" content="ADMIN_ID"> <meta property="fb:app_id" content="APP_ID">
登録方法は、以下を参照してください。
この作業はちょっと面倒くさいかもしれません。
個人的には、「管理者ID」と「アプリID」のタグはなくてもOGP情報が表示されるので必要ないような気もしますが、Facebook自体は登録を推奨しているようです。Facebook自体ユーザーを把握したいというのもあるでしょう。面倒くさい場合は、タグを消してしまっても良いでしょう。後からいくらでも記入できるので。
最後に、テーマのヘッダーファイル(header.php)の<head></head>タグ内に以下のコードでogp.phpを呼び出して終了です。
<?php get_template_part('ogp');?>
Facebook開発者情報の登録がなければ、コピペ2回ほどで終わります。
子テーマでカスタマイズする場合
先程の、コードを子テーマで利用する場合は、get_template_directory_uri()の部分をget_stylesheet_directory_uri()に変更して利用する必要があります。
get_template_directory_uriは、親テーマフォルダのURL取得。get_stylesheet_directory_urは、子テーマフォルダのURL取得です(子テーマが適用されている場合)。
動作確認
テーマをカスタマイズしたら、動作を確認します。
ソースチェック
まずはソースの確認です。ブラウザのソースは以下のように表示されます。
<!-- OGP --> <meta property="og:type" content="blog"> <meta property="og:description" content="Pocket 僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。 けれど、Open Graph Proを使っていると、不具合が結構あったので、"> <meta property="og:title" content="【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった"> <meta property="og:url" content="https://nelog.jp/ogp-settings-in-wp-theme"> <meta property="og:image" content="https://nelog.jp/wp-content/uploads/2014/06/Facebook.jpg"> <meta property="og:site_name" content="寝ログ"> <meta property="og:locale" content="ja_JP" /> <meta property="fb:admins" content="100001189801332"> <meta property="fb:app_id" content="626022407455274"> <!-- /OGP -->
タグの記載に誤りがないかチェックしてください。
動作チェック
動作確認は、Facebook Debuggerを用いて行います。チェックしたいURLを入力して「Debug」をクリックしてください。
以下のように、OGP情報が表示されればOKです。
まとめ
これで、かなり簡単にFacebookのOGP情報表示ができるようになったと思います。
プラグインで、細かく設定したいという人には向いてないかもしれませんが、手っ取り早くOGP情報を表示させたいという人にはお勧めです。
ソースをありがとうございます。
大変ありがたく使わせていただいたのですが、
>がひとつ多く、ヘッダートップに
>が表示されてしまいます。
が22個あります。
削除できる「>」はございますでしょうか?
よろしくお願いいたします。