Facebook に表示されるサムネイル画像を指定する方法

Facebook（FB、フェースブック、フェイスブック）で「いいね！」や「シェア」された時に Facebook 上に表示されるサムネイル（サムネイル、縮小画像）を「すぐ使えるCMS」で登録した記事ごとに指定する方法をご紹介します。

Facebook のサムネイル指定の概要

CMS（ホームページ更新ツール）でホームページ上にFacebook の「いいね！」ボタンを表示している時に、ボタンが押された時や、また、そのページのURLが手動でシェアされた時には、Webサイト側で何も指定していないと、ページ上に表示されている画像の中から適当な画像が自動的に選ばれてそのページのサムネイルとして Facebook 上に表示されます。

Facebook上でURLが手動でシェアされた場合は、ページ内にある画像の中からいくつか候補が表示され、シェアする人がサムネイルを選ぶことができますが、何も選択しなければ通常、ページ内で一番最初に現れた<img>タグの画像になります。

実はこのサムネイルは、設定によってホームページの管理者の側で指定する事ができます。例えば、どのページがシェアされた場合でもサイトのロゴが常に表示されるように指定する事ができます。

このサポート情報ページではそこからさらに進んで、「すぐ使えるCMS」から登録した記事ごとにサムネイル画像を切り替える方法をご紹介します。また、もし編集時に画像がアップロードされなかった場合は代わりにサイト共通のロゴが表示されるように設定します。

記事別の画像は不要で固定のロゴ表示だけでよい場合は、下記のページをご覧ください。
Facebook の「いいね！」ボタンと Open Graph tag を設定する方法

Facebook いいね! ボタンのサムネイル指定

ホームページが手動でシェアされた場合はシェアする人がサムネイルを選ぶことができますが、「いいね！」ボタンが押された場合はこのような選択の場もありません。通常、ページ上で一番最初に現れた<img>タグの画像が表示されます。

このページでご紹介する方法で設定をしておくと、「いいね！」ボタンの時もFacebook上に表示されるサムネイルを指定する事ができます。

例えば以下のリンクからデモ画面をご覧下さい。ページ上の「いいね！」ボタンを押していただくと、ページの中には表示されていない画像がFacebook上でサムネイルとして表示されるのがご確認いただけます。（「いいね！」の取り消しは、Facebookの「アクティビティログ」から行えます。）

Facebookサムネイル表示動作確認用デモ

Facebook の個別サムネイルが指定できる「すぐ使えるCMS」製品

「詳細ページ」があり、画像アップロードができる「すぐ使えるCMS」製品に、Facebook の個別サムネイルを設定できます。

Facebook のサムネイル指定の仕組み

具体的な手法（Open Graph Protocol）

Facebook で表示されるサムネイルの指定は、Facebook が規定する Open Graph Protocol（OGP）という規則に則ってページ内にメタタグ（<meta>タグ）を指定する事で行えます。

Open Graph タグの概要

Open Graph Protocol 用のメタタグ（Open Graph タグ）は以下のような形式です。

コピー

<meta property="og:title" content="3000円のお得なコースメニュー">
<meta property="og:type" content="product">
<meta property="og:url" 
   content="http://sugutsukaeru.jp/sample/76-net-shop/webdir/8.html">
<meta property="og:site_name" content="すぐ使えるCMS">
<meta property="og:description" 
   content="12月の特別サービス！お得なコースメニューをご案内します。">
<meta property="og:image" 
   content="http://sugutsukaeru.jp/sample/76-net-shop/webdir/8/fd401502.jpg">

上から順番に以下の内容を指定しています。

ページタイトル（og:title）
タイプ（og:type）：ページが扱ってる内容によって「article」や「product」など決められたものの中からいずれかを指定。詳細後述。
URL（og:url）：ページの URL を http...から
サイト名（og:site_name）
詳細（og:description）：ページの内容を簡潔に表示
サムネイル（og:image）：表示するサムネイル。複数指定可能。

詳細ページへの個別サムネイルの設定方法

Facebook のサムネイルを「すぐ使えるCMS」の詳細ページで個別に指定するには、下記の通り設定を行って下さい。

Facebook サムネイル用の画像使い分けの方針

「すぐ使えるCMS」は画像が最大5つまでアップロードできます。初期設定でいくつの画像がアップロードできるかも異なりますが、下記例では1番目の画像を Facebook 用に割り当てる例を挙げて説明します。適宜番号は読み替えて下さい。

Facebookのサムネイルサイズについて

Facebook の仕様が度々変更されるため、どのようなサイズが適しているかは難しいのですが、2017年6月現在は、縦横 1200px 程度の画像を指定しておくときれいに表示されます。長辺が 600px 以上が推奨されています。また、上下が切り取られて長方形で表示される場合があるので、切り取られてもおかしくならない正方形画像にしておくのもお勧めです。

準備：「すぐ使えるCMS」の設置

「すぐ使えるCMS」製品をダウンロードの上設置を行って下さい。

テスト登録

設置が終わったら、テストで記事を1件登録して、画像が登録できる事とページが書き出されることを確認して下さい。

og:image メタタグの準備

templates/article/article_image_1.txt をテキストエディタで開いて、下記の通り編集して下さい。

templates/article/article_image_1.txt の編集例（ファイル全体）

青字部分のURLは設置先のURLに変更して下さい。

コピー

<meta property="og:image"
 content="http://www.example.com/path/to/webdir/%_d_%/%_filename_escaped_%">

※1番目の画像ではなく 2-5番目の画像を Facebook 用に割り当てる場合は、templates/article/article_image_2.txt、templates/article/article_image_3.txt、...など、該当する番号が名前についたファイルを編集して下さい。ファイルの内容は同じです。

Open Graph タグの追加

templates/article/article.html のヘッダ内（<head> と </head> の間）に下記のようにメタタグを設定して下さい（太字部分）。

templates/article/article.html の編集例（ヘッダ部分）

青字部分は導入先のサイトの情報に変更して下さい。

コピー

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<link rel="alternate" type="application/rss+xml" title="NEWS" href="new.xml">
<!-- Open Graph Protocol tag ここから -->
<meta property="og:title" content="%_subject_%">
<meta property="og:type" content="article"><!-- 製品情報なら「product」。詳細後述。  -->
<meta property="og:url" content="http://www.example.com/path/to/webdir/%_d_%.html">
<meta property="og:site_name" content="サイト名"><!-- サイト名を指定 -->
<meta property="og:description" content="%_summary_%">
%_article_image_1_% <!-- 記事ごとにアップロードする画像。1番でないなら数字変更。 -->
<meta property="og:image" 
content="http://www.example.com/img/logo.png"><!-- サイトのロゴに変更 -->
<!-- Open Graph Protocol tag ここまで -->
</head>

※1番目の画像ではなく 2-5番目の画像を Facebook 用に割り当てる場合は、赤字部分の数字は該当する番号に変更して下さい。

既存の画像表示の削除

引き続き同じファイルを編集します。templates/article/article.html の <body> 内には、画像1を画面表示するためのテンプレート変数が含まれているはずので、これを削除して下さい（青字の取り消し線）。

templates/article/article.html の編集例（削除する部分）

コピー

<div>
<!-- 画像の表示: generated from article_image_1.txt -->
%_article_image_1_%
 
<!-- 画像の表示2: generated from article_image_2.txt -->
%_article_image_2_%
 
<!-- 画像の表示3: generated from article_image_3.txt -->
%_article_image_3_%
</div>

※1番目の画像ではなく 2-5番目の画像を Facebook 用に割り当てる場合は、該当の番号のテンプレート変数を削除して下さい。
※他の画像タグがあるか、いくつあるかは、製品によって異なります。

アップロード

変更した以下のファイルをサーバに上書きアップロードして下さい。

templates/article/article_image_1.txt
templates/article/article.html

再構築

管理画面の一覧から「再構築（テンプレート変更反映）」ボタンを押して下さい。

確認

書き出されたページのURLをコピーし Facebook の投稿ボックスにペーストして、アップロードした画像がサムネイルとして表示されることを確認して下さい。

「いいね！」ボタンを付ける方法

「いいね！」ボタンを付ける方法は下記のページをご参照下さい。

Facebook の「いいね！」ボタンと Open Graph tag を設定する方法

Facebook Open Graph Protocol 関連技術情報

公開済みのページの Open Graph タグに変更を加えた場合

一つのURLに対して既に Facebook の方に登録されてしまった画像がある場合、それが置き換わるのは数日かかるようです。

og:image の複数指定

このページで紹介した方法では、1番目の画像の <meta property="og:image"> の下にサイトのロゴを指定した <meta property="og:image"> を挿入してあります。この設定により、画像がアップロードされればその画像を優先しつつ手動シェアの時はサイトロゴの選択も可能、画像がアップロードされなければサイトのロゴがサムネイルとして表示されます。

og:image を指定しなかった場合

og:image が一つも指定されていない場合は、ページ内にある画像が上から順番に候補として扱われます。

指定できるタイプ（og:type）の種類

og:type は適当な英単語を指定してよい訳ではなく、Facebook が指定している選択肢（下記ページ参照）から選ばなくてはなりません。
Open Graph ドキュメント | facebook for developers

例えば以下のような選択肢がありますが、この時、選択の基準となるのはサイトの内容ではなく、ページが扱っている個別のテーマの内容です。このため、例えば「website」は通常サイトのトップページにしか指定できません。

選択できる og:type と適用例

Facebookの仕様は頻繁に変わりますので、適宜Facebookのページや関連の技術情報などをチェックして下さい。

下記の情報は、2017年6月時点での仕様です。

og:type	適用例
article	ブログ記事、お知らせ
books.book または book	書籍
place	場所（オフィス、イベント会場、公園等、なんでも）
restaurant.menu	レストラン等のメニュー（メニューブックに該当するもの）
restaurant.menu_item	レストラン等のメニューの1品ずつ
product	製品
profile	人物
website	Webサイト（一覧には記載されていませんが、隠れたドキュメントはあり、認識されるようです。）