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を記述
|
1 |
<head prefix="prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> |
3.header.phpにHTMLを追加
header.phpの<head>～</head>に以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<meta property="og:type" content="blog"> <?php if (is_single()){//単一記事ページの場合 if(have_posts()): while(have_posts()): the_post(); echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';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; $sear chPattern = '/<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 {//投稿にサムネイルも画像も無い場合の処理 echo '<meta property="og:image" content="表示したい画像のURLを絶対パスで記入">';echo "\n"; } } else {//単一記事ページページ以外の場合（アーカイブページやホームなど） echo '<meta property="og:image" content="表示したい画像のURLを絶対パスで記入">';echo "\n"; } ?> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"> <meta property='fb:app_id' content='APP IDを記入'> |
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
[…] https://fla-hoom.com/wordpress/wordpress-blog-ogp […]