ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK

Facebookでいいねする女性

OGPとはブログ記事がFacebookでシェアやいいね!された時に、表示される写真や説明文を設定する機能です。SNSでの新記事周知は欠かせないので必須です。Twitterでも表示できる方法を紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

前回の記事では、Facebook、ツイッター、Google+などのSNSでシェアしてもらうための、ソーシャルボタンの設置方法を紹介しました。

コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要26 shares

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロール…

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK228 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

ソーシャルボタンを押された時に、記事の写真やタイトルや説明文が表示されることがあります。それらの内容を、あらかじめ設定するのがOPGの役割です。

OGPとは?設置メリットは?

facebookのOPGテスト

主にFacebookのシェアやいいね!の時に表示される記事情報を、ブログ・ウェブ制作者が設定できる機能の事です。「Open Graph Protocol」の略称です。

Facebook以外でも、Facebookページ、Google+、Twitter(設定が必要。下で説明)、mixiなどにシェアされた時にも使われているようです。

OGPは設定しなくても、タイトルやURLなどは問題なく表示されます。しかし写真や説明文は記事と関係のない内容になる場合もあるため、OGP設定が重要になります。

具体的には、記事ページのヘッダーなど上部で、下のコードのように設定します。有名ブログや大手メディアでも、設定内容に力を入れてる場合が多いです。

OGP設置のメリット

主に次の3つだと思っています。

  1. シェアされる情報(画像や説明文など)を制作者がコントロールできる
  2. シェアしてくれた人の友達にまで、効果のある内容が表示される
  3. 間違った情報(URL、画像、説明文など)で表示されるリスクを回避できる

OGPを設定すると、シェア内容を制作者サイドで決めることができるので、より多くの人に指示されるような情報にすることが可能になります。

また間違った情報での表示もなくすことが出来ます。その結果、拡散される確率も上がると思います。

今回、不要になるWordPressプラグイン

今回の記事は「WordPressプラグインはずし特集」の第10弾でもあります。今までの特集記事は下のリンクにまとめています。

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ248 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

今回の記事により、次のようなWordPressプラグインが不要になります。他にも類似プラグインがいくつかあるようです。

  1. Open Graph Pro
  2. WP-OGP

WordPressプラグインはとても便利ですが、入れすぎると高速化も阻害するし、WordPressのバージョンアップに追随しないものもあるので、簡単な機能は自作しようと思っています。

WordPressブログで簡単にOGPを設置する方法

OGP設置には、いくつかの準備が必要になります。

Facebookの「fb:admins」の値を取得する方法

(2015年3月26日追記)fb:adminsの利用は個人情報をさらす可能性もあるため、今後はapp_idの利用をオススメします。

FacebookのOGP設定で個人情報を守る!adminsをapp_idに変更する方法もFacebookのOGP設定で個人情報を守る!adminsをapp_idに変更する方法も51 shares

FacebookのOGP設定は、SNSでシェアされた時の表示をコントロールできる…

「fb:admins」とは、Facebookの個人アカウント固有のID番号です。取得する方法はいくつかありますが、私がよく使う最も簡単な方法を紹介します。

  1. Facebookで、自分の個人アカウントページを開く
  2. 自分のプロフィール写真をクリック
  3. 拡大写真が表示されたページのURLの最後の方を確認
  4. 「.123456789012345&type=1&」の「&type」の前15桁の数字をメモ

Facebookの仕様変更によっては、この方法が使えなくなるかもしれません。その場合は新しい方法をググってください。

OGPを設置する前のおまじないコード

OGPを利用するには、下のコードをヘッダー部に挿入する必要があります。WordPressのテーマファイル「header.php」を修正してください。

HTML5の場合は、headタグを下のように変更してください。

HTML5以外では、htmlタグを下のように変更してください。headタグは通常どおりで問題ありません。

WordPress用OGP設置コード(TwitterCardsも)

上の2つの準備が完了したら、下のコードを</head>タグの直前などにコピペするだけでOKです。【】の部分は適切に入力してください。

(2014.7.17修正)14行目の「php」の記述が抜けていたので修正しました。

おまけとして、FacebookのOGPの後に、TwitterCardsの設定も付けておきます。不要なら最後の4行は削除してください。

Twitter Cardsは申請しないと利用できません。事後でもいいので下記事を参考に登録してみてください。簡単です。

ツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよ78 shares

Twitter Cards(ツイッターカード)を設定すれば、ツイッターでシェアさ…

FacebookのOGP設定の確認方法

facebookのOPGテスト

まず最初に、わかる人ならブログ記事のソースコードで、OGP設定が思った通りに入力されているか確認しましょう。

次に自分のFacebookアカウントで、近況としてブログのURLを入力してみると、OGP設定の内容を確認できます。

もし期待通りの結果にならなかった場合や、以前の情報のままで表示された場合は、下のサイトの入力欄に該当のURLを記述して「デバッグ」ボタンを押せば新しい情報に更新されます。

デバッガー | Facebook

まとめ:今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

  • OGPとはSNSシェアされた時に表示される情報の設定
  • OGPを設定しておくと、拡散されやすいかも
  • OGPを自力設置すると、WordPressプラグインは不要
  • OGPが適切に設定されてると、TwitterCardsも4行だけで完了

ちなみに私の記事は、Facebookではあまりシェアされません。個人でもあまり利用していないからでしょうね。

リア充ではないので、Facebookに書く内容がないんです(汗)。もしよければOGPのテストをかねて、シェアしてみてくださいね!

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要ツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよ:次記事»
ページ
↑先頭
ホーム