How to use SVG for an Open Graph image without breaking previews

Short answer: keep your SVG as the editable source, export a PNG or JPG for og:image, and put the Open Graph metadata in the page’s HTML <head>. The Open Graph Protocol defines og:image as an image URL but does not guarantee that every preview crawler accepts SVG. LinkedIn’s published guidance lists JPG, PNG, or GIF and requires at least 1200 × 627 pixels.

This approach keeps the benefits of vector artwork in your design workflow while giving preview consumers a raster image format that LinkedIn explicitly supports. Platform requirements differ, so check the current requirements of each destination where the link will be shared.

Use the SVG as the editable master. Export the finished social image as a raster file and host it at a stable, publicly fetchable URL. PNG is a practical option for artwork with transparency or crisp graphic edges; JPG is often suitable for photographic artwork. Those are workflow suggestions, not a universal platform format ranking.

For LinkedIn, the documented minimum is 1200 × 627 pixels, and its guidance names JPG, PNG, or GIF. Treat that as LinkedIn-specific guidance, not a rule for every social platform.

Finish and retain the source SVG in your design or asset workflow.
Export a raster image sized for the preview platforms you target. For LinkedIn, meet its 1200 × 627 minimum.
Upload the export to a public URL that the platform’s preview crawler can fetch.
Reference that raster URL in og:image.
Publish, then inspect the preview on the destination platform.

2. Add Open Graph metadata to the document head

The protocol lists og:title, og:type, og:image, and og:url as its four basic properties. Add the image MIME type, dimensions, and descriptive alt text when you know them. The example dimensions below match LinkedIn’s minimum, but they are not a universal Open Graph requirement.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example page title</title>
  <meta property="og:title" content="Example page title">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:image" content="https://example.com/images/share.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="627">
  <meta property="og:image:alt" content="A concise description of the share image">
</head>
<body>
  <h1>Example page</h1>
</body>
</html>

og:image:alt describes the image; it is not a caption. The Open Graph Protocol says to specify it when an og:image is present. Use an accurate, concise description rather than repeating the page title.

3. If you provide more than one image

You can declare multiple og:image values. When values conflict, the protocol says the first image has preference. Put each image’s structured properties immediately after its root og:image tag and before the next root image tag, so the properties stay associated with the intended image.

<meta property="og:image" content="https://example.com/images/share.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="A blue illustration of the product">

<meta property="og:image" content="https://example.com/images/share.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="A photographic view of the product">

If a destination selects only one image, ordering matters: put the image you want preferred first.

4. Check the result on each destination

After publishing, check the preview on the actual platform where people will share the link. If it is missing or stale, inspect the HTML returned for the page and verify that the metadata points to the intended image URL. Confirm that the URL is public and that the exported file exists. Then use the destination platform’s current preview debugging or refresh tools if available.

The Open Graph Protocol defines the metadata fields, but it does not guarantee universal SVG support or prescribe hosting and access-control practices. LinkedIn’s published page-preview guidance says to follow Open Graph and lists JPG, PNG, or GIF with a minimum size of 1200 × 627 pixels. Other destinations may have different requirements; consult their current documentation.

5. Troubleshoot missing or incorrect previews

Symptom	Likely cause	What to check
No image appears	The page has no usable `og:image`, or the image URL is unavailable to the crawler.	Inspect the returned HTML for the exact tag and open the image URL without a login. Confirm the exported file exists at that address.
The old image still appears	The platform may be showing a previously fetched preview.	Verify the current page metadata and image URL, then use the destination’s current refresh or debugging tool if it offers one.
A vector preview works in one place but not another	Preview consumers can have different image-format support; the protocol does not promise universal SVG acceptance.	Use a PNG or JPG export for the share metadata and check each target platform’s requirements.
The image is rejected or cropped unexpectedly	The dimensions or format may not meet that platform’s requirements, or the artwork may not fit its preview crop.	Check the destination’s current specifications. For LinkedIn, its guidance lists JPG, PNG, or GIF and a 1200 × 627 pixel minimum.
The wrong image wins when several are declared	Multiple `og:image` tags are present; the first has preference in protocol conflicts.	Reorder the tags and place each image’s structured properties directly after its root image tag.
The description is misleading or absent	`og:image:alt` is missing or describes the page instead of the image.	Add concise, accurate image-specific alt text.

6. Inspect a page’s metadata and capture its preview

If you need to inspect what a page looks like after it renders, ScreenshotNeo provides a website screenshot API and MCP server for developers. Its get_page_info tool can retrieve page information, and its screenshot API can capture the rendered page. A browser screenshot can help you inspect the page itself, but it does not prove that a social platform accepts a particular image format or has refreshed its preview.

For manual checks, inspect the HTML response and the image URL first. Then use the destination’s own current preview tooling to check how it reads the metadata.

7. Or skip the browser setup

To capture a page screenshot with ScreenshotNeo, make one GET request. See the ScreenshotNeo API documentation for request options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.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("shot.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 request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools including take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 shots.

Performance, reliability, and cost notes

Keep the share asset stable: use a durable public image URL and verify it after deployment. The Open Graph Protocol specifies the metadata URL, not hosting or cache behavior.
Choose export dimensions for the destination: LinkedIn’s stated minimum is 1200 × 627 pixels. Do not assume that one size or format is right for every platform.
Keep vector and raster roles clear: preserve the SVG for edits and export a raster copy for the preview. This avoids relying on the receiving crawler and renderer to handle SVG.
Keep metadata consistent: title, canonical page URL, image URL, dimensions, MIME type, and alt description should describe the same page and image.
Screenshot costs: Open Graph metadata and image export do not require a screenshot API. If using ScreenshotNeo to inspect rendered pages, its stated free allowance is 1,000 shots per month without a card; paid plans begin at $5 for 3,000. Yearly billing gives two months free, and every feature is on every plan.

FAQ

Does the Open Graph Protocol explicitly ban SVG?

The reviewed protocol defines og:image as an image URL and provides an optional MIME-type field, but it does not give a universal format allowlist. That is not a promise that every preview consumer accepts SVG.

Do I need to delete the original SVG?

No. Keep it as the editable source and publish a raster export for the share metadata.

Is 1200 × 627 required everywhere?

No. That is LinkedIn’s published minimum in the guidance referenced here. Check the current requirements for each destination.

No. A screenshot shows a rendered webpage. The destination platform’s preview tooling is the appropriate place to check how it reads the page metadata.

Sources

The Open Graph protocol — basic metadata, image properties, alt text, and multiple-image ordering.
LinkedIn Help: Make your website shareable on LinkedIn — LinkedIn-specific preview image formats and dimensions.