Next.js metadata generator
Generate a Next.js App Router metadata object: title, description, Open Graph, robots.
FreeRuns in your browserNo signupUpdated 2026-11-05
Matches the Next.js 16 App Router Metadata API. themeColor goes in the viewport export; it has been deprecated inside metadata since Next.js 14.
Checks
Looks good
Lengths, URLs and robots look right
Head tags
16
approximate tags Next.js renders
import type { Metadata, Viewport } from "next";
export const metadata: Metadata = {
title: "Website design and development",
description: "We design and build fast company websites on Next.js, with clean code your team can run and edit.",
alternates: {
canonical: "/services/web-design",
},
openGraph: {
title: "Website design and development",
description: "We design and build fast company websites on Next.js, with clean code your team can run and edit.",
url: "/services/web-design",
siteName: "Example Co",
locale: "en_GB",
type: "website",
images: [
{
url: "/og/web-design.png",
width: 1200,
height: 630,
alt: "Example Co web design service",
},
],
},
twitter: {
card: "summary_large_image",
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-image-preview": "large",
},
},
};
export const viewport: Viewport = {
themeColor: "#0f172a",
};
<title>Website design and development</title> <meta name="description" content="We design and build fast company websites on Next.js, with clean code your team can run and edit." /> <meta name="robots" content="index, follow" /> <meta name="googlebot" content="index, follow, max-image-preview:large" /> <link rel="canonical" href="https://www.example.com/services/web-design" /> <meta property="og:title" content="Website design and development" /> <meta property="og:description" content="We design and build fast company websites on Next.js, with clean code your team can run and edit." /> <meta property="og:url" content="https://www.example.com/services/web-design" /> <meta property="og:site_name" content="Example Co" /> <meta property="og:locale" content="en_GB" /> <meta property="og:image" content="https://www.example.com/og/web-design.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Website design and development" /> <meta name="twitter:image" content="https://www.example.com/og/web-design.png" /> <meta name="theme-color" content="#0f172a" />
About this tool
How it works and how to read the result.
Need this done for you?
Web app & SaaS development
SaaS products and web apps, from first version to scale.
See the serviceWhat it does
The Next.js App Router sets page titles, descriptions and social sharing tags through a metadata export in layout.tsx or page.tsx. This generator writes that export for you, typed with Next.js's Metadata type, from a short form: title, description, canonical path, Open Graph image, X card, robots rules and alternate language versions. It can write a root layout with metadataBase and a title template, a static page export, or a generateMetadata function for dynamic routes. A second panel shows roughly which head tags Next.js will render, so you can check the result before pasting.
How to use it
- Choose where the code goes: a page or the root layout.
- For a dynamic route such as a blog post, pick generateMetadata.
- Enter the site URL. In the root layout it becomes metadataBase, so every route can use relative paths.
- Fill in the title, description, canonical path and Open Graph image.
- Tick or untick index and follow, and add language versions if the page has translations.
- Copy the code into the file named above the output.
How to read the result
With the defaults, the output is a static metadata export for app/services/web-design/page.tsx. The title is 30 characters and the description about 100, so the Checks stat reads "Looks good". The openGraph block has the page URL, site name, locale and one 1200 by 630 image, and robots allows indexing with large image previews for Googlebot. A viewport export carries the theme colour.
The twitter block only sets the card type. That is deliberate: Next.js copies the title, description and images from openGraph into the X tags when they are missing, so repeating them adds nothing.
Switch to "Root layout" and the title becomes an object with default and template, for example "%s | Example Co". Child pages that set a plain title will then render as "About | Example Co". The template does not apply to the layout's own segment, which is why a default is required.
The rendered head panel is approximate. Next.js adds tags of its own, such as charset and viewport, and resolves relative URLs against metadataBase. After deploying, view the page source to confirm.
For the plain HTML version of these tags, use the meta tags generator, and check lengths with the SERP preview tool. We build and maintain Next.js applications as part of our web app development service.
Questions
Frequently asked.
Should I use the metadata object or generateMetadata?
Use the static metadata object when the values are fixed, such as a home page or a service page. Use generateMetadata when they depend on data, such as a blog post whose title comes from a CMS. Both live in layout.tsx or page.tsx, and both only work in Server Components.
Why does my page lose the Open Graph image from the layout?
Next.js merges metadata shallowly. If a page sets its own openGraph object, the whole openGraph object from the layout is replaced, not merged, so any image the layout set disappears. Either repeat the image in the page or keep shared fields in a variable and spread it into each openGraph object.
Where does themeColor go now?
In a separate viewport export. Setting themeColor, colorScheme or viewport inside metadata has been deprecated since Next.js 14. The generator writes export const viewport with your colour, next to the metadata export, so you can paste both into the same file.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide