この記事のポイント
この記事でおさえておきたいポイントは以下です。
-
OGPとは
-
OGPは「Open Graph Protocol」の略で、WebページのURLがSNSでシェアされる際に「画像」「タイトル」「説明文」が自動表示される仕組みです。metaタグを使って設定し、視覚的に訴求力のある表示を作り、クリック率を向上させる効果があります。特にSNS上で集客を図る場合、魅力的なページ表示を行うために重要な役割を果たします。
-
OGP設定のメリット
-
OGP設定により、SNSでのシェア時にページの内容が明確に伝わりやすくなり、ユーザーの興味を引くことができます。適切な画像やタイトル設定は、クリック率を向上させる重要なポイントです。OGP設定がなされていない場合、SNSが自動でページ情報を表示し、表示が崩れる可能性があるため、設定は必須です。
-
OGPの設定方法
-
WordPressでは「All in One SEO」などのプラグインを使用するか、metaタグを直接HTMLに記述することでOGPを設定できます。
- OGP設定とは？
- どんなメリットがあるの？
- 設定方法は？
このページを訪れたあなたはきっと、このような疑問を抱いていることでしょう。OGPはWebページがSNS上でシェアされる際、クリック率を左右する要素であり、SNSで集客するためには欠かせないポイントです。
本記事ではOGPの概要や設定のメリット、設定方法などを詳しく解説しています。最後まで読めばOGPの基礎知識が分かるだけではなく、各SNSの設定方法なども理解できます。OGPの理解を深め、サイト運営にお役立てください。
＜無料＞資料ダウンロード
【成果に直結】Webサイトコンサルティング
Webのプロが成果の出るWebサイトへ改善いたします
目次
OGPとは？
OGPは「Open Graph Protocolの略称です。SNS上でWebページのURLがシェアされると、自動的に「画像」「タイトル」「説明文」が表示される仕組みを指します。OGPはmetaタグを使って設定でき、対策することでユーザーに対してより魅力的にWebページを見せることが可能です。
OGPを設定するメリット
OGPを設定するメリットは、SNSでクリックされやすくなることです。その理由は下記の2点にあります。
- ページ内容がユーザーに伝わりやすい
- 画像によってインパクトを与えられる
このようにOGP設定でユーザーの興味を引くことは、クリック率向上につながる重要なポイント。もしOGP設定をしなかった場合、SNSのクローラーが自動的にWebページの情報を表示させます。
それにより「タイトルが切れている」「画像が不適切」といったことになると、ユーザーの興味を引けずクリックにつながりません。そのため、魅力的なページと認識してもらうためにも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はページごとに設定する必要があります。なぜなら、ページによって伝えたい「内容」「画像」が異なるためです。そのためサイト全体に設定するのではなく、それぞれのページに最適な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画像の最適なサイズは媒体によって違います。ここでは、「Facebook」「Twitter」の2つに分けて、それぞれの最適な画像サイズについて解説します。
Facebookで表示される画像サイズは、横1200×縦630px以上が推奨されています。しかし、サイズが大きすぎるとデータが重くなってしまうため、最小の横1200×縦630pxで設定することをおすすめします。
Facebookの投稿は、「タイトル上に大きな画像を表示する」「タイトルの左側に小さな画像で表示する」2つのパターンがあります。横1200×縦630pxで設定するとタイトル上に大きな画像で表示され、ユーザーにインパクトを与えることも可能です。
しかし、それ以下のサイズであれば左側に小さく表示されるため、訴求力も下がってしまいます。画像のサイズによってクリック率が変わることを踏まえて、最適なサイズに設定しましょう。
先述しましたが、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設定が反映されない場合は、SNS上に残っているキャッシュが原因であることがほとんどです。そのため、キャッシュのクリアをしたうえでページ更新してみましょう。
Facebookの場合は「シェアデバッカー」を使用してキャッシュを削除できます。
＜シェアデバッカーの手順＞
- ①シェアデバッカーにシェアするURLを入れて「デバッグ」をクリックする
- ②表示がうまくいかない場合「もう一度スクレイピング」をクリック
- ③表示を確認する
更新画像が表示されるまでこれを繰り返し行います。
Twitterは「Card validator」を使用してキャッシュをクリアします。やり方は「シェアデバッカー」と同じです。更新画像が表示されると、キャッシュが自動的にクリアされるため、それまで何度も繰り返してみてください。
OGPのまとめ
OGP設定について解説しました。SNS上でWebページのクリック率が高まると、拡散や被リンクの確保といった、集客の導線やSEOの効果を得ることにもつながります。
またクリック率が上がるということは、それだけアクセス数アップの効果も期待できるということ。OGPを設定して集客効果の改善を図り、Webサイトの印象をよりよくしていきましょう！
＜無料＞資料ダウンロード
【成果に直結】Webサイトコンサルティング
Webのプロが成果の出るWebサイトへ改善いたします
