2 min read Guides

Creating Open Graph Images for a Recruitment Agency with OGPik

Creating Open Graph Images for a Recruitment Agency with OGPik

Today, we’ll go through an example of creating a stylish Open Graph image for a staffing agency. These images are perfect for sharing job links on LinkedIn, Facebook, or messaging apps — they help make even a regular job link look noticeable and professional.

Step 1. Background and spacing

Start by setting the text color to black and adding 50px padding on all sides.
Next, choose a gradient background with a 90° angle:

  • First color: #FF3A2F
  • Second color: #FF3A2F(position 15%)
  • Third color: #FFFFFF(position 15%)

This creates a vertical red stripe on the left, about 180px wide — a perfect spot for your logo.

Step 2. Job title

Add the job title text, for example:

Fullstack Developer (Middle / Senior) — PHP / JavaScript / CSS / HTML

Use the Inter font, Bold, 60px size, and 72px line height.
Set paddings: top — 50, right — 50, bottom — 120, left — 230px.
Position: bottom-left corner.

This layout leaves room for the company name underneath the title.

Upload your prepared logo (80px width) and place it in the top-left corner with default paddings — on the red stripe.
This creates instant brand recognition.

Step 4. Company name

Add a new text layer (Text #1) with the company name, for example:

Acme Corporation

Set paddings: top — 0, right — 50, bottom — 50, left — 230px.
Font — Inter, size — 40px, line height — 50px, 1 line only.
Position: bottom-left corner.

Step 5. Job location

Add another text block (Text #2) with the city:

New York

Padding — 50px on all sides except left (230px).
Font — Inter, size and line height — 30px.
Position: top-right corner.

Integration

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

<script type="application/ogpik">
{
  "title": "Fullstack Developer (Middle / Senior) — PHP / JavaScript / CSS / HTML",
  "texts": [
    "Acme Corporation",
    "New York"
  ]
}
</script>

Result

You’ll get a clean, professional Open Graph image:
a red accent stripe for the logo, a bold job title, and neatly placed company and location labels.
Perfect for LinkedIn, Facebook, or messenger previews.

Why it works

Such previews grab attention in job posts, highlight your agency’s branding, and make even simple links look well-designed — all within minutes and without a designer.