「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素
SNS上でURLが共有された際に設定しておいたタイトルや画像、説明文などが表示されるようになり、ユーザーに対してWEBページの内容を伝えることができる。
<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" /><meta property=”og:title” content=”*******” />
<meta property=”og:image” content=”https://********.jp/images/ogp.jpg” />
<meta property=”og:url” content=”https://********.jp/” />
<meta property=”og:site_name” content=”website”/>
<meta property=”og:description” content=”***********” />
<meta name=”twitter:title” content=”********” />
<meta name=”twitter:image” content=”https://********.jp/images/ogp.jpg” />
<meta name=”twitter:url” content=”https://********.jp/” />
<meta name=”twitter:card” content=”summary_large_image”>
確認ツール
Twitterカードの表示確認ツール「Card validator」
※Twitterへのログインが必要。
Twitter上でツイートされた際の表示結果を確認することができる。
設定したページのURLを入力し「preview card」を押すと、Twitter上でどのように表示されるか見ることができる。
Card Validator | Twitter Developers
Facebookの表示確認ツール「シェアデバッカー」
※Facebookへのログインが必要。
WEBページがSNS上でシェアされた際にどのように表示されるかエラーがないか確認することができる。
OGP画像シミュレーター
OGP用画像をドラッグ&ドロップすると、タイムライン上でどう見えるのかシミュレートすることができる。