OGPの設定や推奨画像サイズ、気をつけたいポイントは?

SNSで目を惹くサイトのOGPを設定したい!

OGP(Open Graph Protcol)とは?

LINEやTwitter等のSNSでサイトのURLをシェアする際に、URLだけでなく、画像やページのタイトル、説明文が自動で追加された覚えはありませんか? このような表示をつくる要素がOGPです。サイトがどのようなページなのかを相手にわかりやすく伝えることができます。

OGPは、特に何もしなくても表示されますが、意図していない画像や説明文が選定されることがあります。自分のサイトがSNSで誰かに紹介される時に、微妙なサイズや内容の画像が表示されていたら残念ですね。
せっかくだからきちんと設定して、思わずクリックしたくなる、ユーザーの興味を惹くようなOGPの設定を行いたいですね。投稿の中で埋もれることなく「面白そう」と感じてもらえれば、クリック率アップが期待できます。

OGPはどのように設定すればいいの?

OGPの設定は、head内にmetaタグを記述します。

<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content="ページのURL絶対パスが入ります" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:site_name" content="サイト名"/>
<meta property="og:image" content="アイキャッチ画像のURL" />

ページの種類はWebサイトのトップページなら「website」、ブログのトップページなら「blog」、投稿ページなら「article」になります。

この他、Twitterでシェアする場合はTwitterユーザー名を指定、Facebookでシェアする場合はFacebookアプリIDを追加します。

WordPressの場合、プラグイン「‎All in One SEO Pack」等でも設定することができます。

OGP画像の推奨サイズは?

推奨サイズは横1200px x 縦630 px(縦横比1:1.91)になります。
SNSによっては正方形にトリミングされるものもあります。各SNSに対応させるため、大切な内容は中央部分の縦630px x 縦630pxに配置しましょう。

下の画像は、OGP画像シミュレーターで試した結果です。

OGP画像を手軽に確認

OGP画像を確認できるツールがあります。実際にSNSで試さずに済むので大変便利です!

OGP画像シミュレーター

画像をアップロードすると、どのように表示されるのかを確認することができます。上の推奨サイズの項目の参考画像はこちらを使わせていただきました。

OGP画像シミュレーターはこちら

Card validator

こちらはTwitterの表示確認用ツールです。Twitterにログインした状態でTwitterカードの表示を確認することができます。

Card validatorはこちら

シェアデバッカー

こちらはFacebookの表示確認ができます。Facebookにログインした状態で使用します。

シェアデバッカーはこちら

「OGP確認」で検索すると、この他にも検索ツールが見つかります。
こちらのサイトOGP確認では、URLでチェックできるので簡単です。

おわりに

SNSでURLリンクが貼られた際の表示を設定できることをご紹介しました。
目にとまってリンクしてもらえなければ、何も始まりません。OGPは少しの工程でも、大きく影響する可能性がある設定だということを忘れず対応していきたいと考えます。

よくあるご質問を見る 初めてのお客様へ