2021.05.19

【シェア】OGPの設定とは。アクセスアップにつながる画像サイズも解説

OGP(Open Graph Protocol)とは、ウェブサイトやSNSなどでウェブページをシェアした際にウェブページのタイトル、概要、イメージ画像といった情報を表示させる仕組みのことです。この記事では、OGPの意味や利点、リンク先で表示させる設定方法を説明しましょう。

OGPとは

OGPという単語

OGPとは、ウェブサイトやSNSなどでウェブページのリンクを共有する時にそのページタイトル、概要、イメージ画像などの情報を表示させる仕組みのことです。ここでは、OGPの意味や設定するメリットを説明します。

シェアした時に表示させるHTML要素

OGPは"Open Graph Protocol"の略称。以下のようにウェブページのリンクを貼った際にそのウェブページのタイトル、URLや内容、画像を表示させるHTML要素のことです。

TwitterやFacebookといったSNSでウェブページやブログ記事をシェア
LINEやSlackといったメッセージ機能でページのURLを送信
ウェブサイトで内部リンクを挿入

設定することでユーザーの訴求率をアップ

OGPが未設定の場合、ウェブサイトやSNSなどリンク挿入された側でイメージ画像、概要を自動表示します。ウェブページの内容を正しく伝えられる画像や文章を抽出できるかどうかは分りません。OGPを適切に設定することで、ページの概要や伝えたい内容が明らかになります。すなわち、OGP適切に設定することによって、より多くのユーザーをウェブサイトへ誘導したり、SNS上でより多く拡散されたりしやすくなり、訴求率がアップするでしょう。

OGPの基本の設定とは

OGPを設定する手

HTMLソースコードにメタタグを記述してOGP設定をします。ここでは、基本的なタグの設定について説明します。

OGP使用の宣言

まず、HTMLソースのhtmlタグにprefix属性を記述し、OGPの使用を宣言します。

ウェブページURLの設定(og:url)

続いて、対象となるウェブページのURLを記述します。URLの記述は絶対パスを用います。

絶対パス（フルパス）とは、階層構造の頂点（ルートディレクトリ）からの位置です。ドメインも含めて、目的のページがあるフォルダまでの経路を記述。「/clipkit.co/ownedmedialab/website/14」のように表します。パスには相対パスもあります。相対パスとは、現在のフォルダから目的のページまでの経路です。「./website/14」のように記述します。

ページタイプの設定(og:type)

ウェブページの種類の指定です。この設定により、リンク先での表示形式が変わります。

website: ウェブサイトのTOPページ
blog: ブログのトップページ
article: ウェブサイトのTOP以外のページ（記事ページなど）
product: 製品の紹介ページ

ページタイトルの設定(og:title)

ウェブページのタイトルを指定します。通常はウェブサイトのタイトルと同じ内容です。ウェブサイトのタイトルと違う場合は、og:titleで設定されたものが優先されます。

ページの説明文の設定(og:description)

ここでは、ページの概要として表示する説明文（ディスクリプション）を記述します。

サイト名の設定(og:site_name)

ウェブサイトの名前、ブランド情報を設定します。

画像URLの設定(og:image)

リンク先でシェアされた際に表示する画像を絶対パスで指定します。

タグを追加して画像の幅や高さも指定可能です。

og:image:width　画像の幅（単位不要）
og:image:height　画像の高さ（単位不要）

Facebook用の設定

Facebookの反応

前述の基本設定に加えて、FacebookではアプリIDを設定できます。ここでは、アプリIDを設定するfb:app_idを説明し、Facebookでの最適な画像サイズについても解説しましょう。

アプリ IDの設定(fb:app_id)

Facebook用アプリの開発時に利用するプログラムやサービスを提供するfacebook for developers で取得できるIDをアプリ IDと言います。アプリIDは、15文字の半角数字で表示され、OGPの設定にも必要です。

前述の基本設定のみでページの情報は表示されますが、アプリIDをfb:app_idタグで設定することでサイト管理者をFacebookに伝えます。これにより、「いいね」の数や訪問者数や訪問の時間帯といったトラフィック分析するFacebookインサイトが利用可能に。

画像サイズの仕様

Facebookで投稿画像を高解像度で表示させるなら、幅1200ピクセル×高さ630ピクセルが最適です。大画像表示するなら、最小でも幅600ピクセル×高さ315ピクセル以上にしましょう。なお、ファイルサイズは8メガバイト以下にしてください。

画像の幅と高さのどちらかが足りないと引き伸ばされて、余った部分がトリミングされます。画像の端がトリミングされないためには、アスペクト比「1.91：1」で画像を作成します。このアスペクト比は、後述のTwitterでも有効です。

Twitter用の設定

Twitterでの反応

Twitterでは、基本設定に加えて、Twitter上での表示タイプやTwitterのユーザー名が設定可能です。この独自の設定をTwitterカードと呼びます。ここでは、表示タイプを設定するtwitter:cardタブとユーザー名を設定するtwitter:siteタグを説明しましょう。

表示タイプの設定(twitter:card)

Twitterカードの種類を指定します。指定できる種類は、ブログおよびwebサイト用の標準と画像サイズが大きいもの・アプリ配布用・動画サイト用の4種類。それぞれ見せ方が変わります。

summary：ブログおよびウェブサイト用　タイトル、説明、サムネイルを表示
summary_large_image：summary cardと同じ形で画像サイズがそれより大きいもの
app：アプリ配布用　アプリ名、紹介文、アプリのアイコン、評価や価格などを表示
player：動画サイト用　ビデオやオーディオといったメディアを表示

ユーザー名の設定(twitter:site)

@から始まるTwitterユーザー名を設定します。コンテンツの作成者や管理者のユーザーIDを入力。

OGPも直感的に設定できるClipkit®（クリップキット）

Clipkitを表示したPC

自社サイトを立ち上げてOGPを設定したいものの専門知識を持つスタッフがいないのであれば、OGP設定機能が搭載されたツールを導入するのもおすすめです。ここでは、エンジニア不在の企業でも簡単に自社サイトが構築可能なClipkit®（クリップキット）について紹介します。

クリップキットとは

クリップキットはSEOに最適化したSaaS型ウェブサイト構築ツールです。サーバー管理やセキュリティ対策などエンジニアが必要なメンテナンスが不要で、自社サイトを構築運用できます。ユーザーインターフェースに優れており、ブログ感覚で更新可能。月額制サービスで初期費用もリーズナブルなため手軽に始められるところも魅力です。

OGPも管理画面から設定

クリップキットなら直感的に使える管理画面から設定できます。手順は「サイト管理」→「サイト設定」を選択、「サイト画像」から希望の画像を選択して設定。「保存する」ボタンを押したら完了です。また、「サイト管理」→「タグ設定」から、タグ詳細ページでの表示やOGP要素に使用される画像を設定できます。

OGPを設定して自社サイトのアクセスアップにつなげよう

ネットでのシェア

OGPを設定することで、ウェブページの内容を正しく、詳しく表示できるようになり、SNSなどでの拡散を狙えるように。イメージ画像や説明文を単に設定するだけでなく、どうすればユーザーの興味をそそり、クリックされやすくなるかを考えると良いですね。魅力のある説明文で自社サイトのアクセスアップにつなげましょう。

まつだゆき

スマートメディア CMS事業部ライティングディレクター。コンテンツマーケティングのためのメディアサイト構築をライティングディレクターとして支える。担当する企業は冠婚葬祭系などのSEO記事。元システムエンジニア。顧客サポートやマニュアル作成の経験を活かして分りやすい記事を目指す。

1 件