3 min read Guides

How to Design Corporate Open Graph Images with OGPik

How to Design Corporate Open Graph Images with OGPik

A clean, branded Open Graph preview helps your company website stand out when links are shared on social networks and messengers.
In this guide, we’ll create a stylish OG image for a bank’s corporate website — with a balanced composition, logo, and consistent visual identity.

🧩 Step 1. Create the Background

Go to Haikei.app and select the Blob Scene generator.

  1. Set the image size to 1200×630 pixels.
  2. Adjust the angles, shapes, and colors according to your brand palette.
  3. Press the Generate button until you get a result you like.

Download the generated background, then upload it to OGPik.
Set 70px padding on all sides.
Choose appropriate text and background colors for a clean, modern look.

🏷 Step 2. Add the Title

Now let’s add a title, for example:

Debit Cards
  • Font size: 60 px
  • Line height: 70 px
  • Style: Bold
  • Padding: 60 px top and bottom, 70 px left, 540 px right

(The right padding will be used later for the image placement.)
Position the title in the bottom-left corner — it looks balanced and keeps focus on the content.

🏦 Step 3. Add the Logo and Company Name

  • Upload your company logo and position it in the top-left corner.
  • Add a new text block (Text #1) and type your company name — for example, Acme Bank.
  • Choose a suitable font and adjust its size. The line height should match the logo’s height.
  • Adjust padding so that the text sits neatly next to the logo and is visually centered.

🖼 Step 4. Add an Image

Now we’ll add a supporting graphic to the layout.

  1. Upload an image (for example, a debit card or related illustration).
  2. Set all padding values to 0 px.
  3. Position: bottom-right corner.

The result: a clean, modern Open Graph image that reflects your brand identity — perfect for a corporate bank website.

🔗 Step 5. Integration

To automatically generate such images when sharing your pages, simply add a JSON schema to your HTML code.

<script type="application/ogpik">
{
  "title": "Debit Cards"
}
</script>

This helps users instantly recognize your brand and type of content when the link is shared.

🔄 Example for Other Pages

For other pages of your website, you only need to pass a different title and image URL in the schema — OGPik will automatically generate the correct preview for that specific page.

<script type="application/ogpik">
{
  "title": "Mobile App",
  "images": [
    "https://yourdomain.com/assets/images/mobile-app.png"
  ]
}
</script>

This way, every page of your site can have its own unique Open Graph image when shared on social media or messengers — without the need to manually design each one.

💡 Conclusion

With OGPik, you can easily create consistent, branded Open Graph images for your corporate website — no need for designers or manual editing.
Just configure your background, fonts, and logo once, and integrate the generation script.

Your company’s links will always look professional and recognizable across all social networks and messengers.