WordPressで作ったブログにOGPを設定する方法

OGP(オープングラフプロトコル)を設定すると、FaceBookなどのソーシャルメディアでブログを共有する際に、写真や動画などのリッチメディアを添付して投稿することができます。

文章とURLのみの投稿に比べて視覚に訴えることが出来るので、アクセス増加が期待できそうです。

ここではWordPressで作ったブログにOGPを設定する方法を説明します。

WordPressにOGPを設定する方法

1.Facebook App IDを作成する

FaceBookのDevelopersのサイトにアクセス

https://developers.facebook.com/docs/opengraph/getting-started

『Create a Facebook App ID』のセクションに記載されている手順に沿ってアプリを作成し、App IDを取得してください。

2.header.phpの<head>タグにprefixを記述

3.header.phpにHTMLを追加

header.phpの<head>~</head>に以下のコードを追加します。

24行目:投稿ページ(単一ページ)に画像がない場合に表示する画像
27行目:投稿ページ以外(アーカイブやホーム)を共有した場合に表示する画像は自分で入力してください。
(画像サイズは最小で200px×200pxの大きさが推奨されています。)
31行目:APP IDは1.で取得したID番号を入れましょう。

4.検証ツールで設定が正しくされているかを確認

URL Debugger(デバッガー)
https://developers.facebook.com/tools/debug/
にアクセスして確認したいサイトのURLを入力し、
Debug(デバッグ) のボタンをクリック。

警告やエラーが出なければOKです。

3.自分の記事をFaceBookで共有して確認

OGPを設定したサイトの記事をFaceBookで共有して、見え方を確認してみましょう。
公開したくない場合は投稿内容の公開範囲を「自分のみ」にして投稿すると良いと思います。

追記

投稿に表示される写真が設定と違う場合、キャッシュが残っている可能性があります。
そのときは、Debugger(デバッガー)
にアクセスして、該当ページのURLを入力し、Fetch new scrape information のボタンをクリックするとキャッシュがクリアされます。

関連記事

OGPの設定が終わったら、続けてこちらを設定しましょう。
『Twitterカード(Twitter cards)』を設定方法
https://fla-hoom.com/wordpress/twitter-cards

参考サイト

『The Open Graph protocol』
http://ogp.me/

OGPについての詳しい説明はこちらのサイトがすばらしく分かりやすかったです!
『MILL KEY WEB』
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
http://millkeyweb.com/facebook-ogp/

prefixの記述について、とても参考になりました!
『jdash2000 site』
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要
http://dtp.jdash.info/archives/51947560.html

PHPを使ったOGPのコードはこちらの記事を参考にしました。
『Cappee Design』
[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし
http://cappee.net/wordpress/open-graph-pro

 Google+ B はてブ  LINE  Feedly

人気ブログ24つの記事下ソーシャルボタンを徹底比較&分析!あなたのブログに相応しいのはどのデザイン・レイアウト? | 回転ブログ ~典型的な回転木馬ブログ~ にコメントする コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください