【ITニュース解説】Free OG Image Generator: Open Graph Image Sizes and Dynamic OG Images in Next.js

ウェブサイトのリンクをソーシャルメディアやメッセージアプリで共有した際、そのリンクのプレビューに表示される画像は、OG（Open Graph）画像と呼ばれている。この画像は、ユーザーがリンクをクリックするかどうかを左右する重要な要素であり、ウェブサイトの見た目やコンテンツの魅力を伝える役割を担う。Open GraphプロトコルというFacebookが提唱し、現在ではLinkedIn、Slack、Discord、WhatsApp、iMessageなど、多くのプラットフォームで採用されている仕組みに基づき、ウェブページのHTML内に設定されたog:imageというメタタグによって指定される。このタグがない場合、プラットフォームは画像を表示しないか、ページ内の画像を推測して表示するため、望ましくない結果になることが多い。X（旧Twitter）も、独自のtwitter:*タグを優先するが、それがなければOGタグにフォールバックしてOG画像を表示する。静的なOG画像は手動で作成した固定の画像ファイルを指し、動的なOG画像は、コードを使ってリクエスト時やビルド時に自動生成される画像を指す。通常、ページのタイトルなどの情報が画像に埋め込まれる。

OG画像の最適なサイズは、ほとんどの主要プラットフォームで対応できるよう、1200×630ピクセル（アスペクト比1.91:1）である。ファイル形式はPNGまたはJPGで、ファイルサイズは5MB未満に抑えるのが推奨される。FacebookやLinkedInは高解像度表示のためにこのサイズを推奨し、Xの大きなカードも1200×630ピクセルの画像を問題なく表示する。画像内に重要なテキストを配置する場合は、四方60〜80ピクセル程度のパディング（余白）を設けることが重要である。これは、一部のアプリが画像の端を切り取ったり、角を丸めたりするため、テキストが途切れるのを防ぐためだ。小さなモバイルプレビューでも目立つように、大きくてコントラストの高いタイトルを使用し、小さな文字の段落は避けるべきだ。各プラットフォームはOG画像の表示に関してわずかに異なるルールを持っているが、ほとんどが1.91:1のアスペクト比に収束する。例えば、Facebookは最低200×200ピクセル、最大8MBまで対応し、Xはsummary_large_imageカードで1200×600から1200×675ピクセルの範囲を推奨する。Next.jsでもopengraph-imageファイルは1200×630ピクセル、最大8MB（twitter-imageは5MB）というファイル規約が存在する。

記事では、無料でOG画像を生成するツールの利用方法も紹介している。このツールは、ブラウザ上で動作し、アカウント登録や透かしなしでOG画像を生成できる。使い方は非常に簡単で、ツールを開いてテンプレートを選び、タイトル、サブタイトル、著者名を入力し、フォントと3つの色（背景、テキスト、アクセント）を選ぶだけで、リアルタイムでプレビューが更新される。完成した画像はPNGファイルとしてダウンロードできるほか、直接ウェブページに貼り付けられる画像URLの取得、さらにはNext.jsのopengraph-image.tsxファイルとして利用できるコードのコピーも可能である。テンプレートは、ブログ投稿、製品/SaaS、ミニマル、グラデーション、コードスニペット、個人/プロフィールなど、6種類から選択できる。生成されたPNG画像は、そのURLがリクエストされたときにレンダリングされ、ブラウザやCDNによって一日程度キャッシュされるため、次に同じカードがロードされる際には高速に表示される。生成された画像URLは、og:imageやtwitter:imageタグに直接貼り付けて利用できるが、運用サイトではPNGをダウンロードするか、生成されたNext.jsファイルを使用することで、第三者のURLに依存しない構成を保てる。

Next.jsで動的なOG画像を生成するには、App Routerの任意のセグメントにopengraph-image.tsxファイルを追加し、next/ogからImageResponseをデフォルトエクスポートする関数を記述する。Next.jsは、このルートを画像として扱い、ページの<head>内にog:imageやog:image:widthなどのメタタグを自動的に挿入してくれるため、手動でメタタグを記述する必要がない。ImageResponseは、JSXとCSS（ただし、flexboxとそのサブセットのみ対応し、display: gridなどは動作しない）をPNGに変換するSatoriとResvgというライブラリを使用している。生成される画像は、リクエスト時APIやキャッシュされていないデータを使用しない限り、ビルド時に静的に最適化されキャッシュされる。ImageResponseのバンドルサイズは最大500KBであり、これにはJSX、CSS、フォント、画像が含まれる。フォントはTTF、OTF、WOFF形式である必要がある。X向けの異なるデザインが必要な場合は、twitter-image.tsxファイルも同じように作成できる。無料のOG画像ジェネレーターは、選択したGoogleフォントをレンダリング時にロードするloadFontヘルパー関数を含むNext.jsコードを生成するため、すぐに利用できる。

OG画像を表示するために必要なメタタグは、最低限og:title、og:description、og:url、og:type、そして絶対HTTPS URLを持つog:imageである。Xで大きなカードを表示するためには、twitter:cardをsummary_large_imageに設定する必要がある。また、og:image:width、og:image:height、og:image:altを追加することで、プラットフォームが画像をダウンロードするのを待たずに最初の共有プレビューを迅速に表示できるようになる。Next.jsを使用しない場合は、これらのメタタグを直接HTMLの<head>内に記述する。Next.jsのApp Routerでは、Metadata APIを使ってこれらの値を設定できる。ルートレイアウトでmetadataBaseを設定すると、相対的な画像パスが絶対URLに変換されるため、便利だ。

OG画像が正しく表示されているかを確認し、デバッグする方法も重要である。Facebook Sharing DebuggerやLinkedIn Post InspectorなどのツールにページのURLを貼り付け、再度スクレイプ（再読み込み）することで、プラットフォームのキャッシュをクリアし、最新のプレビューを確認できる。curl -IコマンドでOG画像のURLに直接アクセスし、200のHTTPステータスコードとcontent-type: image/pngが返ってくることを確認するとよい。curl -sコマンドとgrepを使って、サーバーが返すHTMLソースにOGタグが実際に含まれているかを確認することも可能だ。一般的な問題としては、og:imageが相対パスになっている、ページがクローラーをブロックしている、タグがクライアントサイドJavaScriptによって追加されている、あるいは古いキャッシュが原因で画像が表示されないといったケースがある。これらの問題は、絶対HTTPS URLを使用する、デバッガで再スクレイプする、サーバー側のHTMLを確認するなどの対応で解決できることが多い。画像がXで不適切にクロップされる場合は、アスペクト比が2:1から大きく外れていたり、テキストが画像の端に近すぎたりすることが原因だ。

静的なOG画像と動的なOG画像は、それぞれ異なる用途に適している。ホームページのように頻繁に内容が変わらないページには、手動でデザインした1200×630ピクセルの静的画像ファイルが最もシンプルで高速な選択肢となる。一方、ブログ記事、ドキュメント、製品ページなど、コンテンツが動的に増えたり更新されたりするページには、動的なOG画像が非常に有用である。動的画像は、共有されるリンクごとに自動的にブランドに合った画像を生成するため、一貫したブランドイメージを保つのに役立つ。無料のOG画像ジェネレーターは、デザインを視覚的に行い、その後静的なPNGとしてダウンロードするか、Next.jsのコードとしてコピーして動的な画像として利用するかの選択肢を提供し、両者の橋渡しをする役割を果たす。

OG画像は、Google検索のランキングに直接影響を与えるわけではないが、ソーシャルネットワークやチャットアプリでリンクが共有された際のクリック率を向上させる効果がある。これは、視覚的に魅力的なプレビューが表示されることで、ユーザーがコンテンツに興味を持つ可能性が高まるためである。

まとめとして、すべてのOG画像は1200×630ピクセル（アスペクト比1.91:1）、ファイルサイズ5MB未満で、四方60〜80ピクセルのパディングを考慮してデザインすべきだ。og:imageには必ず絶対HTTPS URLを指定し、Next.jsではmetadataBaseを設定する必要がある。Next.jsでは、next/ogのImageResponseを含むopengraph-image.tsxファイルを作成することで、画像とメタタグの両方を自動生成できるが、その際はflexboxのみを使用する点に注意する。X（Twitter）で大きなカードを表示させるためには、twitter:cardをsummary_large_imageに設定し、特別なデザインが必要なければXはog:imageにフォールバックする。画像を更新した後は、Facebook Sharing DebuggerやLinkedIn Post Inspectorで必ず再スクレイプを行い、最新のプレビューが表示されることを確認することが重要である。

この解説を参考に、ウェブサイトのOG画像を適切に設定し、ソーシャルメディアでの共有時の見栄えを向上させることが、リンクのクリック率を高め、コンテンツの認知度を上げる上で非常に効果的である。