OGP タグの設定方法
最終更新日 - 公開日 2016.03.03
by
メタデータ OGP タグの設定方法を紹介します。
例えば、サイトがシェアされた時に画像やタイトル、説明文を表示したい時ときに便利な方法です。
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() などを使って、次のコードのように website
と article
を切り替えましょう。
<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:card
と twitter:site
の指定だけでも Twitter Card を設定できます。
Twitter Card の情報が正しく設定されているかを確かめるには Card validator で確認することができます。
twitter:card について
Twitter Cards は表示内容に合わせてスタイルを変更することができます。
ここでは一般的な summary
と summary_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ページを作るためには必須の要素なので、仕組みを理解して正しく実装しましょう。