小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2015-01-13
Facebookでのサムネイル表示
Facebook(FB、フェースブック、フェイスブック) で「いいね!」や「シェア」された時に Facebook 上に表示されるサムネイル(サムネール、縮小画像)をCMS「すぐ使えるCGI」で登録した記事ごとに指定する方法をご紹介します。

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

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

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

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

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

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

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

Facebookの「いいね!」ボタン

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

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

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

Facebookサムネイル指定設定済製品

「すぐ使えるCGI」の製品の中では、以下の製品にFacebookのサムネイル指定の調整がされています。

ネットショップ管理用・画像メインのブログ用

CMSページでFacebookのサムネイル指定

ネットショップ用に調整したカスタマイズサンプルです。画像がメインのブログなどにもお使いいただけます。

表示オンラインデモ(上と同じ) 詳細とダウンロード

Facebook のサムネイル指定方法

Facebookのサムネイルを個別の記事で指定するには、下記の通りテンプレートを編集して下さい。

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

具体的な手法(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="すぐ使えるCGI">
<meta property="og:description" 
   content="12月の特別サービス!お得なコースメニューをご案内します。">
<meta property="og:image" 
   content="http://sugutsukaeru.jp/sample/76-net-shop/webdir/8/fd401502.jpg">


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

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

Open Graph タグによる個別サムネイルの設定方法

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

上に挙げた「すぐ使えるCGI」対応製品は画像が最大5つまでアップロードできます。製品の初期設定でアップロードできる画像の個数は異なりますので、下記例ではどの製品でもアップロード可能な、1番目の画像を Facebook 用に割り当てる挙げて説明します。

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

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

準備:「すぐ使えるCGI」の設置

これから製品をお試しされる方は先に上のリンクから製品をダウンロードの上設置を行って下さい。1ヶ月間無料でお試しいただけます。

ダウンロード後のページに「ステップ by ステップガイド」というインストール方法のご説明へのリンクが表示されますので、それをご覧になりながら設置して下さい。

テスト登録

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

templates/article/article_image_1.txt の編集

templates/article/article_image_1.txt をテキストエディタで開いて、下記の通り編集して下さい。
青字部分のURLは設置先のURLに変更して下さい。

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

templates/article/article_image_1.txt の編集例(全体)

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

templates/article/article.html の編集 1:ヘッダの追加

templates/article/article.html のヘッダ内に下記のようにメタタグを設定して下さい(太字部分)。
青字部分は導入先のサイトの情報に変更して下さい。

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

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_% <!-- 記事ごとにアップロードする画像 -->
<meta property="og:image" 
content="http://www.example.com/img/logo.png"><!-- サイトのロゴに変更 -->
<!-- Open Graph Protocol tag ここまで -->
</head>

templates/article/article.html の編集 2:既存の画像表示の削除

引き続き同じファイルを編集します。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>

アップロード

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

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 の複数指定

<meta property="og:image"> タグは複数指定可能です。「いいね!」ボタンが押された時はそのうち一番上の画像が自動的に選択されますが、Facebook 上の投稿フォームから手動で URL を紹介する場合は、複数指定された og:image から表示するサムネールを選ぶことができます。

上記の編集例では 3番目の画像の <meta property="og:image"> の下にサイトのロゴを指定した <meta property="og:image"> を挿入してありますので、この設定により、画像がアップロードされなければサイト共通のロゴが次の候補として表示されます。

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

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

指定できるタイプ(og:type)の種類

og:type は適当な英単語を指定してよい訳ではなく、Facebook が公開している選択肢(下記URL)から選ばなくてはなりません。
https://developers.facebook.com/docs/reference/opengraph#object-type

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

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

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

og:type 適用例
article ブログ記事、お知らせ
books.book 書籍
restaurant.menu レストラン等のメニュー(メニューブックに該当するもの)
restaurant.menu_item レストラン等のメニューの1品ずつ
product 製品
website Webサイト
school 学校(2014年1月時点ではこの括りは無くなったようです)
profile 人物

関連リンク

さらに詳しく