サイト作成する際にページがシェアされることを想定します。
その際、ページの情報を要約を指定してあげたいときに使うのがOGPタグです。
呼ばれ方は「OGタグ」「Open Graph」などでOGPは「Open Graph protocol」の略です。
以下のようにmetaに書き込みます。
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の概要" />
以下は画像を指定したい時の詳細設定です。
<meta property="og:image" content="記事画像のフルパス" />
<meta property="og:image:secure_url" content="https://の記事画像のフルパス" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="altの文字列" />
指定項目はどれも任意ですが、忘れられそうな作法です。
参考サイトはこちら
https://ogp.me/ツイッターでシェアされることを想定するには以下のようなツイッターのみをターゲットとしたmetaの指定があります。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザーID" />
<meta name="twitter:creator" content="@ユーザーID" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="記事の要約" />
<meta name="twitter:image:src" content='画像のURL' />
「twitter:card」には“summary”、“summary_large_image”、“app”、“player”が指定が可能です。
「twitter:card」と「twitter:site」と「twitter:creator」はツイッター独自なので、それだけ指定して、残りは「og:***」で補うこともできるようです。
ツイッターについて詳細はこちら
ちなみにFacebookは1200px✕630pxの画像サイズを推奨しているようです。
