Social previews (next-seo) do not match page meta

[khalilcodes]

When sharing links on social sites (twitter, etc) the image, title and description for the page do not match the correct meta values. Instead, only the default seo values are picked up from <DefaultSeo ... /> which is in pages/_app.tsx.

Checking https://socialsharepreview.com/ it's the same (title, desc & image) for all pages.

For eg. the social preview for https://flowershow.app/docs/custom-layout should have it's meta title and meta description but is using default seo values instead.

Acceptance

• [ ] Social previews match page meta

Tasks

• [ ] Figure out root cause
• [ ] ...

Notes

Update:

On inspecting the page source, it seems that the individual page meta tags are not generated after all. This probably means that something is blocking in _app.tsx from pre-rendering meta tags in pages.

---

Inspecting the html head element in dev tools we can see that meta tags are generated correctly.

Weirdly, this is happening only with flowershow sites (both old and new setup), but works for example in lifeitself's web3 site.

Tried:

• removing default seo (in this case generates nothing)
• bumping down next-seo version to same as web3
• Using <NextSeo ... /> component directly in pages also doesn't resolve eg. pages/index.tsx

[rufuspollock]

@khalilcodes i note that nextjs v13.2 introduced Built-in SEO support with new Metadata API

Shall we look at switching to that? (what's involved, is it worth it ...)

PS: also (SSR only with Vercel) https://nextjs.org/blog/next-13-3#dynamic-open-graph-image-generation