Skip to main content

​
Web Graphics setup

MetaKit Web Graphics (powered by the Image API) generates fully branded Open Graph and Twitter cards for every URL automatically. This guide walks through prerequisites, configuration, and deployment so you can ship consistent previews without overlapping with the in-product Branded Graphics feature set.

​
Before you begin

  1. Pick a domain to crawl for brand colors, fonts, and logos (production or staging both work).
  2. Review your metadata to ensure titles and descriptions are accurate—the API pulls these by default.
  3. Decide on hosting: you can update tags inside your framework, CMS, or deploy rules via your CDN.

​
Quick start checklist

  1. Select a template: start with clean or article for editorial pages, then expand to promo/event layouts.
  2. Test in the playground (/templates): plug in sample titles, descriptions, and colors to preview cards.
  3. Copy the generated URL and drop it into your <meta property="og:image"> and <meta name="twitter:image"> tags.
  4. QA in real channels like Slack, iMessage, and LinkedIn to confirm cache busting and sizing.
  5. Automate at scale: if you have dynamic routes, compute the Image API URL server-side and inject it per request.

​
Sample integration

<meta property="og:image" content="https://gen.metakit.app/p/link/clean.png?title=Plandalf+Launch&division=Blog&brand=MetaKit&primaryColor=%2322C55E" />
<meta name="twitter:image" content="https://gen.metakit.app/p/link/clean.png?title=Plandalf+Launch&division=Blog&brand=MetaKit&primaryColor=%2322C55E" />

​
Best practices

  • Version your graphics by adding a v= query param so downstream caches pick up changes immediately.
  • Separate from Branded Graphics: Web Graphics serves website previews; Branded Graphics powers in-product cards and marketing assets. Keep both enabled for full coverage.
  • Monitor coverage inside Metadata Intelligence so missing OG tags are caught before release.
Next up: explore real-world applications in image-api/use-cases or jump into the template library for deep dives on each layout.