やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > HTMLメタデータを書く３　OpenGraph編

HTMLメタデータを書く３　OpenGraph編

HTML

　OpenGraphとはツイッターカードのこと。SNSで画像を表示してカッコよくみせるアレ。

はてなブログをツイッターで表示したとき

はてなブログをマストドンで表示したとき

　このときのブログ記事やSNS投稿は以下。

　こんなふうに画像を埋め込んだりできるのがOpenGraph。

　記事を読んでもらいやすくなるので是非とも使いたい。

OpenGraph

　OpenGraphはHTMLのmetaタグを使って書く。

　OpenGraphの正式名称はOpenGraphProtocolであり「OGP」と略されることもある。

OpenGraph定義

<meta property="" content="">

　詳しい仕様はOpenGraphを参照してもらうとして、ここではそれを解読してゆく。

　OpenGraphは以下のようなコードになる。

<head prefix="og: https://ogp.me/ns#">
  <meta property="og:type" content="website">
  <meta property="og:title" content="タイトル">
  <meta property="og:url" content="https://some.jpg">
  <meta property="og:image" content="https://some.html">
</head>

　OpenGraph][]には様々な型がある。

  1. そのWebサイトをあらわす型をひとつだけ選ぶ
  2. その型にあるプロパティ（語彙）に値をセットする

OpenGraphの型

型 概要
website 基本形。以下以外のすべて。
article 記事。
profile 人。
book 本。
video.movie 映画
video.episode 毎週つづくアニメやドラマ等
video.tv_show テレビ番組。video.episodeの親。
video.other 映画でもテレビ番組でもない動画
music.song 楽曲
music.album 楽曲集（アルバム）
music.playlist プレイリスト
music.radio_station ラジオ番組

website

　基本形。HTML文書がサイトのときに使う。これはすべての型で使える共通語彙である。

<head prefix="og: https://ogp.me/ns#">
</head>

<head prefix="og: https://ogp.me/ns# website: https://ogp.me/ns/website#">
</head>

　websiteは基本形である。prefixにwebsiteの定義がなくとも、websiteと解釈してくれるはず。

　使えるパラメータは以下の通り。

property属性値 説明
og:type 定義された型名
og:title タイトル
og:url URL
og:image 画像URL（絶対URL） 
<head prefix="og: https://ogp.me/ns#">
  <meta property="og:type" content="website">
  <meta property="og:title" content="タイトル">
  <meta property="og:url" content="https://some.jpg">
  <meta property="og:image" content="https://some.html">
</head>

オプション

　基本形に加えて次の項目も付与できる。これもすべての型で使える共通語彙である。

property属性値 説明
og:description 説明文
og:site_name サイト名
property属性値 説明
og:audio 音声ファイルURL
og:video 動画ファイルURL
property属性値 説明
og:locale 言語コード。デフォルトはen_US。日本語に指定するならja_JP
og:locale:alternate このサイトで利用できる他の言語のコード配列。

　og:determinerは日本語圏だと不要。タイトルの前に表示されるa, an, theなどの語を指定する。

<head prefix="og: https://ogp.me/ns#">
  <meta property="og:description" content="説明文。">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:audio" content="https://some.mp3">
  <meta property="og:video" content="https://some.mp4">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:locale:alternate" content="en_US">
  <meta property="og:locale:alternate" content="en_GB">
</head>

profile

　人物をあらわす型。ほかの型から参照されることも多い　。

property属性値 説明
profile:first_name 名
profile:last_name 氏（苗字、名字）
profile:username ユーザ名（識別子）
profile:gender 性別（男:male, 女:female） 
<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta property="og:type" content="profile">
  <meta property="profile:first_name" content="太郎">
  <meta property="profile:last_name" content="山田">
  <meta property="profile:username" content="識別子">
  <meta property="profile:gender" content="male">
</head>

　気になることがいくつかる。

  • 識別子ってなんだよ。世界中から個人を特定できるIDなんてないぞ？　なんらかのサービスのユーザ名でいいのかな？
  • ミドルネームがある国や人はどうするの？
  • 性的少数者はどうするの？　それっぽいテキストを書くのかな？
  • 個人をあらわす情報がたりない：年齢（生年月日）、身長、体重、思想など
    • 連絡先をあらわす型がない：郵便番号、住所、電話番号、メールアドレスなど
    • 所属をあらわす型がない：業種、役職など
    • 賞罰をあらわす型がない：受賞、犯罪歴など
    • 履歴をあらわす型がない：学歴、職歴
    • 技能をあらわす型がない：資格、作品など
    • 状態をあらわす型がない：求職中、休職中、業務中、休暇中、離席中など

　時代に追いついていない感ある。OpenGraphは完璧に表現できるシステムではなく、あくまでオマケのテキスト情報を付与する程度のものなんだろうな。

　まじめに考えたら人をあらわす情報の量が多すぎる。OpenGraphの目的はSNSコンテンツをリッチに表示するだけなので、余計な情報は削ぎ落としているのだろう。

article

　記事。websiteをベースに、更新日時などのデータが追加できる。

property属性値 説明
article:published_time 公開日時
article:modified_time 最終更新日時
article:expiration_time 期限
article:author 著者名
article:section セクション（カテゴリ、ジャンルのことかな？）
article:tag 関連する語 
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:modified_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:expiration_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:author" content="著者名">
  <meta property="article:section" content="セクション（カテゴリ？）">
  <meta property="article:tag" content="タグ1">
  <meta property="article:tag" content="タグ2">
  <meta property="article:tag" content="タグ3">
</head>

　OpenGraphのドキュメントによると、article:authorは著者の名前をあらわす文字列ではなくprofile型の配列だという。どうやって書けばいいのか。つまりはprofileメタデータが定義されたHTML文書のURLである。著者が複数人いるときは、それを複数の<meta>タグで書けばよい。

記事（https://example.com/content/article/2022-01-01/index.html）

<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <meta property="og:type" content="article">
  <meta property="article:author" content="https://example.com/profile-yamada.html">
  <meta property="article:author" content="https://example.com/profile-suzuki.html">
</head>

プロフィール（https://example.com/profile-yamada.html）

<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta property="og:type" content="profile">
  <meta property="profile:first_name" content="太郎">
  <meta property="profile:last_name" content="山田">
  <meta property="profile:username" content="識別子yamada">
  <meta property="profile:gender" content="male">
</head>

プロフィール（https://example.com/profile-suzuki.html）

<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta property="og:type" content="profile">
  <meta property="profile:first_name" content="一郎">
  <meta property="profile:last_name" content="鈴木">
  <meta property="profile:username" content="識別子suzuki">
  <meta property="profile:gender" content="male">
</head>

　けれどFacebookでは表示されないという。

　え、article:authorでURL先を参照してprofile:first_nameなどの詳細な情報をもってきてカッコよく表示してくれるんじゃないの？　君には失望した。きっとURL先を参照したら解析が大変で負荷がかかるため回避したいんだろうなぁ。

　その代わり<meta name="author" content="著者名">で定義した文字列が使われるのだとか。でも<meta>のほうはauthorをひとつしか書かないはず。creatorは複数書けるみたいだけど、著者であるauthorは一人のはず。まあ、私はボッチなので一人で十分だし？　つまり以下のように書くのが正解か。

記事（https://example.com/content/article/2022-01-01/index.html）

<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta property="og:type" content="profile">
  <meta property="article:author" content="https://example.com/profile-yamada.html">
  <meta name="author" content="山田太郎">
</head>

　ついでにプロフィールのほうにも<meta>を書いておけばいいよ。

プロフィール（https://example.com/profile-yamada.html）

<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta property="og:type" content="profile">
  <meta property="profile:first_name" content="太郎">
  <meta property="profile:last_name" content="山田">
  <meta property="profile:username" content="識別子yamada">
  <meta property="profile:gender" content="male">
  <meta name="author" content="山田太郎">
</head>

　さらに基本形の語彙も併用する。ついでに<meta name="">も含める。

記事（https://example.com/content/article/2022-01-01/index.html）

<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <meta name="author" content="著者名">
  <meta name="description" content="説明文。">

  <meta property="og:type" content="article">
  <meta property="og:title" content="タイトル">
  <meta property="og:url" content="https://some.jpg">
  <meta property="og:image" content="https://some.html">

  <meta property="og:description" content="説明文。">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:audio" content="https://some.mp3">
  <meta property="og:video" content="https://some.mp4">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:locale:alternate" content="en_US">
  <meta property="og:locale:alternate" content="en_GB">

  <meta property="article:published_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:modified_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:expiration_time" content="2022-01-01T00:00:00+09:00">
  <meta property="article:author" content="https://example.com/profile-yamada.html">
  <meta property="article:section" content="セクション（カテゴリ？）">
  <meta property="article:tag" content="タグ1">
  <meta property="article:tag" content="タグ2">
  <meta property="article:tag" content="タグ3">
</head>

プロフィール（https://example.com/profile-yamada.html）

<head prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
  <meta name="author" content="著者名">
  <meta name="description" content="説明文。">

  <meta property="og:type" content="profile">
  <meta property="og:title" content="山田太郎">
  <meta property="og:url" content="https://example.com/profile-yamada.html（このサイトのURL）">
  <meta property="og:image" content="https://yamada.html（山田太郎の顔写真）">

  <meta property="og:audio" content="https://yamada.mp3（山田の美声ボイス）">
  <meta property="og:video" content="https://yamada.mp4（山田のPV）">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:locale:alternate" content="en_US">
  <meta property="og:locale:alternate" content="en_GB">

  <meta property="profile:first_name" content="太郎">
  <meta property="profile:last_name" content="山田">
  <meta property="profile:username" content="識別子yamada">
  <meta property="profile:gender" content="male">
  <meta name="author" content="山田太郎">
</head>

　長い。でも使わない語彙もあるから削ればいい。article:expiration_timeやog:locale:alternate、og:audio、og:videoあたりは使う機会が少ないと思う。article:sectionもよくわからないし。それらは削ればいい。

　重複するデータ多くね？　DRYに書けないのはダサい。

重複データ HTML<meta name="" ...> OGP<meta property="" ...>
著者 <meta name="author" content="著者名">
<a rel="author" href="URL"></>		 <meta property="article:author" content="URL">
<meta property="article:author" content="著者名">
説明文 <meta name="description" content="説明文。"> <meta property="og:description" content="説明文。">
タイトル、サイト名 <title>記事タイトル - サイト名</title> <meta property="og:title" content="記事タイトル">
<meta property="og:site_name" content="サイト名">
キーワード <meta name="" content="">
<a rel="tag" href="URL">		 <meta property="article:tag" content="タグ1">
日時 <time datetime="2022-01-01T00:00:00+09:00" title="公開日">1月1日</time> <meta property="article:published_time" content="2022-01-01T00:00:00+09:00">

book

　本。出版した本を紹介するときに使う。

property属性値 説明
book:author 本の著者
book:isbn 本のISBN
book:release_date 出版日
book:tag 関連する語 
<head prefix="og: https://ogp.me/ns# book: https://ogp.me/ns/book#">
  <meta property="og:type" content="book">
  <meta name="author" content="山田太郎">
  <meta property="book:author" content="https://example.com/profile-yamada.html">
  <meta property="book:isbn" content="ISBN">
  <meta property="book:release_date" content="2022-01-01T00:00:00+09:00">
  <meta property="book:tag" content="関連">
  <meta property="book:tag" content="キーワード">
</head>

　ほんのタイトルや説明はog:title,og:descriptionで書く。表紙画像もog:imageで。

video.movie, video.tv_show, video.other

　動画。

型 説明
video.movie 映画
video.tv_show テレビ番組
video.other 映画でもテレビ番組でもない動画
property属性値 説明
video:actor 俳優
video:actor:role 役
video:director 監督
``video:writer 作家
video:duration 時間（秒）
video:release_date 公開日
video:tag 関連する語 
<head prefix="og: https://ogp.me/ns# video: https://ogp.me/ns/video#">
  <meta property="og:type" content="video.movie">
  <meta property="video:actor" content="俳優名">
  <meta property="video:actor:role" content="役名">
  <meta property="video:director" content="監督名">
  <meta property="video:writer" content="作家名">
  <meta property="video:duration" content="300">
  <meta property="video:release_date" content="2022-01-01T00:00:00+09:00">
  <meta property="video:tag" content="関連">
  <meta property="video:tag" content="キーワード">
</head>

　動画の型については以下３つがある。適切なものをひとつ選ぶこと。

  <meta property="og:type" content="video.movie">

  <meta property="og:type" content="video.tv_show">

  <meta property="og:type" content="video.other">

　俳優、監督、作家はすべてprofileをあらわすURL。ただ、article:authorの例をみると実際はURL先が参照されず<meta name="author">の値をみていた。著者はmeta要素のauthorがあるから代用できたが、actor,director,writerなんて無いぞ？　だったらもう、URLでなく文字列で彼らの名前を書いたほうがいいのでは？

　俳優、監督、作家は配列なので複数人書ける。このとき俳優だけは対応する役名を割り当てることができる。すぐ下に書くことで。

  <meta property="video:actor" content="俳優A">
  <meta property="video:actor:role" content="俳優Aの役名">
  <meta property="video:actor" content="俳優B">
  <meta property="video:actor:role" content="俳優Bの役名">

video.episode

　特定のテレビ番組video.tv_showに所属するひとつのエピソード。video.tv_showのプロパティに加えて、以下のプロパティが使える。

property属性値 説明
video:series このエピソードが所属するvideo.tv_showのURL？　番組名？ 
<head prefix="og: https://ogp.me/ns# video: https://ogp.me/ns/video#">
  <meta property="og:type" content="video.episode">
  <meta property="video:actor" content="俳優名">
  <meta property="video:actor:role" content="役名">
  <meta property="video:director" content="監督名">
  <meta property="video:writer" content="作家名">
  <meta property="video:duration" content="300">
  <meta property="video:release_date" content="2022-01-01T00:00:00+09:00">
  <meta property="video:tag" content="関連">
  <meta property="video:tag" content="キーワード">
  <meta property="video:series" content="https://example.com/tv-show-1.html">
</head>

　video:seriesはURLでいいのだろうか。やはりURLは参照されなくて、番組名を文字列で書くべきなのだろうか？

music.song

property属性値 説明
music:duration 曲の長さ（秒）
music:album 所属するアルバム
music:album:disc この曲が収録されているディスク
music:album:track この曲のトラック位置
music:musician 作曲者 
<head prefix="og: https://ogp.me/ns# music: https://ogp.me/ns/music#">
  <meta property="og:type" content="music.song">
  <meta property="music:duration" content="300">
  <meta property="music:album" content="https://example.com/album-1.html">
  <meta property="music:album:disc" content="1">
  <meta property="music:album:track" content="1">
  <meta property="music:musician" content="https://example.com/musician-1.html">
</head>

　気になったのは以下。

  • ディスクだのトラックだの、CD基準の語彙が古臭い
  • 関係者をあらわす語彙が足りない
    • 監督（プロデューサー）
    • 作詞家
    • 作曲者
    • 編集者（ミキサー）
    • プレイヤー名（グループ名）
    • 歌手名（シンガー、ボーカル）
    • ギタリスト名
    • ドラマー名
    • キーボード名
  • 歌詞をあらわす語彙がほしい（著作権的にNGか？）
  • URL先は参照されるのか？

　もし私ならvideoに似せて以下のようにrole語彙をつくる。こんな語彙はないので注意。

  <meta property="music:producer" content="山中さわ子">
  <meta property="music:player:group:name" content="放課後ティータイム">
  <meta property="music:player" content="平沢唯">
  <meta property="music:player:role" content="ボーカル">
  <meta property="music:player:role" content="リードギター">
  <meta property="music:player" content="秋山澪">
  <meta property="music:player:role" content="ボーカル">
  <meta property="music:player:role" content="ベース">
  <meta property="music:player" content="中野梓">
  <meta property="music:player:role" content="サイドギター">
  <meta property="music:player" content="田井中律">
  <meta property="music:player:role" content="ドラム">
  <meta property="music:player" content="琴吹紬">
  <meta property="music:player:role" content="キーボード">
  • ゆい＝アホの子うんたんカスタネット
  • ムギ＝おっとりたくあん眉ピアニスト
  • みお＝人見知りベーシスト
  • リツ＝大雑把ドラマー部長
  • あずにゃん＝マジメ系にゃんこ

　けいおん。それはブラック企業が台頭しワーキングプアが本格化した24時間働けますか時代のなかに燦然とあらわれた神の救済。疲れきった我々を癒やしてくれたのはけいおんのほっこりアニメだった。

　実際に曲を作ってるのがすごい。マクロス7「俺の歌を聞けぇ！」なバサラ以来の衝撃。けいおん！はマクロスフロンティアを生み出す流れを作ったと思っている。

　とくに「ふわふわ時間（タイム）」と「Don’t say lazy 」が好き。「ごはんはおかず」のアホさもいい。なんも考えずに済んで救われる。あ゛ぁ゛〜心がふわふわするんじゃ〜（＊´ω｀＊）

music.album

property属性値 説明
music:song music.songを定義したURLの配列
music:song:disc 全ディスク枚数
music:song:track 全トラック数
music:musician 歌手
music:release_date 公開日 
<head prefix="og: https://ogp.me/ns# music: https://ogp.me/ns/music#">
  <meta property="og:type" content="music.album">
  <meta property="music:song" content="https://example.com/song-1.html">
  <meta property="music:song:disc" content="1">
  <meta property="music:song:track" content="1">
  <meta property="music:song" content="https://example.com/song-2.html">
  <meta property="music:song:disc" content="1">
  <meta property="music:song:track" content="2">
  <meta property="music:musician" content="https://example.com/musician-1.html">
  <meta property="music:release_date" content="2022-01-01T00:00:00+09:00">
</head>

　OpenGraphのサイトには書いてないけど、music:songって配列では？　アルバムって曲が複数入っている奴のことだよね？　あとdisc,trackの説明がわかりにくい。アルバムに含まれた全ての数って認識であってるよね？

　music.song.durationがないのはおかしくね？　楽曲ごとに曲の長さがほしい。

music.playlist

property属性値 説明
music:song music.songを定義したURL
music:song:disc 説明なし。何に使うの？
music:song:track 説明なし。何に使うの？
music:creator プレイリスト製作者 
<head prefix="og: https://ogp.me/ns# music: https://ogp.me/ns/music#">
  <meta property="og:type" content="music.playlist">
  <meta property="music:creator" content="https://example.com/profile-1.html">
  <meta property="music:song" content="https://example.com/song-1.html">
  <meta property="music:song:disc" content="1">
  <meta property="music:song:track" content="1">
  <meta property="music:song" content="https://example.com/song-2.html">
  <meta property="music:song:disc" content="1">
  <meta property="music:song:track" content="2">
</head>

　music.song.durationがないのはおかしくね？　楽曲ごとに曲の長さがほしい。

music.radio_station

property属性値 説明
music:creator ラジオステーションの製作者 
<head prefix="og: https://ogp.me/ns# music: https://ogp.me/ns/music#">
  <meta property="og:type" content="music.radio_station">
  <meta property="music:creator" content="https://example.com/profile-1.html">
</head>

　たぶんポッドキャスト的なやつのことだろう。内容については共通のog:title,og:descriptionなどを使えばいい。

おまけ

　画像、音声、動画には詳細情報を付与できる。

property属性値 説明
og:image:url 画像ファイルURL
og:image:secure_url HTTPS時のURL
og:image:type MIMEタイプ
og:image:width 画像の幅
og:image:height 画像の高さ
og:image:alt 説明テキスト
property属性値 説明
og:video 動画ファイルURL
og:video:secure_url HTTPS時のURL
og:video:type MIMEタイプ
og:video:width 動画の幅
``og:video:height 動画の高さ
property属性値 説明
og:audio 音声ファイルURL
og:audio:secure_url HTTPS時のURL
og:audio:type MIMEタイプ
  • 今はHTTPでなくHTTPSが基本なのでsecure_urlは古い感じが否めない

所感

　基本形とarticleを把握していればOK。それ以外の型は色々と実用性に疑問がある。