What Is an OG Image JPG? · ScreenshotNeo

Short answer: An OG image JPG is a JPEG image assigned to a webpage through the Open Graph og:image metadata property. When a platform reads the page, it can use that image to represent the link in a social-graph preview. The image is referenced by URL in the page’s HTML; it is not embedded inside the link text.

The Open Graph protocol describes a webpage as an object in a social graph and defines core properties including og:title, og:type, og:image, and og:url. See the Open Graph protocol documentation.

What “OG image JPG” means

“OG” means Open Graph. An OG image is the representative image for a page. “JPG” (also written “JPEG”) describes the image format. JPEG files normally use the image/jpeg MIME type.

Therefore, an OG image JPG is not a special file type. It is an ordinary JPEG file used as the value of og:image. The protocol’s example uses a URL ending in .jpg and declares image/jpeg.

How to add an OG image JPG

Create or export a JPEG image at the dimensions required by the platform where you will share the link.
Host the file at a publicly reachable HTTPS URL.
Add the Open Graph tags inside the document’s <head>.
Deploy the page and inspect the resulting HTML from the public URL.
Use the destination platform’s preview or inspection tool to request the page again after changes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example article</title>

  <meta property="og:title" content="Example article" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/articles/example" />
  <meta property="og:image" content="https://example.com/images/example.jpg" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="A blue notebook beside a laptop showing the example article" />
</head>
<body>...</body>
</html>

og:image is the required image reference for this example. The type, width, height, and alt properties are structured image properties that provide additional information. The protocol recommends specifying og:image:alt when og:image is present. Write alt text that describes what is visible in the image; do not use it as a caption or a keyword list.

JPG versus JPEG for Open Graph

JPG and JPEG refer to the same commonly used image format. The filename extension can be .jpg or .jpeg; the HTTP response should identify the content as image/jpeg. A correct URL and response header matter more than which of those two extensions you choose.

Item	Example	Purpose
Image URL	`https://example.com/share.jpg`	Points crawlers to the representative image
MIME type	`image/jpeg`	Identifies the file format
Width and height	`1200` and `630`	Describe the image’s pixel dimensions
Alt text	A concise visual description	Provides accessible descriptive metadata

What size should an OG image JPG be?

There is no single dimension verified here as a universal rule for every sharing service. Check the requirements of the platform where the URL will be posted. LinkedIn Help lists a minimum of 1200 × 627 pixels; that figure is a LinkedIn requirement, not a general Open Graph requirement. Consult LinkedIn Help for its current guidance.

Keep important visual content away from the edges because different previews can crop the image. Before publishing, verify the actual pixel dimensions of the generated JPEG and confirm that the public URL returns the file itself.

Generating a JPG from a webpage

If your OG image is a designed page, a chart, or a branded composition rendered in HTML and CSS, you can render that page in a browser and save a JPEG. A minimal Playwright example is:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
await page.goto('https://example.com/og-card', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'og-image.jpg', type: 'jpeg', quality: 90 });
await browser.close();

Make the route deterministic: load the same fonts and assets, wait for the content that affects the design, and set the viewport explicitly. If the page contains animations, disable them with CSS or capture after a known state.

Or skip the browser setup

ScreenshotNeo can return a clean screenshot from one GET request. Its API accepts full-page or element capture, custom CSS and JavaScript, viewport and device settings, waits, headers, cookies, blocking rules, resizing, caching, and other options. See the ScreenshotNeo API documentation for the complete parameter list.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/og-card \
  -o og-image.jpg

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/og-card"},
    timeout=90,
)
r.raise_for_status()
open("og-image.jpg", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/og-card' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('og-image.jpg', data));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and each response reports its result through the X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Common errors and fixes

Symptom	Likely cause	Fix
No preview image	The tag is missing, malformed, or outside `<head>`	Check the deployed HTML and use exactly `property="og:image"`.
Old image keeps appearing	The sharing service cached an earlier fetch	Use the platform’s inspection or refresh tool and verify the public URL has changed when necessary.
Image shows as broken	The URL is private, redirects unexpectedly, or returns HTML	Request the image URL without a browser session; confirm a successful response and JPEG content.
Wrong crop	The platform’s preview uses a different aspect ratio	Follow that platform’s documented dimensions and keep key content centered.
Alt text is absent	`og:image:alt` was omitted	Add concise descriptive alt text alongside `og:image`.
Rendered capture is incomplete	Fonts, images, or scripts had not finished loading	Wait for a selector, a delay, or network idle; make assets public and deterministic.
Screenshot API request fails	Invalid key, inaccessible URL, timeout, or bot challenge	Check credentials and URL access, increase the wait appropriately, and inspect `X-Page-Verdict` and `X-Billed`.

Performance, reliability, and cost considerations

Performance: Reuse a stable, pre-rendered OG asset when the design does not change. If you generate images on demand, wait only for the resources that affect the card and cache the resulting file.
Reliability: Host the image at a stable HTTPS URL, return the correct content, and avoid requiring cookies or authentication. Keep the HTML metadata server-rendered so crawlers can read it without executing application JavaScript.
Format validation: Check that the downloaded bytes are actually JPEG data and that the dimensions match the values declared in the metadata.
ScreenshotNeo billing: ScreenshotNeo bills only clean shots. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the verdict and billing result. Its caching TTL is configurable when you use the API.

Checklist before publishing

og:title, og:type, og:url, and og:image are in the public document head.
The image URL is HTTPS and does not require a login.
The server returns a JPEG with the image/jpeg MIME type.
Width and height values match the actual file.
og:image:alt accurately describes the visual.
The dimensions meet the target platform’s documented requirements.
You refreshed the platform’s preview after the final deployment.

FAQ

Is an OG image the same as a favicon?

No. A favicon identifies a site or page in browser chrome. An OG image represents a page when its URL is shared.

Does the file have to end in `.jpg`?

No. .jpeg is also a JPEG extension. The response content type and valid image bytes are what identify the format.

Can I use a screenshot as an OG image?

Yes. A screenshot can be the JPEG referenced by og:image, provided it is publicly reachable and sized for the destination platform.

Where should the metadata be placed?

Place the Open Graph tags in the page’s HTML <head> so crawlers can discover them before rendering the body.