SEO und Social Cards konfigurieren

Setze die Produktions-URL und schreibe für jede Seite einen präzisen Titel und eine konkrete Beschreibung. Ginko Docs leitet die übrigen Seitenmetadaten daraus ab.

Eine Produktions-URL verwenden

app.config.ts liefert die Basis für Canonical-URLs und Social-Metadaten. content.config.ts nutzt dieselbe Basis für agentenlesbare Links. Nuxt Site Config und Nuxt i18n benötigen sie ebenfalls. Halte alle Werte identisch; ein gemeinsamer lokaler Wert vermeidet Konfigurationsdrift.

{
  "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,
  },
});

Seitenmetadaten schreiben

Dokumentationsseiten verlangen title und description. Füge updated hinzu, wenn das Änderungsdatum in den strukturierten TechArticle-Daten erscheinen soll:

---
title: Ginko Docs installieren
description: Den Layer zu einer Nuxt-Anwendung hinzufügen und die erste Dokumentationsseite veröffentlichen.
updated: 2026-07-21
---

Für eine Dokumentationsseite erzeugt der Layer:

• einen Titel im Format Seitentitel - Website-Name und die Frontmatter-Beschreibung;
• Canonical-, Open-Graph- und Twitter-Metadaten mit summary_large_image;
• og:type=article;
• JSON-LD für TechArticle, BreadcrumbList und websiteweit WebSite;
• Sprachalternativen und einen x-default-Link, wenn Übersetzungen vorhanden sind.

Blogartikel verwenden ihr erforderliches Datum und den aufgelösten Autor für strukturierte Article-Daten. Das Frontmatter-Bild der Blogübersicht ist unabhängig von der generierten Social Card.

Social Cards erzeugen

PNG-Social-Cards sind standardmäßig aktiv und werden beim Build mit nuxt-og-image erzeugt. Die integrierte Vorlage GinkoDocs verwendet Seitentitel, Beschreibung, Website-Name, helles Logo und Sprache.

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

Mit enabled: false werden keine generierten Social Images mehr deklariert. Für ein eigenes Design kannst du app/components/OgImage/AcmeDocs.satori.vue anlegen und component: 'AcmeDocs' setzen oder app/components/OgImage/GinkoDocs.satori.vue unter demselben Komponentennamen überschreiben.

Sitemap und Prerendering dem Layer überlassen

Der Layer installiert Sitemap- und Robots-Unterstützung. Ginko Content trägt öffentliche Dokumentations- und Blogrouten zur Sitemap und Prerender-Warteschlange bei; die Data-Collection authors ist ausgeschlossen. Wiederhole diese Content-URLs nicht in sitemap.urls oder nitro.prerender.routes.

Führe nach Änderungen an Routen, Sprachpaaren oder einer OG-Vorlage einen Produktions-Build aus. Prüfe die Canonical-Basis, Alternate-URLs, /sitemap.xml, /robots.txt und mindestens ein generiertes Social Image im Build-Ergebnis. Der Deployment-Leitfaden beschreibt die Befehle für statische und serverseitige Builds.