Zenn
Open15

Next.jsで作成したブログのog:imageが反映されない

Question
Help Wanted
KeitaUenishiKeitaUenishi

Next.js13.0でリリースされたappディレクトリ機能では、各階層にhead.tsxを配置する必要があったが、現在ではver.13.2で追加されたMetadata APIを使用するようになっているよう

（直接的な原因かというと違いそうだが、一度試しに書き換えてみる）

https://beta.nextjs.org/docs/api-reference/file-conventions/head

https://nextjs.org/blog/next-13-2#built-in-seo-support-with-new-metadata-api

KeitaUenishiKeitaUenishi

依然、Twitter Card validatorではNo card found (Card error)のまま。
metaタグに書かれている内容はいまのところ間違っているようには見えない……。
デプロイしているvercel側に何か設定が必要だったりする…？

KeitaUenishiKeitaUenishi

ラッコツールズのogp確認では表示されているが…

もっとogpについて理解する必要がある気がしてきた

KeitaUenishiKeitaUenishi

metaタグは多くの場合、nameとcontent属性が含まれる。
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#作成者と説明を追加する

name は meta 要素の種類を指定します。含まれる情報の種類です。
content は実際のメタコンテンツを指定します。

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#メタデータの他の種類

例えば、 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を眺めていても、特にめちゃくちゃ変な記述をしているようには見えない…。

KeitaUenishiKeitaUenishi

ベースにさせていただいたeasy-notion-blogのTwitterコミュニティにて、同様の質問をされている方がおられた。
https://twitter.com/n0bisuke/status/1606116194192351233?s=20

こちらによると、Next13のページレンダリングの仕組みによるものらしい。
記載の通り、応急処置としてlayout.tsxに

export const dynamic = 'force-dynamic'

こちらを追記しページを動的レンダリングとすることで回避。
Twitter Card Validaterでの表示

Tweet時のプレビュー

何はともあれ、問題としては解決。
ただ、懸念にあるように、表示速度は明らかに遅くなってしまっている……

アップデートを追いかけつつ、

  • Next13のページレンダリングの仕組みについて
  • なぜ動的レンダリングにしなければOG画像が反映されないのか

まずはこの辺りを自分でも調べて、理解していきたい。

NSJNSJ

同じ現象で詰まってたので助かりました

KeitaUenishiKeitaUenishi

コメントありがとうございます！
あんまり解決したかどうかわからないところで止まっててすみません…！
（ちなみにこちらで書いているブログはappから一旦pagesに移して作り直しました…）

KeitaUenishiKeitaUenishi

今更ながら見つけた元ネタをメモ
最新のリリースではどうなっているのかを試してみたい

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の末尾にスラッシュ / を追加する必要があります。

https://github.com/vercel/next.js/issues/46968#issuecomment-1468444616