へっぽこ実験ブログ

OGPってなんだってばよ

投稿日: 投稿者: mima3
Table of Content

OGPってなんだってばよ

OGPがなんだかわからなかったので調べてみました。OGPとははOpen Graph protocolの略で、以下に仕様が公開されています。
https://ogp.me/

OGPを使用することで、Webページをソーシャルグラフのオブジェクトにすることができます。

たとえば、Twitterなどで、URLをつけてツイートすると以下のようにカードが表示されるURLがあります。

これは、そのURLのWebページにOGPのメタデータが設定されており、Twitterはそのメタデータを読み取りカードを作成しています。

また実際にTwitterを投稿せずとも下記のサイトにURLを張り付けることでどのようなカードが作成されるかを確認することが可能です。
https://cards-dev.twitter.com/validator

OGPのメタデータの例

たとえば、先の朝日新聞のURLは以下のようなOGPのメタデータを利用しています。

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

略

<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="山形）猫駅長しょこら、ＪＲがお墨付き　制帽プレゼント：朝日新聞デジタル">
<meta property="og:url" content="https://www.asahi.com/articles/ASMDM3Q6FMDMUZHB003.html">
<!--引用可能写真＝4-->
<meta property="og:image" content="https://www.asahicom.jp/articles/images/c_AS20191219003081_comm.jpg">
<meta property="og:image:height" content="314">
<meta property="og:image:width" content="600">
<meta property="og:site_name" content="朝日新聞デジタル">
<meta property="og:type" content="article">
<meta property="og:description" content="　山形県川西町のＪＲ米坂線・羽前小松駅のネコ駅長「しょこら」に１９日、ＪＲ東日本が観光活性化の期待を込めて、市販されている駅長の制帽のミニチュアを贈った。駅を運営しているＮＰＯ法人は今後、イベントなど…">
<meta property="article:author" content="https://www.facebook.com/asahicom/">
<meta property="article:publisher" content="https://www.facebook.com/asahicom/"

この中で必須のメタデータ以下の通りです。

メタデータ 説明
og:title グラフ内に表示すべきオブジェクトのタイトル
og:type オブジェクトのタイプ。設定できる値はObject Typesのに記載されている。※朝日新聞の場合はarticleを指定している
og:url グラフの永続的なIDとして用いられるオブジェクトの基準URL
og:image グラフ内にオブジェクトを表示するときの画像のURL。og:image:width,og:image:heighなどのオプションを付けることも可能

自分でHTMLを作成する場合は、上記の４つを設定します。
og:typeはarticleかwebsiteがよく使われていそうな感じでした。

WordPressで使用する方法

以下のようなプラグインを導入すれば埋め込んでくれます。

Open Graph Protocol Framework

https://wordpress.org/plugins/open-graph-protocol-framework/

シンプルなプラグインです。
プラグインをインストールして有効化するだけで、基本的なogpのメタデータがWordPressの記事に埋め込まれます。
og:image に使用される画像はアイキャッチ画像になります。

All in one SEO Pack

https://wordpress.org/plugins/all-in-one-seo-pack/

WordPressのSEO対策をするためのツールが様々はいっているプラグインです。
機能管理から「ソーシャルメディア」を有効にすることでOGPの設定が行えるようになります。
og:image に使用する画像を細かくカスタマイズすることができます。