OGPという言葉は、エンジニア以外の方であれば通常あまり聞きなれないかもしれません。
ただ、今後FacebookやTwitterなどのSNSで記事などをシェアする際には、OGPを設定することで、ユーザーへの訴求力が高まります。
具体的には、シェアした投稿に記事の画像が綺麗に表示されてクリック率が上がる、というイメージです。
ですので、OGPのイメージをきちんと覚えておいて損はありません。
今回は、OGPとは何か？そしてFacebookやTwitterなどの設定方法をわかりやすく解説したいと思います。
この記事を読んで、OGPの設定方法をマスターし、効果的にユーザーに共有できるようにしましょう。
OGPとは何か？
OGPとは「Open Graph Protcol」の略称です。
FacebookやTwitterなどのSNSでシェアした際に、Webページのタイトルや概要、イメージ画像、URL含めた詳細情報を正しくSNS上でシェアするためのHTML要素になります。
技術的なことになるので、具体的な設定はエンジニアに依頼することになりますが、SNS運用の際にOGPの項目を入れるのを忘れないようにしましょう。
OGPを設定するメリット
OGPは設定することで、SNSの投稿を「見やすく」し「リンク先へ遷移しやすく」することができます。
仮にOGPを設定しなかった場合は、SNSのクローラーが自動的にWebページ内の情報を抽出します。
しかし、あくまでも自動で抽出されるため、投稿のフォーマットとうまくマッチしないケースが多くなります。
記事をシェアしたいと投稿したとしても、引き伸ばされて歪んだ画像などが表示されていたらクリックしたくないですよね？
結果、ユーザーへの訴求力が低くなり、多くのユーザーにも共有されないことが想定されます。
OGPの設定メリットは、ユーザーへの共有をより良いものにできることになります。
OGPの設定方法
では次に、OGPの設定方法を解説します。
基本的な記述
OGP設定では、OGPの使用を宣言するために、まずhead要素にprefix属性を指定します。
以下がそのコードになります。
<head prefix=”og: https://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” /> <meta property=”og:url” content=”ページのURL” /> |
以下で個別に解説します。
ページの種類
ページの種類は、meta要素にproperty属性を指定して、その属性値に og:type をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に「article」などのWebページの種類を記述します。
ページのタイトル
ページのタイトルは、meta要素にproperty属性を指定して、その属性値に og:title をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に「OGPとは何？Twitterやフェイスブックで設定するメリットと設定方法を徹底解説！」などのWebページのタイトルを記述します。
ページの説明文
ページの説明文は、meta要素にproperty属性を指定して、その属性値に og:description をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に 「OGPとは、”Open Graph Protcol”の略で、FacebookやTwitterなどのSNSでシェアした際に、Webページのタイトルや概要、イメージ画像、URL含めた詳細情報を正しく伝えるためのHTML要素のことです。
サイト名
サイト名は、meta要素にproperty属性を指定して、その属性値に og:site_name をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に 「Lifrell: デジタルマーケティングの戦略と実行で売上アップを支援する」などのサイト名を記述します。
サムネイル画像のURL
サムネイル画像のURLを指定する場合、meta要素にproperty属性を指定して、その属性値に og:image をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値にサムネイル画像のURLを記述します。
ページのURL
ページのURLは、相対パスではなく絶対パスを記述しましょう。
Twitterでシェアする場合の記述
Twitterでシェアする場合、上記のソースコードに以下の記述を追記しましょう。
| <meta name=”twitter:card” content=”Twitterカードの種類” /> <meta name=”twitter:site” content=”@Twitterユーザー名” /> |
以下で個別に解説します。
Twitterカードの種類
Twitterカードの種類は、meta要素にname属性を指定して、その属性値に twitter:card をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に 「summary」「summary_large_image」「app」「player」といったTwitterカードの種類を記述します。
Twitterユーザー名を指定する
Twitterユーザー名は、meta要素にname属性を指定して、その属性値に twitter:site をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値にウェブサイト単位で利用してるTwitterユーザー名を記述します。
Facebookでシェアする場合の記述
Facebookでシェアする場合も基本は同じです。
基本的な記述と合わせて、以下の「FacebookアプリID」の追記が必要になります。
| <meta property=”fb:app_id” content=”FacebookアプリID” /> |
meta要素にproperty属性を指定して、その属性値に fb:app_id をマークアップします。
さらに、meta要素にcontent属性を指定して、その属性値に FacebookアプリIDを記述します。
OGPを設定する際の注意点
OGPを設定するときの注意点は以下の2つです。
①全ページ同じ内容を設定
全ページ全く同じ内容を設定すれば、ユーザーへの訴求力が低下します。
例えば、2つの違う内容のページに対して同じOGPを設定してしまうと、共有されたときにユーザーには同じシェア内容が見えてしまいます。
結果、ユーザーにシェア内容をスルーされて、興味関心が引きづらくなります。
そのため、全ページに同じ内容のOGPを設定しないように注意しましょう。
②OGP設定できるサイトか確認しない
OGP設定できるサイトかどうかは事前に確認しておきましょう。
headタグ内のHTMLを簡単に編集できないサイトの場合など、サイトのレイアウトが崩れたり、エラーなどが起きてサイトが表示されなくなってしまう可能性があります。
かなり大掛かりなエラーになってしまうので注意してください。
OGP設定の確認方法
OGP設定の確認をするために最もシンプルな方法はFacebookで公開されている「シェアデバッカー」です。
ログイン後、OGP設定の確認をしたいページURLを入力して「デバッグ」ボタンをクリックするだけで確認できます。
Meta社が公開している「ウェブ管理者向けシェア機能ガイド」と合わせて利用すると便利です。
まとめ
OGPを適切に設定することでユーザーへの訴求力が上がります。
FacebookやTwitterは「見やすさ」が命です。
ソースコードは少々難しいかと思いますが、慣れてしまえばその仕組みはさほど複雑ではありません。
SNSでのシェアを効果的に行うために、もう一度この記事を読み直してOGPを適切に設定し、たくさんの記事をユーザーに広げるようにしてください。
