fbpx

【2021年版】OGP設定を解説!SNSでシェアされやすい画像サイズやog:title(タイトル)文字数は?

自身のブログやwebサイトを運営していると、SNSでの流入数が伸びない、毎日シェアしているのに全然知名度が上がらないと、伸び悩むことがあるはずです。

SNSでの流入数が増えない原因のひとつにOGP設定が適切でない可能性が考えられます。

SNSでシェアされたwebサイトはタイトルや画像が表示され、人の目に止まりやすいですが、誤ったOGP設定では全く効果が発揮されません。

今回はTwitterやFacebookでシェアされやすく、人の目に止まりやすいOGP設定を解説します。

OGPとは何か?

そもそもOGPとは「Open Graph Protocol」の略称です。

OGPはwebサイトがTwitterやFacebook等のSNSでシェアされた際に、タイトルや画像、サイトの説明文を表示してくれる機能を指します。

ほとんどのSNSでは自動的に指定してくれますが、意図しない情報が表示されることがあり、画像が見切れてしまう可能性があり、シェアされた内容が正しく伝わりません。

OGP設定することで、意図したとおりの表示設定ができるため、ユーザーの興味を引きやすくなります。

参考:The Open Graph protocol

OGPの基本設定

OGPはHTMLの中に、metaタグを記述することで設定できます。

この記事では、OGPを適用するための宣言方法と、基本的なプロパティを紹介します。

OGPを適用するための宣言

OGPを適用するためには、最初に「OGPを使います」と宣言する必要があります。

宣言する方法はhead要素にprefix属性「og: http://ogp.me/ns#」を定義します。

中央部の「fb: http://ogp.me/ns/fb#」は開発者向けFacebookを使用するために定義します。

FacebookのOGP設定を行う場合は必須の設定なので、必ず記述すると考えて問題ありません。

後半部の「website: http://ogp.me/ns/website#」は「website」と「article」の2つのパターンがあり、使い分け方は下記の通りです。

・website

webサイトのトップページを含む個別の記事以外のページに設定する時に使用

・article

個別の記事等の投稿ページに設定する時に使用

og:title

webページのタイトルを指定します。

基本的にHTMLのtitleタグと同じ内容で問題ありませんが、Twitterでは全角35文字程度で省略されて表示されます。20文字と説明しているサイトが多いですが、実際はもっと表示されますので注意してください。

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

og:type

webページのタイトルを指定します。

OGPを設定するwebページの種類を指定します。

musicやvideo、website、article等の様々なタイプがあるので、定期的に公式サイトで確認すると良いでしょう。

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

og:url

OGPを設定するwebページのURLを指定します。

URLは相対パスではなく絶対パスで記述します。

※絶対パスとはトップからの位置のこと

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

og:image

SNSでシェアされた時に表示される画像を指定します。

URLと同様に相対パスではなく絶対パスで記述します。

プロパティに「width」や「height」を指定することでサイズを変更することもできます。

Facebookでは1200 x 630、1.91 : 1の比率を推奨しているため、FacebookのOGP設定をする場合は留意しましょう。

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

og:site_name

webページのサイト名を指定します。

titleと混同しやすいですが、サイト名やブランド、メディア名等の「どのページでも固定の名前」をsite_nameで指定します。

<meta property="og:site name" content="サイトの名前">

og:description

シェアされたページの説明文を指定します。meta description(メタディスクリプション)タグと同じ内容で設定することが多いです。

meta descriptionの内容をそのまま記述すると文字数の制限に引っかかりやすく、OGP用に要約した文章を記載できるとより良いです。要約することで、ユーザーに伝わりやすくなり、流入数の増加も見込めます。

ただ、実際の業務では工数の問題で別途設定しないでmeta descriptionとまったく同じ内容にすることもあります。

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

なお、Twitterのカードタイプをこの記事で推奨している「Summary Card with Large Image」に設定すると、og:descriptionの要素はスマホアプリでは表示されません。

TwitterでのOGP設定方法

Twitterでは上記で紹介したOGPの基本設定と共に「Twitte:card」と「twitter:site」を指定することでOGP設定ができます。

それぞれの指定方法について解説します。

(Twitter OGP設定イメージ)

<meta name="twitter:card" content="1.カードの種類">
<meta name="twitter:site" content="2.Twitterのユーザー名">
<meta property="og:title" content="3.記事のタイトル">
<meta property="og:description" content="4.記事の概要">
<meta property="og:image" content="5.カードに表示する画像のURL">
<meta property="og:url" content="6.記事のURL">

Twitte:card

「Twitter:card」はTwitterで表示するタイプを指定するタグです。

カードの種類は「Summary Card」「Summary Card with Large Image」「App Card」「Player Card」の4種類あります。おすすめはSummary Card with Large Imageです。以下で設定できます。

<meta name="twitter:card" content="summary_large_image">

参照元: Summary with large image | Twitter Developer

・Summary Card

比較的小さめの画像とタイトル、ページ概要を表示するカード

・Summary Card with Large Image

大きな画像とタイトル、ページ概要を表示するカード

・App Card

アプリのダウンロードページへのリンクを表示するカード

・Player Card

動画配信サイト向けに、カード上に埋め込まれた動画や音楽を再生するカード

twitter:site

Twitterの@から始まるアカウント名を「@xxxxxxxxxxx」の形式で指定します。

Facebookでの設定方法

FacebookではOGPの基本設定と共に「fb:app_id」と「fb:admins」のどちらかを指定することでogp設定ができます。

「fb:admins」は個人毎に設定されているIDであり、複数人で管理する場合には向かない、個人情報の流出のおそれがあります。

現在は個人利用の場合においても「app_id」が主流なため「fb:admins」の設定方法は省略します。

app_idの取得方法

app_idはwebサイトの管理者を表します。

アプリIDを設定することで、いいねの数やクリック数の推移、クリックされた時間などが分析できるFacebookインサイトを利用できるようになります。

Facebookインサイト参照: インサイト | Facebookヘルプセンター

app_idの取得は下記の流れで行います。

・Facebookにログインした状態でFacebook開発者にアクセスし「スタートガイド」から認証を行います。

・右上のご自身のアイコンから「アプリを作成」を選び、何でもいいのでアプリを作成します。

・作成後、画面上部にアプリIDが表示されるので、表示されたIDをmetaタグ内に埋め込みます。

<meta property"fb:app_id" content="アプリID"/>

OGP設定が正しくされているか表示をシミュレータで確認してみよう!

OGP設定ができても、うまく反映されているか分からないと不安になります。

そういった不安を解消するために、TwitterやFacebookではOGP確認ツールがあります。

TwitterとFacebookで確認方法が異なるため、一つひとつ紹介します。

TwitterのOGP確認は「Card validator」

Card validatorは、Twitterへログインし、確認したいwebサイトのURLを指定することでOGPの表示内容を確認することができます。

確認後に設定を変更した場合においても、再度URLを入力することなく変更後の内容を確認することができ、大変使いやすいです。

Card Validator | Twitter Developers

FacebookのOGP確認は「シェアデバッガー」「OGP画像シミュレータ」

画像の表示内容を確認できます。

Facebookの推奨サイズである1200 x 630で確認できるため、シミュレータ上のサイズとタイムライン上のサイズが一致するため利便性が高いです。

シェアデバッガー – Facebook for Developers

OGP画像シミュレータ | og:image Simulator

OGP設定まとめ

今回はOGP設定について解説しました。

SNSでシェアされたとしても、画像サイズが小さい、画像が見切れている等の不備があるだけで、クリック率は激減します。

適切なOGP設定により、SNSで人の目に止まりやすくなれば、より一層拡散され人の興味を引くことに繋がります。

興味を持つ人が増えるほど流入数が増加するだけでなく、最終的な成約にも繋がるでしょう。

今やOGP設定はブログやwebサイトの運営において必須の設定なのです。

資料ダウンロード申し込み

Scroll to Top