Browse tools

Tools

Word CounterReadability CheckerKeyword DensityWriting Pattern IndicatorLong-Tail Keyword IdeasSERP Snippet PreviewMeta Tag GeneratorURL Slug GeneratorRobots.txt GeneratorMeta Title GeneratorMeta Description GeneratorOpen Graph GeneratorTwitter Card GeneratorHTML Meta TagsMeta Tags for WordPressMeta Tags for ShopifyMeta Tags for BloggerMeta Tags for WebflowMeta Tags for ReactMeta Tags for Next.jsCore Web Vitals CheckerImage CompressorHTML MinifierCSS MinifierJavaScript MinifierVideo & Image SpecsQR Code GeneratorMerge PDFSplit PDFRotate PDFDelete PDF PagesRearrange PDF PagesExtract PDF PagesCrop PDFJPG to PDFPNG to PDFPDF to JPGPDF to PNGResize ImageCrop ImageImage ConverterWebP to JPGHEIC to JPGProfile Photo MakerImage to Text (OCR)MOV to MP4MKV to MP4WebM to MP4AVI to MP4MP4 to MP3Extract Audio from VideoTrim VideoMute VideoVideo to GIFResize VideoCompress VideoM4A to MP3WAV to MP3OGG to MP3AAC to MP3Split CSVSplit ExcelCSV to ExcelExcel to CSVExcel to XMLXML to ExcelXML to CSVXML to JSONJSON to CSV
Meta Tags & SocialFree, no sign-upRuns in your browser

Meta Tags for Next.js

Fill in your page details and get a typed Next.js metadata export for the App Router, or a next/head block for the Pages Router. Ready to paste.

Use a full https:// address. Best size: 1200 × 630 pixels.













App Router: the Metadata API


In the App Router, you don’t write <meta> tags. You export a metadata object from a page.tsx or layout.tsx, and Next.js renders the tags on the server, so search engines and social apps see them in the first HTML response.


  • Layouts set defaults, pages override them. Put your site name, default Open Graph image and a title template in app/layout.tsx: title: { default: 'Stackbay', template: '%s | Stackbay' }. A page that exports title: 'Pricing' then becomes “Pricing | Stackbay”.
    • 

  • Set metadataBase in the root layout (for example new URL('https://stackbay.example')) so relative image paths and canonicals become full URLs. Social apps require absolute image URLs.
    • 

  • Dynamic pages such as /blog/[slug] use export async function generateMetadata({ params }) to fetch the post and return its title, description and image.
    • 

  • Server Components only. metadata and generateMetadata can’t be exported from a file with 'use client'. Move the interactive part into a child component.


Generated Open Graph images


Instead of designing an image for every page, add an opengraph-image.tsx file next to a route and render it with ImageResponse from next/og. Next.js creates the image at build or request time and adds the og:image tags for you.


Pages Router: next/head


Older projects use the pages/ directory. There, wrap tags in <Head> from next/head. Give each tag a key, so a page’s tag replaces the default from _app.tsx instead of appearing twice.


Check the result


Run next build && next start, open the page and view the source (Ctrl+U). You should see the title, description, canonical and og:/twitter: tags in the HTML, not added later by JavaScript.


More meta tag tools


How to use the Meta Tags for Next.js


  1. Enter the page title, description, URL, image, site name and X handle.
  2. Choose App Router or Pages Router in the output tabs.
  3. Paste the code into page.tsx (App Router) or your page component (Pages Router) and check the page source.


Frequently asked questions


How do I add meta tags in the Next.js App Router?
Export a metadata object (or a generateMetadata function for dynamic pages) from page.tsx or layout.tsx. Next.js renders the tags on the server.
Why does Next.js say metadata is not allowed in a client component?
metadata and generateMetadata only work in Server Components. Remove "use client" from the page file and move interactive code into a child component.
How do I set a title template in Next.js?
In the root layout, export title: { default: "Brand", template: "%s | Brand" }. Each page’s title is then inserted into the template.