FeatureFrame ダウンロード

アプリのウェブサイト用のOpen Graph画像

2026年10月30日更新

Open Graph画像（OG画像）は、X、LinkedIn、Facebook、Slack、iMessageなど、ほとんどのアプリでウェブサイトへのリンクがシェアされたときに表示される画像です。1200 × 630ピクセル（1.91:1）で作り、og:imageタグで指定し、Xで大きく表示されるようtwitter:cardをsummary_large_imageに設定します。文字は端から離し、リンクをシェアする前にテストしましょう。

Open Graph画像とは

Open GraphはFacebookが始めたメタタグのセットで、ページへのリンクをどう表示するか（タイトル、説明、URL、画像）をほかのアプリに伝えます。投稿やチャットにリンクを貼ると、アプリはそのページを取得してこれらのタグを読み、プレビューのカードを作ります。

画像のタグがないと、アプリは推測します。ロゴやページ内の適当な画像を選んだり、何も表示しなかったりします。アプリのウェブサイトの場合、このカードが製品について最初に目にするものになることも多いので、自分で管理する価値があります。

サイズ：1200 × 630

Open Graphプロトコル自体はピクセルサイズを定めていません。実際には、1.91:1の1200 × 630ならほぼすべてのプラットフォームで横幅いっぱいのカードとして表示されます。LinkedInの1200 × 627もほぼ同じなので、同じ画像を使えます。このサイズで、アプリが取得したときにすばやく読み込めるよう、数MB未満のJPEGかPNGで書き出しましょう。

安全領域をとる

アプリによって画像の切り取り方は少しずつ違い、サムネイルとして小さく表示するものもあります。どこでも読めるようにするには、次の点に気をつけましょう。

追加するタグ

これらを各ページの<head>に入れます。Open Graphプロトコルでは、og:title、og:type、og:image、og:urlが必須とされ、画像を指定する場合はog:image:altも付けるよう求めています。

タグ値の例
og:titleYourApp – 習慣を記録しよう
og:descriptionアプリが何をするのかを1文で。
og:typewebsite
og:urlhttps://yourapp.com/
og:imagehttps://yourapp.com/og.jpg（相対パスではなく完全なURL）
og:image:width / og:image:height1200 / 630
og:image:alt青い背景に置いた、iPhoneに表示したアプリのホーム画面。
twitter:cardsummary_large_image

HTMLでは次のようになります。

Xは、独自のtwitter:タグがない場合、タイトル、説明、画像をOpen Graphのタグから読み取ります。そのため、X専用に必要なタグはたいていtwitter:cardだけです。これがないと、Xは小さなカードを表示するか、カードを表示しないことがあります。

ページごとに1枚の画像

ホームページにはヒーロー画像を使います。ほかのページにはそれぞれ専用の画像を用意できます。

ページ専用の画像があると、シェアされたリンクがその会話のために用意されたもののように見え、どのページも同じロゴのカードにするよりクリックされやすくなります。

プレビューをテストする

アプリはプレビューをキャッシュし、それが数日続くこともあるので、リンクを広くシェアする前にテストしましょう。

古い画像が表示され続ける場合は、画像のファイル名を変えて（たとえばog-2.jpg）タグを更新しましょう。新しいURLならほとんどのキャッシュを回避できます。

よくある失敗

フレームに収めたデバイスで作る

アプリの場合、いちばん効果的なOpen Graph画像はたいていアプリそのものです。いちばんいい画面をデバイスフレームに収め、ブランドカラーの上に置き、短い見出しを添えます。1.91:1は横長なので、中央にスマートフォンを1台置くと空白が多くなります。スマートフォンの横に見出しを置くか、2〜3画面を横に並べましょう。

FeatureFrameには1.91:1のキャンバスプリセットがあります。Macでの手順は次のとおりです。

  1. スクリーンショットをドロップします。FeatureFrameがサイズからiPhoneやiPadを判別し、そのデバイスの3Dモデルに収めます。
  2. 1.91:1のキャンバスを選び、背景に単色、グラデーション、または自分の画像を選びます。
  3. デバイスを少し傾けるか、最大3枚のスクリーンショットを「横並び」のレイアウトで追加します。
  4. 720pのJPEGで書き出します。1.91:1のキャンバスは1376 × 720で書き出され、1200 × 630と同じ形で、少しだけ高精細です。そのまま使うか、正確なサイズにリサイズしましょう。

見出しが必要なら、デザインツールやウェブサイトのテンプレートで入れましょう。手作業で作るのが難しいのは、フレームに収めたデバイスのほうです。

同じ画像をローンチ投稿のヒーロー画像にも使いましょう。ローンチ画像のチェックリストをご覧ください。ほかに必要なサイズはアプリのスクリーンショットをシェアするときの画像サイズに、単体のデバイスフレームはデバイスフレームのライブラリにあります。

ほかのガイド