SNSなどにWebのリンクを投稿した際に表示されるOGPはリンク先のウェブページへの入り口でSNSから集客する際に大きな影響があるものです。
今回は、より多くの人を集客するために重要なOGPについて概要からSNS毎のOGP設定方法まで詳しく解説します。
目次
OGPとは
OGPとは「Open Graph Protocol」の略で、WebサイトのURLをTwitterやFacebookなどに投稿した際に表示される、Webサイトのタイトルや詳細、イメージ画像などを任意で表示させるHTML要素です。
YouTubeのアイキャッチ画像は動画の内容や特徴を視聴者に伝え、クリックを促す効果がありますがOGPはこのアイキャッチ画像と同じ役割を担っています。
OGPを設定しないとSNSでURLをシェアした際にプラットフォーム側がサイトからタイトルや内容、画像などの情報を収集したものが表示されてしまいます。これが時には自分が伝えたい内容でないものであったり、ユーザーに内容が伝わりにくいものである場合があるため、情報の訴求力を高めてユーザーの興味・関心を引きつけてより多くのユーザーにWebサイトに訪問してもらうためにもOGPを設定することは大切です。
特にSNSではOGP画像の適正サイズが異なるため正しく理解していないとせっかく効果的な画像やタイトルを考えても正しく表示されずに効果が薄れてしまうという事態になりかねません。
それぞれのSNSに合ったOGP画像サイズを理解してSNS毎に設定していくことが大切です。
OGPの設定方法
基本的なOGP設定方法をみていきましょう。設定が必須なものは以下5つになります。
①ページタイトル
ページのタイトルを指定します。titleタグで設定したタイトルと別のタイトルを記載すると「og:title」のタイトルが優先されます。
HTML要素：<meta property=”og:title” content=”ページのタイトル”>
②ページの説明
ページの説明文（サマリ）を指定します。ユーザーにページの内容が伝わりやすい文章にしましょう。文字数は80~90文字が最適とされています。
HTML要素：<meta property=”og:description” content=” ページのディスクリプション” />
③ページURL
表示するページのURLを指定します。
HTML要素：<meta property=”og:url” content=”ページのURL”>
④ページの種類
表示するページの種類を指定します。例えば、トップページの場合は「website」、記事ページの場合は「article」となります。
HTML要素：<meta property=”og:type” content=”ページの種類”>
⑤アイキャッチ画像
記事のサムネイル画像を指定します。記事内で使用している画像である必要はありませんのでよりユーザーの興味・関心を引けるものを設定しましょう。
HTML要素：<meta property=”og:image” content=”ページのアイキャッチ画像のURL”>
上記以外にも、メールアドレスや言語の指定など任意で設定することも可能です。
次にSNSで個別で必要なOGP設定方法をみていきましょう。
・Facebookの設定方法
Facebookは基本的なOGP設定に加えて以下の「fb:app_id」を設定する必要があります。「App-ID」の部分には15文字の半角数字が入ります。
「App-ID」とは、OGPの設定やFacebook用アプリを作成するのに必要なIDで、facebook for developers で取得することができ、Facebookの個人アカウントさえもっていれば電話番号認証ですぐにアカウントを作成することが出来ます。
「App-ID」のタグはFacebookにサイトやブログの管理者を伝えるだけでなく、いいね数や閲覧者数がどれくらいいたかというトラフィックを分析できるFacebookインサイトを利用できるようになります。
HTML要素：<meta property=”fb:app_id” content=”App-ID”/>
・Twitterの設定方法
Twitterは基本的なOGP設定に加えて「twitter:card」と「twitter:site」を設定する必要があります。
・「twitter:card」の設定
Twitter上でツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。
カードの種類は、HTML文書にmeta要素を記述し、それを基にカードが生成される仕組みです。なので、カードを分ける際はWebページのhead要素内に所定の<meta>タグを追加してあげるという作業になります。
カードの種類は以下の4種類があります。通常のWebサイトやブログなどに使用するのは主に「サマリーカード」と「大型画像付きサマリーカード」になります。
・サマリーカード：
小さめの画像と記事のタイトル、概要を表示できるカードです。画像は大きくないですが記事タイトルや概要が表示されるのでどのような記事であるかを伝えることは出来ます。
アップロードされた画像は正方形にトリミングされ、最小サイズは144×144ピクセル、最大サイズは4096×4096ピクセルで5MB未満が対応となります。利用できる画像の形式は JPG、PNG、WEBP、GIFでSVGには対応していません。
・大型画像付きサマリーカード：
大きな画像と記事のタイトル、概要を表示できるカードです。サマリーカードと比べて画像サイズが大きいので記事タイトルや概要といったテキスト以外の要素でユーザーに興味・関心を訴求することが出来ます。
アップロードされた画像は横縦の比率が 2：1 になるように調整され、最小サイズは300×157ピクセル、最大サイズは4096×4096ピクセルで5MB未満が対応範囲となります。
利用できる画像の形式は JPG、PNG、WEBP、GIFでSVGには対応していません。
・アプリカード：
モバイルアプリ用のカードです。アプリのダウンロードページへのリンクを表示するカードが表示されます。
・プレイヤーカード：
動画配信サイト向けのカードです。ツイートに表示されたカード上で動画のダイジェストなどを再生することができます。
・「twitter:site：」の設定
コンテンツの作成者や管理者のTwitterユーザーID（@からはじまる）を入力します。
HTML要素：<meta name=”twitter:card” content=”カードの種類” />
HTML要素：<meta name=”twitter:site” content=”@ユーザー名” />
・LINEの設定方法
LINEでWordPressやFacebookなどでOGPが設定されている場合、URLを投稿されるとそのOGPがLINE上でも表示されます。
ただし、LINEのOGP画像は正方形で表示されるので、例えばFacebookで長方形の画像を設定しているとLINEの投稿では左右が切り取られて正方形で表示されるのでアップロードする画像の形は注意が必要です。
次に、ブログ作成でも良く使われるWordPressのOGP設定方法をご紹介します。
WordPressでのOGP設定方法
WordPressでは「All in One SEO（旧：All in One SEO Pack）」というプラグインを利用することで簡単にOGPを設定することが出来ます。
「All in One SEO」を利用したOGP設定手順は以下です。
1.管理画面のサイドバーにある「プラグイン」から「All in One SEO」を検索してインストール
2.「All in One SEO」はデフォルト状態だとOGPタグの設定画面が無効化されているので管理画面サイドバーの「All in One SEO」からFeature Manager＞Social Met＞Activeの順に選択し、有効化。
3.「All in One SEO セットアップウィザード」のステップ2の6で、デフォルトのソーシャルシェア画像をアップロード
SNS毎にOGPを設定することも出来ます。理画面サイドバーの「All in One SEO」からソーシャルネットワークを選択し、SNS毎のOGPを設定しましょう。
記事毎に設定する場合は、投稿する記事の画面下部の「AIOSEO設定」から行います。
SNS別タイムライン上でのOGP表示確認方法
設定したOGPが正しく表示されているか確認したい時はどうすれば良いのかみていきましょう。また、確認した内容が表示したいものと異なっていた場合の修正方法も合わせてご紹介します。
Facebookでは「シェアデバッカー」というツールでリンクがSNS上でシェアされた際にユーザーにどのように表示されるかやエラーがないかを確認することができます。（※本ツールの利用にはFacebookへのログインが必要です。）
確認した内容が意図した内容と違った場合は該当の項目を修正します。項目を修正後、「シャアデバッカー」画面上の「もう一度スクレイピング」をクリックすることで修正内容が反映されます。この時点で表示に問題がなければ意図した通りに表示されます。
Twitterでは「Card validator」というツールでFacebook同様、OGPがどのように表示されるかやエラーが無いかを確認することができます。（※本ツールの利用にはTwitterへのログインが必要です。）
確認した内容が意図した内容と違った場合は該当の項目を修正します。項目を修正後、「Card validator」画面上の「Preview card」をクリックすることで修正内容が反映されます。この時点で表示に問題がなければ意図した通りに表示されます。
また、作成したOGP画像がタイムライン上でどう見えるか確認したい場合、OGP画像シミュレーターを利用すると簡単に確認することが出来ます。
出来たばかりのサイトの場合は修正後のOGPが反映されるのに少し時間が掛かりますので、修正後少し時間をおいて確認してみると良いでしょう。
クリック率（CTR）を上げるOGPとは
集客効率を上げるために1つの指標としてクリック率（CTR）がありますが、クリック率（CTR）を上げるためにはOGPの設定は非常に重要です。
クリック率（CTR）がよいOGPのポイントは「目を引くクリエイティブ」であることです。目を引くクリエイティブにするポイントとしてリンク先のページの内容をイメージできる画像を設定することがあげられます。極端な話、海でのアクティビティーに関する記事のOGP画像がテキストだけであったり海の色を示す青だけの画像にするよりも、リアルな海の画像やアクティビティーを楽しんでいる人の画像にした方が記事内容のイメージがしやすくクリックに繋がりやすいです。
よりOGPのクリック率（CTR）を上げるための手法としてタレントやインフルエンサーを起用するという方法があります。
タレントやインフルエンサーは認知が高いため、起用することで訴求したい商品やサービスに信頼感を与えたり、目に止まりやすくなったりする効果があります。
インフルエンサーを起用することで一定反応してくれるファン層を獲得でき、加えてその記事のリンクや投稿をシェアしてくれる可能性も高く、ファンがシェアすることでその周りの未認知層にもアプローチすることができるのでクリック率（CTR）の向上が期待できます。
効果を高めるためにクリエイティブだけでなくタイトルや説明文に人名を入れる事でよりユーザーに遷移先の記事の内容を想起させる仕掛けをつくりましょう。
まとめ
効率的に集客するためにはSNSの投稿頻度や投稿内容だけでなく、ユーザーにとってリンク先の情報のファーストタッチとなるOGPを設定することがとても大切です。
よりSNS集客の効果を高める方法としてインフルエンサーを活用したOGPやクリエイティブ作成方法があります。GROVEではインフルエンサーのキャスティングからSNSでのクリエイティブ作成まで訴求の目的に即した内容をご提案しています。
インフルエンサーマーケやOGP活用にお困りの際はお気軽にお問い合わせください。
