Web広告

最終更新日: 2022.07.15

OGPとは?HTMLの書き方やfacebookでの設定方法も解説

OGPとは?HTMLの書き方やfacebookでの設定方法も解説
  • OGP設定とは?
  • どんなメリットがあるの?
  • 設定方法は?

このページを訪れたあなたはきっと、このような疑問を抱いていることでしょう。OGPはWebページがSNS上でシェアされる際、クリック率を左右する要素であり、SNSで集客するためには欠かせないポイントです。

本記事ではOGPの概要や設定のメリット、設定方法などを詳しく解説しています。最後まで読めばOGPの基礎知識が分かるだけではなく、各SNSの設定方法なども理解できます。OGPの理解を深め、サイト運営にお役立てください。

OGPとは?

OGPとは?

OGPは「Open Graph Protocolの略称です。SNS上でWebページのURLがシェアされると、自動的に「画像」「タイトル」「説明文」が表示される仕組みを指します。OGPはmetaタグを使って設定でき、対策することでユーザーに対してより魅力的にWebページを見せることが可能です。

OGPを設定するメリット

OGPを設定するメリット

OGPを設定するメリットは、SNSでクリックされやすくなることです。その理由は下記の2点にあります。

  • ページ内容がユーザーに伝わりやすい
  • 画像によってインパクトを与えられる

このようにOGP設定でユーザーの興味を引くことは、クリック率向上につながる重要なポイント。もしOGP設定をしなかった場合、SNSのクローラーが自動的にWebページの情報を表示させます。

それにより「タイトルが切れている」「画像が不適切」といったことになると、ユーザーの興味を引けずクリックにつながりません。そのため、魅力的なページと認識してもらうためにもOGP設定は必ず行いましょう。

OGPの設定方法

OGPの設定方法

次にOGPの設定方法について解説します。WordPressなどのCMSで作成しているサイトは、「All in One SEO」といったプラグインをダウンロードすると設定できます。

プラグインなどを使わない場合は、htmlのhead内に直接記述しましょう。例えば弊社の「会社概要ページ」を見てみると、下記のようにOGPを設定しています。

<meta property=’og:locale’ content=’ja_JP’>
<meta property=’og:site_name’ content=’湘南(神奈川)のWeb制作会社|ニュートラルワークス’>
<meta property=”og:title” content=”COMPANY|湘南(神奈川)のWeb制作会社|ニュートラルワークス”>
<meta property=”og:url” content=”https://n-works.link/company”>
<meta property=”og:type” content=”website”>
<meta property=”og:image” content=”https://n-works.link/ogp.png“>

このように「og:」の後に、表示させたい内容とその情報を設定できます。さまざまな設定が可能ですが、中でも基本的なタグは下記の4つです。

  • 「og:title」…ページタイトル
  • 「og:url」…WebページのURL
  • 「og:type」…ページの種類
  • 「og:image」…サムネイル画像

特に「title」「image」は重要です。この2つによって、クリック率も大きく変わるため、ユーザーニーズに合うタイトルと画像の設定を行いましょう。

Facebook専用のタグ

「Facebook専用タグ」である「fb:app_id」について解説します。「fb:app_id」とは、サイトの運営者をFacebookに伝えるためのタグです。

<meta property=”fb:app_id” content=”App-id〇〇〇”>

上記のmetaタグを使用すると、Facebookからサイトに対するパフォーマンス分析ができる「インサイト」が使用可能となります。

Twitter専用のタグ

Twitterは専用のタグを使って、投稿カードの大きさを設定できます。大きさは以下の2つから選択可能です。

  • summary…画像・テキストが横並びに表示される
  • summary_large_image…横長画像が表示され、その下にテキスト情報が表示される

設定する際のタグは以下のとおりです。

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:card” content=”summary_large_image”>

このタグを使ってTwitterカードの大きさを設定できます。

OGPは1ページごとに設定する

OGPは1ページごとに設定する

OGPはページごとに設定する必要があります。なぜなら、ページによって伝えたい「内容」「画像」が異なるためです。そのためサイト全体に設定するのではなく、それぞれのページに最適なOGPを設定することで、よりクリックされやすくなります。

OGPが正しく設定されているかチェックできる便利ツール

OGPが正しく設定されているかチェックできる便利ツール

OGPが正しく設定されているかは、投稿する前にプレビューでチェックすることが重要です。ここではOGPの設定を確認できる便利なツールをご紹介します。

Fecebook:シェアデバッカー

「シェアデバッカー」は、WebページがFacebookでシェアされたときの表示画面をプレビューするツールです。Facebookへログインが必要となりますが、無料で使えるためFacebookを頻繁に投稿する方は、ぜひ活用してほしい便利なツールです。

使い方は、OGPを設定したURLを入力し「デバック」ボタンを押すだけ。これによって「画像のサイズ」や「説明文」「タイトル」など、ユーザーからの見え方を確認できます。

もし「タイトルが途中で切れて意味が伝わらない」「画像サイズが合わない」といった修正点が見つかったら投稿前に改善しましょう。よりユーザーに伝わりやすい投稿となれば、クリック率向上にもつながります。

Twitter:Card validator

「Card validator(カードバリデータ)」はTwitterの公式ツールです。投稿したときにTwitterカードがどのように表示されるかを確認できます。Twitterカードとは、URLを投稿するとアイキャッチ画像やタイトルなどが表示される機能のこと。

使い方は「シェアデバッカー」と、ほぼ同じです。「Card URL」にシェアしたいURLを入力して「Preview card」をクリックすると投稿がプレビューされます。こちらも無料で使えるため、画像の大きさやタイトルなどが、分かりやすい見え方になっているか何度でも確認しましょう。

OGB画像シミュレーター

OGB画像シミュレーターは、作成したOGP用の画像を「ドラッグ&ドロップで画像を追加」に追加すると、タイムラインでどう見えるかをシミュレートできます。

OGP画像は正方形や横長などさまざまな形で表示されるため、それを踏まえて最適な画像を作成する必要があります。OGB画像シミュレーターを使えば、色々な形の投稿が一気に表示されるため、バランスを見ることも可能。

複数枚のアップロードもできるため、候補を幾つか用意して投稿をプレビューしたうえで最適なものを選ぶのも有効です。

OGB画像の適切なサイズは?

OGB画像の適切なサイズは?

OGB画像の最適なサイズは媒体によって違います。ここでは、「Facebook」「Twitter」の2つに分けて、それぞれの最適な画像サイズについて解説します。

Facebook

Facebookで表示される画像サイズは、横1200×縦630px以上が推奨されています。しかし、サイズが大きすぎるとデータが重くなってしまうため、最小の横1200×縦630pxで設定することをおすすめします。

Facebookの投稿は、「タイトル上に大きな画像を表示する」「タイトルの左側に小さな画像で表示する」2つのパターンがあります。横1200×縦630pxで設定するとタイトル上に大きな画像で表示され、ユーザーにインパクトを与えることも可能です。

しかし、それ以下のサイズであれば左側に小さく表示されるため、訴求力も下がってしまいます。画像のサイズによってクリック率が変わることを踏まえて、最適なサイズに設定しましょう。

Twitter

先述しましたが、Twitterの投稿カードは、「Summary」「Summary Card with Large Image」のどちらかを選ぶことで表示される画像サイズも変わります。詳しい違いを下記にまとめました。

<Summary>

  • 最小サイズ:144×144px
  • 比率「1:1」で表示

<Summary Card with Large Image>

  • 最小サイズ:600×314px
  • 比率「1.91:1」で表示

Summaryは正方形で表示され、Summary Card with Large Imageは横長で表示されます。投稿を目立たせたい場合は、画像が大きく表示される「Summary Card with Large Image」を設定しましょう。

また、TwitterとFacebookのOGP画像は併用できるため、両方に使用する場合はFacebookサイズの「1200×630px」に設定するのがおすすめです。

OGP設定が反映されない場合の対処法

OGP設定が反映されない場合の対処法

OGP設定が反映されない場合は、SNS上に残っているキャッシュが原因であることがほとんどです。そのため、キャッシュのクリアをしたうえでページ更新してみましょう。

Facebookの場合は「シェアデバッカー」を使用してキャッシュを削除できます。

<シェアデバッカーの手順>

  • ①シェアデバッカーにシェアするURLを入れて「デバッグ」をクリックする
  • ②表示がうまくいかない場合「もう一度スクレイピング」をクリック
  • ③表示を確認する

更新画像が表示されるまでこれを繰り返し行います。

Twitterは「Card validator」を使用してキャッシュをクリアします。やり方は「シェアデバッカー」と同じです。更新画像が表示されると、キャッシュが自動的にクリアされるため、それまで何度も繰り返してみてください。

OGPのまとめ

OGPのまとめ

OGP設定について解説しました。SNS上でWebページのクリック率が高まると、拡散や被リンクの確保といった、集客の導線やSEOの効果を得ることにもつながります。

またクリック率が上がるということは、それだけアクセス数アップの効果も期待できるということ。OGPを設定して集客効果の改善を図り、Webサイトの印象をよりよくしていきましょう!

監修者紹介

石田 哲也

石田 哲也

取締役CMO

Twitter:@te2319 |
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社にて起業。株式会社オプトにてWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社にてゲームプロデューサーとしてスマホアプリゲームの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスにジョイン。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善~ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年 ISD株式会社/起業
2009年 株式会社オプト/SEMコンサルタント
2011年 株式会社メタップス/シニアディレクター
2013年 ライブエイド株式会社/執行役
2016年 ワンダープラネット株式会社/プロデューサー・BizDev
2018年 株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格(GAIQ)
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格