MENU
いろはくま
HSS型HSPとして「生きづらさ」に悩み、30代手前で起業を決意。Webデザイン職業訓練校に通い、Web業界へ。現在はWebデザイナーとして会社員とフリーランスを両立しています。このブログでは、未経験からのWebデザイナーになるための方法と起業・フリーランスの方へ私の体験談をもとに、役立つ情報を発信しています。
\ Webデザイナーになるロードマップ公開中 /

SNSで共有する時のアイキャッチ画像推奨サイズまとめ

サイト制作やブログ運用など行う際「OGP(オージーピー)」や「ファビコン」はご存じですか?

ファビコンはサイトのアイコン。

OGP(オージーピー)はサイトのアイキャッチの役割です。

SNSでのシェアやブラウザでサイトを見たときにわかるようSNSごとに推奨されるサイズが異なります。

また、WordPressの設定によってはファビコンの推奨サイズも変わることがあります。

この記事では、SNSごとの推奨サイズやコードの設定方法、そして共通サイズの選択について、わかりやすく解説します。

目次

OGP(オージーピー)とは?なぜ必要なのか?

OGP:Open Graph Protocol

SNSでリンクがシェアされた際に表示される画像です。

OGPを設定することで、特定の画像やタイトル、説明文が表示され、リンク先の内容が視覚的に伝わりやすくなります。

例えば、InstagramやX(旧Twitter)、FacebookでリンクをシェアするとOGPに設定された情報が表示されます。

以下のようにシェアするときにOGP画像が表示されます。

適切なOGPが設定されていない場合、サイトの内容がうまく伝わらず、クリックされる可能性が低くなってしまう可能性もあるためOGPは必ず設定しておきましょう!

SNSごとのOGP推奨サイズと設定方法

SNSごとにOGPの推奨サイズは異なります。以下は、主要なSNSでの推奨サイズと、設定する際のコードの例です。

  • Facebook: 1200×630ピクセル (横長の画像が適しています)
  • X(旧Twitter): 最小サイズは300×157ピクセル 〜最大サイズは 4096×4096ピクセル
  • Instagram: 1080×1080ピクセル (正方形の画像が推奨されます)

異なるSNSでそれぞれの最適な画像を表示させる場合、以下のようにOGPタグを複数設定します。

<meta property="og:image" content="Facebook用の画像URL">
<meta property="twitter:image" content="Twitter用の画像URL">
<meta property="og:image:alt" content="画像の説明">

SNS共通にする場合の最適なOGPサイズ

すべてのSNSで共通のOGP画像を使用する場合には、1200×630ピクセルが最適です。

このサイズは、FacebookやTwitterでの表示に適しており、Instagramでも問題なく表示されます。

ファビコンの推奨サイズとWordPressでの設定方法

一般的なファビコンの推奨サイズは16×16ピクセルから32×32ピクセルですが、WordPressでは512×512ピクセルが推奨されています。

このサイズは、高解像度デバイスでもきれいに表示されるよう設計されていることが理由で推奨されてます。

ファビコンを作成したら、以下のようにHTMLの<head>タグ内に記述して設定します。

<link rel="icon" href="ファビコンのURL" type="image/png">

WordPressを使用している場合、管理画面の「外観」→「カスタマイズ」→「サイト基本情報」から簡単にファビコンを設定できます。

推奨サイズの512×512ピクセルを使用することで、キレイな見た目を実現できます。

ファビコンのサイズが小さずぎると、スマホでブックマークしたときやホーム画面に追加したときに表示される画像が粗くなってしまいます。

まとめ

OGPとファビコンは、どちらもサイトの印象を大きく左右する重要な要素です。

SNSごとのOGP推奨サイズに合わせて設定することで、シェアされた際にサイトの魅力を最大限に引き出すことができます。

ファビコンもサイトのブランドイメージを強化し、推奨サイズに従って設定することが大切です

これらのポイントを押さえて、サイトの完成度をさらに高めましょう。

私も記事更新しながら、せっせとサイトカスタマイズ中です!

また次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次