サイトにOGPを設定する

更新情報

25/4/15　「OGPの取得およびリンクカードの表示について」項目を追加しました

OGP(Open Graph Protocol)を設定する方法について解説しています。

各種SNSやブログサービス等でURLを貼り付けた際に、そのURLのタイトルや概要、サムネイルなどが表示されますが（いわゆるリンクカードと呼ばれるものです）、これはリンク先のサイトがOGPを設定していて、URLを貼り付けた側のサイトがその情報を読み取りにいき、表示しています。この「サイト情報の読み取り」に利用されるのがOGPです。

OGPの構造

OGPは<head></head>の中でmetaタグを使用して設定します。

html

<head prefix="og: https://ogp.me/ns#">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ページ言語">
  <meta property="og:image" content="サムネイル（アイキャッチ）画像URL">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページ説明文">
  <meta property="og:url" content="ページURL">
  <meta property="og:type" content="ページの種類">
  <!-- 以下はTwitterカードの設定 -->
  <meta name="twitter:card" content="サムネイル（アイキャッチ）画像の大きさ">
</head>

<meta property="og:~" content="">が基本の形です。og:のあとに各値を続けて指定します。
prefix="og: https://ogp.me/ns#"はOGPを利用するという宣言です。記述しなくても構いませんが、厳格さを求めるのであれば記述しておくとよいです。また、<head>ではなく<html>タグに記述しても構いません。prefixの指定では、og:のあとに「半角スペース」をひとつ空けてURLを記述します。

<meta property="twitter:~" content="">はX(Twitter)独自の仕様で、「Twitterカード」と呼ばれるものです。記述がなければog:~の中身で代用されますが、この記述があると、X(Twitter)ではすこし表示のされ方やリンクが変わります（後述します）

以下は当サイトのトップページのOGP設定です。

html

<head>
  <meta property="og:site_name" content="Parts &amp; Tips">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:image" content="https://parts-tips.com/images/og.png">
  <meta property="og:title" content="Parts &amp; Tips">
  <meta property="og:description" content="HTML/CSSのコードサンプルやサイト制作に関する情報などを発信しています">
  <meta property="og:url" content="https://parts-tips.com/">
  <meta property="og:type" content="website">
  <meta property="twitter:card" content="summary_large_image">
</head>

以下のように表示されます（Blueskyでの表示です）

BlueskyでのParts & TipsのOGP表示

補足

Facebookにも独自のfb:app_idとプロパティが用意されており、「アプリID」と呼ばれるものを取得して利用しますが、本記事では説明を割愛します。

html

<meta property="fb:app_id" content="アプリID">

各部分の解説

og:の値について解説しています。ここで取り上げるもの以外にもいくつかありますが、最低限必要なもののみ解説しています。

og:site_name

ページが属しているサイト名を指定します。
<や&など一部の記号が含まれる場合は、エスケープ処理することをおすすめします（こちらの記事をご参考ください）

og:locale

ページの内容が書かれている言語（メインのもの）を指定します。初期値はen_USなので、日本語ページ（サイト）であればcontentの値はja_JPにします。
複数の言語に対応している場合は、og:locale:alternateを使用します。

html

<meta property="og:locale:alternate" content="ja_JP">
<meta property="og:locale:alternate" content="en_US">

og:image

表示するサムネイル（アイキャッチ）画像URLを指定します。

作成する画像のサイズは横長で「1200px×630px(1.91:1)」を推奨します。また、重要な文字などあまり切れてほしくないものは、630px×630pxの正方形の中に収めておくとよいです。
画像の容量はあまり重たくなりすぎないように注意が必要です。おおむねのサイトはpngやjpg形式で指定されているようです。

og:title

ページのタイトルを指定します。サイトトップページの場合は、og:site_nameと同じものを指定します。
og:site_name同様、<や&など一部の記号が含まれる場合は、エスケープ処理することをおすすめします。

og:description

ページの概要文を指定します。おおむね100文字程度指定しておくといいかと思います。

og:url

ページのURLを指定します。

og:type

ページの種類を指定します。
一般的なサイトであれば、websiteあるいはarticleを指定します（ブログサイトの場合も同様）
この分け方は少しややこしいですが、

トップページやコンテンツのトップページ（ブログのカテゴリ一覧など）単体の個別ページはwebsite
ブログ記事や各イラストのページはarticle

という分け方でよいとおもいます。たとえば次のようなサイト構成の場合、og:type指定は以下のようになります。

トップページ（/index.html）：website
アバウトページ（/about/index.html）：website
リンクページ（/link/index.html）：website
ブログトップページ（/blog/index.html）：website
- カテゴリ一覧ページ（/blog/category/index.html）：website
- 記事一覧ページ（/blog/article/id.html）：article

補足

websiteやarticle以外にも指定できる値があります。詳細は以下もご参考ください。

Twitterカードの解説

twitter:title twitter:description twitter:imageはog:と同じため割愛します。なお、X(Twitter)はog:の内容も解釈（（代用）するため、重複するものについてはtwitter:~で再度の設定は不要です。
ここで取り上げるもの以外にもいくつかありますが、最低限のもののみ解説しています。

twitter:card

表示するカードタイプを指定します。指定できるのは以下の4つです。

summary（初期値）
summary_large_image
player
app

初期値はsummaryが設定されており、これはX(Twitter)でカードが表示される際、サムネイル画像を1:1の比率（正方形）で表示します。ページタイトルや概要文と横並びで表示されるコンパクトなタイプです。
summary_large_imageは上記当サイトでの表示例のように、ページタイトルなどテキストの上部に画像を大きく表示します。
リンクカードをクリックすると記事に飛ばすのあれば、上記どちらかを指定します。

playerはリンクカードをクリックすると、YouTubeなど対応する動画が再生されます。

appはリンクカードをクリックすると、Google Play StoreやApp Storeのアプリのインストール画面を表示します。
説明の詳細は省きますが、アプリカードの利用にはX(Twitter)の広告用アカウントの作成と各ストアでアプリが公開されている必要があります。

補足

プレーヤーカードのサンプルがGitHubの以下リポジトリで公開されているので、ご参考ください。

xdevplatform/cards-player-samples

サンプルでは記事（サンプルではplayer/page.html）とは別に動画だけのページ（同様にplayer/container.html）を作成し、記事のOGPtwitter:playerに動画だけのページURLを指定しています。記事のURLをコピペすると、動画プレーヤーが表示される仕組みです。

twitter:site

指定するとリンクカードにユーザー名が表示されます。@を含めたアカウント名を指定します。

注意事項

Twitterカードは該当ページがrobots.txtでアクセスブロックしていると、クローラーが情報を取得できずカードが表示されないようです。以下公式ドキュメントに回避方法が掲載されているので、robots.txtを適用していてTwitterカードを設置する際はご確認ください。

カードの利用開始 | Docs | Twitter Developer Platform　URLクロールとキャッシュ

WordPressでOGPを設定する

WordPressでOGPを設定する場合は、プラグインを利用するほか、テーマファイル内の設定に関するファイルであるfunctions.phpを編集して実装することも可能です。既存テーマを編集する際は、すでにOGPが出力されていないか確認してください。

注意事項

この方法はテーマファイル内の設定に関するファイルであるfunctions.phpを編集します。編集する際は事前に必ずバックアップをとってください。
また、既存のテーマをカスタマイズする場合は、動作に十分ご注意ください。

以下の例では、トップページ、カスタム投稿タイプ（とそのカテゴリ）、記事ページでのOGPを設定しています。必要箇所のみ記載しています。

補足

WordPressではカスタム投稿タイプのカテゴリは「タクソノミー（およびターム）」といいますが、ここではわかりやすく「カテゴリ」としています。

php

<?php
  /* ==================== */
  /* OGP設定     */
  /* ==================== */
  function meta_ogp() {
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    //出力設定
    if(is_singular()) { //記事ページでの出力
      setup_postdata($post);
        $ogp_title = $post->post_title;
        $ogp_descr = mb_substr(get_the_excerpt(), 0, 100); //本ブナ類は抜粋欄から100文字程度抜き出す
        $ogp_url = get_permalink();
      wp_reset_postdata();
    } elseif(is_post_type_archive() || is_tax()) { //カスタム投稿タイプ（とタクソノミー）での出力
      if(is_tax()) {
        $taxonomy = get_query_var('taxonomy');
        $pt = get_taxonomy($taxonomy)->object_type[0];
        $pt_label = get_post_type_object($pt)->labels->name;
        $ogp_title = $pt_label. ' カテゴリ「' .single_term_title('', false).'」';
        $ogp_descr = $pt_label. 'のカテゴリ「' .single_term_title('', false).'」の一覧ページです';
        $ogp_url = get_term_link(get_queried_object_id());
      } elseif(is_post_type_archive()) {
        $pt = get_queried_object();
        $ogp_title = $pt->label;
        $ogp_descr = $pt->label. 'の一覧ページです';
        $ogp_url = home_url('/').$pt->name;
      }
    } elseif(is_front_page() || is_home()) { //トップページでの出力
      $ogp_title = get_bloginfo('name');
      $ogp_descr = get_bloginfo('description');
      $ogp_url = home_url();
    }

    $ogp_type = (is_front_page() || is_home() || is_post_type_archive() || is_tax()) ? 'website' : 'article';
    $ogp_img = get_parent_theme_file_uri('テーマフォルダ内のOGP用画像のパスを指定する');

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'">' ."\n";
    $insert .= '<meta property="og:locale" content="ja_JP">' ."\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'">' ."\n";
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'">' ."\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'">' ."\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'">' ."\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'">' ."\n";
    $insert .= '<meta property="twitter:card" content="summary_large_image">' ."\n";

    echo $insert;
  }
  add_action('wp_head', 'meta_ogp');
?>

以下OGPの出力例です（長いので畳みます）

OGP出力例

html

<!-- トップページの場合 -->
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="設定したOGP画像URL">
<meta property="og:title" content="サイト名">
<meta property="og:description" content="設定 > 一般 > キャッチフレーズの文言">
<meta property="og:url" content="サイトURL">
<meta property="og:type" content="website">
<meta property="twitter:card" content="summary_large_image">

<!-- カスタム投稿タイプの場合（以下例では「blog」） -->
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="設定したOGP画像URL">
<meta property="og:title" content="blog">
<meta property="og:description" content="blogの一覧ページです">
<meta property="og:url" content="blog一覧URL">
<meta property="og:type" content="website">
<meta property="twitter:card" content="summary_large_image">

<!-- カスタム投稿タイプのカテゴリの場合（以下例では「blog」の「おしらせ」） -->
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="設定したOGP画像URL">
<meta property="og:title" content="blog カテゴリ「おしらせ」">
<meta property="og:description" content="blogのカテゴリ「おしらせ」の一覧ページです">
<meta property="og:url" content="カテゴリ「おしらせ」一覧URL">
<meta property="og:type" content="website">
<meta property="twitter:card" content="summary_large_image">

<!-- 記事ページの場合 -->
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="設定したOGP画像URL">
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事本文から100文字ほど抜き出したテキスト">
<meta property="og:url" content="記事URL">
<meta property="og:type" content="article">
<meta property="twitter:card" content="summary_large_image">

てがろぐでOGPを設定する

にししふぁくとりーさまで配布している「てがろぐ」には、OGP出力機能が備わっています。

てがろぐでOGP機能を利用する場合は、管理画面の「設定」>「補助出力」のタブ「OGP＋Twitter Cardの出力」項目で設定します。
詳しくは公式ドキュメントをご確認ください。

てがろぐ使い方・設定方法 - にししふぁくとりー　OGP＋Twitter Card用meta要素の出力仕様

OGPの取得およびリンクカードの表示について

OGPの情報は通常のHTMLの記述のみでは取得できず、PHPなどで取得用のプログラムを書き、実行する必要があります（本サイトではこのプログラムについては扱いません）
WordPressやてがろぐの場合は、プラグインなどを利用することでOGP情報を取得・リンクカードを表示させることが可能です。

WordPressの場合

WordPressでは、OGP取得のためのプラグインが配布されており、代表的なものに「Pz-LinkCard」があります。

てがろぐの場合

にししふぁくとりーさまで配布している「てがろぐ」では、ver4.5.5 β版においてOGPを取得・リンクカードを表示する機能が実装されました（不具合に対応したver4.5.6 β版が最新です）

なお、てがろぐでのリンクカード実装にあわせ、これまでふしぎ文庫さまで配布されていたブログカードは配布を終了されたようです。プログラムを残したままだとてがろぐ側のリンクカード機能が使えなくなるとのことなので、こちらを利用されている場合はご注意ください。

雑談日記 - ブログカードの配布を終了＆スキン002からも削除しました！

OGP取得によるリンクカード表示の際の留意点

リンクカードに掲載される情報は基本的にOGPの情報を取得して表示するため、取得したいサイトやページにOGPが設定されていなければ取得できません。リンクカード自体は生成されますが、サムネイル画像やタイトルなどは表示されない場合がほとんどです。
昨今は企業サイトやSNSなどで広報をしているサイトなどOGPを設定している場合がほとんどですが、個人が運営されているサイトなどかならずしもOGPを設定しているサイトばかりではないため、その点はご留意ください。

本記事の解説は以上です。

補足

OGPの使用やTwitterカードの設定詳細については、公式ドキュメントもご参考ください。

また、下記Facebook（Meta社）のOGPに関するドキュメントはかなりわかりやすくまとまっているので、こちらも参考になると思います。

ウェブ管理者向けシェア機能ガイド

サイトにOGPを設定する

OGPの構造 ​

各部分の解説 ​

og:site_name ​

og:locale ​

og:image ​

og:title ​

og:description ​

og:url ​

og:type ​

Twitterカードの解説 ​

twitter:card ​

twitter:site ​

WordPressでOGPを設定する ​

てがろぐでOGPを設定する ​

OGPの取得およびリンクカードの表示について ​

WordPressの場合 ​

てがろぐの場合 ​

OGP取得によるリンクカード表示の際の留意点 ​

OGPの構造

各部分の解説

og:site_name

og:locale

og:image

og:title

og:description

og:url

og:type

Twitterカードの解説

twitter:card

twitter:site

WordPressでOGPを設定する

てがろぐでOGPを設定する

OGPの取得およびリンクカードの表示について

WordPressの場合

てがろぐの場合

OGP取得によるリンクカード表示の際の留意点