基本のOGP設定

自分用OGP( Open Graph Protocol )設定 よく入れるものをメモ

/*headタグの設定*/
<head prefix="og: http://ogp.me/ns#">

/*基本設定*/
<meta property="og:url" content="ページURL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページ内容の説明" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="サムネイル画像のURL" />

/*Facebook、Twitterタグの設定をする場合*/
<meta property="fb:app_id" content="App-IDを入れる">
<meta name="twitter:card" content="summaryやsummary_large_imageなど">
<meta name="twitter:site" content="@アカウント名" />

まずheadタグに OGPを設定するために必要な
prefix=”og: http://ogp.me/ns#”
を入れます
あとは基本的な内容をmetaタグで

基本のOGPタグ

og:url
ページのURL

og:type
ページの種類。主にはwebsite、blog、article等を入れる トップページならwebsite 下層ページならarticle

og:title
ページのタイトル だいたいtitleタグと同じものを入れます

og:description
ページのディスクリプション。metaディスクリプションと同じく70~80文字くらいにできれば

og:site_name
サイトの名前

og:image
メインとなるサムネイルの画像。検索結果に出て来たり、SNSでシェアされるときに出て来たり
Facebookの高解像度用推奨画像の大きさが1200×630pxということなのでこのサイズで作れば大丈夫かと

SNSのOGPタグ

fb:app_id(アカウントがある場合)
contentに
Facebook for deveropers
でアプリを作成することで作られるapp_idを入れます

twitter:card
contentに “summary”、“summary_large_image”、“app”、“player” のいずれかを入れます
一般的なのはsummary
画像を大きく出したいときは summary_large_image
summaryにすると、見出しの左側に画像が小さく表示されますが、正方形になります
summary_large_imageは横長の画像になります

twitter:site(アカウントがある場合)
自分のアカウントがある場合はアカウント名を入れます

他にも設定内容はたくさんあるようですが
だいたいこのあたりを使っています
SNSの設定についてはあるにこしたことはありませんが
アカウントを積極的に活用しているのでなければこだわらなくてもいいかなと

ちなみにLINEでシェアした場合も横長の画像になるので
サムネイルは 1200×630pxでつくり
Twitter:cardはsummary_large_imageにして
一つの横長画像で全部カバーできるようにするのが効率的かと思います

推奨画像の大きさ等は変わっていく可能性があるので公式サイト等で都度確認していきたいところです

コメント