HTML

HTML OGPの基本的な設定方法

HTML の meta 要素である 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(Open Graph protocol)は、Facebook などの SNS で投稿がシェアされた時に概要を表示するための meta 情報の事です。

OGP の設定内容の説明

OGP の基本的な設定内容は次の通りです。

<!-- 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:image:alt" content="">
<meta property="og:url" content="https://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" />

Twitter Card の設定は必要がなければ、適宜削除してください。

OGP の設定内容の説明

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

og:type について

サイトのタイプを指定します。
トップページ(ホーム)なら website を指定します。

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

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

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

og:title について

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

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

サイトの名前は別で設定する項目があります。

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">

fb:admins について

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

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

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

Twitter Card の設定方法

OGP を設定していれば twitter:cardtwitter:site の指定だけでも Twitter Card を設定できます。

twitter:card について

Twitter Cards は、表示内容に合わせてスタイルを変更することができます。
シンプルに表示するのであれば summarysummary_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 の meta 要素である OGP の基本的な設定方法を紹介しました。
設定しないよりかは設定するほうが良いので、OGPは是非設定しましょう。

合わせて読みたい関連記事