「とりあえず画像置いとけばいい」は卒業しよう。OGPの`og:image`でクリック率を最大化する戦略
フロントエンド開発の現場で、地味ながらも実は「プロジェクトの顔」を決める重要なタグがある。それが``だ。
新米エンジニアのうちは、「とりあえずOGPタグを貼ればSNSで画像が出る」というだけで満足しがちだが、シニアの視点から言わせれば、それは大きな機会損失だ。SNSのタイムラインは戦場だ。ユーザーの親指を止めさせ、リンクをクリックさせるために、この一枚の画像が持つ役割は、もはやUIデザインの一部と言っても過言ではない。
今回は、実務で絶対に外してはいけない`og:image`の勘所と、ブラウザの裏側で何が起きているのか、そして明日から使えるベストプラクティスを解説する。
—
1. なぜブラウザは「画像」を読み込むのか？
SNS（Twitter/X, Facebook, Slackなど）のサーバーは、URLが投稿された瞬間、そのページにクローラー（ボット）を送り込む。そして、HTMLの`
`内にあるOGPタグを爆速で解析し、キャッシュを生成する。ここで注意してほしいのは、「ブラウザの描画エンジンが動くわけではない」という点だ。SNSのクローラーはJavaScriptを実行しないことがほとんどだ。つまり、ReactやVueなどで動的に生成したOGPタグは、サーバーサイドレンダリング（SSR）や静的生成（SSG）をしていない限り、SNS側には「何も設定されていない」と判断される。
もし君のプロジェクトがSPA（シングルページアプリケーション）なら、まずは「ボットが来たときだけHTMLを返す仕組みがあるか？」を再確認してほしい。ここがフロントエンドの踏ん張りどころだ。
—
2. 実務で「事故らない」ためのサイズ選定
OGP画像のサイズについては、ネット上に色々な情報が飛び交っているが、結論から言おう。「1200px × 630px」が世界標準の正解だ。
- アスペクト比 1.91:1 を守ること。これが最も多くのSNSプラットフォームで「トリミングされずに」綺麗に表示される比率だ。
- ファイルサイズは200KB〜500KB以下を意識する。あまりに巨大だと、SNS側のキャッシュサーバーが画像取得に失敗し、アイキャッチが表示されない「画像なしリンク」という悲惨な事態を招く。
—
3. 実践：コピペで使える「鉄板」OGP設定
実務でそのまま使える、堅実な実装コードがこちらだ。`head`タグ内に配置してほしい。
—
4. シニアからのアドバイス：運用でハマる落とし穴
最後に、現場でよくある失敗談を共有しておく。これを知っているだけで、デバッグの時間が大幅に短縮されるはずだ。
- キャッシュの呪い: 一度SNSに投稿されたOGP画像は、SNS側のサーバーにキャッシュされる。画像を修正してもSNS側にはすぐ反映されないことがほとんどだ。Twitter(X)なら「[Card Validator](https://cards-dev.twitter.com/validator)」などのツールを使って、キャッシュの強制更新（スクレイピングの再実行）をかける癖をつけておこう。
- 絶対パスの罠: `og:image`のURLは、必ずプロトコル付きの絶対パス（`https://…`）で書くこと。相対パスだとSNS側が画像を正しく見つけられず、アイキャッチが真っ白になる。
- 動的OGPの必要性: 記事ごとにアイキャッチを自動生成したい場合、`Cloudinary`や`Vercel OG Image`といったサービスを使うのが今のトレンドだ。URLパラメータを変えるだけで画像を生成できるため、フロントエンドエンジニアとしては非常に工数が削減できる。
OGPは単なるメタデータではない。ユーザーがあなたの作ったプロダクトと最初に出会う「玄関」だ。この細かい設定を丁寧に行う姿勢こそが、一流のエンジニアとそうでないエンジニアの境界線になる。
さあ、エディタを開いて、君のサイトのOGPを見直してみてほしい。細かいところまで手が行き届いたプロダクトは、必ず誰かの目に留まるはずだ。
コメント