アフィリエイター 用語集

OGPとは?

OGPとは「Open Graph Protocol」の略のことです。

SNSでページのタイトル、URL、概要、画像を表示させる仕組みのことで、FacebookやTwitterなどのSNSで記事がシェアされた時に、ページタイトルやURL、概要や画像などをシェア投稿に表示させることができます

OGPを設定するメリットは?


OGPが設定されている記事をシェアした場合、下記のようにページの内容が投稿に表示されます。

シェアしたURLのページタイトルや概要、アイキャッチとなる画像が設定されることで共有されたユーザーへの訴求が強まり、より多くの人にサイトへ訪れてもらうことが可能となります

OGPが設定されていないページの場合、SNSのクローラーは自動的にページの情報を抽出し、概要や画像を設定してくれます。

しかし、自動で設定された情報がページの内容と合っていない、不適切な内容となっていることも少なくなく、訪れたユーザーをがっかりとさせてしまうこともあります。

OGPで表示したい情報を設定することで、シェアされた情報とページの内容の齟齬をなくすことができるので、ユーザーを適切に誘導することができます。

OGPの設定方法


ではOGPの設定方法について解説をしていきます。

OGPはHTMLファイルの<head>タグの中に記述をします。

まず、<html>タグの中にOGPを使用するという宣言を記述する必要があります。

<html lang="ja" prefix="og: http://ogp.me/ns#">

そして<head>~</head>の中に以下の記述をしましょう。

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website、blog、またはarticle">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL">

それぞれのプロパティの説明は以下の通りです。
contentの中に設定したい内容を記述します。

property content
og:title ページタイトル
og:type トップページの場合はwebsiteかblogを指定
下層ページの場合はarticleを指定
og:description ページの概要となる説明文を記述
og:url ページのURL
og:site_name サイト名
og:image サムネイル用画像のURL(※サイズは後述)

Facebook用の記述


上記が基本の記述となりますが、Facebook用の記述で以下の設定があります。

<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”>

この設定は必須ではありませんが、この設定をすることで、Facebookからどのくらいの送客ができたか、シェア投稿のいいね数や閲覧に関するデータを把握できるようになります。

Twitter用の記述


Twitterで記述する場合にもTwitter専用の記述があります。

先ほどの基本の記述に加え、「twitter:card」と「twitter:site」を設定することができます。

twitter:card


Twitter上での表示タイプを指定する事ができます。

<meta name="twitter:card" content="カード種類" />
表示タイプ 表示
summary 最も一般的な表示で、サイトやブログをシェアする際に使われる表示で、タイトル、説明、サムネイル画像を表示。
summary_large_image summaryと同じ情報を表示しますが、サムネイル画像を大きく表示します。
app アプリを配布する際の表示。アプリ名、紹介文、価格、評価などの情報を表示します。
player 動画やオーディオなどのメディアを表示します。

twitter:site

twitter:siteは、サイトのユーザー名を表示する際に使用します。

<meta name="twitter:site" content="@ユーザーアカウント名" />

OGPの表示チェック


OGPを設定したら、次はSNSで投稿した際に適切に表示されるかをチェックするようにしましょう。

せっかくOGPを設定したのに、設定ミスなどで表示されていない…ということが起きないよう設定をしたら必ずチェックを行いましょう。

FacebookのOGP表示チェック


Facebookでの表示を確認する場合は、「シェアデバッカー」を使用しましょう。
(※Facebookへのログインが必要です。)

使用方法は簡単です。
OGPを設定したURLを入力してチェックするだけです。

設定されたOGP情報が表示されますので、表示の漏れなどがないかを確認しましょう。

シェアデバッカー

TwitterのOGPシュミレーション


Twitterでの表示を確認する場合は、「Twitter Card Validator」を使用しましょう。
(※Twitterへのログインが必要です。)

Facebookと同じ要領でURLを入力してチェックをするだけです。

Twitter Card Validator

OGP画像シミュレータ


OGPの画像サイズは基本的に1200px×630pxで問題はないのですが、LINEなどSNSによっては画像の一部が切り取られたりすることもあります。

その場合、切り取られた場合でも問題なく表示ができるように画像をデザインする必要があります。

その切り取りがされたイメージを確認することができるのが、OGP画像シミュレータです。

このツールで画像の表示確認をしながら適切なデザインに仕上げていきましょう。

OGP画像シミュレータ

OGP設定で気を付けるべきポイントは?


OGP設定をする際に気を付けておきたいポイントについても解説をしていきます。

1ページごとに設定する


OGPの設定はページに対して行います。
ページがどんな内容なのかを伝えられるようにする目的として設定をしていますので、内容にあった設定を行うことが大事です。

WordPressではプラグインを活用


WordpressなどのCMSの場合、直接HTMLソースに記述するのが困難なのでプラグインに頼ることが多くなるでしょう。

様々なプラグインが配布されていますので、目的に合ったプラグインを選ぶようにしましょう。

インフォトップのアフィリエイトが稼ぎやすい3つの特徴
インフォトップのアフィリエイトは全承認
高報酬率だから稼ぎやすい!
2ティア報酬制度でさらに稼げる!
アフィリエイター新規登録!  (無料)

-アフィリエイター, 用語集
-

アフィリエイターを始めてみたい方は…

インフォトップアフィリエイターのための稼げるWEBマガジン「インフォトップカレッジ」は、アフィリエイトのノウハウや、トップアフィリエイターのインタビューなどのお役立ちコンテンツをお届けしています。

公式SNS


関連サイト

Copyright© インフォトップカレッジ , 2022 All Rights Reserved Powered by AFFINGER5.