プラグインなしで、WPでOGP設定をしたい

Facebookのいいね!ボタンやLikeBoxを、ブログに設置するのには、避けて通れないOGP設定。

これをしていないと、いいね!が拡散しないので、ボタンを設置する意味がない!というくらいに重要な設定です。

とても大事なOGP設定!

で、この前、MovableTypeでOGP設定をしましたが、こっちは、テンプレートタグ使ってさくっとでけた。

 ブログのFacebookいいね!ボタンを押した時、Facebookへの投稿欄の下側がちょんぎれるのを力業で修正した件

ところが、ワードプレスはタグとかさっぱりわからん。

だけど、できればプラグインなしで設定したい。ということで、一生懸命探して(←自分で考えるのは無理とあきらめている。)、試して、やっとすごくわかりやすい解説サイトを見つけたのでご紹介します!

WPでOGP設定をするポイント

そのサイトはこちら!

 【WordPress】Facebook・ツイッターOGP設定とSEO対策!プラグイン不要|ゆめぴょんの知恵

ここが、すっごくわかりやすい!

まず、ワードプレス初心者にはちんぷんかんぷんのワードプレスコードをまるっとコピペできるようにしてくれているのがありがたい。

そして、html5とhtml5でないサイトにわけて解説してくれているのも助かります。

それでも、いろいろつまずいたので(どんだけ初心者w)、ひっかかりそうなところをちょっとだけ解説します。

自分が使うテンプレートがHTML5かどうかを確認する方法

まず、自分が使っているWPのテンプレートが、HTML5なのかそうでないのかを確認します。

たとえば、現在わたしが別サイトでカスタマイズしているStingerで出力したサイトのソースを確認すると、ごくごく最初の方に、こんなのがあります。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

こんな感じにめっちゃ長い。

これを、DOCTYPE宣言と言います。DOCTYPE宣言というのはざっくり言うと、「これからこの書式にのっとってサイトを記述するよ!」ってことみたいですね。詳しく知りたい人は自分で調べてください。

それで最近の最新バージョン?がhtml5なわけですが、現状、html5とそうでないのが混在しています。

で、こういう風に長ったらしいのは、html5ではないです、多分。

HTML5は、

<!DOCTYPE html>

と、非常に簡潔に書かれています。

まずは、自分がカスタマイズしようとするテンプレートのheader.phpの一番上の部分あたりを確認してみてください。

HTML5以外の場合、コードは2カ所はる

さて、わたしがカスタマイズしているStinger3 ver20131023は、HTML5ではないので、HTML5以外の場合に従ってカスタマイズしていきます。

ポイントは、2種類のコードをはることです。

一つは、テンプレートには出力しないけれど、ワードプレスに情報を設定するスクリプト。

もう一つは、実際にOGPを出力する記述です。

わたしは、最初、OGPを出力する記述だけはって、なんで出ないんだろう?と首をかしげていました。

ちゃんとじっくり読まないとあかんですね。

固有のタイトルや説明文を設定するスクリプトをはる

<<2013/12/02追記ここから>>

実際にstinge3のどこへ何をはるかというと、まずheader.phpに、「固有のタイトルや説明文を設定するスクリプト」をはります。

はる場所は、3行目に

<head profile=”http://gmpg.org/xfn/11″>

というヘッドタグの開始タグがあるので、このあとへ、まるっとさっきのスクリプトをコピペしてください。

<<2013/12/02追記ここまで>>

OGP出力コードの必要な部分を修正

さらに、OGPを出力させるコードは、自分のサイトに合わせて修正が必要です。

7行目のfb:admins
24行目のog:image
27行目のog:image”

わたしは、そのサイトについては、Facebookページも作成していないし、facebookアカウントも全公開していないので、3行目から6行目の
meta property=”article:publisher”
meta property=”article:author”
については、削除しました。

◎2013/11/24追記ここから

Facebookページを作成したので、4行目のarticle publisherは復活させました。削除したのは、5行目のarticle:authorのみになります。

さらに、FBアプリも作成し、fb:app_idも追加しました。

タグは、次のとおりになります。前後の>は全角にしてあるので、半角に直し、自分で取得したアプリIDを入れてつかってください
<meta property=”fb:app_id” content=”【取得したFBアプリのID】”>

◎追記ここまで

あと、30行目からは、Twitterの設定です。

削除してもかまいませんが、必要ならば、31行目から34行目まで、指示に従って修正が必要です。

修正したOGP出力コードをはる

<<2013/12/2追記ここから>>

次にこのOGP出力タグを、ヘッドタグ終了タグの直前にはります。

</head>

というタグを見つけて、その直前に、修正を加えた物をまるっとはってください。

<<2013/12/2追記ここまで>>

その後、こちらのデバッグツールでデバッグすると、ちゃんと表示されました!

 デバッガー|Facebook Tools

とりあえず、さらなるカスタマイズはまた今度するとして、とりあえず、OGP設定は完了です。

ゆめぴょんさん、おかげさまでカスタマイズできました!!役立つ記事をありがとうございます!!

必読!  【WordPress】Facebook・ツイッターOGP設定とSEO対策!プラグイン不要|ゆめぴょんの知恵

さらに、stinger3でいいね!ボタンを押したら、投稿欄が出るカスタマイズはこちら。

 【WordPress|stinger3】Facebookのいいね!を押したら、投稿欄が出るようにするカスタマイズ