【5分でわかる】GTM(Googleタグマネージャー)の設定方法
インターネット広告
2024.07.05
2021.04.28
2022.12.23
OGPは、シェア先のSNSで「シェアされたWebコンテンツの内容」を簡潔に説明するための仕組みです。
SNSでシェアされたWebサイトの記事に正方形や長方形の画像と記事タイトル、記事の簡単な説明文が掲載されているのを見たことがありますよね。
OGPを設定するとそれらが表示されるようになるのです。
OGPを設定していないと、各SNS既定のシェア時の表示になってしまうので、ユーザーにシェアされた記事の内容が伝わりにくく、再度のシェア率や訪問率が悪くなります。
この記事では、OGPの設定方法や各SNSでの適切な画像サイズ、シェア時の表示の確認方法について紹介します。
OGPとは、WebサイトのコンテンツがSNSでシェアされた際に「タイトル」「画像」「コンテンツの概要」を表示するためのHTML要素のことです。Open Graph Protocolの頭文字をとってOGPと省略されています。
OGPを設定するとシェア先のSNSでの訴求効果の改善やCTRの向上が見込めます。
シェアされたコンテンツの概要が一目でわかるようになるため、シェアされたコンテンツを目にしたSNSユーザーが「シェアされたコンテンツの有益性」を瞬時に理解できるためです。
有益であると判断されたコンテンツは、目にしたユーザーによって拡散されやすく、目にしたユーザーがシェアしていくことで、記事の訪問者や訴求対象へのリーチが上がります。
OGPが適切に設定されていない場合、SNSユーザーは、シェアされた投稿を見ても
がわかりません。
タイムラインにシェアされたコンテンツが自分に有益かどうかを判断するのに、いちいち投稿内容を確認するためにクリックするユーザーは稀だからです。ぱっと見の印象で「拡散すべきかどうか」を判断するユーザーもいますが、それもOGPが設定されていなければ難しいでしょう。
アメリカ大統領選挙の際、Twitterのリツイート機能が変更になりシェアする前に「リンク先の記事を読みましたか」と表示されるようになったのは記憶に新しいですよね。それほどに、記事の内容を読まない人が多く、ぱっと見の印象で拡散されているのです。
OGPが設定されていない場合、シェアされたコンテンツが「要するに何なのか」がわかりません。あっという間に流れていってしまうタイムラインの中で、「これは自分に関係ありそうだ」「これは拡散すべきだ」と思われない可能性が高いのです。
せっかくコンテンツがSNSでシェアされても、シェアされたSNSからの流入が低くなってしまうということにつながります。
OGPが設定されていない場合、ユーザーがシェアされたコンテンツの内容を把握しにくいため、シェア率が減少します。
SNSでのシェアが減ることによるメリットは、炎上リスクが減る程度です。
シェア・拡散されることで自社サービスの認知度が上がり、見込み顧客へのアプローチにもつながります。SNSマーケティングと併用することで、大きな効果が見込めるので、OGPの設定をしない選択肢はないでしょう。
OGPは、HTMLソース内にmetaタグを記述して設定します。WordPressでWebサイトを作っている場合は、使用テーマに設定ページが用意されていることがあります。
基本的な手順はこの2つです。
追加する基本的なmeta要素は5つあります。必要に応じて追加してください。
LINEやはてなブックマークのOGPは、この基本設定がすんでいれば表示されます。TwitterとFacebookは別個に追加しなければいけない記述があるので、この先もご参考ください。
OGPで表示するタイトルを設定します。
記事タイトルそのままでも大丈夫ですが、SEO対策に特化したタイトルよりも、より拡散されやすいシェアを狙うSNSと相性のいいタイトルに変更してもいいでしょう。タイトルの文字数は多すぎても読みにくいです。どのSNSでも20文字前後が適切です。
OGPを設定したページの種類を設定します。これを設定することでOGPが表示されたときの形式が変わります。
SNSシェアされたときに表示される画像を指定します。画像を指定するときは絶対パスで指定することを忘れないようにしましょう。
それぞれのSNSで最適な画像サイズについては後述しますので、そちらを参考にしてください。
OGPを設定するページのURLを指定します。
こちらのURLも画像と同じように絶対パスで指定してください。
OGPを設定するページの概要を入力します。
全文表示させたい場合は100文字未満で入力してください。Web検索上で表示されるディスクリプションの最適な文字数は100文字から120文字とされていますので、OGP用に短いバージョンを用意する必要があります。
「この先に何が書いてあるんだろう」と期待感を持たせたい場合は、100文字以上入力して、わざと文章が途中で切れるようにするのも手です。
Webサイト「PLAN-B」のOGP設定例
<html prefix=”og: https://ogp.me/ns#”>
<head>
<title>PLAN-B</title>
<meta property=”og:title” content=”PLAN-B” />
<meta property=”og:type” content=”website” />
<meta property=”og:description”
content=”デジタルマーケティングカンパニー 株式会社PLAN-B(プラン …www.plan-b.co.jp
株式会社PLAN-B(プランビー)の公式企業サイトです。” />
<meta property=”og:url” content=”https://service.plan-b.co.jp/” />
<meta property=”og:image” content=”表示させたい画像の絶対パス” />
…
</head>
…
</html>
より詳しく知りたい方は、こちらの参考サイトをご覧ください。
参考サイト:https://ogp.me/
基本のOGP設定が完了したら、TwitterにOGPを表示させる記述を記載しましょう。
TwitterはOGPのカードの種類とTwitterのユーザー名を指定する必要があります。
<meta name=”twitter:card” content=”カードの種類” />
<meta name=”twitter:site” content=”@ツイッターのユーザー名” />
Twitter Cardは4種類から選択します。
基本的には、summaryとsummary_large_imageを使うことになります。
Facebookでは、Facebook App IDを記述する必要があります。
<meta property=”fb:app_id” content=”facebook for developersで取得するID”>
このIDを取得することで、Facebookからの流入を閲覧できる機能が使用できるようになります。
関連サイト:facebook for developers
Twitter、Facebook、はてなブックマークでWebコンテンツがシェアされた場合のOGP画像サイズについて紹介します。
FacebookのOGPは1種類ですが、Twitterは正方形と長方形の2種類あることに注意してください。
横長長方形・正方形のどちらでシェアされても対応できるようにするポイントは3つです。
OGPの見え方を確認できるツールもありますので、アップする前にツールで確認すると間違いありません。
OGPの見え方を確認する際に便利なWebツールを3つ紹介します。
Web上にURLや画像をアップロードするだけで簡単に確認できますので、基本になる形を決める際に利用し、形が決定したらそれをテンプレートとして利用すると、手間がかかりません。
公式サイト:https://rakko.tools/tools/9/
ラッコWEBサービスが提供する「ラッコツールズ」には、SNSシェア時のOGPを確認するツールもあります。
対応しているSNSは
の4種類です。
確認したい記事のURLを入力すると、SNSでシェアされたときの
を確認できます。
画像をアップロードすると
各SNSでの画像の見え方を確認できます。画像は50枚までまとめて選択できるので、どの画像がOGPとしてふさわしいか悩んでいる場合の比較にも便利です。
ブックマークレットとしても利用可能なので、OGP設定を確認したいページの設定をブックマークバーからワンクリックで確認することも可能です。
公式サイト:http://ogimage.tsmallfield.com/
Tohl SMALLFIELD氏が提供している「OGP画像シミュレーター」は、FacebookのOGP画像表示の確認に使えるツールです。
Facebookでシェアされた場合のOGP画像の見え方を確認することができます。Ver.2にアップデートされたことで、複数画像の選択にも対応しており、画像比較にも利用可能です。
公式サイト:https://twitter.com/login?redirect_after_login=https%3A%2F%2Fcards-dev.twitter.com%2Fvalidator
Twitter社が提供している「Twitter Card Validator」は、Twitterでシェアされた場合のOGP画像表示を確認できるツールです。
Twitterアカウントでログインした状態でなければ使用できないので、他のツールに比べると不便です。
設定を確認したいページのURLを入力すると、Twitter上での表示を確認できます。
OGPを設定することで、シェア先のSNSのユーザーにもコンテンツの内容を把握してもらうことができます。
OGPが適切に設定されていないと、シェアされてもぱっと見ただけで素通りされてしまう可能性が高く、訪問者数もシェア率も増えません。
SNSユーザーは、一度流れてしまったタイムラインを遡ってまで記事を探そうとはしないものです。瞬間的に「この投稿は自分に関係ありそう」「有益な内容が書かれていそう」と判断してもらうためにも、OGPは設定しておいた方がいいでしょう。