CODEWITHSUNDEEP
next.jsfacebook-opengraphmeta-tagsnext.js13
tmaihoff
tmaihoff

Reputation: 3570

NextJS 13 app directory | Meta tags not included in generated static html. opengraph not found by crawlers

I'm facing a problem with meta tags for nextjs 13.2.4. I followed the official documentation at https://beta.nextjs.org/docs/api-reference/metadata. No matter if I use export const metadata = { ... } or export async function generateMetadata, the meta tags are not included in the static html code. Instead, it is included in the self.__next_f.push( which is not found by opengraph crawlers. I tried putting the export metadata statement inside the layout.tsx, the page.tsx, nothing seems to work.

E.g. facebook sharing debugger won't show the opengraph preview. It shows the html looks like this:

<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" nomodule=""></script>
</head>
...

the og meta data tags are inside in the <script>(self.__next_f=self.__next_f||[]).push([0]) ...

Someone has an idea?

Upvotes: 1

Views: 876

Answers (1)

tmaihoff
tmaihoff

Reputation: 3570

Okay after 3 days of troubleshooting... The problem was, that my layout.tsx used a client component which made use of the hook useSearchParams. This hook apparently broke static rendering completely so the meta tags were not statically generated in the index.html.

Just removing the hook useSearchParams did the trick

Upvotes: 1

Related Questions