---
layout: page
title: Social Cards and Automatic Open Graph Images
permalink: /use-cases/social-cards/
parent: Use Cases
nav_order: 1
description: >-
Generate Open Graph images, Twitter cards, and social media previews for websites, CMSs, and applications with HTML/CSS to Image.
---
# Social Cards and Open Graph Images
{: .no_toc }
{: .fs-9 }
Generate a link-preview image for every page, post, product, or profile.
{: .fs-4 .fw-300 }
## What are social cards?
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 ``.
## 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](/getting-started/og-images/). 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](/getting-started/using-the-api/) with HTML/CSS or a reusable [template](/getting-started/templates/). |
| You need a render-on-demand `GET` URL containing template values or a target URL | Use [Signed Image URLs](/getting-started/create-and-render/). |
### 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:
```html
```
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](/getting-started/og-images/) and the [CMS and platform guides](/guides/og-images/).
### API and template workflow
1. **Design your template** - Create an HTML/CSS layout for your social card
2. **Make it dynamic** - Use placeholders for title, author, date, etc.
3. **Call the API** - Generate a unique image for each page
4. **Add the meta tag** - Include the image URL in your page's ``
## Real-world example: Dev.to
[Dev.to](https://dev.to) generates thousands of social cards automatically. Every blog post gets a custom image with the title, author, and branding.
{% cloudinary /assets/images/image%20%2823%29.png alt="Dev.to social card generated from HTML" %}
## Example template
Here's a simple social card template you can customize:
```html
Your Article Title Goes Here
A brief description or subtitle for your content
Author Name
yoursite.com
```
## API request
```bash
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
-H "Content-Type: application/json" \
-d '{
"html": "
Your Title Here
"
}'
```
## 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](/getting-started/og-images/#4-choose-image-size-optimization) 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 ``. This can be the path-based URL from an OG Image Config or the URL returned by an API or template request:
```html
```
## Using templates
For a consistent design, use [Templates](/getting-started/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](/template-editor/) and start from common sizes in the [Canvas guide](/template-editor/canvas/), including the Open Graph preset.
```bash
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
-H "Content-Type: application/json" \
-d '{
"template_id": "your-template-id",
"template_values": {
"title": "My Blog Post Title",
"author": "Jane Doe",
"date": "December 2025"
}
}'
```
## Tips for great social cards
1. **Keep text large** - Social cards are often viewed as thumbnails
2. **Use high contrast** - Ensure text is readable at small sizes
3. **Include branding** - Add your logo or consistent colors
4. **Test the published URL** - Use the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer) and check more than one page path.
{% include code_footer.md version=1 %}
