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

HTML

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.

意訳:

twitter:image

ページのコンテンツを表すユニークな画像の URL です。 ウェブサイトのロゴや著者の写真、その他複数のページで有効な画像等の汎用画像は使わないようにしましょう。 この画像はアスペクト比が 2:1 で解像度が最小 300 x 157 、最大 4096 x 4096 のものがサポート対象です。 画像のサイズは 5MB 未満である必要があります。 JPG ・ PNG ・ WEBP ・ GIF フォーマットがサポートされています。 animated GIF は最初のフレームが使われます。 SVG はサポートされていません。

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.

意訳:

高解像度端末で最適な形で表示するには、最小 1200 x 630 ピクセルの画像を使用してください。 大きな画像のある投稿を表示する場合は最低でも 600 x 315 ピクセルの画像を使用しましょう。

以上です。


アバター
後藤隼人 ( ごとうはやと )

Python や PHP を使ってソフトウェア開発やウェブ制作をしています。詳しくはこちら