OGPを設定するとSNSで共有された際にタイトルや画像、説明文などが表示される
１．設定した際の利点
OGP設定をしていなかった場合、
TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示するので
伝えたい内容がユーザーに思い通りに伝わらない
適切に設定することで、どのようなページで何を伝えたいのかが明確になる
URLが共有されユーザーへの訴求率が高まり、
より多くの人に記事を見てもらうことが可能になる
２．設定内容
OGPはmetaタグをHTMLソースコード内に追加記述する
追加する内容
| <head prefix=”og: http://ogp.me/ns#> |
<meta property="og:url" content=" ページの URL" /><meta property="og:type" content=" ページの種類" /> <meta property="og:title" content=" ページの タイトル" /><meta property="og:description" content=" ページの説明文" /> <meta property="og:site_name" content="サイト名" /><meta property="og:image" content=" サムネイル画像の URL" /> |
内容説明
| og:url | OGPを設定するWEBページのURLを指定する URLは相対パスではなく絶対パスで記述する |
| og:type | ページの種類を指定する SNS上での表示形式が変わってくる website: WebサイトのTOPページ blog: ブログのトップページ article: 記事ページ等、WebサイトのTOP以外のページ product: 製品の紹介ページ その他については（Open Graphプロトコル） |
| og:title | ページのタイトルを指定する 通常はサイトのものと同じ内容を指定する 別のタイトルを設定するとそちらが優先して表示される 文字数は２０文字以内 |
| og:description | ページの説明文を指定する 文字数は８０〜９０文字 |
| og:site_name | ページのサイト名やブランド情報を記述する 「og:site_name」に設定する |
| og:image | SNS上でシェアされた際に表示する画像を指定する 絶対パスで指定する Facebookでの設定にはサイズを1200px✕630pxにする |
３．Twitterとの共有
Twitterでは基本的なOGP設定に以下を加える
| twitter:card | Twitter上での表示タイプを指定する summary：タイトル、説明、およびサムネイル summary_large_image：summary cardと同じ形で、 画像の大きさがそれより大きいもの Facebookのカードに近い形 app：アプリ配布用の表示カード アプリの名前や紹介文、 アプリアイコンに加えて、評価や価格などの表示 player：ビデオやオーディオなどのメディアを表示できるカード |
| twitter:site | @から始まる、コンテンツの作成者や管理者のTwitterユーザーID |
４．Facebookとの共有
基本的なOGP設定にapp_idを取得して追加設定する
facebook for developers （https://developers.facebook.com/apps）で取得する
OGPの設定やFacebook用アプリを作成する際に必要なID
| fb:app_id | サイトやブログの管理者をFacebookに伝える、１５文字の半角数字 Facebookインサイトを利用できるようになり Facebookインサイトを利用できるようになります いいね！の数 どれくらいの人が見てくれたのか どの時間帯がユーザーの目にとまりやすいか |
コメントを残す