カイコクとはマーケティング・デザインスキルを持つ優秀な人材と企業様をマッチングをする、複業・副業支援サービスです。
せっかく作り、運営しているWEBサイトであれば、なるべく多くの方に見てもらいたいですよね。
今回は、SNSで多くの方に目にしてもらう、知ってもらうために大切なOGP設定について解説します。
>>【企業向け】SNS運営ができる複業人材をお探しなら「カイコク」
OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。
これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。
例えばこちらの枠で囲まれた部分。ここがOGPです。
OGP設定をしていなかった場合、TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなります。
適切に設定することで、どのようなページで何を伝えたいのかが明確になります。
そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。
また、後ほど詳しく述べますが、Facebookではこれを設定することで、分析や解析に役立つ「ページインサイト」の機能を利用することができるようになります。
OGPはmetaタグをHTMLソースコード内に記述することで設定することができます。
基本的な手順は以下の通りです。
それでは、順番に見ていきましょう。
ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
<head prefix=”og: http://ogp.me/ns#”>
続いて、必要な設定項目の記述をしていきます。
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
OGPを設定するWEBページのURLを指定します。URLは相対パス(*1)ではなく絶対パス(*2)で記述する必要があります。
※1 相対パス: 現在のページから目的のページまでの道順を記述するもの。「./casestudy.html」のように表します。
※2 絶対パス: ドメインも含めて、目的のページまでの道順をすべて記述するもの。「/kaikoku.blam.co.jp/digi-fukugyo/casestudy」のように表します。
ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
様々な種類がありますが、いくつか代表的なものを紹介します。
website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ
その他についてはこちらに記載されています。
Open Graphプロトコル
ページのタイトルを指定します。
通常はサイトのものと同じ内容を設定しますが、og:titleに別のタイトルを設定するとそちらが優先して表示されます。文字数は20文字以内が適切です。
ページの説明文を指定します。文字数は80~90文字が最適です。
ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_name」に設定します。
SNS上でシェアされた際に表示する画像を指定します。WEBページのURL同様にこちらも絶対パスで指定します。
Facebookでの設定を行う際には画像サイズを1200px✕630pxにすると最適な表示がされます。
Twitterでは基本的なOGP設定に加え、「twitter:card」と「twitter:site」を設定します。
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
Twitter上での表示タイプを指定するタグです。
カードの種類は全部で4種類あり、ブログやWEBサイト用、アプリ配布用、動画サイト用とそれぞれ見せ方が変わってきます。
@から始まる、コンテンツの作成者や管理者のTwitterユーザーIDを入力します。
Facebookでは、基本的なOGP設定に加えて「fb:app_id」を設定します。
<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”>
App IDはfacebook for developers (https://developers.facebook.com/apps)にて取得することのできる、OGPの設定やFacebook用アプリを作成する際に必要なIDです。
サイトやブログの管理者をFacebookに伝えるためのタグです。
また、いいね!の数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなどといった、Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。
OGPを設定する際の注意点がいくつかありますので説明していきます。
ページ内容が違うのに、同じOGPを設定するのは避けましょう。
確かに、一つ一つOGP設定(og:title、og:description、og:imageなど)をしていくのは大変です。
しかし、せっかくユーザーがページをシェアしてくれたとしても、同じ画像やタイトルばかりでは意味がありません。
SNSでシェアされた時にユーザーの興味を引けるようにしっかりと設定しておきましょう。
OGPでは媒体ごとに画像サイズが異なります。画像サイズが異なると、表示が崩れてしまう事がありますので注意しましょう。
おすすめの画像サイズとしてはFacebook、Twitter共通で使用できるサイズで、縦横比1.91:1、1200×630ピクセルの画像を使用すると良いでしょう。
適切な画像が表示されるかどうか、「シェアデバッガー」や「Card validator」といったツールで確認することができます。
og:urlプロパティには、正確なURLを指定する必要があります。
間違ったURLを指定していたり、リンク切れになってしまうと機会損失につながってしまいますので気をつけましょう。
また、URLの指定方法は相対パスではなく、絶対パスで記述しますのでその点にも注意しましょう。
ここまでOGP設定について説明をしていきました。
SNSの運用では、OGP設定以外にも重要な設定やポイントがあります。
もし、SNS運用で成果が出ずにお悩みならSNS運用のプロに依頼してみてはどうでしょうか?
複業人材の起用であれば、正社員の採用よりもお手軽です。
社内にノウハウや知見も残りますので、代理店に依頼するよりも中長期的にメリットがありおすすめです。
もし、SNS運用のプロ人材をお探しでしたら「カイコク」にお任せください。
カイコクでは8,500名以上のマーケターが登録しており、SNS運用、SNS広告のスペシャリストが多数登録しています。
専任コンサルタントが課題をヒアリングし、課題解決ができる最適な人材を紹介します。
マッチングまでは無料ですので、お気軽にお問い合わせください。
OGP設定をすることにより、作成したページの内容をユーザーに正しく、詳しく知ってもらうことができるようになります。
さらに、SNS上での拡散を狙うこともできます。
たくさんの人に見てもらいたい、もっと多くの人に知ってもらいたい、そんな時はOGPの設定をしてみてはいかがでしょうか。
また、SNS運用でお悩みなら複業人材を始めとした外部人材の起用も検討してみましょう。
複業人材の起用なら「カイコク」をご検討いただけますと幸いです。