# Web Graphics Setup
Source: https://docs.metakit.app/image-api/getting-started
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 `` and `` 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
```
```
## 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.
# MetaKit Image API
Source: https://docs.metakit.app/image-api/overview
Generate fully branded Open Graph and Twitter images from templates with simple URL parameters.
# MetaKit Image API — Overview
MetaKit Image API is the easiest way to generate perfect social media preview images (Open Graph images) for every page on your website automatically. Instead of manually designing banners for every blog post, product, or event, MetaKit creates them on-the-fly, ensuring your links always look professional and branded on Twitter, LinkedIn, Slack, and iMessage.
## Why MetaKit?
### 1. Instant brand consistency
MetaKit automatically detects your website's colors, fonts, and logos to create images that feel like they were custom-designed by your creative team.
* **Auto-theming:** Simply provide your URL, and we apply your brand identity instantly.
* **Light & dark modes:** All templates support both modes to match user preferences or your brand guidelines.
### 2. Professional templates for every use case
Stop struggling with layout. We provide a suite of professionally designed templates tailored for specific content types:
* **Marketing & Sales:** High-impact **Promo** and **Pricing** cards to drive conversions.
* **Content & Blogs:** Clean **Article** and **Docs** layouts that prioritize readability and headlines.
* **Events:** **Event** and **Wedding** templates that highlight dates and key details.
* **Brand awareness:** **Bold** and **Highlight** designs that put your logo front and center.
### 3. Zero maintenance
Once set up, your social images are fully automated.
* **Dynamic content:** When you update a page title or description, the social image updates automatically.
* **No design tools needed:** Everything is controlled via simple URL parameters.
### 4. Developer & marketer friendly
* **Live playground:** Use the visual editor (`/templates`) to test designs, tweak colors, and see changes in real time.
* **Simple integration:** Works with any website builder, CMS, or custom stack. Just change your `` tag.
## Usage examples
**Basic link preview**
```
https://gen.metakit.app/p/link/clean.png?url=https://example.com
```
**Customized promo card**
```
https://gen.metakit.app/p/square/promo.png?title=Summer+Sale&division=50%25+OFF&primaryColor=#ff0000
```
**Auto-branded documentation**
```
https://gen.metakit.app/p/link/docs.png?url=https://stripe.com/docs
```
### Recommended next steps
1. Point a staging route at the Image API and validate the rendered assets inside Slack or iMessage.
2. Update your production `og:image` and `twitter:image` tags once the preview looks right.
3. Visit `image-api/templates/index` to understand how template-specific docs will be organized (and to prepare for adding more detailed sub-pages).
Need template-level instructions? The templates section is ready for individual guides covering data fields, best-use cases, and preview tips. Drop new files into `image-api/templates/` as each design ships.
# Article Template
Source: https://docs.metakit.app/image-api/templates/article
Editorial-inspired layout with footers for author and read time.
# Article template
**Code:** `article`
Article mirrors a modern news card with badges, metadata, and a structured footer.
## Layout anatomy
* Solid division badge above the headline for category tagging.
* Left-aligned text block optimized for longer titles.
* Footer bar that can show brand, author, or estimated read time.
* Optional background image masked behind the copy column.
## Best for
* Editorial blogs and newsroom updates.
* Thought-leadership posts and analyses.
* Long-form release notes where metadata matters.
## Recommended parameters
| Parameter | Purpose |
| -------------- | -------------------------------------------- |
| `division` | Use for categories like “Guide” or “News”. |
| `brand` | Shows inside the footer (company or author). |
| `desc` | Works as a one-line summary or kicker. |
| `primaryColor` | Controls badge + footer highlight. |
## Example URL
```
https://gen.metakit.app/p/link/article.png?title=Site+Reports+scan+50k+URLs+in+minutes&desc=Full-stack+metadata+coverage+with+impact+scoring.&division=News&brand=MetaKit+Editorial&primaryColor=%2322C55E
```
If you want to show read time, pass it inside `division` or append it to `brand` (e.g., `brand=MetaKit+•+6+min+read`).
# Bold Template
Source: https://docs.metakit.app/image-api/templates/bold
High-impact hero layout for feature reveals and marquee announcements.
# Bold template
**Code:** `bold`
Bold goes all-in on typography to create announcement-ready cards. The template uses the `primaryColor` as the background in light mode or defaults to a dramatic dark treatment.
## Layout anatomy
* Full-bleed background with optional gradient.
* Center-aligned headline in oversized weight.
* Subtext directly under the title with generous leading.
* Optional CTA-style eyebrow pulled from `division`.
## Best for
* Major feature drops or launch statements.
* Short, punchy copy (under \~80 characters).
* Social teasers where the message needs to shout.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ----------------------------------------------- |
| `primaryColor` | Sets the background tone. |
| `mode` | Use `dark` for neon-on-black reveal moments. |
| `division` | Adds an eyebrow like “New Feature” or “Update”. |
| `accentColor` | Highlights CTA words inside the title. |
## Example URL
```
https://gen.metakit.app/p/link/bold.png?title=MetaKit+2.0+is+live&desc=Content,+metadata,+graphics—now+automated.&division=New+Feature&primaryColor=%2318181B&accentColor=%2322C55E&mode=dark
```
Keep copy tight. The design works best with 3–6 words on the main line so the typography can breathe.
# Clean Template
Source: https://docs.metakit.app/image-api/templates/clean
Minimalist layout for blogs, docs, and general-purpose previews.
# Clean template
**Code:** `clean`
Clean is the most versatile MetaKit card. It keeps copy left-aligned with ample whitespace, making long titles and subtitles highly readable.
## Layout anatomy
* Logo anchored in the top-left corner for instant brand recognition.
* Division badge stacked above the headline for tagging posts (e.g., “Blog”, “Changelog”).
* Title + description left-aligned to mirror editorial layouts.
* Footer lockup with brand name or URL.
## Best for
* Blog posts and changelog entries.
* Product documentation or release notes.
* General marketing pages that need a polished but calm preview.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ------------------------------------------------------------------- |
| `division` | Category eyebrow (e.g., `Blog`, `Update`, `Docs`). |
| `image` | Override the detected OG image if you want a specific illustration. |
| `primaryColor` | Controls the badge + subtle highlights. |
| `brand` | Footer label (company, product, or URL). |
## Example URL
```
https://gen.metakit.app/p/link/clean.png?title=MetaKit+Launches+2.0&desc=Automation+for+content,+metadata,+and+graphics.&division=Blog&brand=MetaKit&primaryColor=%2322C55E
```
Tip: combine `primaryColor` with `mode=dark` for high-contrast variants that still feel on-brand.
# Docs Template
Source: https://docs.metakit.app/image-api/templates/docs
Breadcrumb-style card built for developer docs, changelog posts, and help centers.
# Docs template
**Code:** `docs`
Docs mirrors documentation IA with breadcrumbs, structured typography, and a bottom accent stripe.
## Layout anatomy
* Breadcrumb trail across the top (derived from `brand`, `division`, and `title`).
* Left-aligned headline with a slim description area under it.
* Bottom color strip that inherits `primaryColor`.
* Optional icon slot referenced from `image`.
## Best for
* API references and tutorial hubs.
* Changelog or release documentation.
* Knowledge base articles that need clear context.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ----------------------------------------------- |
| `brand` | Root breadcrumb (e.g., “Docs” or product name). |
| `division` | Section breadcrumb (“API”, “Guides”). |
| `title` | Final breadcrumb + main headline. |
| `desc` | Summary of the article or endpoint. |
| `primaryColor` | Footer strip + accent color. |
## Example URL
```
https://gen.metakit.app/p/link/docs.png?brand=MetaKit+Docs&division=Image+API&title=Templates+Guide&desc=Deep+dive+into+clean,+bold,+promo,+and+more.&primaryColor=%2322C55E
```
To highlight a code-heavy article, pass `mode=dark` and pair with a monochrome `primaryColor`. The breadcrumb automatically adjusts its contrast for readability.
# Elegant Template
Source: https://docs.metakit.app/image-api/templates/elegant
Refined, border-focused card for luxury listings and formal events.
# Elegant template
**Code:** `elegant`
Elegant keeps the tone sophisticated with framed borders, serif-friendly typography, and delicate separators.
## Layout anatomy
* Centered heading with a thin frame and subtle drop shadow.
* Letter-spaced division text riding above or below the headline.
* Decorative divider line that can borrow from `secondaryColor`.
* Spacious margins to keep the card calm and upscale.
## Best for
* Luxury property listings or boutique launches.
* Awards, gala invites, and high-end product drops.
* Event RSVPs where tone matters as much as information.
## Recommended parameters
| Parameter | Purpose |
| ---------------- | ----------------------------------------------------------------- |
| `font` | Point to a serif or elegant display face. |
| `secondaryColor` | Defines border + divider accents. |
| `division` | Uppercase tag (e.g., “INVITATION”). |
| `filter` | Apply `light` for airy backgrounds or numeric opacity for photos. |
## Example URL
```
https://gen.metakit.app/p/link/elegant.png?title=The+MetaKit+Summit&desc=Executive+dinner+and+roadmap+preview&division=Invitation&brand=MetaKit&mode=light&secondaryColor=%23E4E4E7
```
Pair with a soft background texture (use `background=`) plus `filter=light` to keep text legible while still feeling premium.
# Event Template
Source: https://docs.metakit.app/image-api/templates/event
Date-forward card for conferences, webinars, and community launches.
# Event template
**Code:** `event`
Event highlights the schedule first, pairing a bold date column with the essential details panel.
## Layout anatomy
* Split canvas: left rail for date, right panel for title + description.
* RSVP or “Register now” micro-copy derived from `brand`.
* Optional background image tinted using `filter`.
* Secondary details row for time zones or livestream info.
## Best for
* Conferences, summits, product launches.
* Webinars and livestream announcements.
* Meetup schedules and community events.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ---------------------------------------- |
| `division` | Primary date stamp (e.g., `MAY+12`). |
| `title` | Event or session name. |
| `desc` | Supporting info (location, time, hosts). |
| `brand` | CTA text such as “RSVP Now”. |
| `primaryColor` | Colors the date rail and CTA. |
## Example URL
```
https://gen.metakit.app/p/link/event.png?title=MetaKit+Playbook+Live&division=DEC+11&desc=10:00a+PT+•+Virtual+Workshop&brand=RSVP+Now&primaryColor=%2322C55E
```
Need dual time zones? Append them to `desc` separated by `•` so the text wraps cleanly inside the description block.
# Highlight Template
Source: https://docs.metakit.app/image-api/templates/highlight
Logo-forward layout for partner spots, brand launches, and hero callouts.
# Highlight template
**Code:** `highlight` (alias: `logo`)
Highlight strips the card down to essentials so the logo or icon becomes the hero.
## Layout anatomy
* Massive centered logo or icon fed via `image`.
* Minimal tagline lifted from `title` or `desc`.
* Optional badge (`division`) for phrases like “Featured Partner”.
* Clean background that can adopt `primaryColor` or stay neutral.
## Best for
* Brand kits and press pages.
* Partner spotlights or ecosystem pages.
* Social posts announcing integrations.
## Recommended parameters
| Parameter | Purpose |
| -------------- | -------------------------------------------------------- |
| `image` | Transparent PNG/SVG logo (ideally 800×800). |
| `title` | Short tagline or company name. |
| `division` | Badge like “Integration” or “Partner”. |
| `primaryColor` | Background color (pair with `mode=dark` for neon logos). |
| `accentColor` | Outline/glow around the card. |
## Example URL
```
https://gen.metakit.app/p/link/highlight.png?title=MetaKit+x+Firecrawl&division=Integration&image=https://images.metakit.app/metakit-logo.png&primaryColor=%23090E1B&accentColor=%2322C55E&mode=dark
```
If the logo already has dark edges, consider `mode=light` plus `filter=light` to keep it crisp. The template automatically scales the asset to avoid clipping.
# Template Library
Source: https://docs.metakit.app/image-api/templates/index
All supported MetaKit Image API templates, universal options, and deep-dive links.
# MetaKit Image API – Templates Guide
This guide documents every MetaKit template used by the website graphics tool. Start here for universal customization, then jump into the dedicated sub-pages for implementation details, dynamic props, and best practices.
## Universal customization
All templates share a common set of parameters and styling hooks, so you can standardize how previews look across content types.
### Core content
* `title`: Primary headline or hero text.
* `desc`: Supporting copy or subtitle.
* `brand`: Display name in the footer or header.
* `division`: Eyebrow/badge text for categories, tags, or prices.
* `image`: Overrides the detected metadata image with a custom asset.
### Styling & theme
* `mode`: `light` (default) or `dark`.
* `theme`: Alias for `mode` or a specific theme preset.
* `primaryColor`: Main accent color for badges, buttons, and CTA highlights.
* `secondaryColor`: Supporting color used for borders or muted text.
* `accentColor`: High-contrast tone for CTAs or callouts.
* `background`: Background image URL.
* `filter`: Overlay intensity for background images (`light`, `dark`, or opacity `0.1`–`1.0`).
* `font`: Custom font family.
These parameters can be combined with template-specific props covered in each sub-page.
***
## Template directory
| Template | Code | Best for | Reference |
| --------- | ----------- | -------------------------------------- | -------------------------------------------- |
| Clean | `clean` | Blogs, docs, general previews | [View guide](/image-api/templates/clean) |
| Bold | `bold` | Feature reveals, big statements | [View guide](/image-api/templates/bold) |
| Elegant | `elegant` | Luxury or formal events | [View guide](/image-api/templates/elegant) |
| Article | `article` | Editorial or news content | [View guide](/image-api/templates/article) |
| Promo | `promo` | Product drops, campaigns | [View guide](/image-api/templates/promo) |
| Pricing | `pricing` | Plans, subscriptions | [View guide](/image-api/templates/pricing) |
| Wedding | `wedding` | Invitations, save-the-dates | [View guide](/image-api/templates/wedding) |
| Event | `event` | Webinars, conferences, launches | [View guide](/image-api/templates/event) |
| Highlight | `highlight` | Logo-first hero or partner badges | [View guide](/image-api/templates/highlight) |
| Docs | `docs` | API references, changelog, help center | [View guide](/image-api/templates/docs) |
Use the `/templates` playground to preview any layout instantly. When you’re ready to productionize, plug the same parameters into the URLs documented in each template page and update your `og:image`/`twitter:image` tags accordingly.
# Pricing Template
Source: https://docs.metakit.app/image-api/templates/pricing
Tier-focused layout for SaaS plans and subscription offers.
# Pricing template
**Code:** `pricing`
Pricing showcases a floating card with bold pricing information and an optional CTA button.
## Layout anatomy
* Central card with drop shadow over a subtle gradient background.
* Huge price lockup (fed by the `division` parameter).
* Supporting description for inclusions or plan name.
* CTA button text sourced from `brand` or `desc` depending on copy length.
## Best for
* SaaS pricing tiers.
* Membership or subscription promos.
* Limited-time bundle announcements.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ------------------------------------- |
| `division` | Render the price (e.g., `$29/mo`). |
| `title` | Plan name or campaign headline. |
| `desc` | Benefits or short pitch. |
| `brand` | CTA label (“Get Started”, “Upgrade”). |
| `primaryColor` | Highlights the CTA button + borders. |
## Example URL
```
https://gen.metakit.app/p/link/pricing.png?title=Metakit+Ultra&division=%2429%2Fmo&desc=Automation,+governance,+and+priority+support.&brand=Start+Free&primaryColor=%2322C55E
```
Need to emphasize savings? Append text to the description (e.g., `desc=Automation+stack+•+Save+35%`). The layout automatically adjusts line breaks.
# Promo Template
Source: https://docs.metakit.app/image-api/templates/promo
Split-background marketing card built for launches and campaigns.
# Promo template
**Code:** `promo`
Promo emphasizes product drops with diagonal backgrounds, CTA styling, and high-energy composition.
## Layout anatomy
* Split background with angled color block.
* Eyebrow text (defaults to “NEW ARRIVAL”) sourced from `division`.
* CTA treatment below the copy that mimics a button.
* Optional product image slot sourced from `image`.
## Best for
* E-commerce campaigns.
* Product feature announcements.
* Seasonal promotions and discounts.
## Recommended parameters
| Parameter | Purpose |
| -------------- | ------------------------------------------------ |
| `division` | Replace the eyebrow (“New drop”, “Launch week”). |
| `primaryColor` | Drives the diagonal background slice. |
| `accentColor` | CTA button + emphasis color. |
| `image` | Product photography or screenshots. |
| `desc` | Short supporting line (ideal for value props). |
## Example URL
```
https://gen.metakit.app/p/square/promo.png?title=Site+Reports+Ultra&desc=Full-stack+metadata+audits+with+impact+scoring.&division=Launch+Week&brand=MetaKit&primaryColor=%2322C55E&accentColor=%230A0A0A
```
For “price slash” messaging, pass the discount inside `division` (e.g., `division=50%25+OFF`). The template automatically styles the text as a badge.
# Wedding Template
Source: https://docs.metakit.app/image-api/templates/wedding
Arch-framed layout for weddings, ceremonies, and formal celebrations.
# Wedding template
**Code:** `wedding`
Wedding leans into soft colors, arched frames, and elegant typography to deliver instant “save the date” vibes.
## Layout anatomy
* Arch-shaped photo or gradient container fed by `image`.
* Centered headline with decorative ampersand between names.
* Event date + location callout near the bottom.
* Subtle floral-inspired border accents that respect `secondaryColor`.
## Best for
* Wedding websites and invitation pages.
* Formal ceremonies, galas, or celebrations.
* Event landing pages that need a romantic tone.
## Recommended parameters
| Parameter | Purpose |
| ---------------- | -------------------------------------- |
| `title` | Names of the couple or event headline. |
| `division` | Date or “Save the Date” copy. |
| `desc` | Venue or city information. |
| `image` | Engagement photo or texture. |
| `secondaryColor` | Controls border and frame accents. |
## Example URL
```
https://gen.metakit.app/p/link/wedding.png?title=Alex+%26+Harper&division=Save+the+Date&desc=August+16,+2026+•+Big+Sur&brand=MetaKit+Events&image=https://images.metakit.app/arch.png&secondaryColor=%23FEECE2
```
Swap `mode=dark` for evening ceremonies or pass `background=` to place the arch over a subtle pattern.
# Web Graphics Use Cases
Source: https://docs.metakit.app/image-api/use-cases
How teams deploy MetaKit Web Graphics across marketing, product, and community channels.
# Web Graphics use cases
Web Graphics focuses on outbound link previews for public websites—distinct from the Branded Graphics product, which handles always-on OG images across every URL automatically. Here’s how customers use the Image API variants to stay discoverable, trustworthy, and on-message.
## Launch & campaign pages
* **Goal:** Keep every launch link consistent across Twitter/X, LinkedIn, newsletters, and partner blogs.
* **Template picks:** `bold` for loud reveal statements, `promo` for feature highlights, `pricing` for offer cards.
* **Playbook:** Trigger new cards during the changelog publish step and rotate CTA colors (`accentColor`) per campaign.
## Editorial & knowledge hubs
* **Goal:** Make docs, tutorials, and ecosystem content look polished when shared.
* **Template picks:** `clean`, `article`, and `docs`.
* **Playbook:** Map CMS categories to `division` badges, and inject author names or read times into `brand`.
## Events & community
* **Goal:** Increase RSVP conversions by sharing time/date-focused previews.
* **Template picks:** `event` for webinars, `wedding` for formal invites, `elegant` for VIP dinners.
* **Playbook:** Include timezone or streaming info inside `desc`, and color-code series using `primaryColor`.
## Integrations & partner moments
* **Goal:** Celebrate new ecosystem additions or case studies with logo-forward cards.
* **Template picks:** `highlight` (aka `logo`) plus `clean` for accompanying write-ups.
* **Playbook:** Pass transparent PNG/SVG logos into `image` and create dynamic URLs keyed by partner slug.
## How it differs from Branded Graphics
| Feature | Web Graphics (Image API) | Branded Graphics |
| -------- | -------------------------------------------- | ------------------------------------------------- |
| Audience | Public site owners & marketing teams | Entire site coverage (automated OG/Twitter tags) |
| Control | Full URL customization, per-route parameters | Completely automated via brand sync + signed URLs |
| Best for | Campaigns, bespoke pages, experimentation | Always-on metadata hygiene |
Ready to build? Jump to `image-api/getting-started` for implementation steps or head into the template guides for query parameters and sample URLs.
# MetaKit Overview
Source: https://docs.metakit.app/index
Everything you need to understand and deploy MetaKit’s growth automation platform.
# Stop working. Start generating.
MetaKit unifies AI-written content, real-time metadata intelligence, and branded graphics so your product always looks alive and trustworthy online. Use this overview to understand how the platform fits together and where to dive deeper next.
## Platform snapshot
* **Content Studio** keeps a steady drumbeat of blog posts, changelog updates, and social copy with approval workflows that match your cadence.
* **Metadata Intelligence** crawls up to 50k URLs in minutes, scores 120+ metadata checks, and ranks the fixes that move SEO visibility fastest.
* **Branded Graphics Studio** is your AI design room for bespoke launch and campaign assets with human-in-the-loop approvals.
* **Instant Image Generation** renders on-brand OG/Twitter/blog imagery on the fly, scraping context directly from your pages.
Need implementation details? Visit the dedicated product pages or jump into the MetaKit Image API to wire automation directly into your stack.
## How everything connects
1. **Feed the platform:** Connect your site(s), pick tone and voice, and sync brand assets once.
2. **Automate publishing:** Approve or edit AI content, then ship everywhere—blog, LinkedIn, Twitter/X, changelog—with a single click.
3. **Stay discoverable:** Metadata Intelligence flags broken metadata, canonical issues, and missing OG assets before search crawlers do.
4. **Look consistent:** The Image API serves ready-to-use social cards for every route, with templates mapped to your use cases.
## Choose your next step
* Learn how **Content Studio** keeps your channels active in `products/ai-content`.
* See how **Metadata Intelligence** prioritizes technical fixes in `products/site-reports`.
* Explore **Branded Graphics Studio** collaboration workflows in `products/branded-graphics`.
* Automate **Instant Image Generation** in `products/image-generation`, then dive into template specifics via `image-api/templates/index`.
## Implementation checklist
1. Connect an environment (staging or production) and sync brand presets.
2. Review first-pass content drafts and lock in approval workflows.
3. Schedule recurring Metadata Intelligence crawls to baseline SEO health.
4. Update your `` tags to point at MetaKit-generated URLs.
5. Track the impact inside your analytics stack to prove lift.
Ready for deeper dives? Continue with the product guides below or head directly into the Image API to wire automated previews into your app. We'll keep this section updated as new capabilities ship.
# Content Studio
Source: https://docs.metakit.app/products/ai-content
AI writing workflows that keep blogs, changelogs, and socials updated automatically.
# Content Studio
MetaKit’s Content Studio keeps your brand active across every owned and social channel without building a marketing team. Drafts arrive in your voice, approvals stay in your control, and publishing is fully automated once you’re ready to go live.
## What it solves
* **Content treadmill:** Weekly blog or changelog updates keep perception of momentum high without manual writing.
* **Voice consistency:** Tone presets and brand guidelines make every draft feel native to your company.
* **Channel fragmentation:** Ship blog posts, LinkedIn updates, and Tweets/X threads from a single approval queue.
## Key automations
| Capability | Details |
| ------------------------ | ------------------------------------------------------------------------------------------ |
| Draft generation | Targeted briefs turn into long-form posts, changelog snippets, and short social copy. |
| Approval workflows | Assign reviewers, block publishing until stakeholders sign off, and retain edit history. |
| Multi-channel publishing | Publish to web, LinkedIn, Twitter/X, and email lists without rebuilding assets. |
| Scheduling | Queue recurring announcements so launches, weekly recaps, and campaigns stay on autopilot. |
## Implementation steps
1. **Connect your site:** Authorize MetaKit for the site(s) or blogs you want to automate.
2. **Define tone + pillars:** Provide value props, product news, and keywords so drafts stay on-message.
3. **Configure approvals:** Choose per-channel approvers and whether AI drafts can ship automatically after edits.
4. **Review the first sprint:** Approve or adjust the initial wave of drafts to teach the system what “good” looks like.
5. **Measure lift:** Track engagement or organic sessions to prove the impact of consistent publishing.
## Best practices
* Use changelog-sized updates to capture minor improvements and keep the feed alive between marquee launches.
* Layer in campaign tags so downstream analytics can attribute traffic to MetaKit-generated content.
* Combine with Metadata Intelligence to ensure every newly published article scores perfect metadata before it goes live.
When you’re ready to wire templates for social previews, move on to `products/image-generation` to pair your content pipeline with automated, on-the-fly graphics.
# Branded Graphics Studio
Source: https://docs.metakit.app/products/branded-graphics
AI-powered design workspace where teams approve and publish branded visuals without leaving MetaKit.
# Branded Graphics Studio
Branded Graphics Studio is your AI-assisted design room for launch visuals, campaign assets, and marketing-ready graphics. It’s distinct from Instant Image Generation: instead of rendering cards purely from URLs, this workspace lets teams brief the AI, iterate on layouts, and publish approved assets everywhere.
## Why teams use it
* **Concept-to-publish in one place:** Brainstorm with AI, remix drafts, and approve assets without bouncing to Figma.
* **Brand guardrails:** Lock colors, typography, and logos so experimentation never breaks guidelines.
* **Multi-channel delivery:** Push approved graphics to launch pages, changelog posts, newsletters, and social channels from a single queue.
## Feature highlights
| Area | Details |
| --------------- | --------------------------------------------------------------------------------------- |
| Creative briefs | Describe the campaign or launch; AI returns multiple compositions to review. |
| Brand overlays | Apply locked color palettes, logos, and CTAs automatically to every iteration. |
| Collaboration | Comment threads, approvals, and version history keep teams aligned. |
| Publish targets | Ship directly to CMS pages, assets folders, or queue them for Instant Image Generation. |
## Implementation workflow
1. **Create a workspace:** Define brand presets, voice guidelines, and approval steps.
2. **Brief the AI:** Provide launch context, CTAs, and any constraints (logo lockups, photography, etc.).
3. **Review iterations:** Use comments and annotations to request tweaks, then approve final artboards.
4. **Distribute:** Push approved assets to CMS pages, drip campaigns, or export for paid media.
5. **Sync with Instant Image Generation:** Optionally link a finished design to the Image API so on-the-fly OG cards inherit the same art direction.
Branded Graphics Studio is ideal for campaigns that need human oversight or storytelling. For programmatic OG/Twitter images, check out the **Instant Image Generation** page or dive straight into `image-api/templates/index`.
# Instant Image Generation
Source: https://docs.metakit.app/products/image-generation
On-the-fly OG, Twitter, and blog imagery that scrapes your pages and renders in milliseconds.
# Instant Image Generation
Instant Image Generation is MetaKit’s on-the-fly graphics engine. Point it at any URL (or pass structured props) and it scrapes titles, descriptions, logos, and color palettes before rendering an Open Graph/Twitter-ready card in under 200 ms. Unlike Branded Graphics Studio, this feature is fully programmatic—perfect for blogs, changelogs, docs, pricing pages, and any surface that needs a bespoke preview for every route.
## How it works
1. **Detect brand context:** We crawl the target URL (or use provided parameters) to learn titles, copy, logos, and theme colors.
2. **Select a template:** Choose from Clean, Bolt, Promo, Pricing, Event, Wedding, Docs, Highlight, and more.
3. **Render globally:** The card is generated on the edge with CDN caching so link previews stay fast worldwide.
4. **Embed anywhere:** Drop the generated URL into `og:image`, `twitter:image`, blogs, emails, dashboards, or partner embeds.
## Why teams love it
* **Zero maintenance:** Update a headline or hero image in your CMS and every share card updates in sync.
* **Campaign agility:** Launchers can ship daily changelog entries or microsites without waiting on design handoffs.
* **Template consistency:** Use the same layouts defined in `image-api/templates/` so engineering, marketing, and design stay aligned.
## Feature highlights
| Capability | Details |
| ------------------- | ------------------------------------------------------------------------------------- |
| Auto brand scraping | Pulls colors, fonts, and logos from any URL when no overrides are provided. |
| Query parameters | Override copy, CTAs, images, or colors via URL parameters for maximum control. |
| Signed URLs | Lock down production cards with signed links so only approved templates render. |
| Format flexibility | PNG, SVG, and HTML outputs ready for OG/Twitter tags, emails, or internal dashboards. |
## When to pair with other products
* **Content Studio:** Every AI-written post automatically receives a matching preview card when published.
* **Metadata Intelligence:** Pages flagged as missing OG/Twitter tags can auto-heal by pointing to Instant Image Generation URLs.
* **Branded Graphics Studio:** Use the studio for curated campaigns, then hand the final art direction to Instant Image Generation for long-tail pages.
## Next steps
1. Visit `image-api/overview` for API fundamentals and sample URLs.
2. Explore `image-api/templates/index` to pick the best template for each content type.
3. Wire the generated URL into your `` tags and verify previews in Slack, LinkedIn, and iMessage.
Need a quick proof? Try dropping this URL into any chat tool:
```
https://gen.metakit.app/p/link/clean.png?title=MetaKit+Launches+2.0&desc=Automation+for+content,+metadata,+and+graphics.&division=Blog&brand=MetaKit&primaryColor=%2322C55E
```
It’s the same engine powering our docs preview images, so you can be confident that every share of your site looks professional without manual design work.
# Metadata Intelligence
Source: https://docs.metakit.app/products/site-reports
Crawl, score, and prioritize metadata fixes before they hurt discoverability.
# Metadata Intelligence
Metadata Intelligence (powered by Site Reports) keeps your metadata perfect so every page is discoverable and shareable. Crawl up to 50,000 URLs in minutes, run 120+ checks, and get a prioritized list of fixes before search engines flag issues.
## Core outcomes
* **Metadata coverage:** Catch missing OG, Twitter, canonical, robots, or schema tags on any route.
* **Impact scoring:** Fix what matters first using the severity and traffic weighting MetaKit calculates per URL.
* **Continuous monitoring:** Schedule automatic rescans (e.g., every 24 h) to keep regressions from shipping silently.
## Report anatomy
1. **Health score:** Aggregate view combining SEO, performance, and best-practice categories.
2. **Issue backlog:** Ranked list that highlights which pages are excellent, need work, or critical.
3. **Fix instructions:** Plain-language remediation tips with links back to your CMS or repo.
4. **Share-ready exports:** Send the latest crawl to marketing, product, or engineering without spreadsheets.
## Getting started
1. Add the domain(s) you want monitored.
2. Choose crawl depth, scheduling cadence, and notification channels.
3. Run the initial crawl to baseline SEO health.
4. Assign owners to each issue cluster so fixes never stall.
## Pairing with other products
* Use Metadata Intelligence alongside **Content Studio** to ensure new articles ship with perfect metadata.
* Pipe the findings into your **Branded Graphics Studio** workflow to guarantee every hero or social asset reflects the latest copy.
* Reference **Instant Image Generation** when you want to auto-insert OG images for any route flagged as missing.
With Metadata Intelligence humming in the background, your users see fresh content, pristine metadata, and gorgeous previews on every share.