4.xcompiler

Nuxt SEO

Vue's meta-framework. The useSeoMeta composable is the most ergonomic metadata API on this list, and route rules give per-path prerendering without touching the routes themselves.

What you start with

+useSeoMeta, a typed composable covering title, description, Open Graph and Twitter in one call
+Route rules for per-path prerendering, caching and headers, configured centrally
+A sitemap module that reads from the route table

What it makes harder

!useSeoMeta in a component that renders client-side only will not appear in the server HTML
!Route rules are matched by pattern order, so a broad rule earlier in the object shadows a specific one later
!The default prerender crawler follows links, so an unlinked route is not prerendered unless listed explicitly

Recipes

Each one is real Nuxt code, not the same snippet with the imports swapped.

Canonical with useSeoMeta and useHead

A relative canonical resolves differently depending on the requested URL, which is exactly the ambiguity a canonical exists to remove. Check meta-canonical-absolute

app/pages/pricing.vue

<script setup lang="ts">
const route = useRoute();
const canonical = `https://www.example.com${route.path.replace(/\/$/, "")}`;

useSeoMeta({
  title: "Pricing | Acme",
  description: "Three tiers, one-time payment, 30 day refund.",
  ogUrl: canonical,
  twitterCard: "summary_large_image",
});

// useSeoMeta covers meta tags but not link elements, so the canonical
// itself goes through useHead.
useHead({ link: [{ rel: "canonical", href: canonical }] });
</script>

Per-path prerendering with route rules

If the sales page needs the database to render, an outage stops revenue rather than degrading a feature. Static-first makes the funnel independent of the app. Check perf-static-first

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // Order matters: a broad pattern earlier shadows a specific one later.
    "/": { prerender: true },
    "/pricing": { prerender: true },
    "/playbook/**": { prerender: true },
    "/account/**": { ssr: true, robots: false },
    "/api/**": { cors: false },
  },
  nitro: {
    // Unlinked routes are not discovered by the crawler and must be listed.
    prerender: { crawlLinks: true, routes: ["/sitemap.xml", "/llms.txt"] },
  },
});

Entity gate with createError

An ungated dynamic route generates a page for any slug anyone types, including slugs an attacker generates. That is how a site accidentally publishes ten thousand thin pages. Check pseo-entity-gate

app/pages/glossary/[term].vue

<script setup lang="ts">
import { GLOSSARY_TERMS } from "~/data/glossary-terms";

const route = useRoute();
const entry = GLOSSARY_TERMS.find((candidate) => candidate.slug === route.params.term);

if (!entry) {
  // fatal: true renders the error page with a real 404 status. Without it,
  // the status is set but the page still renders.
  throw createError({ statusCode: 404, statusMessage: "Not found", fatal: true });
}
</script>

JSON-LD through useHead

Multiple disconnected script tags describe several unrelated things. One graph describes one page, and lets nodes reference each other instead of repeating themselves. Check schema-single-script

app/app.vue

<script setup lang="ts">
import { siteGraph } from "~/lib/seo";

useHead({
  script: [
    {
      type: "application/ld+json",
      // Nuxt serialises this and escapes it, so no manual < replacement is
      // needed here. That is unusual on this list.
      innerHTML: JSON.stringify(siteGraph()),
    },
  ],
});
</script>

The same checks in other frameworks

Questions

What does Nuxt give you before you write any SEO code?

Nuxt starts with: useSeoMeta, a typed composable covering title, description, Open Graph and Twitter in one call; Route rules for per-path prerendering, caching and headers, configured centrally; A sitemap module that reads from the route table.

What does Nuxt make harder?

useSeoMeta in a component that renders client-side only will not appear in the server HTML This is specific to Nuxt rather than a general SEO problem.

How many SEO recipes does SEO for Solos publish for Nuxt?

SEO for Solos publishes 4 Nuxt recipes, each with real Nuxt code and a note on what differs from the same check in other frameworks.