2018/01/26 APP IDの取得についての記事へリンクを追加しました。
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設定に必要なfb:app IDの取得方法

OGPとは

OGPとは「Open Graph protocol」の略称でウェブページの内容をプログラムが把握しやすい形式で書いたものです。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトルやURL、概要、アイキャッチ画像を正しく表示させる仕組みになります。

OGPの設定を行った後はこのように表示されます。
facebook07

また、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を確認することです。

facebook

よーく見ると、「●●●●●●●●●&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

facebook01

表示された数字があなたのadmins IDとなります。
facebook02

Facebookの「Open Graph Debugger」で確認

最後に、Facebookで用意されているデバッガで、OGPの記述が正しいかどうか確認します。
OGPの記述だけでなく、それが他のHTMLソースと衝突している場合もエラーになりますが、このデバッガは、何が何とあたっているかなどの原因を教えてくれます

https://developers.facebook.com/tools/debug/

まずは、サイトのURLを入力してください。
facebook04

入力が無い場合や、HTMLの衝突がある場合には、このようにエラーが表示されます。ご自身のHTMLを確認しデバックを行って下さい。
facebook05

成功すると、OGPの設置が可能となります。

TCDテーマのOGP設定画面

上記の通り、OGP設定を手動で行おうと思うと結構な労力です。TCDテーマのFacebook OGP/Twitter Cards設定機能(※一部テーマで実装、順次実装アップデート予定)では、テーマオプションから「fb:admins ID」、Twitterアカウント名を設定するだけでOGP設定ができるようになっています。
facebook06

まとめ

OGP設定をすることで、各種SNSにおいて、視覚的なわかりやすさでユーザーにインパクトを与えることができます。そのため、SNS上で拡散される場合には、OGP設定は必須の設定とも言われます。Facebookなどは仕様も変わりやすく、定期的にOGPのAdmins IDを確認する必要もありますので、これを機に設定を確認してみてはいかがでしょうか。

fb:app IDの取得方法 (2018/01/26追記)

Facebookの仕様変更に伴ってTCDテーマにおけるOGP設定をfb:app IDを設定するものに順次変更しています。
fb:app IDの取得方法については以下の記事を参考にしてください。

※2018年1月現在TCDのOGP設定箇所についてはfb:admins idを入力するものとfb:app_idを入力するものが混在しています。
※TCDテーマオプション内入力箇所については旧仕様(fb:admins id 使用)から順次新しい仕様(fb:app_id 使用)に順次バージョンアップしていきます。
旧:fb:admins id 入力
新:fb:app_id 入力

OGP設定に必要なfb:app IDの取得方法