Docs menu

Next.js OG images

Use a chart as a page's link preview in Next.js.

When someone shares a link on X, LinkedIn or Slack, the preview shows the page's Open Graph image. A Chartshot URL can be that image, so a page about a number can show its chart.

Use the og preset

"preset": "og" draws the chart at 1200 × 630, the usual size for link preview images:

JSON

{
  "type": "area",
  "preset": "og",
  "theme": "midnight",
  "data": {
    "labels": ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "series": [
      {
        "name": "MRR",
        "values": [31400, 32900, 34100, 35800, 37200, 38200, 39900, 41300, 42800, 44100, 45300, 48200]
      }
    ]
  },
  "options": {
    "title": "Monthly recurring revenue",
    "subtitle": "Up 54% in a year, to $48.2k",
    "yAxis": {
      "format": "compact"
    }
  }
}

Monthly recurring revenue — Drawn by the API from the URL above, 1200 × 630 at scale 2.

Set the page's metadata

In the App Router, give the chart's URL to openGraph.images in the page's metadata, with its size and alt text. summary_large_image makes X show the large image card:

app/page.tsx

import type { Metadata } from "next";

const spec = {
  "type": "area",
  "preset": "og",
  "theme": "midnight",
  "data": {
    "labels": ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "series": [
      {
        "name": "MRR",
        "values": [31400, 32900, 34100, 35800, 37200, 38200, 39900, 41300, 42800, 44100, 45300, 48200]
      }
    ]
  },
  "options": {
    "title": "Monthly recurring revenue",
    "subtitle": "Up 54% in a year, to $48.2k",
    "yAxis": {
      "format": "compact"
    }
  }
};

const c = Buffer.from(JSON.stringify(spec)).toString("base64url");
const chart = `https://api.chartshot.dev/v1/chart?c=${c}`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: chart, width: 1200, height: 630, alt: "Monthly recurring revenue" }],
  },
  twitter: { card: "summary_large_image", images: [chart] },
};

For a page whose numbers come from a database, build the same spec in generateMetadata instead.

The image is drawn by the API, so there's no opengraph-image route to build or deploy, and nothing renders on your server.

PreviousCharts in Slack NextURL length