Server rendering exists largely for this page: crawlers and link previews read the HTML the server produced, so titles, meta tags and images have to be right in that first response. The interview questions are practical: how do you set a title per page, how do you produce OG images, how do you stop fonts causing layout shift, how do you keep a hero image from being the LCP bottleneck.

Know

• Unhead (v3 in Nuxt 4.5) powers head management. useHead({ title, meta, link, script, htmlAttrs, bodyAttrs }) accepts refs and getters and updates reactively; useSeoMeta({ title, description, ogTitle, ogImage, twitterCard }) is the typed, flat form for meta tags and is what you should reach for first. useHeadSafe sanitises untrusted input (it whitelists attributes and strips innerHTML). For tags that never change after load, wrap the call in if (import.meta.server) { useSeoMeta(...) } so the client does no head work; the older useServerSeoMeta is deprecated in favour of that pattern.
• Defaults live in nuxt.config.ts under app.head (htmlAttrs.lang, titleTemplate: '%s · Site', favicons, default OG image) and pages override per route. Tags deduplicate by key; tagPriority and capo-style ordering put critical tags first.
• Absolute URLs for og:image, canonical and sitemap entries: useRequestURL() on the server, or nuxt-site-config (useSiteConfig()) to hold the canonical site URL per environment.
• The Nuxt SEO suite (@nuxtjs/seo bundles @nuxtjs/sitemap, @nuxtjs/robots, nuxt-og-image, nuxt-schema-org, nuxt-link-checker, nuxt-site-config) covers sitemaps from routes and content, robots rules per environment, OG images rendered from Vue components at build or request time, and JSON-LD structured data through useSchemaOrg.
• @nuxt/image: <NuxtImg> generates responsive srcset/sizes and modern formats through a provider (IPX locally, Cloudflare Images, Cloudinary and others in production); <NuxtPicture> adds art direction and format fallbacks. Everything below the fold gets loading="lazy"; the LCP image gets preload and fetchpriority="high" and never lazy loads.
• @nuxt/fonts detects font-family declarations, downloads and self-hosts the files, sets font-display, and generates metric-compatible fallback fonts, which is the fix for the layout shift when a web font swaps in. No <link> to Google Fonts, no third-party request.
• @nuxt/scripts loads third-party scripts (analytics, maps, embeds) with triggers (onNuxtReady, visibility, interaction, manual), typed registries (useScriptGoogleAnalytics), and facades that render a placeholder until the user interacts. It exists because third-party scripts are the biggest uncontrolled cost on most sites.
• Crawlability basics: one <h1>, semantic landmarks, rel="canonical" on paginated and filtered pages, noindex on search results and private areas, hreflang for locales (the i18n page), meaningful 404 statuses (error handling), and prerendering or caching the pages crawlers hit most (rendering strategies).

How it works

Site-wide defaults, then a product page that overrides them and emits structured data:

export default defineNuxtConfig({
  modules: ['@nuxt/image', '@nuxt/fonts', '@nuxt/scripts', '@nuxtjs/seo'],
  app: {
    head: {
      htmlAttrs: { lang: 'en' },
      titleTemplate: '%s · Shop',
      link: [{ rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
    },
  },
  site: { url: 'https://shop.example.com', name: 'Shop' }, // nuxt-site-config, read by sitemap, robots, og-image
  image: { provider: 'cloudflare', cloudflare: { baseURL: 'https://shop.example.com' } },
})

<script setup lang="ts">
const { params } = useRoute()
const { data: product } = await useFetch(`/api/products/${params.slug}`)
if (!product.value) throw createError({ status: 404, fatal: true })

const url = useRequestURL()

useSeoMeta({
  title: () => product.value!.name,
  description: () => product.value!.summary,
  ogTitle: () => product.value!.name,
  ogDescription: () => product.value!.summary,
  ogImage: () => new URL(product.value!.image, url.origin).href,
  ogType: 'product',
  twitterCard: 'summary_large_image',
})
useHead({ link: [{ rel: 'canonical', href: `${url.origin}/products/${params.slug}` }] })

useSchemaOrg([
  defineProduct({
    name: product.value.name,
    image: product.value.image,
    offers: [{ price: product.value.price, priceCurrency: 'EUR' }],
  }),
])
</script>

<template>
  <article>
    <!-- The LCP element: eager, preloaded, high priority, sized to avoid layout shift -->
    <NuxtImg
      :src="product!.image"
      :alt="product!.name"
      width="1200"
      height="800"
      sizes="100vw md:50vw"
      format="avif,webp"
      preload
      fetchpriority="high"
    />
    <h1>{{ product!.name }}</h1>
    <!-- Below the fold: lazy -->
    <NuxtImg v-for="img in product!.gallery" :key="img" :src="img" alt="" width="600" height="400" loading="lazy" />
  </article>
</template>

Third-party scripts without paying for them up front:

<script setup lang="ts">
// Loads the Google Maps script only when the placeholder is visible and the user has interacted.
const { onLoaded } = useScriptGoogleMaps({ apiKey: useRuntimeConfig().public.mapsKey, scriptOptions: { trigger: 'visible' } })
onLoaded(({ maps }) => { /* create the map */ })
</script>

Exercise

Be able to say