ogp-configuration

OGP の設定方法

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:descriptionog: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。

article 用メタデータ

og:type が article の場合に、以下のメタデータを追加で指定できるようです。

プロパティ名 説明
article:published_time 記事が最初に公開された日時。
article:modified_time 記事が最後に変更された日時。
article:expiration_time 記事の内容が無効になる日時。
article:author 記事の執筆者の配列。配列の要素は profile データ構造。
article:section 「Technology」のような高水準のセクション名。
article:tag タグ文字列の配列。

自作ブログでの OGP 設計

以上の情報から、今のところ自作ブログでの 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 の値。


この記事を参照しているブログ内記事はありません。

作成:2022-07-04 23:23:22

最終更新:2022-07-04 23:23:22