WebサイトをSNSでシェアするOGP
「OGP」（Open Gragh Protocol）は、FacebookやTwitter、LINEなどのSNS向けにメタデータ（「タイトル」「画像」「説明文」などの補足情報）を付与する仕様です。ニュースサイトやブログの記事がSNSで共有されるときなどに、各サービスに最適化されたデザインで表示されるなどのメリットがあります。OGPの指定自体はmeta要素内で行います。
- OGPに必要なデータとその形式はSNSによってことなります。
- OGPの仕様はThe Open Graph protocolで策定されています。
OGPを設定するメリット
SNS等でシェアされた時に目にとまりやすい（アイキャッチ）
OGPを適切に設定することで、SNSのタイムライン上で通常の投稿より大きく表示することができます。画面の占有率が広がり、画像がアイキャッチになるのでシェアした際に目にとまりやすいです。
リンク先がイメージしやすい
OGP未設定と設定した場合では、SNSに投稿した際の見え方がぜんぜん違います。
OGPの設定方法（Facebook）
FacebookのOGP設定をするとLINEにも利用できるため、特段の設定をする必要がありません。
1、head要素にprefix属性を追加してOGPを使用することを宣言します。
<head prefix="og: https://ogp.me/ns#">２、metaタグに要素を追加する
<meta property="og:url" content="ページのURL"/>
<meta property="og:type" content="ページの種類（website または blog または article）"/>
<meta property="og:title" content="ページのタイトル"/>
<meta property="og:description" content="ページの概要"/>
<meta property="og:site_name" content="ページのサイト名"/>
<meta property="og:image" content="サムネイル画像のURL"/>| プロパティ | 設定値 |
|---|---|
| og:title | ページのタイトル見出し |
| og:description | ページの紹介文。ページの説明文を80～90字程度でまとめて記載するようにします。 |
| og:url | ページのURL |
| og:image | 表示したいイメージ画像のURL（png,jpg,gif,webpがサポート） |
| og:type | 以下のいずれかを指定します。 ・website：ウェブサイト ・blog：ブログ ・article：トップページ以外（下層ページ） ・product：製品紹介ページ ・profile ・video ・book |
| og:site_name | ページが所属するWebサイトの名前 |
Facebook用の記述
サイトやブログの管理者をFacebookに伝えるためのタグ。ただし、この記述がなくてもページ情報は表示されます。主に、Facebookからサイトへのトラフィック分析ができるFacebookインサイトのための記述です。
<meta property="fb:app_id" content="[app_id]">X（旧Twiiter）のOGP設定方法
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@ユーザー名">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページの概要">
<meta name="twitter:image" content="サムネイル画像のURL">twitter:cardについて
twitter:cardは、X上でのOGPの表示タイプを指定するタグです。twitter:cardの種類は4種類あり、それぞれ以下の違いがあります。
summary（サマリー）
OGPにウェブページを設定する際に使用するタグです。1:1にトリミングされた画像と、記事タイトル、URLが表示されます。
summary_large_image （サマリーラージイメージ）
OGPにウェブページを設定する際に使用するタグです。先ほどのsummaryと比べて、画像が大きく表示されます。
app
OGPにアプリを設定する際のタグです。アプリを配布するページへのリンクを指定する際に使用します。
player
OGPに動画を設定する際のタグです。Xで動画や音楽を表示する際に使用します。
URLは絶対パスで指定する
“og:url”と”og:image”にURLを設定する際は、相対パスではなく、絶対パスで設定します。
twitter:site
twitter:siteには@から始まるXのユーザーIDを記載します。
OGPの画像サイズは1200px×630pxを推奨
SNSごとに別々に画像をつくる必要はありません。汎用的に使える画像サイズとして1200px×630pxで作成すれば、どのSNSにも対応できます。念のため以下に、各SNSの仕様を記載します。
※ただし、twitter:cardにsummaryを使用する場合は、1200px×630pxを1:1の正方形でトリミングしますので、中央の630px×630pxのエリアに一番目立たせたい情報を配置します。
X（旧Twitter）の場合
- 画像の最小サイズは300px×157px 、最大サイズは 4096px×4096px
- 画像のサイズは5MB未満
- サポートされている画像の形式はJPG、PNG、WEBP、GIF
- twitter:cardにsummaryを使用：画像のアスペクト比は1:1で表示
- twitter:cardにsummary_large_imageを使用：画像のアスペクト比は1.91:1で表示
Facebookの場合
- 画像サイズは1200px×630px以上を推奨
- 画像サイズは8MB以下
- 画像のアスペクト比1.91:1に近づける
設定したOGP・画像の確認方法
１、ラッコツールズ
ラッコツールズを使うと、Facebook・X（旧Twitter）・はてなブックマーク・LINEでページをシェアした際のOGP画像・タイトル・概要を確認できます。PC版のほかに、スマートフォン版・アプリ版の確認用としても使えます。
OGP画像シュミレーターは、OGP画像をドラッグ＆ドロップするだけでタイムライン上での見え方をシュミレーションできるツールです。画像が意図した箇所でトリミングされないか確認するときに役に立ちます。
３、シェアデバッカー
Facebookでページがシェアされた際のプレビューができるツールです。使用にはFacebookにログインが必要なので注意が必要です。