こんにちは。

今日は「OGP」について書こうと思います。

というのも、最近headタグの中にOGPという項目があるのに気付き（今更！）、これはどんな役割があるのか調べようと思ったんですよね。

ちなみに例えばはこんな感じです。（あくまでイメージ）

<head>
  <meta property="og:title" content="アクセス ｜ 株式会社ふたっぱ">
  <meta property="og:type" content="website">
  <meta property="og:description" content="株式会社ふたっぱは大阪でWEBサイト制作・WEBコンテンツ制作をしている集団です。">
  <meta property="og:url" content="http://www.futappa.jp/access/">
  <meta property="og:image" content="シェアされた時のサムネイル画像のURL">
  <meta property="og:site_name" content="株式会社ふたっぱ">
</head>

ではOGPとはなんぞや、を調べていきます！

OGPとは

OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素とのこと。

Twitterやブログなどでシェアした時に表示される内容のことなんですね！

そしてユーザーに対してページの内容を詳しく伝えることができると。フムフム。

試しに弊社のURLを貼ってみると・・・

株式会社ふたっぱ

株式会社ふたっぱは大阪でWEBサイト制作・WEBコンテンツ制作をしている集団です。

OGPで設定しているサイト名、説明文、サムネ画像、URLが表示されていることが分かります！

では、内容を詳しくみていきましょう！

各項目
まとめ

各項目

OGPを使用することを宣言するタグ

まず始めにページでOGPを使用することを宣言するためにhead要素にprefix属性を追加しないといけないみたいです。
TOPページだと「website」、TOP以外のページだと「article」を入力。

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

ページタイトル（og:title）

ページのタイトル。一般的には「サイトの○○ページ」と同じ内容を設定する。

ページの種類（og:type）

ページの種類。このタイプを設定することによりSNS上での表示形式が変わる。

トップページの場合「website」、下層ページなどは「article」。

ページの説明文（og:description）

ページの説明文。

ページURL（og:url）

OGPを設定するページのURLを指定する。

サムネイル画像のURL（og:image）

SNS上でシェアされた時に表示させたい画像のURLを指定する。

絶対パスで指定する。

サイト名（og:site_name）

サイト名を記述する。（会社名など）

サイト名やブランド情報は「og:title」ではなく、この「og:site_neme」に設定する。

まとめ

今回はOGPについてまとめてみました。

今日は時間がなくて詳細は調べられませんでしたが奥が深そうなのでまた調べようと思います！

では今日はここまで〜〜