OGP タグの設定方法

メタデータ OGP タグの設定方法を紹介します。
例えば、サイトがシェアされた時に画像やタイトル、説明文を表示したい時ときに便利な方法です。

  1. OGP とは?
  2. OGP タグの設定方法
  3. OGP タグの設定内容の説明
    1. og:type の設定方法
    2. og:title について
    3. og:description について
    4. og:image について
    5. og:image:alt について
    6. og:url について
    7. og:site_name について
    8. property=”article:author” について
    9. fb:admins について
  4. Twitter Card の設定方法
    1. twitter:card について
    2. twitter:site について
    3. Twitter Card の設定手順

OGP とは?

OGPとは、Facebook や Twitter などの SNS サービスで、投稿がシェアされたときにその投稿に関する情報(例えば、画像やページタイトル、ページ説明文など)を持つことができるメタデータプロトコルの事です。
Open Graph protocol(オープン・グラフ・プロトコル)略して OGP(オージーピー)と呼ばれています。

OGP タグの設定方法

基本的な OGP タグの設定方法を紹介します。
例えば Facebook や Twitter のシェアに対応した OGP を設定したいときは、次のコードを head タグ内に追加します。

<!-- meta -->
<meta name="description" content="ディスクリプション"/>
<!-- ogp -->
<meta property="og:type" content="website or article" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ディスクリプション" />
<meta property="og:image" content="画像URL(絶対パス)">
<meta property="og:image:alt" content="画像alt">
<meta property="og:url" content="サイトURL" />
<meta property="og:site_name" content="サイトタイトル" />
<!-- facebook -->
<meta property="article:author" content="https://www.facebook.com/xxxnamexxx">
<meta property="fb:admins" content="123456789" />
<!-- twitter card -->
<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:url" content="サイトURL" />
<meta name="twitter:title" content="ページタイトル"/>
<meta name="twitter:description" content="ディスクリプション" />
<meta name="twitter:image:src" content="画像URL(絶対パス)" />
<meta name="twitter:site" content="サイトタイトル" />

twitter 用の設定は og タグの指定があれば、twitter:card と twitter:site のだけでもを設定できます。

<!-- meta -->
<meta name="description" content="ディスクリプション"/>
<!-- ogp -->
<meta property="og:type" content="website or article" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ディスクリプション" />
<meta property="og:image" content="画像URL(絶対パス)">
<meta property="og:image:alt" content="画像alt">
<meta property="og:url" content="サイトURL" />
<meta property="og:site_name" content="サイトタイトル" />
<!-- facebook -->
<meta property="article:author" content="https://www.facebook.com/xxxnamexxx">
<meta property="fb:admins" content="123456789" />
<!-- twitter card -->
<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="サイトタイトル" />

メタタグは head タグ内に記載がないと動かないので注意してください。

OGP タグの設定内容の説明

OGP の設定内容を詳しく紹介します。

og:type の設定方法

og:type はサイトのタイプを指定します。
例えば、トップページ(ホーム)なら website を指定します。

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

下層ページやブログの記事ページなら article を指定します。

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

WordPress で指定する場合は is_front_page() などを使って、次のコードのように websitearticle を切り替えましょう。

<meta property="og:type" content="<?php if ( is_front_page() ) { echo 'website'; } else {echo 'article';} ?>" />

og:title について

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

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

サイトの名前は別で og:site_name として指定する場所があります。

og:description について

通常の description と同様に、サイトの説明文を指定します。

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

SEO 対策のためにページ毎に固有の文章を指定しましょう。

og:image について

ページを象徴する画像を指定します。

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

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

og:image:alt について

og:image を設定する場合は og:image:alt を合わせて設定しましょう。

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

og:url について

ページ URL を指定します。

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

og:site_name について

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

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

ページの名前と間違いやすいので気をつけてください。

property=”article:author” について

Facebook ページの個人・企業アカウントと紐づけるための著者情報を指定します。
個人アカウントであれば article:author を指定します。
企業アカウントなどは article:publisher を指定します。
content には Facebook ページの URL を指定します。

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

Webサイトに紐づく Facebook ページがない場合はこの項目を削除してください。

fb:admins について

Facebook の管理者情報を紐づけるために fb:admins 又は fb:app_id を指定します。

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

または

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

両方あればどちらも追加。

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

Facebook の管理者情報を用意できない場合は、この項目を削除してください。

Twitter Card の設定方法

先に紹介した OGP を設定していれば、twitter:cardtwitter:site の指定だけでも Twitter Card を設定できます。
Twitter Card の情報が正しく設定されているかを確かめるには Card validator で確認することができます。

twitter:card について

Twitter Cards は表示内容に合わせてスタイルを変更することができます。
ここでは一般的な summarysummary_large_image を紹介します。

Summary Card

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

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

Summary Card with Large Image

Summary Card with Large Image は、標準のカードに比べて画像が大きく目立つようになっています。
Summary Card with Large Image の指定には “twitter:title(og:title で代用可)” “twitter:description(og:description で代用可)” が必須です。

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

twitter:site について

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

Webサイトに紐づく公式の Twitter アカウントやサイト管理者の Twitter ID を指定します。

Twitter Card の設定手順

Twitter Card の表示には、カードの種類によっては次のような認証手続きが必要な場合があります。

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

引用元:Twitterカード

まとめ

meta 要素 OGP の基本的な設定方法を紹介しました。
シェアできるWebページを作るためには必須の要素なので、仕組みを理解して正しく実装しましょう。