FacebookやTwitterに『アイキャッチ画像』を表示させる方法
URL付ツイートの画像が表示されない現象
WEBサイトの運営をされている方は、サイトを更新した際に『更新のお知らせ』をSNSを使って行っている方も多いのではないでしょうか。
私もこのブログサイトを更新した際に、『Facebook』や『Twitter』を使ってお知らせをする事があります。
WEBサイトは何らかのプラットフォームに登録されているわけでは無いため、更新を行ってもユーザーの方に通知する事ができません。
以前は、『RSSリーダー』などを使って、RSSを配信している、自分のお気に入りのブログなどの更新通知を受け取る方法が一般的でしたが、現在はSNSを使って更新通知を行う方法が多いのではないでしょうか。
他の方がツイートしているものには、『画像』が設定されているものが多くありました。
しかし、私がFacebookやTwitterでURL付のツイートを行っても、ただURLのリンクが表示されるだけであったり、下のような画像無しの表示になってしまっていました。
【Twitterで画像が表示されない例】
【Facebookで画像が表示されない例】
結局は、設定が必要であり、画像を表示させるための設定をしていなかったため表示されなかったわけですが、設定自体は簡単なのに調べるのにかなり苦労したため、今回の記事を書いてみました。
『Facebook URL 画像 表示されない』などといったキーワードで検索して調べていたのですが、中々欲しい情報がヒットせずに苦労しました。
『アイキャッチ画像』『OGP設定』というキーワードを知ってからは簡単に調べる事ができ、無事、URL付ツイートに画像が表示されるようになりました。
【Twitterで画像が表示された例】
【Facebookで画像が表示された例】
『アイキャッチ画像』と『サムネイル画像』
URL付ツイートをした際に表示される『画像』は、『アイキャッチ画像』だったり、『サムネイル画像』と呼ばれます。
この『画像』の名称がわかっていれば今回の問題の解決も早かったかと思います。
『アイキャッチ画像』は、文字通り、目(アイ)を引きつける(キャッチ)画像の事で、多くの場合、記事の冒頭に来る画像を呼びます。
私のこのブログサイトのトップページの『アイキャッチ画像』は上図の赤枠部分という事になります。
アイキャッチ画像は、対象ページの記事の内容に合ったもので、記事を読みたくなる魅力的な画像を設定する必要があります。
サムネイル(thumbnail)画像は、親指(thumb)の爪(nail)程の大きさの画像を意味しており、縮小された画像をさします。
私のこのブログサイトでは、上図の画像が『サムネイル画像』となります。
リンクと合わせて使われる事が多く、リンク先の視認性を高める画像を設置するのがおすすめです。
『OGP設定』とは
OGPとは「Open Graph protocol」の略称です。
head内のmetaタグにOGP設定をする事で、FacebookやTwitterなどのSNSでURL付投稿をした際や、サイトページがシェアされた際にアイキャッチ画像(サムネイル画像?)やタイトル、概要などを表示させる事ができます。
この『OGP設定』というキーワードにたどり着く事ができれば、URL付投稿に画像を表示させるまで、もう少しです。
この後、実際の設定方法をご説明しますが、私の記事では問題可決に至らなかった方、より詳しい情報をお探しの方は、『OGP設定』のキーワードで検索してみましょう。
OGP設定方法
それでは実際にOGP設定をする方法をご紹介したいと思います。
01headタグの修正
<html>
<head>
～～～～
</head>
<body>
～～～～
</body>
</html>
HTMLを記述する際、もの凄くざっくりと書くと上記のような構成になっているかと思います。
htmlタグのすぐ下にあるheadタグを以下のように変更します。
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
～～～～
/head>
<body>
～～～～
</body>
</html>
これは、ページで『OGPを使用するよ』という宣言をするため、head要素に『prefix属性』を設定します。
02metaタグの追加
次に、headタグ内に、以下の6行を追加します。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページのURL(絶対パス)" />
<meta property="og:image" content="画像のURL(絶対パス)" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:description" content="ページの説明" />
この6行は、Facebook、Twitter共通で使用する事ができます。
『og:title』には、ページのタイトルを設定します。
もちろん、ページのタイトルをそのまま設定しても良いのですが、Google検索結果に表示される際のタイトルの文字数の表示制限と同じように、各アプリで開いた際も、タイトルの表示文字数制限があるため、注意しましょう。
『og:type』にはページの種類を記載します。
website：主にトップページに設定
article：トップページ以外に設定
『website』と『article』の2つの設定を用いるのが一般的です。
その他の設定に関しては、The Open Graph protocolをご覧ください。
その名の通り、URLを設定します。
http(https)から始まる『絶対パス』で記載しましょう。
表示したい画像のURLを設定します。
こちらも、http(https)から始まる『絶対パス』で記載しましょう。
『site_name』には、サイトのタイトルを設定します。
FacebookやTwitterでURL付の投稿をした際、サイトタイトルは表示されないため、設定しなくてもかまわないかもしれません。
『description』には、ページの説明を記載します。
ページの説明をmetaタグのdescriptionに書いている方も多いかと思いますが、似たような役割を果たします。
タイトルとは別に説明を表示させる事ができるため、是非活用しましょう。
Facebook用の設定
上に書いた『OGP設定』はFacebook・Twitterともに共通の設定ですが、Facebook用の個別の設定も必要になります。
Facebookアカウントとの連携
FacebookにおいてURL付ツイートをする際は、『Facebookアカウントと連携』する必要があります。
連携する場合、2つのパターンがあります。
- ①個人アカウントと連携するパターン
- ②アプリIDと連携するパターン
個人アカウントと連携する際は、個人のadminIDを探し、下のソースをheadタグ内に記述する必要があります。
『adminID』を見つけるのが難しく、度々変わるので探すのが大変です。
変わっていなければ、自分のプロフィール写真を表示した際に表示されるURLの後半部分に15桁の数字があるかと思います。
その15桁の数字がadminIDです。
<meta property="fb:admins" content="adminID" />
『Facebookページ』などを作っている方は、『アプリID』と連携しましょう。
Facebook for Developersへ行き、『マイアプリ』を選択すると、アプリIDを調べる事ができます。
『アプリID』と連携する際は、下記コードをheadタグ内に記述する必要があります。
<meta property="fb:app_id" content="App-ID" />
画像サイズに注意
FacebookのOGP画像の推奨サイズは1200×630pxとなっています。
画質が落ちる可能性はありますが、『600×315px』以上のサイズの画像を設定すれば、投稿時、大きな画像を表示する事ができます。
それよりも小さい画像を設定した際は、表示される画像が小さくなるため、注意しましょう。
OGP情報のキャッシュ
OGP設定を正しく行っても、画像や情報が表示されなかったり、編集した際は新しい情報が表示されなかったりする場合があります。
そういった際は、OGP情報をキャッシュさせましょう。
Facebook for Developersサイトへいき、対象ページのURLを入力し、『デバッグ』ボタンを押してキャッシュを促しましょう。
一度で上手くキャッシュされない場合もあるので、『もう一度スクレイピング』ボタンを押して正しく表示されるまで、何度か試してみて下さい。
Twitter用の設定
表示形式の指定
Twitterに関しては、URL付ツイートをした際、シェアされた際の表示形式を指定する事が可能です。
表示形式を『Summary Card』とすると、下記のように表示されます。
横長の画像を設定している場合は、画像が切れてしまうため、注意しましょう。
表示形式を『Summary Card』とする際はheadタグに下記コードを追加しましょう。
<meta name='twitter:card' content='summary'>
Summary Card with Large Image（サマリーカード大）
表示形式を『Summary Card with Large Image』とすると、下記のように表示されます。
表示形式を『Summary Card with Large Image』とする際はheadタグに下記コードを追加しましょう。
<meta name='twitter:card' content='summary_large_image'>
Twitterアカウントの設定
headタグ内に自身のTwitterアカウントを設定します。
<meta name='twitter:site' content='@Twitterアカウント'>
OGP情報のキャッシュ
OGP設定を正しく行っても、画像や情報が表示されなかったり、編集した際は新しい情報が表示されなかったりする場合があります。
そういった際は、OGP情報をキャッシュさせましょう。
Twitter Card Validatorサイトへいき、対象ページのURLを入力し、『Preview card』ボタンを押してキャッシュを促しましょう。
一度で上手くキャッシュされない場合もあるので、何度かボタンを押して正しく表示されるまで試してみて下さい。