OGPとは?SNSでの役割や設定方法を初心者向けに解説

この記事のレベル

初心者 (3.0)
重要度 (3.0)
難しさ (2.0)

こんにちは、編集長のカワウソです!

「OGPって何?」と悩んでいませんか?

OGP(Open Graph Protocol)とは、WebページのURLがX(旧Twitter)やFacebookなどのSNSに投稿されたときに、「タイトル」「画像」「説明文」などの補足情報を表示するための仕組みです。

OGPにはメリットがあるので、これを機にホームぺージに設定しておきましょう。

そこで今回は、OGPの基礎知識はもちろん、ホームぺージに設定する方法を解説します。

カワウソ

この記事は次のような人におすすめ!

  • 初めて企業ホームページを作る人
  • マーケティングにSNSを活用する人
  • OGPの役割や設定方法を知りたい人

この記事を読めば、OGPを設定することができるので、SNSからホームぺージへの集客がしやすくなります。

それではどうぞ!

OGPとは

OGP(Open Graph Protocol)とは、WebページのURLがX(旧Twitter)やFacebookなどのSNSに投稿されたときに、「タイトル」「画像」「説明文」などの補足情報を表示するための仕組みです。

たとえば、以下はX(旧Twitter)の投稿画面に、弊社『エックスサーバー』のトップページのURLを入力したときの画面。
URLしか入力していないものの、Webページのタイトルや画像が表示されていますよね。

これらは、Webページに設定された「OGPタグ」の情報を、X(旧Twitter)側が読み取ることにより、表示しています。

OGPタグの例
  • <meta property="og:title" content="ページのタイトル">
  • <meta property="og:type" content="ページの種類">
  • <meta property="og:url" content="ページのURL">
  • <meta property="og:image" content="画像のURL">
  • <meta property="og:site_name" content="ホームぺージのタイトル">
  • <meta property="og:description" content="ページの説明">
  • <meta property="og:locale" content="言語">

OGPの設定方法はのちほど詳しく解説するので、まずはその重要性について理解していきましょう。

「OGPの設定方法をすぐに知りたい」という方は、以下のリンクをクリックして読み飛ばしてください。

OGPの設定方法

OGPの重要性やメリット

SNSが盛んに利用されている近年では、OGPは重要。
OGPを設定することにより、そのWebページの魅力をSNS上で伝えやすくなるためです。

OGPを設定していなくても、投稿するときにWebページのタイトルや画像などを手動で添えれば、情報は補足できます。

しかし、社内の人ならそういった手間をかけられるかもしれませんが、ユーザーがそこまでしてくれるわけではありません。

OGPを設定しておけば、社内の人はもちろん、そうでないユーザーでも、URLを入力するだけで、そのWebページのタイトルや画像を自動で表示することが可能です。

つまり、自社のWebページがユーザーによってシェア(共有)されたときに、その投稿を見た別のユーザーの興味を惹きやすくなります。

OGPなしとOGPありのSNSの投稿の違い

SNSから自社のホームぺージへのアクセスを増やすためにも、OGPを設定しておきましょう。

OGPの設定方法

OGPの設定方法は、ホームページの作り方によって異なります。

ここでは、代表的なホームページの作り方である、以下2つにおけるOGPの設定方法を詳しく解説しますね。

WordPress(ワードプレス)やHTML(エイチ・ティー・エム・エル)をご存知でない方は、以下の記事を参考にしてください。

WordPressで作ったホームぺージ

WordPressで作ったホームページの場合、OGPの設定方法としては、主に以下の2パターンあります。

テーマ(デザインテンプレート)やプラグイン(拡張機能)をご存知でない方は、以下の記事を参考にしてください。

それぞれ解説します。

テーマの機能で設定する

テーマによっては、OGPの設定機能を用意している場合があります。

たとえば、当メディアでも紹介している『Snow Monkey(スノーモンキー)』の場合は、「外観 > カスタマイズ > SEO > OGP」の画面で「OGP メタタグを出力する」にチェックが入っていれば、OGPタグが出力されます。

(参考:Snow Monkey「OGP の設定」

一度、使用中のテーマのマニュアルを確認してみてください。

プラグインで設定する

テーマにOGPの設定機能がない場合は、プラグインを用いるのがおすすめです。

OGPは、SEOプラグインとして有名な『All in One SEO』や『Yoast SEO』などでも設定できます。

しかし、それらはSEOに関する設定項目が多いため、この記事ではシンプルなプラグイン『SEO SIMPLE PACK』を紹介しますね。

▲出典:wordpress.org「SEO SIMPLE PACK」

『SEO SIMPLE PACK』は、ブログ向けWordPressテーマ『SWELL(スウェル)』などを販売する、株式会社LOOSが提供しているプラグイン。

設定項目がシンプルかつ、日本語に対応しているので、初心者の方でも扱いやすいです。

プラグインを有効化するだけでOGPタグが出力されるため、難しい設定もありません。

それでは具体的な設定手順を解説します。

STEP1
プラグインのインストール

プラグイン > 新規プラグインを追加」の画面で「SEO SIMPLE PACK」を検索したあと、同プラグインの今すぐインストールをクリックします。

STEP2
プラグインの有効化

次に、有効化をクリックしましょう。

STEP3
デフォルトの画像を設定

SEO PACK > OGP設定」の画面で、デフォルトの画像を設定します。

たとえば、投稿や固定ページでアイキャッチ画像を設定しない場合は、こちらで登録した画像が表示されますよ。

画像を選択」したあと、設定を保存するをクリックしましょう。

メモ

画像サイズは、1200px × 630pxが推奨されます。

STEP4
OGPタグの出力を確認する

念のため、OGPタグが出力されているかを確認しましょう。

試しにトップページを表示したあと、右クリックして「ページのソースを表示」を選択してください。

ページのソースに、以下のような記述があればOKです。

<!-- SEO SIMPLE PACK 3.2.1 -->
<title>サイトのタイトル | キャッチフレーズ</title>
<meta name="description" content="キャッチフレーズ">
<link rel="canonical" href="URL">
<meta property="og:locale" content="言語">
<meta property="og:type" content="ページの種類">
<meta property="og:image" content="画像のURL">
<meta property="og:title" content="サイトのタイトル | キャッチフレーズ">
<meta property="og:description" content="キャッチフレーズ">
<meta property="og:url" content="サイトアドレス">
<meta property="og:site_name" content="サイトのタイトル">
<meta name="twitter:card" content="summary">
<!-- / SEO SIMPLE PACK -->

なお、タグのなかの情報はページごとに変化するので、確認してみてください。

メモ

『SEO SIMPLE PACK』には、FacebookやX(旧Twitter)専用のタグを出力する機能もあります。

のちほど、「SNS専用のタグも活用しよう【例:X(旧Twitter)】」でも解説しますが、『SEO SIMPLE PACK』については、公式マニュアルも参考にしてください。

(参考:株式会社LOOS「SEO SIMPLE PACK の使い方」

HTMLで作ったホームぺージ

HTMLで作ったホームページの場合は、各Webページの<head>〜</head>の間に、以下のmetaタグを記述します。
OGPタグの例
  • <meta property="og:title" content="ページのタイトル">
  • <meta property="og:type" content="ページの種類">
  • <meta property="og:url" content="ページのURL">
  • <meta property="og:image" content="画像のURL">
  • <meta property="og:site_name" content="ホームぺージのタイトル">
  • <meta property="og:description" content="ページの説明">
  • <meta property="og:locale" content="言語">

metaタグ(メタタグ)とは

タイトル、説明文、言語などのページに関する情報を、検索エンジンやブラウザに伝えるためのmeta要素を記述するためのタグのこと。

以下は、弊社の『エックスサーバー』のトップページのOGPタグの内容です。
参考にしてください。

metaタグの種類
記述する内容
例:エックスサーバーのトップページ
og:title
ページのタイトル
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
og:type
ページの種類
website
og:url
ページのURL
https://www.xserver.ne.jp/
og:image
画像のURL
https://www.xserver.ne.jp/img/common/ogp.png?date=210415
og:site_name
ホームページの
タイトル
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
og:description
ページの説明文
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額990円(税込)から利用可能。まずは無料お試し10日間。

なお、「og:type」については、ページの種類によって指定する英単語が変わるので、以下を参考にしてください。

og:typeの種類
活用シーン
website
ホームページのトップページ
article
ホームぺージの「トップページ以外のページ」や「ブログの記事(お知らせ、ニュースなど)」

OGPの推奨画像サイズとは

ここではOGPで指定する画像サイズについて解説します。

X(旧Twitter)やFacebookなどで適切に表示されない場合は、参考にしてください。

縦横比
1.91:1 
※推奨1200px × 630px
容量
できるだけ小さく 
※目安500kb以下

縦横比や容量について、WindowsOSのパソコンの場合は、「画像を右クリック > プロパティ > 詳細」から確認できます。

画像を右クリック > プロパティ > 詳細の画面

なお、画像の縦横比や容量を調整するときは、以下の記事を参考にしてください。

SNS専用のタグも活用しよう【例:X(旧Twitter)】

OGP以外にSNS専用のタグもあります。

たとえば、以下はX(旧Twitter)専用のタグです。

X(旧Twitter)専用タグの例
  • <meta name="twitter:card" content="summary_large_image">
  • <meta name="twitter:site" content="@ユーザー名">
  • <meta name="twitter:title" content="ページのタイトル">
  • <meta name="twitter:description" content="ページの説明">
  • <meta name="twitter:image" content="画像のURL">

「twitter:title」「twitter:description」「twitter:image」はOGPタグと被る内容であるため、わざわざ追加する必要はないでしょう(参考:X 開発者プラットフォーム「TwitterカードとOpen Graph」)。

「twitter:card」と「twitter:site」は、状況に応じて追加を検討してください。
以下、「twitter:card」と「twitter:site」に記述する内容です。

metaタグの種類
記述する内容
twitter:card
カードタイプ(表示の種類)を指定できます。ホームぺージでよく使うカードタイプは、「summary」「summary_large_image」です。
twitter:site
Webページに関連する公式X(旧Twitter)アカウントのユーザー名(@から始まる)を入れます。

たとえば、「twitter:card」については、「summary」を指定すると、Twitterカードの基本的なカードタイプを指定できます。

一方、「twitter:card」に「summary_large_image」を指定すると、画像を大きく表示することが可能です。

参考にしてみてください。

OGPのキャッシュ問題の対処法【例:X(旧Twitter)】

SNSはユーザーに迅速に情報を提供するために、OGP情報を含むWebページのメタデータをキャッシュに保存します。

キャッシュとは

キャッシュとは、一時的にデータを保存しておくための仕組みや場所のことです。

このキャッシュされた情報は、ページが再度共有されたときに再利用されます。

その結果、ページのOGP情報を更新しても、SNS上での表示が即座には更新されず、古い情報が表示され続けることがあります。

たとえば、X(旧Twitter)のキャッシュ保存期間は、約7日間です(参考:X 開発者プラットフォーム「ツイート内のカードを更新する」)。
そのため、約7日間は更新されないおそれがあります。

もし、「すぐにキャッシュを更新したい」という場合は、以下のX開発者プラットフォームの案内を参考にしてください。

サイトのメタタグを更新しましたが、ツイートには古いカードが表示されます。カードをリフレッシュするにはどうすればよいですか?

Twitter Web クローラーは、約 7 日ごとにページ上の Card タグ情報のインデックスを再作成します。

カードのテストや反復を行う場合、タイムラインで更新をテストすると役立つ場合があります。次の手法を使用して、ページのカードの最新の変更でキャッシュを更新できる場合があります。

  1. カードのメタデータをページに追加する
  2. そのページのURLをツイートします
  3. ブラウザを更新してタイムラインにカードの内容を表示します
  4. ページ上のカードのメタデータを変更する
  5. 同じ URL を取得し、bit.ly を通じて実行します。
  6. 新しい bit.ly URL をツイートします
  7. ブラウザを更新してアップデートを表示します
(引用:X 開発者プラットフォーム「ツイート内のカードを更新する」
Bitly(ビットリー)とは

Bitly』はアメリカの企業で、短縮URL発行サービスを提供しています。ホームぺージのURLを短縮することで、SNSやメールなどで共有しやすくなるメリットがあります。

分かりやすく言うと、Webページを短縮URLサービスで発行したURLで投稿すると、X(旧Twitter)が再度そのWebページの情報を取得してくれるため、キャッシュを更新できる場合があるというものです。

なお、画像を更新しても、同じURLの場合は、なかなか表示が切り替わらない場合があります。

その場合は、以下のように、画像URLの末尾にパラメーターを追加してください。

<meta name="twitter:image" content="http://example.com/myimage.jpg?date=240301">

(参考:X 開発者プラットフォーム「ツイート内のカードを更新する」

カワウソ

パラメータは「?date=240301」のように、年月日を入れると管理しやすいですよ。

まとめ

この記事では、OGPの重要性やメリットはもちろん、設定方法についても解説しました。

まとめ
  • OGPとはWebページがSNSに投稿されたときに、補足情報を表示するための仕組み
  • OGPを設定すれば投稿をより魅力的にできるため、ユーザーの興味を惹きやすい
  • OGPの設定方法は、ホームページの作り方によって異なる
  • WordPressの場合は、テーマの機能やプラグインでOGPを設定できる
  • SNSによっては、専用のタグやキャッシュのクリア方法を案内している

ぜひこの記事を参考に、OGPを活用してみてください。

最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、20万社の導入実績があります。

2024年6月5日12時まで、サーバーが実質半額で利用できる『半額キャッシュバックキャンペーン』を開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2024年5月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!