Localize browser titles and metadata

Altified translates common static metadata automatically and provides a server helper for custom metadata functions.

For most App Router pages, keep using ordinary static metadata. When withAltified is enabled, the SDK converts safe static metadata into translated server metadata during the Next.js build.

src/app/terms/page.js

export const metadata = {
  title: "Terms of Use | Altified",
  description: "Read the terms that apply when using Altified.",
  openGraph: {
    title: "Terms of Use | Altified",
    description: "Read the terms that apply when using Altified.",
  },
};

This automatic path covers title, description, openGraph.title, openGraph.description, twitter.title, and twitter.description. Icons, images, URLs, robots settings, and other non-copy metadata are left unchanged.

If your page already has a custom generateMetadata function, Altified does not replace it. Use altified.translatedMetadata() inside that function so your custom logic stays in control.

src/app/about/page.js

import { headers } from "next/headers";
import { altified } from "@/lib/altified";

export async function generateMetadata() {
  const locale =
    (await headers()).get("x-altified-locale") ||
    process.env.ALTIFIED_DEFAULT_LOCALE ||
    "en";

  return altified.translatedMetadata({
    locale,
    path: "/about",
    origin: "https://example.com",
    locales: ["en", "fr"],
    title: "About us",
    description: "Learn more about our company.",
    openGraph: {
      title: "About us",
      description: "Learn more about our company.",
    },
  });
}

The helper returns translated metadata plus canonical and alternate-language URLs when you pass origin and locales.

Production origin

Use the public HTTPS origin without a trailing slash. Never use localhost, a preview deployment hostname, or the Altified dashboard domain in production metadata.