OGPとは?画像サイズは?HTMLの書き方もご紹介!のアイキャッチ画像

SNSマーケティング

更新日: 2023/11/5

OGPとは?画像サイズは?HTMLの書き方もご紹介!

character_balloon

イエローちゃん、イエローちゃん

なーに?

character_balloon
character_balloon

OGPタグをつけるとSNSマーケティングに良い影響があるって聞いたんだけどどういうことなの??

あ、OGPタグね!

character_balloon

なら今日は、OGPタグとはなにかを解説するね!

character_balloon

OGPタグとは?

character_balloon

OGPタグとは、FacebookやTwitterなどのSNSにURLを投稿すると、OGPタグ内にあるページのタイトルや画像を表示することができるHTMLだね

character_balloon

「Open Graph Protcol」の頭文字をとってOGPって呼ばれるんだよ!

character_balloon

実際にOGPを設定すると、、、

OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_3枚目
character_balloon

こんな感じで、SNSの投稿に、OGPで設定した画像などが表示されるんだよねー

OGPタグの書き方をご紹介!

character_balloon

次に、OGPタグの書き方を紹介するね

character_balloon

OGPタグを書き方は、

OGPを記述するには2つの修正箇所がある

headタグの修正

headタグ内にOGPタグを設置

character_balloon

に分けられるよ!

character_balloon

どちらも行う必要があるから、しっかりと対応しようね

OGPタグの書き方1.headタグの修正

character_balloon

OGPタグをHTMLに書き込むために、まずは、headタグ自体を修正する

character_balloon

通常は、

headタグの書き換え前

<head>

</head>

character_balloon

ってheadタグは書くけど、OGPタグをHTMLに書き込むために、

headタグの書き換え後

<head prefix="og: https://ogp.me/ns#">

</head>

character_balloon

に修正する必要があるよ!

OGPタグの書き方2.headタグ内にOGPタグを設置

character_balloon

headタグ自体の修正が終わったら、次はheadタグ内にOGPタグを設置する

character_balloon

OGPタグは、

OGPタグを設置

<head prefix="og: https://ogp.me/ns#">

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

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

<meta property="og:description" content="ページの説明文" />

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

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

</head>

character_balloon

こんな感じで、headタグ内に書き込めるよ

character_balloon

それぞれ、contentの中を置き換えれば、OGPタグの効果が出るから、OGPタグは意外と簡単に置けるんだよね!

OGPの画像サイズはどれぐらい?

character_balloon

最後に、OGPタグの画像サイズをSNS毎に解説するね

OGPの画像サイズ1.Facebook

character_balloon

FacebookのOGPタグの画像サイズは、1200 × 630だよ

character_balloon

FacebookでOGP付きで投稿すると、

OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_14枚目
character_balloon

こんな感じで、OGPタグに設定した内容が表示されるね!

OGPの画像サイズ2.Twitter

character_balloon

TwitterのOGPタグの画像サイズは、

TwitterのOGP画像サイズ

1200 × 630

630 × 630

character_balloon

の2種類があるんだよ

character_balloon

630 × 630の正方形は、Summary CardっていうTwitterの特殊なUIでのみ表示されるね

character_balloon

TwitterにOGP付きで投稿すると、、、

OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_17枚目
character_balloon

っていう感じで、OGPに設定した画像が表示されるよ!

character_balloon

TwitterのOGPを全て対応するなら、1200 × 630のサイズにしつつ、文字とかの大切な内容を630 × 630の正方形に収めるのがおすすめかな

まとめ

character_balloon

OGPタグについてまとめると、、、

まとめ

◆OGPタグとは、FacebookやTwitterなどのSNSにURLを投稿すると、OGPタグ内にあるページのタイトルや画像を表示することができるHTML


◆OGPタグは「headタグ自体の修正」「headタグ内にOGPタグを設置」の2つを行うことでHTMLに書き込むことができる


◆OGPの画像サイズは、基本は1200 × 630。Twitterの一部にのみ、630 × 630の正方形が存在する

character_balloon

こうかな!

OGPタグの書き方やサイズまで・・・ありがとね、イエローちゃん!

character_balloon
character_balloon

ううん、大丈夫だよ!

character_balloon

実装頑張ってね〜

character_balloon

イエロー

SNSマーケティング
バイラルマーケティング
UI/UX

インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。

最新の記事一覧
最新の記事一覧