X(旧twitter)にOGP画像が反映されなくて困った話
OGP画像が反映されない…
twitterOGP画像が反映されず格闘したため備忘録として残す。
環境
- Next.js 14.0.3
- vercel
- microCMS
- typeScript
Next.jsでOGP画像を設定する方法
まずは、そもそもNext.jsでOGP画像を設置する方法の確認。
Next.jsでOGP画像を設定するにはMetadata APIというものを使用するらしい。
公式ドキュメントによると、layout.tsxもしくはpage.tsxにmetadataを定義し、exportすると設定されるらしい。
注意点
絶対パスで指定
OGP画像は絶対パスを指定する必要がある。(nextに限らないことだが、普通に失念しててここで30分くらい使ってしまった。)
パスが変わる
画像は、/public 配下に設置するのだが、/public/img.png の場合、デプロイ後は、https://domain-name.jp/img.png でアクセスできるようになる。
実際のコード
実際にこのブログでOGP画像を実装すべく下記のような感じでコードを書いた。
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "ピーナッツのブログ",
description: "コーダーのブログ。技術系や趣味について不定期更新。",
twitter: {
title: "ピーナッツのブログ",
images: "https://www.peanut-blog.net/img-file-name",
},
openGraph: {
images: {
url: "https://www.peanut-blog.net/img-file-name",
},
},
};
X(旧twitter)OGPの設定方法
キャッシュを更新
上記の通りOGP画像を設定し、確認してみると、画像が反映されていなかった。
調べてみると、公式のトラブルシューティングページに、クローラが約7日くらいのペースで走っていて、基本的にそれまで更新されないよ！でも次の方法でキャッシュを更新できる可能性があるよ(意訳)との記述が。具体的な流れは下記のとおり(deeplで翻訳)。
- カードメタデータをページに追加する
- そのページのURLをツイートする
- ブラウザを更新して、タイムラインにカードのコンテンツを表示する
- ページ上のカードのメタデータを変更する
- 同じURLをbit.lyに通す
- 新しいbit.lyのURLをツイート
- ブラウザを更新して更新を表示
要は、短縮前URLでツイート(変更前の画像の状態)→メタデータ変更→bit.ly で取得した短縮URLで再度ツイート という流れで進めるとキャッシュが更新されることがあるらしい…(qiitaで数時間後に反映された、という記述も合ったので確実ではないようだ。)
実行後
まだ画像が表示されていない…
容量制限
参考サイトによると、最大5MBまでしか対応していないらしく、今回指定していた画像は12MB。容量が大きすぎて表示できていなかったみたいだ。完全に盲点。
画像を圧縮し、また短縮URLをこねくり回した結果、やった表示できた。
参考サイト様(公式ドキュメント含)
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
https://jsnotice.com/posts/2020-09-14/
https://zenn.dev/temasaguru/articles/641a10cd5af02a
