概要
サイトにogpを設定する際のサンプルについて整理。用途
- サイトにogpを設定する。
注意事項
- ogp imageのサイズは600×315(px)、もしくは1200×630(px)が一般的。
実装方法
HTML
<!-- [headタグ] -->
<!-- TOPページの場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- TOPページ以外の場合 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- Facebook対象外の場合 -->
<head prefix="og: http://ogp.me/ns#">
<!-- [headタグ内] -->
<!-- 基本ogp -->
<meta property="og:locale" content="ja_JP"><!-- 他には「en_US」など -->
<meta property="og:type" content="website"><!-- TOPページは「website」TOPページ以外は「article」 -->
<meta property="og:title" content="{ページのタイトルを入力}"><!-- titleタグと一致する内容を入力 -->
<meta property="og:url" content="{ページのURL}"><!-- httpまたはhttpsから始まる該当ページの絶対パス -->
<meta property="og:image" content="{設定する画像のパス}"><!-- httpまたはhttpsから始まるog画像への絶対パス -->
<meta property="og:site_name" content="{サイト名を入力}"><!-- TOPページのtitleタグと一致する内容を入力 -->
<meta property="og:description" content="{ページの説明}"><!-- meta descriptionと一致する内容を入力 -->
<meta property="fb:app_id" content="{App-IDがここに入ります。}"><!-- Facebookの設定 -->
<meta name="twitter:card" content="summary"><!-- 他には「summary_large_image」 -->
<meta name="twitter:title" content="{ページのタイトルを入力}"><!-- titleタグと一致する内容を入力 -->
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
