Configure SEO and social cards

Set the production origin and write a precise title and description for every page. Ginko Docs derives the remaining page metadata from those values.

Set one production origin

app.config.ts supplies the origin for canonical URLs and social metadata. content.config.ts uses it for agent-readable links. Nuxt Site Config and Nuxt i18n need it as well. Keep every value identical; a shared local value avoids configuration drift.

{
  "name": "Acme Docs",
  "description": "Documentation for Acme.",
  "url": "https://docs.example.com"
}

import site from "../site.json";

export default defineAppConfig({
  ginkoDocs: {
    site: {
      url: site.url,
      name: { en: site.name, de: "Acme-Dokumentation" },
      description: {
        en: site.description,
        de: "Dokumentation für Acme.",
      },
      logo: {
        light: "/logo.svg",
        dark: "/logo-dark.svg",
      },
    },
  },
});

import { defineGinkoDocsConfig } from "@lupinum/ginko-docs/content";
import site from "./site.json" with { type: "json" };

export default defineGinkoDocsConfig({
  site,
  locales: ["en", "de"],
  blog: true,
});

import site from "./site.json" with { type: "json" };

export default defineNuxtConfig({
  extends: ["@lupinum/ginko-docs"],
  site: { url: site.url },
  i18n: {
    baseUrl: site.url,
  },
});

Write page metadata

Documentation pages require title and description. Add updated when the modification date should appear in the page's TechArticle structured data:

---
title: Install Ginko Docs
description: Add the layer to a Nuxt application and publish the first documentation page.
updated: 2026-07-21
---

For a documentation page, the layer emits:

• a title in the form Page title - Site name and the frontmatter description;
• canonical, Open Graph, and Twitter metadata with summary_large_image;
• og:type=article;
• TechArticle, BreadcrumbList, and site-wide WebSite JSON-LD;
• locale alternates and an x-default link when translations exist.

Blog articles use their required date and populated author for Article structured data. The blog listing image from frontmatter is separate from the generated social card.

Generate social cards

PNG social cards are enabled by default and generated during the build with nuxt-og-image. The built-in GinkoDocs template uses the page title, description, site name, light logo, and locale.

export default defineAppConfig({
  ginkoDocs: {
    ogImage: {
      enabled: true,
      component: "GinkoDocs",
    },
  },
});

Set enabled: false to stop declaring generated social images. To change the design, add app/components/OgImage/AcmeDocs.satori.vue and set component: 'AcmeDocs', or shadow app/components/OgImage/GinkoDocs.satori.vue with the same component name.

Keep sitemap and prerender ownership in the layer

The layer installs sitemap and robots support. Ginko Content contributes public documentation and blog routes to the sitemap and prerender queue; the authors data collection is excluded. Do not repeat those content URLs in sitemap.urls or nitro.prerender.routes.

Run a production build after changing routes, locale pairs, or an OG template. Verify the canonical origin, alternate URLs, /sitemap.xml, /robots.txt, and at least one generated social image in the built output. The deployment guide covers the static and server build commands.