サイトにSNSへのシェアボタンを設置したからには、OGPの設定もしたほうが記事を拡散してもらうためには良いです。当記事では、Facebookの「admins ID」の確認方法とOGPについてご紹介します。

※2024年1月現在、TCDテーマのOGP設定は、fb:app_idを入力する仕様にアップデート済みです。

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設定方法

TCDテーマではOGPが簡単に設定できます。コードを編集する必要は不要です。

2024.10.20

2024.10.31

サイトのOGPを設定できるTCDのテーマオプション

記事やホームページがSNSで紹介された際に、ページのタイトルや画像や説明文を正しく伝えるために必要な設定が「OGP」。TCDテーマには、OGPを設定できるオプションが内蔵されています。 とても便利な機能なのでぜひ使ってほしいところですが、やり方がわからない方のために使い方を解説します。 ...

まとめ

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

※2024年1月現在、TCDテーマのOGP設定は、fb:app_idを入力する仕様にアップデート済みです。

fb:app IDの取得方法