株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品(サービス)の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

Web制作

OGPとは?OGPの基本からOGP画像のサイズや設定方法

OGPとはWebサイトの内容をSNS上でシェアするための仕組みです。OGPにはWebの記事がSNSにシェアされた際に表示する情報を記述しておく必要があります。

Webサイトの記事やページをSNSでシェアされることは、新しいユーザーを獲得するきっかけになります。

 

OGPとは?

OGPとは、Open Graph Protocolの頭文字をとったもので、Webサイトのコンテンツの内容をSNSで伝える際に使用する仕組みです。例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことがあると思います。OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、といった部分を設定するために使います。

 

OGPの設置場所

OGPは、HTMLファイルの中のheadタグ内に設置します。metaタグでそれぞれのURLやタイトルなどの情報を記述していきます。合わせてそれぞれのSNSのIDやアカウントを記述することで、SNSと連携させましょう。

 

OGPの設置方法

OGPはmetaタグをHTMLソースコード中の~内に記述することで、設定ができます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">

<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を使用することを宣言するタグ

ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
TOPページであれば「website」、TOP以外のページでは「article」を入力します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

ページURL(og:url)

OGPを設定するWEBページのURLを指定します。URLは相対パスではなく絶対パスでの記述をします。

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

ページタイプ(og:type)

ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。

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

ページタイプ(og:type)

ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。

<meta property="og:type" content=" ページの種類" />

ページタイトル(og:title)

ページのtitleを指定します。一般的にはサイトの~と同じ内容を設定しますが、サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいとされています。

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

ページの説明文(og:description)

ページの説明文を指定します。と同様の内容で記述することが多いですが、「og:description」での文字数は80~90文字が最適とされています。の文字数は120文字程度なので、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があるため、OGP用に文章を簡略化するとシェアされた際にユーザーに伝わりやすくなります。

<meta property="og:description" content=" ページのディスクリプション" />

サイト名(og:site_name)

ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_neme」に設定します。

<meta property="og:site_name" content="サイト名" />

画像のURL(og:image)

SNS上でシェアされた際に表示させたい画像を絶対パスで指定します。
Facebookでは画像サイズを1200×630p、比率で「1.91:1」を推奨しています。

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

 

便利な確認ツールがこちら!

Facebookの表示確認ツール「シェアデバッカー」

※Facebookへのログインが必要。
WEBページがSNS上でシェアされた際にどのように表示されるかエラーがないか確認することができます。

デバッガー – 開発者向けFacebook

 

Twitterカードの表示確認ツール「Card validator」

※Twitterへのログインが必要。
Twitter上でツイートされた際の表示結果を確認することができます。
Facebookと同じで、設定したページのURLを入力し「preview card」を押すと、Twitter上でどのように表示されるか見ることができます。

Card Validator | Twitter Developers

 

まとめ

OGP設定をするとたくさんの人の目にふれる機会がおおくなります。
タイトルや説明文をそのままのせるのではなく、どんな文章にしたらクリックしたくなるか、WEBサイトにいってみたくなるか、考えながら設定するとよいかもしれません。
たくさんの人に見てもらいたい、もっと多くの人に知ってもらいたい、そんな時はOGPの設定をしてみてはどうでしょうか。

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • web広告の改善事例が知りたい方
  • 現在お願いしている代理店との比較をしたい方
  • サービスの全体像・料金を知りたい方