Open Graph Image

Open Graphイメージは、誰かがリンクを共有したときに、SNS、メッセージアプリ、コラボレーションツールが表示するプレビュー画像です。ページは、Facebookが2010年に導入したOpen Graphプロトコルの og:image メタタグで、この画像を宣言します。

タグの値は、画像への絶対URLです。任意のタグで、幅、高さ、MIMEタイプ、代替テキストを指定できます。og:image:width、og:image:height、og:image:type、og:image:alt です。X（旧Twitter）は独自の twitter:image タグを読み取り、そのタグがない場合はOpen Graphのタグを使います。

サービスは、リンクが最初に共有されたときに画像を取得してキャッシュします。そのため、キャッシュが更新されるまで、画像の変更が表示されないことがあります。

Open Graphイメージが重要な理由

明確なプレビュー画像のあるリンクは、URLだけのリンクよりフィードやチャットで多くの場所を占め、クリックする前にページの内容を読み手に示します。og:image がないと、サービスはページ内から画像を選ぶか、画像をまったく表示しません。

Open Graphイメージの仕様

項目	一般的な方法
サイズ	1200×630ピクセル
アスペクト比	約1.91:1
形式	PNGまたはJPG
URL	絶対URL。HTTPSで公開されてアクセスできること
テキスト	端から離して配置する。一部のサービスは端を切り抜きます

各プラットフォームは独自のガイドラインを公開しており、時間とともに変更されます。自分にとって重要なプラットフォームの最新のドキュメントを確認してください。

効果的なOpen Graphイメージの作り方

1. 1200×630のキャンバスから始めます。
2. 大きい文字で短いタイトルを入れ、わかりやすい製品のスクリーンショットまたはビジュアルを追加します。
3. 重要な内容は中央の領域に配置します。
4. テキストの多いデザインはPNG、写真はJPGで書き出し、ファイルを小さく保ちます。
5. 各プラットフォームのプレビューツールまたはデバッグツールでリンクを確認します。

実際の公開作業での扱い

チームは多くの場合、ブログの記事やドキュメントのページごとに、テンプレートからOpen Graphイメージを生成します。テンプレート内の製品のスクリーンショットは、実際のインターフェースを示します。枠より大きいサイズで撮影し、テキストを鮮明に保つために縮小してください。

よくある間違い

• og:image に相対URLを使う。
• 一部のプラットフォームが切り抜く端の近くにテキストを配置する。
• 画像を更新した後にキャッシュを考慮しない。
• 縦長のスクリーンショットを使い、読めない細い帯に切り抜かれる。

今すぐ修正したい画像がありますか？

スクリーンショットから1200×630のプレビューを作るには Social Image Composer を使い、Aspect Ratio Calculator で比率を確認してください。

よくある質問

Open Graphイメージはファビコンと同じですか？

いいえ。ファビコンは小さいサイトのアイコンです。Open Graphイメージは、共有されたリンク用の大きいプレビューです。

og:image にSVGを使えますか？

多くのサービスはSVGのプレビューを表示しません。PNGまたはJPGを使ってください。

出典

• The Open Graph protocol

関連リソース

• ファビコン: ブラウザのタブに表示される小さいアイコン。
• Image Compressor: プレビューのファイルを小さく保ちます。