BLOGブログ

お悩み解決記事を公開しています

新鮮なウェブ情報・技術に関するコンテンツだけでなく、考察を綴っています。
お悩み解消や学びにつながるような、みなさまとの距離が縮まる場所にしてまいります。

OGPとは？SNSのシェアがもっと効果的になる
ヒントと設定方法

力を入れて制作したホームページ（以下HP）やランディングページ（以下LP）などのコンテンツ。
「せっかく作ったからには、SNSを活用してたくさんの人に認知を広げたい」と考える方は多いのではないでしょうか？実はSNS投稿する前に行う一工夫で、もっと効果的になるんです！今回の記事では、きっとあなたも自然とSNS広告で目にしている「OGP」設定について解説します。

目次

  • •OGP（おー・じー・ぴー）とは？
  • •OGP設定をしないとどうなる？
  • •OGPを設定する2大メリット
  • •OGPを設定するデメリット
  • •Facebook用の個別設定
  • •Twitter用の個別設定
  • •LINE用の個別設定
  • •OGP画像のサイズに気をつけると、より魅力的に！
  • •まとめ

OGP（おー・じー・ぴー）とは？

OGP=”Open Graph Protocol”の略称

「このお店良かったから、ぜひ行ってみて！リンク貼っとくね」
SNS（Facebook、Twitterなど）やLINEメッセージで、こんな風にURLをシェアすることってよくありますよね。

OGPはそのシェアされた相手に表示されるボックス型のリッチオブジェクトを設定する仕組みのことで、HTMLのmetaタグの一種です。
ボックスの中にはページのサムネイル画像・ページタイトル・概要・URLがまとめられていて、パッと見たときに内容が分かりやすくなっています。

特に集客ページなど、シェアが大切な場合はOGPの表示設定をしっかりチェックしたいところです。

OGP設定をしないとどうなる？

上記の通りOGPを適切に設定することで、見た人にとって何を伝えたいリンクなのか明確になります。

仮にOGPを設定していない場合は、リンク先のWebページの内容をランダムに自動抽出します。その自動抽出で表示された情報が投稿者の意図していないもの、またはユーザーにとって関連性が低いものだと訴求力が低くなる原因となります。

リンクをシェアした後に「この画像を表示させたかったのに･･･」と思った経験はありませんか？または気に入った情報をシェアしたいと思っても、リンクのみの表示なら「やっぱりシェアするのやめよう」となる可能性もあります。リンクを受け取る側も、URLの表示だけだとどんなサイトなのか分からない。不安だから見ないでおこう、となりかねません。

このようにユーザーが感じるちょっとした違和感や不便さによって、投稿がシェアされづらい状況になってしまいます。

OGPを設定する2大メリット

画面占有率が大きくなるので、SNS上で目立って気づかれやすくなる

OGPを適切に設定すると、SNSのタイムラインなどで大きく表示されるリンク画像となります。

画面占有率が大きくなるので、SNS上で目立って気づかれやすくなる

OGPを適切に設定すると、SNSのタイムラインなどで大きく表示されるリンク画像となります。

OGPが設定されているとこのように表示されます（弊社サイト）

画像・リンク・タイトル・概要などの視覚情報が分かりやすいため、ユーザーに対して多くの情報を適切に伝えることができます。そしてユーザー自身に興味を持たせることができるのです。

シェアするリンク画像を大きくする為には、プラットフォームへ別途広告費を支払う必要がある？（筆者はそう思っていました！）答えはNO。OGP設定さえ適切に行っていれば、嬉しいことに広告費をかけず自社投稿の表示を大きくできるのです。

SNSでの幅広い拡散・シェアが期待できる

OGP設定でデザイン性が高い画像をアイキャッチにする、魅力的なタイトルを添えるなど工夫すると、
シェアされたコンテンツや製品が魅力的に見えます。

ここでちょっとSNSユーザーの心理を考えてみましょう。
SNSでWebサイトのリンクを共有するとき、ユーザーは「見栄えがいいものや興味深い情報を共有することで、フォロワーに役立ちたい。そしてフォロワーからの印象を良くしたい」という考えになることが想像できます。

SNSを閲覧する側も、タイムラインで流れてきたサイトが魅力的なものだとついついクリックしたくなるものです。

このようにOGPを適切に設定すると「共有したい」と思うユーザーを増やすことにもつながります。
また、わかりやすいリンクが表示されることでサイトのクリック率が高まり、検索した際の上位表示（SEO）も期待できます。

「SNSでの拡散」は、このようにとても大きな宣伝効果があるのが分かりますね。
SNSからサイトへの流入をより多く得るために、充実したコンテンツに加えてOGP設定も不可欠なんです。

OGPを設定するデメリット

OGP設定で考えられるデメリットは「手間と工数」です。

OGPを設定するには以下が必要。

  • ・画像を適切なサイズにする
  • ・HTMLタグを追加する

少し専門知識が必要なため、「ちょっと面倒くさそう」という方もいらっしゃるかと思います。

しかし、もしご自身で設定できない場合でも、制作会社に相談することが可能です。
OGPを設定するメリットはたくさんあるので、コンテンツに力を入れているなら外注へ依頼するのもオススメします。

OGPの設定方法

OGP設定は、WebサイトのHTMLソースコード内に直接metaタグを記述します。
WordPressなどのCMSで制作されているサイトは、プラグインなどで設定できます。

基本的な記述

【手順】

1 head要素内に「prefix」属性を追加する

2 metaタグで所定の要素を追加する

手順1

HTMLには「メタタグ」という、ホームページの設定などを記述する箇所があります。
OGPはそのメタタグの1つで、HTMLソースコードの「head」タグ内に記述して設定します。

head要素にprefix属性を追加する

ページでOGPを使うことを宣言します。

(例)

<html prefix=”og:http://ogp.me/ns#”>

手順2

headタグ内のmetaタグで所定の要素を追加していきます。
今回は基本的な6つの要素をご紹介します。

<meta property="og:url" content="ページのURL">

<meta property="og:title" content="ページのタイトル">

<meta property="og:type" content="ページの種類（website または blog または article）">

<meta property="og:description" content="ページの概要">

<meta property="og:site_name" content="ページのサイト名">

<meta property="og:image" content="サムネイル画像のUR">

og:url

対象ページのURLを指定します。このとき、URLは絶対パスで記述してくださいね。

og:title

ページのタイトルを指定します。サイトと同じ内容を設定することが多いです。文字数は20~30文字以内が◎

各種SNSやデバイスによっても表示される文字数が変わってくるので、あくまで目安としてください。

og:type

ページの種類を指定します。こちらの種類を指定することで、SNS上での表示のされ方が変わってきます。
代表的なものは以下の2つです。

トップページ : website

TOPページ以外 : article

他にも様々な「type」があるので、用途に合わせて指定しましょう。

og:description

ページの概要を指定します。簡単なページ内容の説明文、80~90文字が◎
リンクをクリックする前にどんな内容か分かるので、ユーザーの関心を引くことができます。

og:site_name

サイト名を指定します。サイト名やブランド名はこちらに記述しましょう。

og:image

SNSでシェアされたときに表示されるサムネイル画像のURLを指定します。
「og:url」タグと同様に、こちらも絶対パスで記述しましょう。

ここで画像を設定しない場合は、ページ内の画像から自動で選ばれてランダムに表示されることになります。
画像のサイズについてはポイントがありますので、後ほど詳細を記載します。

Facebook用の個別設定

Facebookでは、上記の基本的なOGP設定に加えてFacebookアカウントと連携した個別の設定が可能です。
設定しなくても問題はありませんが、「Facebookインサイト」を利用したい場合は基本設定と合わせて対応しておくといいでしょう。「Facebookインサイト」は、いいね！の数や閲覧者の人数、どの時間帯がユーザーの目に止まりやすいかなどを分析できる、マーケティングに便利なツールです。

FacebookのアプリID「fb:app_id」の設定

<meta property=”fb:app_id” content=”App-ID(FacebookのアプリID/15文字の半角数字)">

App IDはOGPの設定やFacebook用アプリを作成する際に必要なIDです。
App IDはfacebook for developers (https://developers.facebook.com/apps)から取得できますよ。

Twitter用の個別設定

「twitter:card」と「twitter:site」の2つがよく使われます。

<meta name="twitter:card" content="カードの種類" />

<meta name="twitter:site" content="@ユーザー名" />

Twitterでは上記の基本的なOGP設定に加え、カードの大きさやユーザー名を指定できるようになります。

twitter:card

Twitter上での表示タイプを指定するタグです。
カードの種類は以下の4種類。

summary

Webページ用
一般的な画像、記事タイトル、概要等が表示されます。

summary_large_image

Webページ用
上記の表示に加え、画像がより大きく表示されます。
特に表示させたい画像がある場合は、こちらのsummary_large_image で記述しましょう。

app

アプリ用
アプリを配布する「ページへのリンク」を指定する際に使用します。
アイコン、アプリの名称、評価や価格などが表示されます。

player

動画用
Twitterで動画や音楽を再生させる際に使用します。

twitter:site

Twitterのアカウントを指定するタグです。
コンテンツの作成者や管理者のTwitterユーザーIDを入力します。
@マークも忘れずに記載しましょう。

LINE用の個別設定

LINEはFacebookで設定するOGPがそのまま利用されるので、特に設定する必要はありません。

OGP画像のサイズに気をつけると、より魅力的に！

OGP画像のサイズはSNSによって微妙に異なります。そのため、どのようなSNSにも対応できる画像サイズで作成するとより魅力的なサムネイル画像になります。

おすすめは1200px×630px。
特に、中央の630px×630pxのエリアに表示させたい主要な情報（ロゴ・タイトル・フレーズ・人の顔など）が入るように作成しましょう。

理由は、SNSによって適正画像サイズが変わり自動でトリミングされたときに画像が見切れてしまったりする為です。
作成する段階から、予めトリミングされることを意識すると安心です。整っていて見やすい画像情報はクリック率アップにつながりますよ！

まとめ

SNSでシェアしたいWebサイトのページは、OGP設定をするひと手間でユーザーに与える印象が大きく変わります。
せっかく作成したコンテンツを多くの人に知ってもらうためにも、ぜひ設定してみましょう！
設定して公開した後は、スマートフォンなどユーザーと同じ目線でのチェックも忘れずにしてみてくださいね。

シンギではWebサイト・広告の制作やSEO対策についてのご依頼・ご相談も承っております。お気軽にご相談ください！

ご相談・お見積り・ご質問等ございましたら、お気軽にお問い合わせください。

ブログ一覧に戻る

BLOGBLOG

この記事を読んだあなたにおすすめ