![OGPとは?画像サイズは?HTMLの書き方もご紹介!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/caf4ac5e9f6744f288420911c52ce9a9/Group%20246%20(5).png?w=1200&fm=webp)
SNSマーケティング
更新日: 2023/11/5
OGPとは?画像サイズは?HTMLの書き方もご紹介!
![character_balloon](/media/character/pink_panic_left.png)
イエローちゃん、イエローちゃん
なーに?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/pink_question_left.png)
OGPタグをつけるとSNSマーケティングに良い影響があるって聞いたんだけどどういうことなの??
あ、OGPタグね!
![character_balloon](/media/character/yellow_inspiration_right.png)
なら今日は、OGPタグとはなにかを解説するね!
![character_balloon](/media/character/yellow_happy_right.png)
OGPタグとは?
![character_balloon](/media/character/yellow_confidence_left.png)
OGPタグとは、FacebookやTwitterなどのSNSにURLを投稿すると、OGPタグ内にあるページのタイトルや画像を表示することができるHTMLだね
![character_balloon](/media/character/yellow_happy_left.png)
「Open Graph Protcol」の頭文字をとってOGPって呼ばれるんだよ!
![character_balloon](/media/character/yellow_down_left.png)
実際にOGPを設定すると、、、
![OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_3枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/ef90fd680d5542e6ad8ce3818508db4c/Group%20294.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
こんな感じで、SNSの投稿に、OGPで設定した画像などが表示されるんだよねー
OGPタグの書き方をご紹介!
![character_balloon](/media/character/yellow_normal_left.png)
次に、OGPタグの書き方を紹介するね
![character_balloon](/media/character/yellow_down_left.png)
OGPタグを書き方は、
headタグの修正
headタグ内にOGPタグを設置
![character_balloon](/media/character/yellow_normal_left.png)
に分けられるよ!
![character_balloon](/media/character/yellow_happy_left.png)
どちらも行う必要があるから、しっかりと対応しようね
OGPタグの書き方1.headタグの修正
![character_balloon](/media/character/yellow_confidence_left.png)
OGPタグをHTMLに書き込むために、まずは、headタグ自体を修正するよ
![character_balloon](/media/character/yellow_normal_left.png)
通常は、
<head>
</head>
![character_balloon](/media/character/yellow_normal_left.png)
ってheadタグは書くけど、OGPタグをHTMLに書き込むために、
<head prefix="og: https://ogp.me/ns#">
</head>
![character_balloon](/media/character/yellow_happy_left.png)
に修正する必要があるよ!
OGPタグの書き方2.headタグ内にOGPタグを設置
![character_balloon](/media/character/yellow_confidence_left.png)
headタグ自体の修正が終わったら、次はheadタグ内にOGPタグを設置するよ
![character_balloon](/media/character/yellow_normal_left.png)
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](/media/character/yellow_normal_left.png)
こんな感じで、headタグ内に書き込めるよ
![character_balloon](/media/character/yellow_smile_left.png)
それぞれ、contentの中を置き換えれば、OGPタグの効果が出るから、OGPタグは意外と簡単に置けるんだよね!
OGPの画像サイズはどれぐらい?
![character_balloon](/media/character/yellow_normal_left.png)
最後に、OGPタグの画像サイズをSNS毎に解説するね
OGPの画像サイズ1.Facebook
![character_balloon](/media/character/yellow_confidence_left.png)
FacebookのOGPタグの画像サイズは、1200 × 630だよ
![character_balloon](/media/character/yellow_down_left.png)
FacebookでOGP付きで投稿すると、
![OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/eb5df49257b441f6957acd76db78918c/Group%20295.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_happy_left.png)
こんな感じで、OGPタグに設定した内容が表示されるね!
OGPの画像サイズ2.Twitter
![character_balloon](/media/character/yellow_down_left.png)
TwitterのOGPタグの画像サイズは、
1200 × 630
630 × 630
![character_balloon](/media/character/yellow_normal_left.png)
の2種類があるんだよ
![character_balloon](/media/character/yellow_happy_left.png)
630 × 630の正方形は、Summary CardっていうTwitterの特殊なUIでのみ表示されるね
![character_balloon](/media/character/yellow_down_left.png)
TwitterにOGP付きで投稿すると、、、
![OGPとは?画像サイズは?HTMLの書き方もご紹介!の画像_17枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/ef90fd680d5542e6ad8ce3818508db4c/Group%20294.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_happy_left.png)
っていう感じで、OGPに設定した画像が表示されるよ!
![character_balloon](/media/character/yellow_confidence_left.png)
TwitterのOGPを全て対応するなら、1200 × 630のサイズにしつつ、文字とかの大切な内容を630 × 630の正方形に収めるのがおすすめかな
![character_balloon](/media/character/yellow_down_left.png)
OGPタグについてまとめると、、、
まとめ
◆OGPタグとは、FacebookやTwitterなどのSNSにURLを投稿すると、OGPタグ内にあるページのタイトルや画像を表示することができるHTML
◆OGPタグは「headタグ自体の修正」「headタグ内にOGPタグを設置」の2つを行うことでHTMLに書き込むことができる
◆OGPの画像サイズは、基本は1200 × 630。Twitterの一部にのみ、630 × 630の正方形が存在する
![character_balloon](/media/character/yellow_normal_left.png)
こうかな!
OGPタグの書き方やサイズまで・・・ありがとね、イエローちゃん!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/yellow_happy_left.png)
ううん、大丈夫だよ!
![character_balloon](/media/character/yellow_smile_left.png)
実装頑張ってね〜
![character_balloon](/media/character/yellow_writer.png)
イエロー
インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業収入が5万円以下の人は8割越え!?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!?テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業収入が5万円以下の人は8割越え!?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!?テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス