【イラスト付き】OGPとは？画像サイズは？HTMLの書き方もご紹介！

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

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

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

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

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

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

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

OGPタグの書き方は、

に分けられるよ！

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

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

通常は、

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

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

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

OGPタグは、

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

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

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

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

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

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

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

の2種類があるんだよ

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

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

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

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

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

こうかな！

ううん、大丈夫だよ！

実装頑張ってね〜