2016/11/01 画像のURLでIDを確認する方法を追加しましたサイトにSNSへのシェアボタンを設置したからには、OGPの設置もしたほうが記事を拡散してもらうためには良いです。TCDテーマでも既に一部テーマには実装されている機能で、今後全テーマ共通の仕様としていくために現在アップデート準備に入っております。今回は、Facebookの「admins ID」の確認方法などわかりにくい部分もありますのでOGPの解説と併せてご紹介します。
※2018年1月現在TCDのOGP設定箇所についてはfb:admins idを入力するものとfb:app_idを入力するものが混在しています。
※TCDテーマオプション内入力箇所については旧仕様（fb:admins id 使用）から順次新しい仕様（fb:app_id 使用）に順次バージョンアップしていきます。
旧：fb:admins id 入力
新：fb:app_id 入力
目次
OGPとは
OGPとは「Open Graph protocol」の略称でウェブページの内容をプログラムが把握しやすい形式で書いたものです。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトルやURL、概要、アイキャッチ画像を正しく表示させる仕組みになります。
OGPの設定を行った後はこのように表示されます。
また、Facebookの場合、OGPを設定していないサイトはいいね！を押してもらっても、その人のウォールにしか表示されません。しかし、OGPを設定したサイトであれば、「いいね！」を押してくれた人の友達のニュースフィードにも表示されるようになります。
Facebookでの拡散の利点は、検索してサイトに訪れる人以外のユーザーにサイトを知ってもらうことにあります。そのために、OGPの設定はサイト運営者にとって必須項目と言えるでしょう。
WordPressに手動でOGPを設定する
OGPの設定は、サイトの＜head＞内の＜meta＞要素にソースを記述します。投稿記事と、それ以外のページを条件分岐させています。
<?php if (is_single()) { ?> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <?php } else { ?> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <?php } ?>
下記コードがOGPの設定コードになっています。●の部分には各自のコードやURLを記入ください。
<!DOCTYPE html>
<html><meta property='og:locale' content='ja_JP'>
<meta property='fb:app_id' content='●●●'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
echo '<meta property="article:publisher" content="●●●">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';echo "\n";
}
$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 )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
?>
OGPの必須プロパティ
上記設定コードについて説明していきます。まずは、こちらの4つは必須のプロパティになります。
og:title
ページのタイトルを記述します。ブログであれば、記事のタイトルとなります。省略すると、デフォルトでtitle要素の内容になります。
og:type
オブジェクトタイプを記述します。よく使われるのは、下記の項目になります。
・website：Webサイトのトップページを表します。
・article：記事を表します。Webサイトのトップページ以外のページ、ブログの記事などに。
・profile：人物を表します。個人のプロフィールページなどに。
og:url
シェアしたいURLを絶対パスで記述します。指定しない場合は自動で取得してきてくれるようです。
og:image
シェアされたときに表示させる画像があるURLを絶対パスで記述します。また、画像のサイズも指定できます。「content=”●●●”」の黒丸の部分には画像のURLを入れてください。OGP用の画像サイズは「1200×630px」が推奨サイズになります。
OGPのオプションプロパティ
og:locale
サポートする言語の設定です。日本語にするため、「ja_JP」としています。
og:site_name
サイト名を記述します。ここでは、管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を「＜?php bloginfo(‘name’); ?＞」で表示してます。
og:description
ページの説明を記述します。一般的にはmeta descriptionと同じ内容を入れるケースが多いです。
Facebook専用のプロパティ
fb:admins_id
FacebookでOGPを使うには、Facebookでadmins IDを取得し、それを記述します。取得方法は次の項目で説明しています。
※fb:app_idを使う仕様に変わっておりますのでfb:app_idの取得について別記事にてご案内しています。
article:publisher
黒丸の部分にFacebookページのURLを入れます。これを設定しているとFacebookで共有された時に、まだそのページにいいね！していない人が見た時にページに対してのいいね！ボタンが表示されるようになります。
fb:admins IDの確認
画像のURLでIDを確認する方法
IDの確認において一番簡単な方法は、自分のFacebookアカウントのプロフィール写真を表示した画面のURLを確認することです。
よーく見ると、「●●●●●●●●●&type=1&theater」となっているところがあります。ここの「&type」の前にあるランダムな数字が「fb:admins」のIDとなります。
サイトで確認する方法
チェックしたいアウントでログインしてから以下のURLにアクセスしてみてください。アクセス後、アドレスバーに表示されているURLが自分のプロフィールページのURLなのでコピーします。
https://www.facebook.com/profile.php
このようなURLとなります。
https://www.facebook.com/[ユーザー名]
続いて、こちらのサイトからadmins IDをチェックします。
Find my Facebook ID
表示された数字があなたのadmins IDとなります。
Facebookの「Open Graph Debugger」で確認
最後に、Facebookで用意されているデバッガで、OGPの記述が正しいかどうか確認します。
OGPの記述だけでなく、それが他のHTMLソースと衝突している場合もエラーになりますが、このデバッガは、何が何とあたっているかなどの原因を教えてくれます
https://developers.facebook.com/tools/debug/
まずは、サイトのURLを入力してください。
入力が無い場合や、HTMLの衝突がある場合には、このようにエラーが表示されます。ご自身のHTMLを確認しデバックを行って下さい。
成功すると、OGPの設置が可能となります。
TCDテーマのOGP設定画面
上記の通り、OGP設定を手動で行おうと思うと結構な労力です。TCDテーマのFacebook OGP/Twitter Cards設定機能（※一部テーマで実装、順次実装アップデート予定）では、テーマオプションから「fb:admins ID」、Twitterアカウント名を設定するだけでOGP設定ができるようになっています。
まとめ
OGP設定をすることで、各種SNSにおいて、視覚的なわかりやすさでユーザーにインパクトを与えることができます。そのため、SNS上で拡散される場合には、OGP設定は必須の設定とも言われます。Facebookなどは仕様も変わりやすく、定期的にOGPのAdmins IDを確認する必要もありますので、これを機に設定を確認してみてはいかがでしょうか。
fb:app IDの取得方法 (2018/01/26追記)
Facebookの仕様変更に伴ってTCDテーマにおけるOGP設定をfb:app IDを設定するものに順次変更しています。
fb:app IDの取得方法については以下の記事を参考にしてください。
WebサイトとFacebookを連携させる際などに必要となるFacebookアプリID（app_id）。 以前当記事では、OGPの設定にアプリIDの取得が必須とご案内しておりましたが、現在はアプリID無しでもOGP画像は正常に表示されます（サイト側で設定は必要）。 ただし、WordPre...
※2018年1月現在TCDのOGP設定箇所についてはfb:admins idを入力するものとfb:app_idを入力するものが混在しています。
※TCDテーマオプション内入力箇所については旧仕様（fb:admins id 使用）から順次新しい仕様（fb:app_id 使用）に順次バージョンアップしていきます。
旧：fb:admins id 入力
新：fb:app_id 入力
