OGPの記述の整理です。
数年前から変更されているものもあるので再確認ですね。
以下、詳細です。
仕様とかがある場所
The Open Graph protocol
https://ogp.me/
ウェブ管理者向けシェア機能ガイド
https://developers.facebook.com/docs/sharing/webmasters/
Optimize Tweets with Cards
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
まとめていく
The Open Graph protocol に書いている基本形
|
1 2 3 4 5 6 7 8 9 10 11 |
<html prefix="og: http://ogp.me/ns#"> <head> <title>U-618WEB</title> <meta property="og:title" content="U-618WEB"> <meta property="og:type" content="website"> <meta property="og:url" content="https://u-618.org/hoge/"> <meta property="og:image" content="https://u-618.org/images/hoge.jpg"> ... </head> ... </html> |
仕様を参照して上記に対して必要そうなオプションを足してみる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#"> <head> <title>ページのタイトル｜U-618WEB</title> <meta property="og:title" content="ページのタイトル"> <meta property="og:type" content="website"> <meta property="og:url" content="https://u-618.org/hoge/"> <meta property="og:image" content="https://u-618.org/images/hoge.jpg"> <meta property="og:description" content="ページの説明"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="U-618WEB"> ... </head> ... </html> |
サイトにおいて下層ページでは
|
1 |
<meta property="og:type" content="article"> |
みたいです。
ただその場合はオプションがどっと増える。
|
1 2 3 4 5 6 |
<meta property="article:published_time" content="公開された日時"> <meta property="article:modified_time" content="最後に更新された日時"> <meta property="article:expiration_time" content="有効期限日時"> <meta property="article:author" content="著者"> <meta property="article:section" content="上位のセクション名"> <meta property="article:tag" content="関連する単語"> |
ウェブ管理者向けシェア機能ガイド(facebook)に書いている基本形
|
1 2 3 4 5 6 7 |
<meta property="og:url" content="https://u-618.org/hoge/"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明"> <meta property="og:image" content="https://u-618.org/images/hoge.jpg"> <meta property="fb:app_id" content="アプリID"> <meta property="og:type" content="article"> meta property="og:locale" content="ja_JP"> |
上記の必要そうなものを足してみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#"> <head> <title>ページのタイトル｜U-618WEB</title> <meta property="og:title" content="ページのタイトル"> <meta property="og:type" content="website"> <meta property="og:url" content="https://u-618.org/hoge/"> <meta property="og:image" content="https://u-618.org/images/hoge.jpg"> <meta property="og:description" content="ページの説明"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="U-618WEB"> <meta property="fb:app_id" content="アプリID"> ... </head> ... </html> |
コンテンツによってオプションを追加できる。
今回は割愛。
Optimize Tweets with Cardsに書いている基本形
|
1 2 3 4 5 6 |
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@flickr"> <meta name="twitter:title" content="ページのタイトル"> <meta name="twitter:description" content="ページの説明"> <meta name="twitter:image" content="https://u-618.org/images/hoge.jpg"> <meta name="twitter:image:alt" content="画像のテキスト記述"> |
上記の必要そうなものを足してみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#"> <head> <title>ページのタイトル｜U-618WEB</title> <meta property="og:title" content="ページのタイトル"> <meta property="og:type" content="website"> <meta property="og:url" content="https://u-618.org/hoge/"> <meta property="og:image" content="https://u-618.org/images/hoge.jpg"> <meta property="og:description" content="ページの説明"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="U-618WEB"> <meta property="fb:app_id" content="アプリID"> <meta name="twitter:card" content="summary"> ... </head> ... </html> |
twitter:title は必須となっているがog:titleで対応できるとのことで省略。
その他のオプションは必要に応じて追加。
現状でこれが最低限…か？