Skip to main content

​
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 <meta property="og:image"> 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
  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.