Next.jsで作成したブログのog:imageが反映されない
KeitaUenishi
作成した自分のブログにて、og:imageに画像を設定しているが、Twitterにリンクを貼っても反映されない。
"next": "^13.0.7"
"react": "^18.2.0",
デプロイ先 vercel
Card validatorでもNo card found (Card error)となってしまっている。
KeitaUenishiNext.js13.0でリリースされたappディレクトリ機能では、各階層にhead.tsxを配置する必要があったが、現在ではver.13.2で追加されたMetadata APIを使用するようになっているよう
（直接的な原因かというと違いそうだが、一度試しに書き換えてみる）
KeitaUenishi下記を参考にさせていただき、Next.jsを13.2にバージョンアップ。
head.tsxを削除しMetadata APIを導入して書き換えてみる。
書き換え後のheadタグ内
KeitaUenishi依然、Twitter Card validatorではNo card found (Card error)のまま。
metaタグに書かれている内容はいまのところ間違っているようには見えない……。
デプロイしているvercel側に何か設定が必要だったりする…？
KeitaUenishi下記を参考に、vercel.jsonを追加。
{
"trailingSlash": false
}
を追記し、再デプロイ。
ちょっと時間を空けて、再度確認してみる。
KeitaUenishiラッコツールズのogp確認では表示されているが…
もっとogpについて理解する必要がある気がしてきた
KeitaUenishiOGPとはなんぞやをGPT-4さんに聞いてみました。
KeitaUenishimetaタグは多くの場合、nameとcontent属性が含まれる。
name は meta 要素の種類を指定します。含まれる情報の種類です。
content は実際のメタコンテンツを指定します。
例えば、 Open Graph Data は Facebook が開発した、ウェブサイトにより豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
実際に生成されているHTMLのheadを眺めていても、特にめちゃくちゃ変な記述をしているようには見えない…。
KeitaUenishiFacebookのシェアデバッガーでも確認
og:url
og:title
の情報は取れているが、
og:description
の情報がとれていないっぽい
KeitaUenishiベースにさせていただいたeasy-notion-blogのTwitterコミュニティにて、同様の質問をされている方がおられた。
こちらによると、Next13のページレンダリングの仕組みによるものらしい。
記載の通り、応急処置としてlayout.tsxに
export const dynamic = 'force-dynamic'
こちらを追記しページを動的レンダリングとすることで回避。
Twitter Card Validaterでの表示
Tweet時のプレビュー
何はともあれ、問題としては解決。
ただ、懸念にあるように、表示速度は明らかに遅くなってしまっている……
アップデートを追いかけつつ、
- Next13のページレンダリングの仕組みについて
- なぜ動的レンダリングにしなければOG画像が反映されないのか
まずはこの辺りを自分でも調べて、理解していきたい。
NSJ同じ現象で詰まってたので助かりました
KeitaUenishiコメントありがとうございます！
あんまり解決したかどうかわからないところで止まっててすみません…！
（ちなみにこちらで書いているブログはappから一旦pagesに移して作り直しました…）
KeitaUenishi今更ながら見つけた元ネタをメモ
最新のリリースではどうなっているのかを試してみたい
Turns out using export const dynamic = 'force-dynamic'; on the root page fixes it.
Also, you need to add a trailing slash / at the end of your url for it to work.
ルートページでexport const dynamic = 'force-dynamic';を使うと直ることがわかった。
また、URLの末尾にスラッシュ / を追加する必要があります。
KeitaUenishiNext v13.4.13の段階では解決していなさそう
KeitaUenishiAdobeのフォントが原因で、SSRがクラッシュしてたのでボットがメタデータ見逃して表示されなかった、みたいなパターンもあるっぽい？
I think I found out why, the problem was being caused by a font that I was importing from Adobe using the HTML Link , when I remove this tag, apparently works fine. Do you think it could be it?