SNSでWEBサイトのリンクがシェアされた際に、目を引くのは画像です。
OGPはFacebookやTwitterなどのSNSで表示される画像になります。フルサイズ画面で表示ができるように、大きめの画像サイズになっています。OGPを設定するには、指定の記述でHTMLに追加します。
HTMLへOGP画像を設定する
OGPは、複数のタグによって構成されています。基本的に、下記に紹介するタグをすべてHTMLのコードに記載しておくようにしましょう。
<head prefix="og:http://ogp.me/ns#">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:type" content="ページの種類">
<meta property="og:site_name" content="サイトの名前">
</head>では、それぞれのタグの内容についてご説明してきます。
headタグへの記述
まず、htmlのheadタグに、下記のようなprefix属性を追加します。
<head prefix="og:http://ogp.me/ns#"></head>これにより、このページがOGPを使用することの宣言となり、各アプリなどがOGPを正しく認識してくれるようになります。
このprefix属性はhtmlタグに記述されている場合もあり、基本的にはhtmlタグかheadタグのどちらかに記述されていれば問題ないでしょう。
og:title
og:titleは、ページのタイトルを設定します。通常のtitleタグと同じ値を設定しておくといいでしょう。
該当するコードは下記の部分です。
<meta property="og:title" content="ページのタイトル">og:description
og:descriptionは、ページの説明文を設定します。こちらも、通常のdescriptionと同じ内容を設定しておきます。
文字数は、100文字程度にしておくのが理想ですが、SNSでのシェアの場合全文が表示されなかったり、長くてもほとんど読んでもらえないため、重要な内容は前半に記述するように心がけた方がいいでしょう。
該当するコードは下記の部分です。
<meta property="og:description" content="ページの説明文">og:url
og:urlは、ページのURLを設定します。ここに設定するURLは、絶対パスで記述する必要があり、相対パスでは上手く動作しないため注意が必要です。
例えば、imgタグだと下記のように記述することがあると思います。
<img src="https://example.com/assets/images/xxxx.png">このようなパスの指定方法は、相対パスと言われるドメインを省略した記述方法ですが、og:urlは、下記のようにURLを正しく記述する絶対パスで記述するようにしてください。
<meta property="og:url" content="https://example.com/page/xxx">該当するコードは下記の部分です。
<meta property="og:url" content="ページのURL">og:image
og:imageは、SNSでシェアされた時に表示される画像を設定します。画像は、1200x630pxに設定することが一般的ですが、SNSの種類やチャットツールによって、表示範囲が異なる場合があるため、下記の画像サイズに関する説明を読んで、適切なサイズで画像を作成するようにしましょう。
これも、必ず絶対パスで記述するようにしましょう。相対パスで記述すると画像が正しく表示されません。
該当するコードは下記の部分です。
<meta property="og:image" content="サムネイル画像のURL">og:type
og:typeは、ページの種類を設定します。下記を参考に値を設定しておきましょう。
| website | トップページなど |
|---|---|
| blog | ブログのトップページなど |
| article | 記事やブログの投稿ページなど |
他にもいくつか設定できるものはありますが、一般的なWebサイトで使用するのは上記の3種類です。ただし、そこまで重要ではないので、そこまで神経質にならなくても大丈夫です。
該当するコードは下記の部分です。
<meta property="og:type" content="ページの種類">og:site_name
og:site_nameは、サイトの名前を設定します。ページ名ではなく、サイト名なので注意してください。
該当するコードは下記の部分です。
<meta property="og:site_name" content="サイトの名前">Twitter用のOGP設定方法
上記に紹介したOGPの設定以外にも、TwitterとFacebookは特別な設定が必要となります。
SNSでのシェアは、Webサイトへのアクセスを増やすためにとても重要となるため、必ず設定しておくようにしましょう。
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@Twitterアカウント名">twitter:card
twitter:cardは、Twitterでシェアされた時の表示方法を設定します。
一般的に使われるのは、下記の2種類です。
| summary | 画像が小さく配置された横長のカードで表示 |
|---|---|
| summary_large_image | 画像を大きく表示し、その下にタイトルや説明文を表示 |
おすすめの設定は、「summary_large_image」で、スマホで表示した時に、より大きくカードが表示されるためクリック率の向上が狙えます。
summary_large_imageに設定したい場合は、下記のように記述します。
<meta name="twitter:card" content="summary_large_image">summaryを使用する場合は、下記のように記述しておきましょう。
<meta name="twitter:card" content="summary">twitter:site
twitter:siteは、Twitterのユーザー名を設定します。
Webサイトや、サイト運営者のTwitterアカウントがある場合は、下記のようにユーザー名を設定しておきましょう。
該当するコードは下記の部分です。
<meta name="twitter:site" content="@Twitterアカウント名">Facebook用のOGP設定方法
Facebookについては、Facebook上でシェアされた時の見た目を調整するためのものではありませんが、
fb:app_idというプロパティに、FacebookのアプリIDを設定しておくことで、Facebookインサイトを使ってトラフィックの分析を行うことができるようになります。
コードの例は、下記のとおりです。
<meta property="fb:app_id" content="app_id">「OGP画像シミュレータ」
見た目がどんなふうになるのかシュミレーションするサイトがあります。
