KONOTI

この世界で得た知識・情報まとめ

【HTML】OGPを設定してSNSでサムネイル画像を使う

SNSでシェアされた記事を魅力的にみせるOGP設定のまとめです。 headタグに数行OGP設定を追加することで、シェアされる記事の見せ方を、好きなようにカスタマイズできます。 SNSで自分のサイトや投稿記事をアピールするには、必須の設定です。

【HTML】OGPを設定してSNSでサムネイル画像を使う

OGPとは

OGPとは、SNSで記事がシェアされるときに、その記事のシェアのされ方を自分好みに設定できる仕組みのことです。 具体的には、シェアされる記事のタイトルや説明などを、好きなようにカスタマイズできます。 サムネイル画像を設定することもできます。

例えば、TwitterでOGPありとなしを比較してみます。Twitterではツイートすると普通はこのようになります。

OBP設定前

しかし、OGPを設定すると以下のようなサムネイル画像とタイトルなどが入ります。

OBP設定後

OGPありとなしでは、どちらがクリックしてもらいやすくなるかは明らかですよね。

このように魅力的なOGPですが、その設定はHTMLで行います。 HTMLファイルのheadタグ内に、OGP用のmetaタグを追記して設定をするのです。

また、OGPには大きくわけて2種類の設定があります。 1つは各SNSで共通して必要な設定で、記事タイトルや画像、説明など基本的な設定をします。 2つ目は各SNS独自の設定です。TwitterならTwitterカードと呼ばれるTwitter専用のOGPがあります。

よって、OGPの設定は「基本設定+利用している各SNS独自の設定」という構成になります。

OGPの設定方法

OGPは各記事内のheadタグ内に記述します。 SNSで共通して必要な設定と、各SNS独自の設定をご紹介します。

各SNSで共通な基本設定

ここでは、各SNSサービスで共通して必要な設定をheadタグに記述します。 共通設定ということで、シェアされる記事の基本的な情報を設定することになります。


<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

<meta property="og:title" content="記事のタイトル" />

<meta property="og:url" content="記事のURL" />

<meta property="og:image" content="画像のURL" />

<meta property="og:description" content="記事の説明" />    

<meta property="og:type" content="記事の種類" />

<meta property="og:site_name" content="サイト名" />

</head>
       

headタグをこのように追記・修正します。 最初のhead prefix~というのは、OGPをこれから使うという宣言みたいなものです。 既にあるheadタグにprefix~を追加する形になります。 また、この記述は省略しても問題なくOGP設定を行えますが、書いておくのが正式な書き方です。

では、上から順番に各meta要素の説明をしていきます。例もご用意してあるので、参考にどうぞ。

title

記事のタイトル名です。省略するとheadタグ内にあるtilteタグ(metaではない方)が設定されます。 文字数の制限はありませんが、あまり長いと最後の方が見切れます。

例)


<meta property="og:title" content="【HTML】OGPを設定してSNSでサムネイル画像を使う" />
       

url

記事のURLです。相対パス(../../mainなどの形式)ではなく、絶対パス(http~の形式)で記述します。

例)


<meta property="og:url" content="https://test.com/aaa/bbb/ccc.html" />
       

image

記事のサムネイル画像です。ここで設定した画像が、シェアされたときに表示される画像となります。 シェアされる画像は目に入りやすいので、記事内容に沿った適切な画像を設定したいところです。

こちらもurlと同様に、絶対パス形式で記述します。

例)


<meta property="og:image" content="https://test.com/aaa/bbb/image/gazou.jpg" />
       

description

記事の説明です。記事の内容を要約して記述します。文字数制限はありませんが、長すぎると後ろが省略されてしまいます。

なお、descriptionを省略すると、記事内のテキストが自動で表示されます。 記事の紹介なので、自分で設定する方が良いでしょう。 facebookでは必須の設定だそうです。

例)


<meta property="og:description" content="OGP設定のご紹介です。Twitterなどで・・・" />
       

type

記事の種類です。複数のタイプがありますが、実際によく使われるのは「website」と「article」です。 トップページの場合はwebsiteを、それ以外の記事ページの場合はarticleを設定します。

例)


<meta property="og:type" content="article" />
       

<meta property="og:type" content="website" />
       

site_name

サイト名です。

例)


<meta property="og:site_name" content="KONOTI" />
       

Twitter独自の設定

Twitterでシェアされたときに設定するTwitter独自のOGP設定です。 SNS共通の設定に加えて、これらの設定も必要になります。


 <meta name="twitter:card" content="Twitterのカード種類" />

 <meta name="twitter:site" content="@ユーザー名" />
       

他にもTwitter独自のOGP設定はありますが、まずはこの2つを設定しておくと良いです。

card

Twitterのカード種類です。Twitterカードとは、シェアされたときに表示されるもので、 このカードに画像やタイトルなどが埋め込まれます。 下の画像の赤枠で囲まれたのがそうです。

Twitterカード

Twitterカードは4種類ありますが、サイト・ブログでよく使われるのは summaryカードと、summary_large_imageカードの2種類です。

この2つの違いは画像サイズと文字のバランスです。 両者とも画像と文字が表示されますが、 Summary large imageカードのほうが画像サイズが大きく、文字が少なめとなっています。 どちらが良いというのは、その記事内容や使用画像によって変わってくるので、一概にこっちが良いとはいえません。 記事によって使い分けると良いかと思います。

ちなみに、上の画像はsummaryカードです。

例)


 <meta name="twitter:card" content="summary" />
       

 <meta name="twitter:card" content="summary_large_image" />
       

site

Twitterのユーザ名を@形式で記述します。

Twitterのユーザ名

なお、これは省略することも可能です。 これを設定すると、シェアされたときにTwitterカードの下部分にユーザ名が表示されます。

例)


 <meta name="twitter:site" content="@konoti_info" />
       

その他

この2つの他にもTwitter独自のOGP設定として、title、url、description、imageなどがあります。 しかし、これらは各SNSで共通に設定するものと同じです。 よって、わざわざあらためて設定する必要はないので、ここでは割愛します。

OGPの確認方法

確認はわざわざ自分でシェアする必要はありません。 確認用のサイトが用意されているので、それを利用するのが簡単かつ確実です。

Twitterカードの確認

Twitterカードの設定が完了したら、以下のサイトで正常に設定できているか確認できます。 自分で記事をツイートする必要がないので非常に便利です。

英語ですが、使い方は非常に簡単です。まずは左側にある枠にURLを入力して、青ボタンを押下します。

Twitterカードの確認

結果が右側に表示されます。

Twitterカードの確認2

画像が表示されなかったりしたら、設定や画像パスなどを見直してみてください。

なお、記事や画像をアップロードした直後は反映されないときがありました。 反映されないと思ったら、少し時間をおいてみると良いかもしれません。

この記事のシェアはこちらから

当サイトについて

当サイト(KONOTI)は、日常生活において運営者が得た情報をご紹介するサイトです。 ジャンルに多少の偏りはありますが、基本的には様々な情報を取り扱っていく予定です。

Contact

当サイトへのご連絡は以下よりお願いします。

PAGE TOP ▲

© Copyright 2019 KONOTI