SEO for a Qwik City site: head tags, prerender and sitemaps

This site is built with Qwik City and prerendered to static HTML. Every page ships its head tags, structured data and a canonical URL, and a sweep checks them at build time. This is how that works, in the order you would build it.

Head tags per route

import type { DocumentHead } from "@builder.io/qwik-city";

export const head: DocumentHead = ({ resolveValue }) => {
  const post = resolveValue(usePost);
  const canonical = `https://example.com/blog/${post.slug}/`;
  return {
    title: post.seoTitle,
    meta: [
      { name: "description", content: post.summary },
      { property: "og:title", content: post.seoTitle },
      { property: "og:url", content: canonical },
    ],
    links: [{ rel: "canonical", href: canonical }],
  };
};

The root layout renders these values. Qwik City lets a layout's head and a route's head combine, so shared tags live once in the layout and each route adds its own.

Structured data

JSON-LD is a script tag with a JSON body. Return it from the head function as data and render it in the layout, or render it inside the route's component. Either way, build it from the same object the page renders from, so the two cannot disagree. Product schema for digital products has the shape for a product page.

Prerender every route

The static adapter renders every route to an HTML file at build time. Dynamic routes, like /blog/[slug], list their parameters with onStaticGenerate:

export const onStaticGenerate: StaticGenerateHandler = () => ({
  params: ARTICLES.map((a) => ({ slug: a.slug })),
});

Nothing renders at request time, so there is nothing for a crawler to wait for, and the site can be served from any static host.

Trailing slashes

Qwik City's static output serves pages at URLs ending in a slash. Make every canonical, internal link and sitemap entry use the same form, or you create redirects and duplicate signals. We lost time to exactly this, written up in the trailing slash canonical mismatch.

Sitemap and the rest

A small script after the build writes sitemap.xml from the same data the routes use, and the same script writes llms.txt. Then a sweep reads every built HTML file and fails the build if a page has no title, no canonical, a duplicate description, or a description outside the target length.

The look of this Qwik site is Warm Storefront UI, including the blog layout with topic filters, pagination and the sticky product sidebar. It is plain CSS custom properties, so it works in Qwik or any other stack.