この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【HTML】OGPチートシート | コレワカ
OGPとは
Open Graph Protcolの略で、
TwitterやFacebookなどのSNS上でWebページを伝えるためのプロトコルです。
TwitterやFacebookでリンクがシェアされた時に、サムネイルや概要などが表示されて、
クリック率を上げることができます。
OGP公式
OGPコード
コード全容
今回設定するコードの全容です。
<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を使うことを宣言するためのタグで、無くても機能しますが、
公式のガイドラインでは、記述することを推奨しています。
<head prefix="og: http://ogp.me/ns#">
<!-- OGPの記述 -->
</head>
og:site_name
サイト名を指定します。
<meta property="og:site_name" content="サイト名">
og:title
ページタイトルを指定します。
<meta property="og:title" content="ページタイトル">
og:description
ページの概要を指定します。
<meta property="og:description" content="ページ説明">
og:url
ページのURLを指定します。
<meta property="og:url" content="ページURL">
og:type
ページのタイプを指定します。
よく使うのは、「website」と「article」で、
「website」はトップページ、「article」はその他のページで使い分けすれば良いでしょう。
<meta property="og:type" content="article">
og:image
ページのアイキャッチ画像を指定します。
<meta property="og:image" content="画像のURL">
twitter:card
Twitterカードの種類を指定します。
よく使うのは、「summary」と「summary_large_image」です。
<meta name="twitter:card" content="summary">
「summary」だと下記のように表示されます。
「summary_large_image」だと下記のように表示されます。
他にもアプリ配布用の「app」と動画用の「player」がありますが今回は割愛させていただきます。
twitter:site
TwitterIDを指定します。
TwitterIDは、プロフィールの名前の下の@〇〇がプロフィールです。
<meta name="twitter:site" content="@twitterid">
fb:app_id
Facebookシェアのインプレッション取得設定を指定します。
fb:app_idの取得方法は、Facebook for Developers にアクセスし、「新しいアプリを追加」から情報を追加して、「アプリID」が取得できます。
<meta name="fb:app_id" content="数字15桁">
OGP確認方法
下記のサイトを使って、確認しましょう。
使い方は簡単で、確認したいWebページのURLを入力して、デバッグボタンをクリックするだけです。
思った通りに表示されない場合は、どこか間違っている部分がありますので、確認修正してください。
Card Validator | Twitter
シェアデバッガー | Facebook
まとめ
OGPをつけることでシェアされた時の目立ち方が違い、クリック率に影響してきます。
なんと言っても、見た目がカッコよくなります(^^)
Webサイトを作るのであれば、正しくOGPを記述できるようになっておくと良いでしょう。
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)