Social Cards and Automatic Open Graph Images

Generate a link-preview image for every page, post, product, or profile.

Social cards—also called Open Graph images, OG images, or link-preview images—appear when someone shares a URL on Twitter, Facebook, LinkedIn, Slack, and other platforms. The page identifies the image with og:image and twitter:image tags in its HTML <head>.

The challenge

One fallback image is easy to maintain. A specific image for every blog post, product page, or user profile requires a repeatable way to combine page data with a design.

Choose an OG image workflow

Your situation	Recommended workflow
You have an existing public website, CMS, store, or static site	Use an OG Image Config. It maps each page path to a screenshot or template without an API request or HMAC token per page.
Your application generates images from arbitrary or private data	Use the image API with HTML/CSS or a reusable template.
You need a render-on-demand `GET` URL containing template values or a target URL	Use Signed Image URLs.

Automatic OG images for an existing site

Create one OG Image Config for your site’s exact origin. A page such as /articles/hello uses a matching image URL:

<meta property="og:image" content="https://hcti.io/v1/og/DOMAIN_ID/articles/hello">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://hcti.io/v1/og/DOMAIN_ID/articles/hello">

HCTI can capture the page or a selected element. It can also render a template using the page’s title, description, Open Graph metadata, or explicit template values. See the OG Image Config setup guide and the CMS and platform guides.

API and template workflow

Design your template - Create an HTML/CSS layout for your social card
Make it dynamic - Use placeholders for title, author, date, etc.
Call the API - Generate a unique image for each page
Add the meta tag - Include the image URL in your page’s <head>

Example template

Here’s a simple social card template you can customize:

<div style="width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px; font-family: sans-serif; color: white; display: flex; flex-direction: column; justify-content: space-between;">
  <div>
    <h1 style="font-size: 48px; margin: 0; line-height: 1.2;">
      Your Article Title Goes Here
    </h1>
    <p style="font-size: 24px; margin-top: 20px; opacity: 0.9;">
      A brief description or subtitle for your content
    </p>
  </div>
  <div style="display: flex; align-items: center;">
    <img src="https://example.com/avatar.jpg" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 20px;">
    <div>
      <p style="margin: 0; font-size: 20px; font-weight: bold;">Author Name</p>
      <p style="margin: 0; font-size: 16px; opacity: 0.8;">yoursite.com</p>
    </div>
  </div>
</div>

API request

curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);padding:60px;font-family:sans-serif;color:white;\"><h1 style=\"font-size:48px;\">Your Title Here</h1></div>"
  }'

Recommended dimensions

Platform	Recommended Size
Twitter	1200 x 600 px
Facebook	1200 x 630 px
LinkedIn	1200 x 627 px
Slack	1200 x 630 px

For one broad fallback image, use 1200 x 630 pixels. An OG Image Config can instead adapt one render or create a separate render for each recognized platform size.

Adding to your HTML

Once you have the image URL, add it to your page’s <head>. This can be the path-based URL from an OG Image Config or the URL returned by an API or template request:

<!-- Open Graph / Facebook -->
<meta property="og:image" content="https://hcti.io/v1/image/your-image-id">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://hcti.io/v1/image/your-image-id">

Using templates

For a consistent design, use Templates. Create a template once with variables, then populate it through the API, a signed URL, or an OG Image Config.

You can build the social card visually with the Template Editor and start from common sizes in the Canvas guide, including the Open Graph preset.

curl -X POST https://hcti.io/v1/image/t-your-template-id -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "template_values": {
      "title": "My Blog Post Title",
      "author": "Jane Doe",
      "date": "December 2025"
    }
  }'

Keep text large - Social cards are often viewed as thumbnails
Use high contrast - Ensure text is readable at small sizes
Include branding - Add your logo or consistent colors
Test the published URL - Use the Social Card Previewer and check more than one page path.

Need help?

Talk to a human. Email support@htmlcsstoimage.com and we’ll help you get started.