LoginSignup
8

More than 1 year has passed since last update.

OGP設定方法

Last updated at Posted at 2020-06-07

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【HTML】OGPチートシート | コレワカ

OGPとは

Open Graph Protcolの略で、
TwitterやFacebookなどのSNS上でWebページを伝えるためのプロトコルです。
TwitterやFacebookでリンクがシェアされた時に、サムネイルや概要などが表示されて、
クリック率を上げることができます。
OGP公式

OGPコード

コード全容

今回設定するコードの全容です。

HTML
<head prefix="og: http://ogp.me/ns#">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページ説明">
  <meta property="og:url" content="ページURL">
  <meta property="og:type" content="article">
  <meta property="og:image" content="画像のURL">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@twitterid">
  <meta name="fb:app_id" content="数字15桁">
</head>

prefix設定

headタグにprefix属性を追加します。
OGPを使うことを宣言するためのタグで、無くても機能しますが、
公式のガイドラインでは、記述することを推奨しています。

HTML
<head prefix="og: http://ogp.me/ns#">
  <!-- OGPの記述 -->
</head>

og:site_name

サイト名を指定します。

HTML
<meta property="og:site_name" content="サイト名">

og:title

ページタイトルを指定します。

HTML
<meta property="og:title" content="ページタイトル">

og:description

ページの概要を指定します。

HTML
<meta property="og:description" content="ページ説明">

og:url

ページのURLを指定します。

HTML
<meta property="og:url" content="ページURL">

og:type

ページのタイプを指定します。
よく使うのは、「website」と「article」で、
「website」はトップページ、「article」はその他のページで使い分けすれば良いでしょう。

HTML
<meta property="og:type" content="article">

og:image

ページのアイキャッチ画像を指定します。

HTML
<meta property="og:image" content="画像のURL">

twitter:card

Twitterカードの種類を指定します。
よく使うのは、「summary」と「summary_large_image」です。

HTML
<meta name="twitter:card" content="summary">

「summary」だと下記のように表示されます。
summary.png

「summary_large_image」だと下記のように表示されます。
summary_large_image.png
他にもアプリ配布用の「app」と動画用の「player」がありますが今回は割愛させていただきます。

twitter:site

TwitterIDを指定します。
TwitterIDは、プロフィールの名前の下の@〇〇がプロフィールです。
twitter_id.png

HTML
<meta name="twitter:site" content="@twitterid">

fb:app_id

Facebookシェアのインプレッション取得設定を指定します。
fb:app_idの取得方法は、Facebook for Developers にアクセスし、「新しいアプリを追加」から情報を追加して、「アプリID」が取得できます。

HTML
<meta name="fb:app_id" content="数字15桁">

OGP確認方法

下記のサイトを使って、確認しましょう。
使い方は簡単で、確認したいWebページのURLを入力して、デバッグボタンをクリックするだけです。
思った通りに表示されない場合は、どこか間違っている部分がありますので、確認修正してください。

Card Validator | Twitter
シェアデバッガー | Facebook

まとめ

OGPをつけることでシェアされた時の目立ち方が違い、クリック率に影響してきます。
なんと言っても、見た目がカッコよくなります(^^)
Webサイトを作るのであれば、正しくOGPを記述できるようになっておくと良いでしょう。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです!
フォローも是非お願い致します(^^)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8