How to Use JPG Images for Open Graph Tags

Yes, a JPG works as an Open Graph image. Put the publicly reachable JPG URL in an og:image tag inside your page’s <head>. A complete implementation also includes og:title, og:type, and og:url. The Open Graph Protocol uses a JPG URL in its own example.

1. Add a JPG to your Open Graph metadata

Use the URL of the actual image file, not the page that displays it. Include the core properties and useful image metadata:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Use JPG Images for Open Graph Tags</title>

  <meta property="og:title" content="How to Use JPG Images for Open Graph Tags">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/jpg-open-graph">
  <meta property="og:image" content="https://example.com/images/share-card.jpg">

  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="627">
  <meta property="og:image:alt" content="A developer adding a JPG Open Graph image to a web page">
</head>
<body>
  <h1>How to Use JPG Images for Open Graph Tags</h1>
</body>
</html>

The protocol defines og:title, og:type, og:image, and og:url as the required properties. The type, width, height, and alt fields are structured properties for the image. Alt text should describe the image; it is not a caption.

2. Prepare the JPG file and URL

1. Export the intended share image as a real JPEG file.
2. Upload it to a stable HTTPS URL, such as https://example.com/images/share-card.jpg.
3. Make that URL fetchable without a login, cookie, signed-session requirement, or IP allowlist.
4. Reference the exact file URL in og:image.

A .jpg extension alone does not prove the encoded format. The og:image:type value communicates the MIME type as image/jpeg; your server should also return the correct content type when the file is requested.

3. Choose dimensions that survive sharing previews

Open Graph itself does not impose one universal pixel size. Platform requirements differ, so check the documentation for each destination. LinkedIn’s published sharing guidance specifies a minimum of 1200 × 627 pixels, a recommended 1.91:1 ratio, and a 5 MB maximum for its sharing module. Images narrower than 401 pixels display as thumbnails. These figures are LinkedIn-specific and should not be treated as a rule for every network.

Decision	Practical guidance
Pixel dimensions	Use dimensions that meet the destination’s current requirements; 1200 × 627 is LinkedIn’s published minimum.
Aspect ratio	Keep important text and subjects away from edges so a platform crop remains usable. LinkedIn recommends 1.91:1.
File size	Stay under the destination’s limit; LinkedIn publishes 5 MB for its sharing module.
Format	Use JPEG for a photographic or gradient-heavy card. Confirm the response is actually JPEG.

4. Add optional page and image metadata

These fields make the page description more complete:

<meta property="og:description" content="A practical guide to JPG Open Graph images.">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">

Keep image structured properties directly after the og:image root they describe. This matters when a page has more than one image.

5. Use multiple JPG images correctly

You can publish multiple og:image values. The Open Graph Protocol says the first value in document order is preferred when there is a conflict. Put each image’s structured properties after its root tag, then begin the next image group with another og:image:

<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Primary share card">

<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Alternate share card">

If you want one image to win consistently, place it first and remove obsolete image tags.

6. Verify the HTML and the image response

1. View the server-rendered page source, not only the DOM after JavaScript runs.
2. Confirm there is one intended first og:image.
3. Request the JPG directly and check that it returns success, is not redirected to a login page, and sends an image content type.
4. Check that robots, firewall, hotlink protection, or authentication rules do not block social crawlers.
5. After changing an image, account for the platform’s cached preview and use that platform’s supported refresh or inspection workflow.

curl -I https://example.com/images/share-card.jpg
curl -L https://example.com/page | grep -i 'og:image'

The first command lets you inspect the asset response. The second checks the HTML delivered to a crawler. Do not rely on a browser extension that sees metadata injected only after page load.

7. Troubleshoot “og:image not loading”

Symptom	Likely cause	Fix
No image preview	The tag is missing, malformed, or outside <head>.	Emit a complete tag in the server response and validate the URL.
Wrong image appears	Another og:image occurs first, or a cached preview is being shown.	Put the desired image first, remove stale tags, then refresh the platform preview.
Image URL opens in your browser but not for a crawler	Authentication, a protected directory, firewall rule, robots policy, or hotlink protection blocks fetching.	Allow unauthenticated HTTPS retrieval of the asset and review access logs.
Preview shows a tiny thumbnail	The image is below the destination’s size threshold.	For LinkedIn, use at least 1200 × 627 pixels; its guidance says images narrower than 401 pixels display as thumbnails.
Image is cropped unexpectedly	The destination applies its own aspect-ratio crop.	Use the destination’s recommended ratio and keep key content centered.
Metadata looks correct but the image is rejected	The response is not a valid JPEG, is too large, or returns the wrong content type.	Inspect the downloaded bytes and response headers, then re-export and serve a valid JPEG.
Old image persists after deployment	A social crawler has cached the previous result.	Use the destination’s official URL inspection or cache-refresh process; changing the filename can help only when the platform permits a new fetch.

8. Generate a JPG share image from a page

If the image is derived from a live page, you can capture the page yourself with a headless browser, then store the resulting JPG at a public URL.

Playwright example (Node.js)

import { chromium } from 'playwright';

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

For a reliable production pipeline, wait for the specific content you need, set a bounded timeout, and make sure the resulting file is uploaded to a URL that crawlers can fetch. Full-page captures can be much taller than a social card; use a fixed viewport or capture a specific element when the design requires a fixed card.

9. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can return a PNG, JPEG, WebP, or PDF from one GET request, with options for full-page or element capture, viewport and device settings, retina scale, custom CSS and JavaScript, waits, blocked resources, cookies, headers, caching, and signed links. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.

Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo documentation for all options. The following calls use the supplied API format:

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await Bun.write('share-card.webp', bytes);

ScreenshotNeo includes a free plan with 1,000 shots per month and no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.

10. Performance, reliability, and cost considerations

• Keep the asset small enough for the destination. LinkedIn publishes a 5 MB limit for its sharing module; compression reduces transfer time while preserving the dimensions you need.
• Serve from a stable origin. Avoid expiring URLs and authentication challenges for a metadata asset that must be fetched later.
• Use deterministic output. A fixed viewport, explicit wait condition, and pinned page content reduce visual changes between captures.
• Cache deliberately. Cache the generated JPG at a stable URL, but change the URL when you intentionally need a new social preview and the platform still serves an old cached result.
• Control screenshot spend. With ScreenshotNeo, cache hits and failed or unusable captures are not billed; use a TTL you choose when the page does not change frequently.

11. Checklist before publishing

• og:title, og:type, og:url, and og:image are in the server-rendered <head>.
• The first og:image is the intended primary image.
• The JPG URL is absolute, HTTPS, public, and stable.
• The response is a valid JPEG with an image content type.
• Width, height, and descriptive alt metadata match the file.
• The image meets each destination’s current size and file limits.
• Crawler access is not blocked by authentication, firewall, or hotlink rules.
• You have checked the destination’s preview or inspection tool after publishing.

FAQ

Can I use a JPG instead of PNG for og:image?

Yes. The Open Graph Protocol’s example uses a JPG image URL. Set og:image:type to image/jpeg when you provide that structured property.

Does the image filename need to end in .jpg?

No requirement in the protocol says the filename extension determines validity. Serve the actual JPEG bytes with the correct response type and point og:image at that file.

Should I include more than one og:image?

Only when you have a deliberate fallback or alternate. The first image is preferred, and each image’s structured fields must follow its own root tag.

Why does my browser show the image while a social preview does not?

Your browser may have credentials or a cached response that a crawler lacks. Test the direct URL without authentication and review access controls and server logs.

Are LinkedIn’s dimensions required everywhere?

No. The 1200 × 627 minimum, 1.91:1 recommendation, 5 MB limit, and 401-pixel thumbnail threshold are LinkedIn guidance. Other destinations can publish different rules.