HTML OGPの基本的な設定方法

HTML で OGP の基本的な設定方法を紹介します。
OGP(Open Graph protocol)は、Facebook などの SNS で投稿がシェアされた時に概要を表示するための meta 情報の事です。

基本的な内容


<!-- ogp -->
<meta property="og:type" content="article" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ディスクリプション" />
<meta property="og:image" content="">
<meta property="og:url" content="http://hirashimatakumi.com/" />
<meta property="og:site_name" content="Takumi Hirashima Artworks" />
<meta property="article:author" content="https://www.facebook.com/xxxnamexxx">
<meta property="fb:admins" content="123456789" />
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@xxxxx" />

指定内容の説明

og:type について


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

ウェブサイトのトップページ(ホーム)なら “website”、下層ページやブログの記事ページなら “article” を指定します。

og:title について


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

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

og:description について


<meta property="og:description" content="ディスクリプション" />

通常の “description” と同様にサイトの概要を指定します。SEO を考慮するならページ毎に違った文章を指定しましょう。

og:image について


<meta property="og:image" content="">

最小でも 1200 x 630 の画像を指定しましょう。

og:url について


<meta property="og:url" content="http://hirashimatakumi.com/" />

サイトURLを指定します。

og:site_name について


<meta property="og:site_name" content="Takumi Hirashima Artworks" />

サイトの名前を指定します。

property=”article:author” について


<meta property="article:author" content="https://www.facebook.com/xxxnamexxx">

Facebookページや個人アカウントとの連携を強めるための著者情報を記載します。個人アカウントであれば “article:author” を指定。企業アカウントなどは “article:publisher” をしていすればよいでしょう。”content” には Facebook ページ URL を指定します。

fb:admins について


<meta property="fb:admins" content="123456789" />

管理者情報の指定のために “fb:admins” 又は “fb:app_id” を指定します。

Twitter Card の指定

OGP を設定していれば、”twitter:card” と “twitter:site” の指定だけで Twitter Card を設定できます。

twitter:card

Twitter Cards には表示内容に合わせてスタイルを変更することができます。
シンプルに表示するのであれば “summary” や “summary_large_image” で十分ですが、そのほかのスタイルを適用する場合は、専用の META タグを追加する必要があります。


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

Summary Card:標準のカード。タイトル、説明、サムネイル ​​、およびTwitterアカウントを表示します。
Summary Card の指定には “twitter:title(og:title で代用可)” “twitter:description(og:description で代用可)” が必須です。


<meta name="twitter:card" content="summary_large_image" />

Summary Card with Large Image:サマリーカードに似ていますが、こちらの方が画像が目立つようになっています。
Summary Card with Large Image の指定には “twitter:title(og:title で代用可)” “twitter:description(og:description で代用可)” が必須です。

twitter:site


<meta name="twitter:site" content="@xxxxx" />

サイトに関連する公式の Twitter アカウントや管理者の Twitter ID を指定します。

Twitter Card の設定手順

Twitter Card の表示には、カードの設定とは別に認証手続きが必要になります。手順は以下の通りです。

1.実装するカードタイプを選択
2.適切なメタタグをページに追加
3.検証ツールでURLを実行して申請
4.承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
5.Twitterカードアナリティクスを使用して効果を測定

引用元:Twitterカード

まとめ

HTML で OGP の基本的な設定方法を紹介しました。

スポンサーリンク

私が続けて読みたい関連記事