Create OpenGraph Image

The "Create OpenGraph Image" step allows you to generate customized social media preview images (OpenGraph images) for your content. These images appear when your content is shared on platforms like Facebook, Twitter, LinkedIn, and other social media sites.

How to Configure the Create OpenGraph Image Step

Configuring the step requires setting the parameters shown below:

[IMAGE: Screenshot of the Create OpenGraph Image step configuration panel]

Title

Enter the main headline text that will appear on your OpenGraph image. This should be compelling and concise, typically matching or complementing the title of your content.

You can use Liquid syntax to dynamically reference a title from a previous step:

{{ step_1.output.content_title }}

Subtitle (Optional)

Add a secondary text line that will appear below the main title. This can provide additional context or information about your content.

Background Type

Choose the type of background for your OpenGraph image:

• Solid Color: Use a single color as the background

• Gradient: Use a color gradient as the background

• Image URL: Use an image as the background

Background Color (for Solid Color)

If you selected "Solid Color" as the background type, specify the color in hex format (e.g., #FF5733) or use a color name (e.g., blue, red).

Gradient Colors (for Gradient)

If you selected "Gradient" as the background type, specify the start and end colors for your gradient in hex format or color names.

Image URL (for Image URL)

If you selected "Image URL" as the background type, provide the URL to the image you want to use as the background. This can be from a previous step or an external URL.

Brand Logo URL (Optional)

Add your company or brand logo to the OpenGraph image by providing the URL to the logo image. For best results, use a transparent PNG file.

Width (Optional)

Specify the width of the generated OpenGraph image in pixels. The recommended size for most social platforms is 1200 pixels.

Default: 1200 pixels

Height (Optional)

Specify the height of the generated OpenGraph image in pixels. The recommended size for most social platforms is 630 pixels.

Default: 630 pixels

Theme (Optional)

Select the overall visual theme for your OpenGraph image:

• Light: Light background with dark text

• Dark: Dark background with light text

• Auto: Automatically selects the best contrast based on your background

Output Format

The Create OpenGraph Image step returns a JSON object containing details about the generated image:

{
  "url": "https://example.com/opengraph-image.jpg",
  "width": 1200,
  "height": 630,
  "title": "Your Compelling Title",
  "subtitle": "Additional context information",
  "background_type": "gradient"
}

[IMAGE: Screenshot showing an example of the OpenGraph image in the AirOps interface]

How to Use the Results

You can access the OpenGraph image properties in subsequent workflow steps using Liquid syntax. For example:

{{ step_2.output.url }}

This will reference the URL of the generated OpenGraph image, which you can then use in your meta tags:

<meta property="og:image" content="{{ step_2.output.url }}" />
<meta property="og:image:width" content="{{ step_2.output.width }}" />
<meta property="og:image:height" content="{{ step_2.output.height }}" />

Common Use Cases

• Creating social media preview images for blog posts

• Generating consistent sharing images for product pages

• Designing eye-catching previews for landing pages

• Building branded social sharing assets

• Automating visual content for marketing campaigns

How to Continue if the Creation Fails

By default, the Create OpenGraph Image step will terminate the workflow if it fails. To continue the workflow if the step fails, click "Continue" at the bottom of the settings panel.

[IMAGE: Screenshot showing the "Continue" option in the step settings]

The step will return the following keys when it fails:

• output: this will be null

• error:

  • message: the message returned from the step

  • code: the error code representing the error

Example Workflow

Here's a common pattern using the Create OpenGraph Image step:

1. Use an LLM step to generate a blog post title and content

2. Use the "Search Stock Images" step to find a relevant background image

3. Use the "Create OpenGraph Image" step to generate a social preview image

4. Output both the blog content and the meta tags with the OpenGraph image URL

This integrated approach ensures that your content is immediately ready for social sharing with an eye-catching, branded preview image that increases engagement.