はじめに
OGPってなんだろうと思い、調べてみたので自分なりまとめました。
（下書きにずっと放置されていたので、とりあえず投稿しておきます）
OGPについて
OGPとは？
OGPはOpen Graph Protcolの略。
OGPを設定しておくことで、URLが添付された際に設定したタイトルやURL、画像、詳細文などが表示されます。
↓これ
リンクだけのものと比べ、どんなサイトなのかイメージがつきやすいです。
確かに、SNSでリンクだけのものよりOGPが設定されているサイトの方がアクセスしてみようと思えます。
使用するには
OGPを使うには、サイトにメタデータを追加する必要があります。
メタデータとは、本体であるデータに関する情報が書かれたデータのこと。
OGPを使用する際、全てのページに必要なプロパティが以下の4つ。
- og:title オブジェクトのタイトル
- og:type オブジェクトのタイプ
- og:image オブジェクトの画像URL
- og:url オブジェクトの正規URL
また、headタグに以下のprefixを指定する必要があるようです。
<html prefix="og: https://ogp.me/ns#">
上記のもの以外にも様々なメタデータを指定することができます。
title,image,urlあたりは想像つきますがog:type（オブジェクトのタイプ）はどんなものがあるのかイメージがつかなかったので実際に見てみます。
オブジェクトのタイプ og:type
ページの種類を指定するもの。いくつかの例を以下に記載します。
meta property="og:type" content="website"
Webサイトのトップページ
例）The Open Graph protocolのサイト
※ちなみにここにオブジェクトのタイプについてまとまっているので、詳しく知りたい方はこちらをみてください。
meta property="og:type" content="article"
記事ページ
例）Qiitaの投稿記事
※良かったら是非読んでみてください！
meta property="og:type" content="product"
製品の紹介ページ
例）AppleWatchの購入ページ
このように用途によって、使い分けているようです。
実際に見てみる
meta部分で指定した値が、以下の画像のように表示されています。
画像は、OGPの設定をしているサイトURLをTwitterに添付した際のものです。
まとめ
今回はOGPについてざっくりでありますがまとめてみました。
今まで特に気にしていなかったのですが、こうやって設定しているんだなぁと思いました。
思いのほか、簡単に設定できるんだなと思いました。もしWebサイトなどを作る際は設定しようと思います。
以上。