Open Graph protocol は SNS で記事をシェアした際、タイトルや概要文、サムネイル画像等を適切に表示するための仕組みだそうです。uchan は今ちょっとこの仕組みを調べただけなので詳しくないのですが、とにかく、各記事の HTML にこの仕組みを導入することで、Twitter や Facebook で良い感じに記事がシェアできるみたいです。
設定方法は主に上記公式サイトと OGPの正しい設定方法を解説！Facebook・Twitter対応 という記事で調べました。
OGP を有効にするためには <html> タグに prefix 属性を指定せよ、とあります。基本形は <html prefix="og: https://ogp.me/ns#"> だそうです。<html> タグではなく <head> に記載する方法もあるようで、先の記事では Facebook に対応させたいなら <head> に記載することを勧めているようです。
プレフィックスには他にも種類があり、先の記事には次の例が記載されていました。
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
article: https://ogp.me/ns/article# はこの OGP を記載したページが「記事」を表すページのときに用いるようです。一方、記事ではないページには代わりに website: https://ogp.me/ns/website# を記載すると良いようです。
プレフィックスの中身 og: https://ogp.me/ns# の解釈の仕様を知らないのですが、推測するに、short_name: URL と書いておけば、以降 short_name で指定した URL のデータ構造を表せるのではないでしょうか。プレフィックスで article: https://.../article# と指定することによって、メタデータを指定する箇所で article:tag と書けると。
公式サイトによると、すべての OGP ページに記載しなければならない基本メタデータと、オプショナルなメタデータが規定されています。さらに、article タイプのページには専用のメタデータを付けることができるようです。
メタデータの指定の基本形は <meta property="プロパティ名" content="設定値" /> だそうです。
基本メタデータは全てのオブジェクトに付与する必要があります。
| プロパティ名 | 説明 |
|---|---|
og:title |
オブジェクトのタイトル。 |
og:type |
オブジェクト種別。article や website、video.movie など。 |
og:image |
オブジェクトを表す画像の URL。 |
og:url |
正規化されたオブジェクトの URL。オブジェクトの ID として永続的に使われる。 |
「オブジェクト」は「ページ」と読み替えて良いと思います。OGP の世界観では、オブジェクトがグラフ構造に繋がっていて、オブジェクトの各種メタデータを OGP で表します。Web ページをグラフオブジェクトに変換する道具が OGP というわけです。
以下のメタデータは名前の通り、付けても付けなくても（OGP の仕様としては）大丈夫です。ただ、Facebook の場合は og:description と og:locale の設定が推奨されているそうです。
| プロパティ名 | 説明 |
|---|---|
og:audio |
オブジェクトに付随する音声ファイルの URL。 |
og:description |
オブジェクトの 1、2 文での説明。 |
og:determiner |
オブジェクトのタイトルの前に付ける冠詞。日本語タイトルでは無用の長物？ |
og:locale |
オブジェクトの地域設定。en_US とか ja_JP とか。 |
og:locale:alternate |
翻訳版がある場合、地域設定の配列。 |
og:site_name |
このページが何らかのサイトの一部の場合、そのサイトの名前。 |
og:video |
オブジェクトに付随する動画ファイルの URL。 |
og:type が article の場合に、以下のメタデータを追加で指定できるようです。
| プロパティ名 | 説明 |
|---|---|
article:published_time |
記事が最初に公開された日時。 |
article:modified_time |
記事が最後に変更された日時。 |
article:expiration_time |
記事の内容が無効になる日時。 |
article:author |
記事の執筆者の配列。配列の要素は profile データ構造。 |
article:section |
「Technology」のような高水準のセクション名。 |
article:tag |
タグ文字列の配列。 |
以上の情報から、今のところ自作ブログでの OGP 設計は次のようにしようと考えています。ここでは記事ページに関する設計を記述します。
<html> に、追加のプレフィックスを <head> に記載する。<html lang="ja" prefix="og: https://ogp.me/ns#"><head prefix="article: https://ogp.me/ns/article#">website: https://ogp.me/ns/website#og:title: 記事先頭の <h1> 要素のテキスト。無ければ記事のファイル名。og:type: article 固定。og:image: フロントマター に設定があればそれを、無ければ記事中の最初の画像。それも無ければデフォルト画像。og:url: 記事に振られた連番を引数とした CGI 呼び出しの URL。og:description: フロントマターに description があるときはそれを、無い時は記事本文の先頭 1 段落を使用。og:locale: 当面は ja_JP に固定。article:published_time: フロントマターの created の値。article:modified_time: フロントマターに modified があればそれを、無ければ created の値。article:author: フロントマターの author の値と https://twitter.com/ を結合した文字列。article:tag: フロントマターの tags の値。