Next.js Metadaten werden nicht aktualisiert? Hier erfahren Sie, warum

Sie aktualisieren generateMetadata, stellen es erneut bereit und der alte Titel oder das alte Bild wird weiterhin angezeigt, wenn Sie den Link teilen. So erkennen Sie, ob es sich um eine Caching-Ebene oder einen Codefehler handelt.

Reproduzierbares Beispiel

Das sieht korrekt aus, stellt aber nach einer Inhaltsänderung weiterhin veraltete Metadaten bereit:

export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());

  return {
    title: post.title,
    openGraph: {
      images: [post.image],
    },
  };
}

Der fetch-Aufruf wird hier standardmäßig vom Datencache von Next.js zwischengespeichert. Wenn sich post.title oder post.image in Ihrem CMS ändert, sieht diese Funktion den neuen Wert erst, wenn der Cache erneut validiert wird. Ohne explizite Strategie kann das bedeuten, dass dies erst beim nächsten vollständigen Build der Fall ist.

Warum Ihre Metadaten nicht aktualisiert werden

Der zugrunde liegende Abruf wird zwischengespeichert

Standardmäßig wird fetch() innerhalb von generateMetadata auf unbestimmte Zeit im App Router zwischengespeichert. Behebung durch Festlegen eines expliziten Revalidierungsfensters:

const post = await fetch(url, { next: { revalidate: 60 } }).then(r => r.json());

Oder deaktivieren Sie das Caching für diese Anfrage vollständig:

const post = await fetch(url, { cache: "no-store" }).then(r => r.json());

Die Route wird statisch generiert

Wenn die Route generateStaticParams verwendet und keine erneute Validierung konfiguriert ist, wird die gesamte Route, einschließlich Metadaten, zum Zeitpunkt der Erstellung eingebaut. Das Hinzufügen von export const revalidate = 3600; auf Seitenebene erzwingt eine regelmäßige Neugenerierung.

Ein CDN oder Edge-Cache stellt den alten HTML bereit

Selbst wenn Ihr Build korrekt ist, kann Vercels Edge Network, Cloudflare oder ein anderes CDN vor Ihrer App eine zwischengespeicherte HTML-Antwort bereitstellen, die vor Ihrem Fix liegt. Überprüfen Sie die Antwortheader:

curl -I https://yoursite.com/blog/post-slug

Suchen Sie nach x-vercel-cache: HIT oder einem ähnlichen CDN-Header. Ein HIT bedeutet, dass Sie eine zwischengespeicherte Kopie sehen, nicht Ihre letzte Bereitstellung.

opengraph-image.ts erfasst keine neuen Daten

Wenn Sie die dateibasierte opengraph-image.ts-Konvention verwenden, generiert Next.js standardmäßig ein statisches Bild zur Erstellungszeit. Der darin enthaltene dynamische Inhalt unterliegt denselben Caching-Regeln wie jede andere Serverkomponente. Fügen Sie daher eine explizite erneute Validierung hinzu, wenn er aktuell bleiben muss.

Es handelt sich tatsächlich um den Cache der Plattform, nicht um Ihren

Der häufigste Fehlalarm. Ihre App kann völlig neue Metadaten bereitstellen, während Facebook, LinkedIn oder Slack immer noch eine Vorschau anzeigen, die sie vor Tagen zwischengespeichert haben. Bestätigen Sie, was Ihr Server sendet, bevor Sie einen Next.js-Code berühren. Sehen Sie sich unsere Anleitung zum Löschen des OG-Cache auf jeder Plattform an.

Schritt-für-Schritt-Anleitung zur Fehlerbehebung

1. Führen Sie curl -s https://yoursite.com/page | aus grep -i "og:" um zu sehen, was Ihr Server tatsächlich sendet
2. Suchen Sie nach einem CDN-Cache-HIT-Header mit curl -I https://yoursite.com/page
3. Fügen Sie explizites revalidate oder cache: „no-store“ zu Abrufen innerhalb von generateMetadata hinzu.
4. Erzwingen Sie eine neue Bereitstellung, um einen veralteten Build-Cache auszuschließen
5. Überprüfen Sie das Live-Ergebnis mit Proovd

Next.js im Vergleich zu anderen Frameworks

Quick-Fix-Checkliste

Häufig gestellte Fragen