ogp設定の記述方法 2021/09/06 [ ID : 2328 ] html, css 無料記事 ログインする 新規会員登録 概要 サイトに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タグと一致する内容を入力 --> Copy ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)