はじめに

OGP の設定について調べたので簡単にメモ。

調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。

TL;DR

  • <head> に prefix を付与
  • <meta property="og:xxx" content="xxx> で各要素を指定
  • Twitter は <meta name="twitter:xxx" content="xxx"> で指定
  • Facebook は <meta property="fb:xxx" content="xxx"> で指定
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. OGP とは
    2. 設定イメージ
    3. 設定例
      1. プレビュー
  4. まとめ
  5. その他・メモ
  6. 参考文献

詳細

OGP とは

Open Graph Protocol の略称で OGP。

公式サイト: The Open Graph protocol

OGP を設定していると、SNS でのシェア時に画像や任意の解説などリッチな情報を表示できる。

設定イメージ

<head> 内にこんな感じで指定すると良い。

1
2
3
4
5
6
7
8
9
10
11
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
  <!-- OGP(Common) -->
  <meta property="og:url" content="https://your.web.site/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="ページタイトル" />
  <meta property="og:description" content="サイトの説明" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:image" content="https://your.web.site/image.png" />
  <!-- OGP(Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

設定例

tweet.js loader で実際に指定したものがこちら。

1
2
3
4
5
6
7
8
9
10
11
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
  <!-- OGP(Common) -->
  <meta property="og:url" content="https://17number.github.io/tweet-js-loader/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="tweet.js loader" />
  <meta property="og:description" content="tweet.js を読み込んで過去のツイート表示や tweets.csv への書き出しが可能なサイト" />
  <meta property="og:site_name" content="tweet.js loader" />
  <meta property="og:image" content="https://17number.github.io/tweet-js-loader/bluebird.png" />
  <!-- OGP(Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

tweet.js loader については以下の記事を参照。

プレビュー

Card Validator でプレビューを確認。

画像はいらすとやの 青い鳥のイラスト を拝借。

まとめ

  • <head> に prefix を付与
  • <meta property="og:xxx" content="xxx> で各要素を指定
  • Twitter は <meta name="twitter:xxx" content="xxx"> で指定
  • Facebook は <meta property="fb:xxx" content="xxx"> で指定

その他・メモ

Facebook の設定は何もしてないので、試すことがあれば別途追記する。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list