FacebookやTwitterにアイキャッチ画像を表示させる方法 html編

サムネイル画像

記事関連ワード

アイキャッチ画像 表示 head Facebook Twitter OGP設定

はじめに

ブログ記事を更新した際に、FacebookやTwitterなどを使って、更新のお知らせをされている方はたくさんいらっしゃると思います。

私もこのブログを開設した際に、FacebookページとTwitterアカウントを作成しました。

URLを貼り付けて投稿すれば、記事内の画像やタイトルが自動的に表示されると思っていたのですが、私の書いた記事のURLを貼り付けても全く画像は表示されませんでした。

試しに他の人のブログ記事のURLを貼り付けたところ画像やタイトルが表示されたので、私の記事には何か設定が足りていない。 という事で色々調べたのですが、専門用語を知らないせいで、画像やタイトルが表示されるようになるまで結構な時間を費やしました。

検索するとWordPressでの設定方法は簡単にヒットするのですが、プラグインなどを使わず直接ソースを編集している人が、 URL付投稿をした際に画像やタイトルを表示させる方法と、その情報の調べ方について書きたいと思います。

Facebook URL 画像 表示されない

専門用語を知らない私は、こんな感じで検索していましたが、なかなか欲しい情報が書いてあるサイトにたどり着きませんでした。

私が今回悪戦苦闘した中で覚えた専門用語が3つあります。

1つ目がアイキャッチ画像です。そしてこの用語と似たような意味合いで良く出てきたのが、サムネイル画像という用語です。

そして最後にOGP設定という専門用語を知って、ようやく欲しい情報にたどり着く事ができました。

簡単にこの、『アイキャッチ画像』、『サムネイル画像』、『OGP設定』の3つの用語について説明したいと思います。

アイキャッチ画像とサムネイル画像の違い

正直、調べていてもこの2つの用語の違いについて書かれている人は少なく確信は持てていない状態で申し訳ないです。

人によって書かれている事や使い方がごちゃごちゃでとても困惑しましたが、とりあえず私がたどり着いた答えがこちらです。

アイキャッチ画像とサムネイル画像の違い

赤枠で囲った画像がアイキャッチ画像で、青枠で囲った画像がサムネイル画像です。

アイキャッチ画像は、主にブログなどの先頭に表示される画像で、人目見て記事の内容を連想できる画像です。

それに対して、サムネイル画像はアイキャッチ画像を縮小したものなどで、上画像のように一覧表示した際に表示する縮小された画像です。

サムネイルという言葉を調べると、画像などを表示する際に視認性を高めるために縮小させたものといった意味を持っているようで、おそらくこの認識で合っていると思います。

ブログ等でこのアイキャッチ画像とサムネイル画像は確かに似たものを指すので困惑してしまうのだと思います。 意味がわかっても、FacebookやTwitterでURL付き投稿をした際に表示される画像がアイキャッチ画像なのかサムネイル画像なのかと聞かれても、 どちらとも言える気がしてしまいます。

OGP設定とは

OGPとは「Open Graph protocol」の略称です。

head内のmetaタグにこのOGP設定をする事で、FacebookやTwitterなどのSNSでURL付投稿をした際にアイキャッチ画像(サムネイル画像?)やタイトル、概要などを表示させる事ができます。

このOGP設定という用語を知っていれば、私も簡単に問題を解決する事ができたのですが。

もちろんこの私の記事を最後まで読んでいただき、問題解決していただければ嬉しいのですが、私の記事では解決できなかった方やさらなる情報が欲しい方は、 OGP設定というキーワードを含めて検索してみてください。

この記事でも、他の方の記事でも良いので、私と同じ問題を抱えており、『Facebook URL 画像 表示されない』といったキーワードで検索されている方が、 迷わずにお目当ての内容が書かれた記事にたどり着ける事を祈っています。

アイキャッチ画像を表示する方法

すっかり前置きが長くなってしまいましたが、【OGPの設定方法】をご紹介していきます。

まず、headタグ内に、以下の4行を追加します。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページのURL(絶対パス)" />
<meta property="og:image" content="画像のURL(絶対パス)" />

赤字部分は要変更
※articleの部分は、トップページの場合:website に変更

この4行は、Facebook、Twitter共通で使用する事ができます。

Facebookページ用行追加
FacebookでURL付きの投稿をした際にサムネイル画像を表示させるために、下記コードをheadタグ内に追加します。

<meta property='fb:app_id' content='15桁のApp-ID' />

赤字部分は要変更

App-IDは、Facebook for developersに登録し、取得する必要があります。

Facebookのデバッカーを使うとURLを投稿した際に画像が表示されるかテストすることができます。

Twitter用行追加
TwitterでURL付きの投稿をした際にサムネイル画像を表示させるために、下記コードをheadタグ内に追加します。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@TwitterのID">

赤字部分は要変更

※summaryの部分は、『summary_large_image』『photo』『gallery』などに変更することによって、表示方法を変更することができます。

Twitter検証ツールを使うとURLを投稿した際に画像が表示されるかテストすることができます。

リンクを貼ったFacebookのデバッカーやTwitterの検証ツールを使って一度記事を登録すると実際に投稿した際にしっかり画像やタイトルが表示されるのですが、 このOGP設定をしていても、デバッカーを使用せずにURL付き投稿をしても画像やタイトルが表示されない場合があります。

なので、記事を作成する度にデバッカーを利用するクセを付けておいた方が良いかもしれません。

デバッカーを使わずに上手く投稿する方法ご存知の方いらっしゃいましたら、情報いただけると嬉しいです。

記事作成日:2016.10.29
記事更新日:2017.09.29

Facebookへ Twitterへ RSSへ このエントリーをはてなブックマークに追加