用途
新着
履歴
分類

OGPタグ

OGPタグ
OGPタグ
記事をシェアする時のOGPタグについてのメモ書きです。

サイト作成する際にページがシェアされることを想定します。

その際、ページの情報を要約を指定してあげたいときに使うのが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の画像サイズを推奨しているようです。

公開 2019-10-29 16:02:04
更新 2019-12-22 19:00:44
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top