Auto mode

Add one tag to your page and ogmake does the rest. It reads the page, picks the card that fits (product, article, recipe, event or listing), puts the page's own photo and price on it, and styles it with the site's palette and style, chosen once per domain. The first card for a new site carries its palette within seconds; the AI-picked style follows shortly. It works on most public pages, with a plain HTML head, a CMS, Next.js or Astro, and the API builds the very same card.

Prefer to share a link instead of editing a page? Short links carry the same card.

Add the tag

Create a public key in your dashboard, add your site to it, and put these tags in the <head> of every page. Replace PUBLIC_KEY with your key and {{PAGE_URL_ENCODED}} with your template's URL-encoded, absolute page address.

<meta property="og:image" content="https://ogmake.com/p/PUBLIC_KEY/auto?url={{PAGE_URL_ENCODED}}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ogmake.com/p/PUBLIC_KEY/auto?url={{PAGE_URL_ENCODED}}" />

The width and height tell platforms the card is 1200×630 before they fetch it, and the two Twitter tags make X show the large image. The first time a platform asks for a page's card, ogmake reads the page and renders it; every request after that is served from cache.

What it reads

• The product photo, title and price, or the article, recipe or event details the page publishes.
• The kind of page, which decides the card layout.
• The site's palette and an AI-picked style, taken from the home page once per domain and reused for every page on it. You can override the style or re-run the analysis from the dashboard.

A page that blocks automated readers, or is built entirely in the browser, gets a simpler card made from what is available. The preview is still served.

Next.js, Astro and plain HTML

Plain HTML or any CMS: use the tag block above and fill the page-URL placeholder with your template's variable, for example {{ page.url | absolute_url | url_encode }} in Liquid.

Next.js (App Router)

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const page = encodeURIComponent(`https://example.com/blog/${slug}`);
  const image = `https://ogmake.com/p/PUBLIC_KEY/auto?url=${page}`;
  return {
    openGraph: { images: [{ url: image, width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [image] },
  };
}

generateMetadata runs on the server, so the card URL is already in the HTML every crawler fetches.

Astro

---
const page = encodeURIComponent(new URL(Astro.url.pathname, Astro.site).href);
const image = `https://ogmake.com/p/PUBLIC_KEY/auto?url=${page}`;
---
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={image} />

API

The same card from your server. Send the page URL to POST /v1/images with "auto": true and the API returns the hosted card's URL with the credits used, the source URL and when it is next refreshed.

curl https://ogmake.com/v1/images \
  -H "Authorization: Bearer $OGMAKE_KEY" \
  -H "Content-Type: application/json" \
  -d '{"auto":true,"url":"https://example.com/blog/hello"}'

See the API reference for every field and error code.

Credits

Auto mode is for paid plans. A page costs 3 credits per unique page per 90 days, or 5 with an AI hint (or a screenshot read); each further new hint on the same page adds 2, and the same hint again is free. Inside those 90 days the card is served again and refreshed at no charge, and a change that only affects how it looks (font, background, format or size) is free too. Tracking parameters (utm_*, fbclid, gclid, ref) and the URL fragment are ignored, so /mug?utm_source=news and /mug are one page. See pricing.

Questions