ブログのプレビュー崩れを解決した方法
Xにブログのリンクを投稿したところ、プレビュー画像がおかしいことに気づきました。技術記事の画像ではなく、セールスのバナーが表示されていたのです。
直近の7つの記事を確認したところ、すべて同じセールスバナーになっていました。エンジニアリングの深掘り記事が広告のように見えてしまい、信頼性を損なう原因となっていました。
問題は単純でした。コードにフォールバック（代替）ルールが設定されていたのです。記事にアイキャッチ画像が設定されていない場合、デフォルトのセールスバナーを使用するようになっていました。42の記事すべてにアイキャッチ画像を設定していなかったため、すべての記事で同じ画像が表示されていました。
私たちには2つの選択肢がありました。
- 選択肢A：42枚の画像をすべて手動で作成する。これには時間がかかり、新しい記事を書くたびに作業が発生します。
- 選択肢B：動的な画像生成エンジンを構築する。これにより、各記事に合わせたカスタム画像を自動的に生成できます。
私たちは選択肢Bを選びました。PHP GDを使用して、小さなエンジンを構築しました。
仕組みは以下の通りです。
- エンジンがオンデマンドで1200x630のPNGを作成します。
- ダークな背景と記事のタイトルを使用します。
- タイトルはデータベースから取得します。
- 初回レンダリング後、画像をディスクに保存します。
- 以降のリクエストではキャッシュされたファイルが提供されるため、非常に高速です。
この構築過程で、2つの具体的な問題を解決しました。
言語サポート：Interのようなラテン文字フォントのみを使用していたため、日本語が文字化けして空白のボックスとして表示されてしまいました。日本語のタイトルには Noto Sans JP を使用するように切り替える処理を追加しました。
ビジュアルのトーン：VercelやPlanetScaleのようなプロフェッショナルなテックブログは、クリーンでダークなカードデザインを採用しています。読者からの信頼を得るために、このスタイルに合わせました。
皆さんへの教訓：
- ソーシャルメディアのプレビューを監査しましょう。ツールを使って og:image タグが正しく機能しているか確認してください。
- すべての記事に手動でアートワークを作成するのは避けましょう。スケールしません。
- シンプルなスタックを使用しましょう。PHP GDとディスクキャッシュの組み合わせは、軽量で効果的です。
- 多言語展開を想定しましょう。常に、使用する文字セットを完全にサポートするフォントを含めるようにしてください。
ブログの画像はブランドを象徴するものです。デフォルトのフォールバックによって、第一印象を台無しにしないでください。