[html]リンクを貼ってもサムネイルが表示されない時の対処法

ツイッターやインスタグラムなどのSNSでHPや自身のサイト、他人の記事などを載せる時にサムネイルが表示されないことがあると思います。今回はその場合どうすればいいのか紹介をします。

解決前

このサイトを運営しているツイッターアカウントでリンクを貼ってツイートしたのですが、サムネイルが表示されていない状態でした。

基本的にサムネイルなど用意していないので、一般的なSNSはリンクだけを貼る結果になると思います。

サムネイルが表示されるサイトと表示されないサイトの違いはOGPが設定されているかいないかです。

OGPとは、Open Graph Protocolの略でSNSでリンクを貼った時にサムネイルを表示するために必要な情報を伝えるHTML要素です。

必要な情報は合計6個でプログラムをheader内におくと反映されました。

今回使用したプログラムは以下のものです。

See the Pen html4 by コココット (@cococodog) on CodePen.

リンク先のurlを置くところです。contentにはhttpから始まる相対ではなく絶対urlが必要です。

ページの種類を指定するところで、これにより表示形式が変わります。contentには"website"、"blog"、"article"などから自身のサイトにあったものを選んでください。

og:title

タイトルを書くところです。contentにはその記事のタイトルを書きましょう。

og:description

サイトの説明文を書くところです。contentには短い文章で記事の説明文を書きましょう。

og:site_name

サイトの名前を書くところです。contentには自身のサイト名を書きましょう。

og:image

サムネイルとして表示する画像を指定するところです。こちらもog:urlと同様に相対ではなく絶対urlで書く必要があります。

上記のプログクラムを導入後に再ツイート

OGP対応する前とした後のツイートではリンクの踏みやすさや心配が全然違うように感じます。

OGP設定をしていないと不安なリンクが完成します。ツイッターではサムネイルのないリンクなど見たことがないので、 OGP設定をしていないリンクはやはりSNSでシェアをしても効果が少ないと思いました。

なので少し面倒でもサムネイルはしっかりと作っていきましょう。