Facebookのいいね！や、Twitterでシェアされた時に、サイトにOGPの指定をしておくと、見た目や伝えたい情報が設定され、SNS効果が上がる方法をご紹介します。
目次
OGPとは？ ”Open Graph Protocol”の略。
facebook、Twitter、LINEなどで、ウェブページの情報とSNSを連携させるためのタグのことです。
OGPタグの設定
<head>の指定
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">metaタグでOGP設定
<!-- OGP設定 -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />
<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID（半角数字）" />
もしくは
<meta property="fb:admins" content="adminID（半角数字）" />
<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />OGP共通の指定
| OGPタグ | 設定内容 |
|---|---|
| og:title | ページのタイトル |
| og:type | ページの種類 ・website, blog:トップページのみ ・artile: 記事やコンテンツページ |
| og:url | ページのURL |
| og:image | サムネイル画像のURL ※絶対パスで指定 |
| og:site_name | サイト名 |
| og:description | ページの説明 |
Facebook用の指定
| Facebook用タグ | 設定内容 |
|---|---|
| property=”fb:app_id” | FacebookのApp ID（アプリID）OGPの設定やFacebook用のアプリを作成する時に必要なID |
| property=”fb:admins” | 【個人情報のため非推奨】 ページの管理者をFacebookのユーザーIDをで指定 |
Twitter用の指定
| Twitter用タグ | 設定内容 |
|---|---|
| twitter:card | twitterでOGPを表示させるときの表示タイプを指定 content=”summary_large_image” 基本形 content=”summary_large_image” 大きく写真表示 content=”photo” 写真優先 content=”gallery” 複数写真 content=”app” アプリの紹介 |
| twitter:site | そのサイトに対応するTwitterアカウント名を「@」込みで指定 |
| twitter:player | 動画再生プレイヤーを指定 |
OGP設定のチェック
OGPタグを設定したら、問題ないか、各社が提供しているかテストツールでチェックすることができます。
OGP画像シミュレーター（非公式）
http://ogimage.tsmallfield.com/
OGP画像をドラック＆ドロップするとFacebookタイムラインでの見え方をチェックできます。
シェアデバッガー – Facebook for Developers
How does the Facebook Crawler work?
https://developers.facebook.com/tools/debug/sharing/?locale=ja_JP
FacebookやMessengerなどでシェアされた時の見え方をチェックできます。
Card Validator – Twitter cards
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
Twitterタイムラインでシェアされた時の見え方をチェックすることができます。
まとめ
Facebookのいいね！や、Twitterでシェアされた時に、サイトにOGPの指定をしておくと、見た目や伝えたい情報が設定され、SNS効果が上がる方法をご紹介しました。
