javascriptnuxt.jsserver-side-renderingfacebook-opengraph

Nuxt 3: useSeoMeta Not Rendering Meta Tags in Page Source (SSR)

I'm using Nuxt 3 and trying to set static meta tags for my About page using useSeoMeta.
Here's the relevant code from pages/about.vue:

<script setup lang="ts">
// Meta SEO
const description =
  "Lorem ipsum";
const title = "About";

// SEO META
useSeoMeta(
  {
    title: title,
    description: description,
    ogTitle: title,
    ogDescription: description,
    ogImage: "https://example.com/img/thumbnail",
    ogUrl: "https://slavic.media/about",
    twitterTitle: title,
    twitterDescription: description,
    twitterImage: "https://example.com/img/thumbnail",
    twitterCard: "summary",
  },
  { priority: 1 }
);
</script>

Problem:

The meta tags show up in Nuxt DevTools and in the browser after hydration, but do not appear in the server-rendered page source (view-source:). Social media scrapers (Facebook, LinkedIn, etc.) do not see the correct meta tags. Other info:

I have a titleTemplate in app.vue via useHead. Common head features which are working (lang, favicon, etc.) are set in nuxt.config.ts. SSR is enabled (not SPA mode). This happens even with static, non-reactive meta values. How can I get Nuxt to render these meta tags in the server HTML so scrapers can see them?

Any help is appreciated!

Solution

  • useSeoMeta() and useHead() work properly in SSR only if they run during the initial server-side render. However, in some cases, especially in or when reactive sources are used indirectly, the execution timing might delay until after hydration — meaning the meta tags only appear client-side (i.e., after the page is loaded in the browser, not in view-source:).

    This behavior breaks SEO and social media previews, because bots and scrapers usually only see the server-rendered HTML. Instead of useSeoMeta(), use definePageMeta() for page-level static meta.