gotohayato.com

moon indicating dark mode
sun indicating light mode

OGP image 画像のサイズ仕様( 2020 年時点)

2020/01/06HTML

Twitter と Facebook のリンク共有時のカード表示に使われる OGP (Open Graph Protocol) の画像のサイズ周りの仕様についてかんたんにまとめました。

自分用メモなので箇条書きです。 この情報は 2020 年 1 月に確認したもので、将来的に変更される可能性があります。

まとめ

Twitter と Facebook の両方に対応させるには 600 x 315 以上(横が 600 )。 高解像度端末に対応させたい場合は倍の 1200 x 630 以上。

Twitter

  • タグ: <meta name="twitter:image" content="URL" />
  • 最小サイズ: 300 x 157
  • 最大サイズ: 4096 x 4096
  • ファイルサイズ: 5MB 未満
  • ファイル形式: JPG / PNG / WEBP / GIF をサポート
    • animated GIF は最初の 1 枚が使われる
    • SVG はサポート対象外

※これは Summary Card with Large Image ( <meta name="twitter:card" content="summary_large_image" /> )の場合の説明です

公式ドキュメントの引用:

twitter:image

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

Facebook

  • タグ: <meta name="og:image" content="URL" />
  • 最小サイズ:
    • 大画像表示にしたい場合 600 x 315
      • 高解像度端末に対応させる場合 1200 x 630
    • 小さな画像での表示でよい場合 200 x 200
  • ファイルサイズ: 8MB 以下
  • エンコーディング: gzip / deflate をサポート

公式ドキュメントの引用:

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

以上です。

関連記事


後藤隼人
個人事業でウェブ開発やマーケティングをしています。
GitHub
© 2020 gotohayato.com
サイトについてタグ一覧記事アーカイブ