netNews｜web広告、新サービスの解説

OGPとは SNS で シェア時の表示設定方法 twitter Line FB OGP 設定方法 まとめ

Web制作 OGPとは SNS で シェア時の表示設定方法 twitter Line FB OGP 設定方法 まとめ

SNSでのシェア対策に重要なOGPについて解説します。twitter、Line、facebookといったSNSでのOGPの設定方法もまとめて解説していきます。

しかし、OGPとは、そもそも何？という方も多いと思います。

OGPとは、ホームページやブログの概要を、twitter、LINE、FacebookなどのSNSでシェアしたときに、表示してくれるものです。OGPのタグを設定して、ホームページのタイトルやサムネイル画像などをSNSで表示してくれます。

ということは、SNS上で表示される内容のコントロールになるので、内容次第で、ホームページへのアクセス数も変わってきますよね。

この記事では、OGP設定によって、SNSからの集客効果を改善したい！！web担当者、広報担当者向けに、OGPの基礎知識やtwitter、Line、facebookでの設定方法などを、ざっくりと解説していきます。

より多くのユーザーを集客するために必要なSNS。そして、SNSからの誘導に重要な役割を果たすOGP。抑えていきましょう！

目次

OGPとは

OGPとは、Webサイトの内容をSNS上でシェアするための仕組みで、OGPタグというものを、自社のホームページや、ブログに設置することで、twitter、Line、facebookといったSNSでの表示内容をコントロールできる仕組み、タグのことを指し示します。

OGPは、「Open Graph Protocol」の頭文字をとった略称です。

OGPは、

  • WebサイトのURL
  • タイトル
  • ページ概要
  • イメージ画像

などが主な構成要素になっています

OGP の 一例です。

<meta property=”og:title” content=”記事タイトル”>
<meta property=”og:site_name” content=”ホームページ名”>
<meta property=”og:type” content=”article”>
<meta property=”og:url” content=”URL”>
<meta property=”og:image” content=”サムネイル画像URL”>
<meta property=”og:image” content=”ホームページのロゴ画像URL”>
<meta property=”og:description” content=”説明文”>

OGPは、任意の設定要素なので、HTMLでページを表示させるうえでは、絶対必要な要素ではありません。それゆえ、多くのページで、このOGPについての設定はされていないことが多々あります。

この結果、SNSでシェアされたとき、LINEでシェアされたときに、意図していない画像が表示されたり、シェアされた際のサムネイル画像のサイズが適切でなく、ぼやけてしまって意味不明になったりします。

そういう状況を防ぐことで、SNSからの集客効果、クリック率を高められるのが、OGPというHTMLタグになります。

OGP 設定 メリット

OGP 設定をするメリットは

SNSからの集客力をあげるため！

です。

間接的なメリットとして、OGPのタグに設定されている情報は、概要情報となるため、この情報は、Googleなどで重要視されている可能性もあります。

また、前述のように、OGPを設定しないと、SNSでURLをシェアしたときに、意味不明な情報が出てしまいます。これを防ぐこともメリットですね。

いずれにしても、OGPによって、SNSからのクリック率（CTR）を高めることは、デジタルマーケティング上、重要な要素になってきています。

OGPの設定によって、ホームページの訴求効果を高め、興味・関心を持ってくれるユーザーを増やしていきましょう。

SNS OGP 設定方法 動画

SNSで表示されるOGP。このOGPの設定方法について、セルフで学べるレッスン系の動画もご紹介しますね。

SNSでのシェアで、表示をコントロールするOGPについて解説しているYoutube動画があるのです！この動画は、OGP設定のメリットについても解説をしてくれている動画なので、まとめて、OGPについて、学べます！！

人気のあるOGPについての情報、書き方、キャッチーなコピーの考え方について、解説してくれている動画なので、役に立つと思います。OGPのような、若干、地味な設定は、自分でhtmlやCMSの画面を操作して、設定したい！という方には、おすすめの動画かと思います。この動画は、Youtubeアプリでもチェックできるので、移動中でも見れます。もちろん、スマートフォンからも動画の視聴ができます。無料でOGPについてのメリットや設定方法、いろはを学べますよ～。

OGP 設定方法

OGPの設定方法を解説していきます！

まず、共通的に、設定が必須なOGPタグについて、解説します。

  1. ページタイトル
  2. ページの説明
  3. ページURL
  4. ページの種類
  5. アイキャッチ画像

この5つが最低で必須になる、OGPです。

最初のほうで記載したOGPの一例の

<meta property=”og:title” content=”記事タイトル”>
<meta property=”og:type” content=”article”>
<meta property=”og:url” content=”URL”>
<meta property=”og:image” content=”サムネイル画像URL”>
<meta property=”og:description” content=”説明文”>

の部分になります

個別に解説します。

ページタイトル OGP

ページのタイトルを設定するOGPです。

titleタグで設定したタイトル名が引き継がれる仕様のSNSもありますが、ここで指定することで、この設定が優先されます。

ページタイトル OGPはこれです。

<meta property=”og:title” content=”記事タイトル”>

Googleの検索結果に表示されるタイトルの文字数30字まで程度です。が、SNSによって、文字数違うため、工夫するといいかもですね。

ページタイトル OGP 文字数 制限

SNSごとでの、OGPのタイトルの文字数をまとめます。

  • Google検索　スマホ版　20字
  • Twitter　PC版　34字
  • Twitter　スマホ版　20字
  • Facebook　PC版　50字
  • Facebook　スマホ版　48字

文字数は全角換算ですが、各種デバイスによって異なるので、あくまで目安の文字数としてとらえてください。

ページの説明 OGP

ページの説明 OGPタグは、以下です。

<meta property=”og:description” content=”説明文”>

SNSで見たユーザーにアピールできるよう、ページの内容をサマりましょう。説明文の文字数は80～90文字。

長い説明文は途中で・・・になります。

ここで扱われるディスクリプションは、Googleも見ている内容にもなるので、ぜひ、しっかりと、OGPタグの記載をしましょう。

ページURL OGP

ページURL OGPは、以下になります。

<meta property=”og:url” content=”URL”>

シェアするWebページのURLになります。

URLは、httpから始まるフルパスで記載をしましょう！

ページの種類 OGP

ページの種類 の OGP は、この要素です

<meta property=”og:type” content=”article”>

ホームページの種類を記述して、SNSに紹介をします。

基本的には、

  1. 記事やコンテンツ、ブログ の article
  2. TOPページ 付属ページ の website

のどちらかでいいです。

あえて、他のタイプを使用したい場合は、以下をご覧くださいませ。

The Open Graph protocol
https://ogp.me/

正直あまり、タイプを変えてもメリットは感じないです。

アイキャッチ画像 OGP

アイキャッチ画像 は、以下のOGPで設定します

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

ホームページのサムネイル画像のURLを設定してください

実は、ページ内で使用している画像でなくても、問題ありません。

アイキャッチで使用するOGP画像のサイズについては、以下、ご紹介します。

OGP画像 サイズ

OGP画像 サイズは、微妙に、SNSによって変わります。

Facebook OGP画像 サイズ

FacebookのOGP画像のサイズは、長方形、正方形、2パターンで設定できます。しかし、LINEでの、OGP画像との兼ね合いから、正方形でのFacebookのOGP画像の設定をした方が、工数は小さくなります。

Facebook OGP画像 サイズは、正方形なら、200×200ピクセル以上のサイズです。

なお、画像が600×315px以下だと小さく表示されてしまうので、正方形で、画像を作るのであれば、1,200×1,200ピクセルくらいで作っておきましょう。

Twitter OGP画像 サイズ

TwitterのOGP画像のサイズは、Twitterカード、どちらを使うかによって変わってきますが、基本的には、Summary Card with Large Imageを活用しましょう。

理由は、OGPは、SNSからの集客を増やすために行うことなので、大きいサイズの方が、専有面積が大きくなるから、結果的に、SNS集客につながるからです。

Summary Card with Large Imageの場合、Twitter OGP画像 サイズは、アスペクト比2:1で、300x157px以上、4096x4096px以下のサイズになります。

Facebook OGP 設定方法

Facebookは上記で記載した5つのOGP設定に加えて以下の「fb:app_id」を設定しないといけません。

<meta property=”fb:app_id” content=”App-ID”/>

App-IDの部分にはfacebook for developers で取得する半角数字が入ります。

facebook for developersでの登録をして、上記を追記すればOKです。

Twitter OGP 設定方法

Twitterの場合は上記の5つのOGP設定に「twitter:card」と「twitter:site」のOGPタグの設定が必要です

「twitter:card」の設定は、summary_large_imageを入れましょう。

理由は、大きな画像を扱えるからです。

<meta name=”twitter:card” content=”summary_large_image” />

twitter:site：は、コンテンツの作成者や管理者のTwitterユーザーID。先頭に＠をつけて、入力しましょう。

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

LINE OGP 設定方法

LINEは、twitterや、Facebookなどで設定されているOGPを読んでくれます。

なので、特別な設定は不要です。

ただし、LINEのOGP画像は正方形です。

そのため、基本的には、正方形画像で、アイキャッチ画像をあげておかないと、うまく表示されずに、切り取られたりします。

ご注意下さい。

まとめ OGP 設定 SNS 集客 改善へ。twitter、facebook 設定方法 を 抑えよう！

いかがでしたか、OGP 設定。

SNS 集客 改善につながるOGPの設定の基本は実になると思います。

twitter、facebook 設定方法 を 抑えて、OGP 画像を作りましょう！

もちろん、効率的に集客するためには、自分で、自分の記事などを、twitter、facebookなど、SNSへの投稿も重要です。

リンク先の情報を先出しできるOPG設定は、その際にも重要ですね。

デジタルマーケティングの需要は上がっていますので、自分で可能な画像設定部分など、ぜひ対応を検討してみてくださいね。

【無料】投げ銭 システム Buy Me a Coffee 使い方 寄付 サブスク に使える!

twitter 関連記事

【Twitter】Amplifyプレロール動画 広告 ライブ 拡散力 PR力 三拍子 型 動画 プロモーション
https://saras-wati.net/web-ad/about-twitter-amplify-ad/

【ツイッター】Twitter 認証バッジ 青バッジとは？ 認証バッジ 申請方法 まとめ
https://saras-wati.net/marketing/howto-twitter-blue-badge/

【Twitter運用ツール】TwTimezとは 人気投稿分析 リツイート数多い ハッシュタグ活用
https://saras-wati.net/marketing/what-twtimez/

Twitter で ビジネスマッチング オンラインサービス #molomy（モロミー）
https://saras-wati.net/marketing/twitter-molomy/

【twitter】ツイッター 企業アカウント フォロワー数 増やす方法 11選
https://saras-wati.net/marketing/twitter-follower-knowhow/

ソーシャルドッグ twitter 運用 自動化 最強ツール と 呼ばれる 理由
https://saras-wati.net/marketing/about-socialdog/

Twitter広告 種類 と ツイッター広告 の おすすめ 業界 解説
https://saras-wati.net/web-ad/twitter-ad/

Twitter 広告 カンバセーショナルカードとは？選択肢提案でツイート促進
https://saras-wati.net/web-ad/twitter-ad-conversational-202005/

SOCIAL LIST twitter 分析 に 効果的！ リツイート アカウント リスト化
https://saras-wati.net/web-ad/analyze/social-list-twitter/

2020年【Twitter広告】ターゲティングの種類とその使い方を簡単解説
https://saras-wati.net/web-ad/2020-twitterad-target2004/

metaタグ指定のTwitter(ツイッター)画像が荒くなる原因と対策
https://saras-wati.net/news/twitter-img-1903/

【これから？】TweetDeck ツイートデック とは 使い方 アプリ 日本語化 などを解説
https://saras-wati.net/knowhow/tweetdeck-knowhow/

【効果測定】Twitterアナリティクス 使い方 レポート 運用 最適化 方法 解説
https://saras-wati.net/web-ad/analyze/about-twitter-analytics/

Twitter モーメント ガイド！メリット 作り方 使い方 事例 など かんたん解説
https://saras-wati.net/marketing/about-twitter-moments/

twitter 広告 プロモ広告（プロモツイート）とは 事例 料金 活用方法 コツ まとめ
https://saras-wati.net/web-ad/about-twitter-promo-ads/

Web制作の最新記事8件