> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metakit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Graphics Setup

> Wire the MetaKit website graphics tool into your stack in minutes.

# 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.