How to Create Effective Open Graph Images for Your Website

Use a 1200 × 630 pixel raster image, place the important subject and text in a central safe area, publish Open Graph tags in the page’s initial HTML, and validate the live URL in each target platform’s preview tool. This 1.91:1 canvas is a practical cross-platform starting point. It is not a universal guarantee: platforms can crop, resize, cache, or impose their own limits.

Start with a 1200 × 630 pixel image. LinkedIn’s help page specifies at least 1200 × 627 pixels, recommends a 1.91:1 ratio, and lists a 5 MB maximum. Treat those as LinkedIn requirements rather than rules for every network. Check the current documentation for the platforms that matter to your audience.

Keep a safe area: put the title, logo, and main subject toward the center. Preview cards can crop the edges differently.
Use brief, readable text: a short headline survives small card sizes better than a paragraph.
Make the subject obvious: the image should communicate what the shared page is about without requiring the viewer to open it.
Choose a raster format: PNG is practical for flat graphics and text; JPEG is practical for photographs. Format support varies across crawlers, so do not assume SVG or WebP works everywhere.
Keep the file within destination limits: LinkedIn lists a 5 MB maximum. Other platforms may differ.

Decision	Practical default	Why it matters
Canvas	1200 × 630 px	Approximately 1.91:1 and broadly compatible as a starting point.
Format	PNG for graphics, JPEG for photos	Balances text sharpness, file size, and crawler compatibility.
Layout	Centered safe area	Reduces damage from platform-specific cropping.
Text	One short headline	Remains legible in small previews.

2. Add the required Open Graph metadata

The Open Graph protocol defines four basic properties: og:title, og:type, og:image, and og:url. Use a fully qualified HTTPS image URL. Add a concise og:description and descriptive og:image:alt when they improve the preview and accessibility.

<head>
  <meta property="og:title" content="A clear 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/page-share.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Short description of the image">
  <meta property="og:description" content="A concise description of this page.">
</head>

The image width, height, MIME type, secure URL, and alternative text are optional structured properties supported by the specification. Keep each image’s structured properties directly after its og:image root tag. If you declare multiple og:image values, the first one is preferred when there is a conflict. See the Open Graph protocol specification for the property definitions.

3. Generate an image that matches the page

Design the image around the page users will reach after clicking. A tutorial might show the finished result; a product page might show the product in use; a report might show its central chart or subject. Keep the visual hierarchy simple:

Write the page’s promise in one short phrase.
Choose one dominant subject or visual metaphor.
Place the headline and logo inside the center safe area.
Check contrast at thumbnail size.
Export a raster image and confirm its pixel dimensions and file size.

Do not repeat the caption in og:image:alt. The alt text should describe what the image depicts, while the caption or description explains the page.

4. Implement tags in server-rendered HTML

Social crawlers commonly inspect the response HTML. Put the tags in the initial <head> returned by your server or static build. If your framework only inserts them after client-side JavaScript runs, some crawlers may not see them.

Static HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta property="og:title" content="How to Create Effective Open Graph Images">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-images">
  <meta property="og:image" content="https://example.com/images/open-graph-images.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A website page represented as a social preview card">
  <meta property="og:description" content="A practical guide to designing and validating Open Graph images.">
</head>
<body>...</body>
</html>

Dynamic pages

Generate one metadata set per canonical URL. Escape attribute values, emit absolute URLs, and ensure the image URL is publicly fetchable without a login, cookie, or browser-only JavaScript. Set og:type to the type that best describes the page; use article for an article and website for a general page.

5. Validate the published preview

Publish the page and image at their final HTTPS URLs.
Inspect the response source, not only the browser’s post-JavaScript DOM, and confirm the tags are in the initial HTML.
Open the target platform’s official preview or sharing tool and enter the live page URL.
Check title, description, image crop, dimensions, and loading behavior.
If you changed the image, use the platform’s re-scrape or refresh workflow when available. Platforms can cache metadata and images.

LinkedIn documents its own sharing requirements in Make your website shareable on LinkedIn. Use destination-specific tools for other networks. A third-party preview service reports that stale previews and JavaScript-only tags are common practical problems; treat that as platform behavior, not a guarantee of the protocol.

6. Troubleshooting checklist

Symptom	Likely cause	Fix
No image appears	`og:image` is missing, relative, blocked, or malformed.	Use one absolute HTTPS URL, return the image publicly, and inspect the initial HTML.
Old image still appears	The platform cached the previous metadata or asset.	Confirm the origin is updated, then run the platform’s re-scrape or preview refresh.
Wrong image is selected	Multiple `og:image` tags or conflicting structured properties.	Put the preferred image first and keep its width, height, type, and alt properties together.
Title or description is blank	Tags are injected only after JavaScript, or attributes contain invalid escaping.	Render metadata in server or build output and escape attribute values.
Preview is cropped badly	Important content is close to an edge or the platform uses a different crop.	Move essential content inward and test the actual card at thumbnail size.
Image rejected or downgraded	File exceeds a platform limit or uses an unsupported format.	Export a smaller PNG or JPEG and check the destination’s current limits.
Image request fails	Hotlink protection, authentication, robots rules, or a transient server error.	Allow public GET access, return the correct MIME type, and verify the URL from an external network.

7. Performance, reliability, and cost

Keep files small enough to fetch quickly: compress without making text fuzzy. A large image delays crawler retrieval and may exceed a platform limit.
Use stable URLs: version the filename when replacing an image so caches can distinguish the new asset.
Serve the correct headers: return a successful status and an image MIME type such as image/png or image/jpeg.
Test failure paths: verify that a missing image, redirect, authentication requirement, or timeout does not leave a page with misleading metadata.
Do not infer universal behavior: each crawler can apply different limits, crop rules, cache duration, and format support.

Creating the file has no protocol charge. Any costs come from the design, storage, image transformation, or screenshot service you choose. Keep the source artwork so you can export platform-specific variants if a destination requires a different ratio.

8. Or skip the browser setup with ScreenshotNeo

If you need a rendered reference image of the published page while checking your Open Graph implementation, ScreenshotNeo provides a website screenshot API. It accepts one GET request and returns PNG, JPEG, WebP, or PDF. Cookie and consent banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off.

See the ScreenshotNeo API documentation for all options. This is a runnable one-call capture of the page in this guide:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/open-graph-images -o shot.webp

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/open-graph-images' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. The service also offers an MCP server with 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.

9. Frequently asked questions

What is the recommended Open Graph image size?

Use 1200 × 630 pixels as a practical starting point at approximately 1.91:1. Check the destination’s current requirements; LinkedIn specifies at least 1200 × 627 pixels and a 5 MB maximum.

Do Open Graph images need to be PNG?

No. PNG is practical for flat graphics and text, while JPEG is practical for photographs. Support varies, so use a broadly compatible raster format.

Why does a changed image still show the old preview?

Preview platforms cache metadata and images. Confirm the live response, then use the destination’s re-scrape or refresh tool.

Can I put the tags in JavaScript?

Do not rely on client-side insertion. Emit the tags in the initial HTML so crawlers that do not execute JavaScript can read them.

Should every page use the same image?

No. Create an image that matches each page’s subject, title, and canonical URL. Reuse a template, but vary the content that helps people recognize the shared page.

What should `og:image:alt` say?

Describe what is depicted in the image. It should complement, rather than duplicate, the page title or caption.