How to Create Open Graph Images for Social Sharing

Direct answer: Create a landscape image around 1200 × 630 pixels (about 1.91:1), publish it at a public URL that social crawlers can fetch, and add Open Graph metadata for the page in its <head>. Then inspect the published URL in the preview tools for the platforms you use. This size is a practical starting point, not a universal platform guarantee.

1. Choose an image size and design for previews

A 1200 × 630 pixel canvas is a useful broad starting point. LinkedIn specifies a minimum of 1200 × 627 pixels and recommends a 1.91:1 ratio; its help page also lists a 5 MB maximum and JPG, PNG, or GIF formats. Recheck LinkedIn’s current requirements before publication because the cited page was marked as updated two years before the October 2026 research date. [LinkedIn Help: Sharing Module] A specialist guide also recommends 1200 × 630 pixels, but this is guidance rather than a rule issued by every platform. [OG Image Design]

• Use a landscape composition and make the subject or page title readable when the image is shown as a small card.
• Keep essential content away from the edges. Platform layouts and crops can vary; there is no single safe margin established for every platform.
• Use a crisp source image and export an appropriate web format. Check the destination platform’s current supported formats and file-size limits if compliance is important.
• Use one shared image when it works across your channels. Make separate variants only when a platform’s requirements or crop makes the shared design unsuitable.

The Open Graph protocol defines metadata that lets a web page be represented as a rich object, including its title, type, image, and URL. [Open Graph protocol]

2. Publish the image where crawlers can fetch it

Upload the image to a stable, publicly reachable URL. Avoid a URL that requires a login, a cookie, or access to a protected directory. The crawler that builds the social preview must be able to retrieve both the page and the image. LinkedIn identifies blocked crawler access and protected image locations as possible reasons an image does not display. [LinkedIn Help]

Use the full image URL in metadata and the canonical public URL for the page. For example, if the page is https://example.com/articles/launch and its image is https://example.com/images/launch-share.jpg, use those complete URLs rather than relative paths.

3. Add Open Graph metadata to the page

Put the tags in the page’s document head. Replace the example values with the page’s actual title, description, canonical URL, and image URL:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Product launch guide | Example</title>
  <link rel="canonical" href="https://example.com/articles/launch">

  <meta property="og:title" content="Product launch guide">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/launch-share.jpg">
  <meta property="og:url" content="https://example.com/articles/launch">
  <meta property="og:description" content="A practical guide to planning a product launch.">
</head>
<body>
  <h1>Product launch guide</h1>
</body>
</html>

The protocol’s basic properties are og:title, og:type, og:image, and og:url. The example also includes og:description, which LinkedIn’s sharing guidance lists among its page metadata fields. [Open Graph protocol] [LinkedIn Help]

Framework and CMS notes

• Static HTML: Render the tags directly in the page head as shown above.
• Server-rendered app: Set the metadata per route so each shareable page outputs its own title, image, and canonical URL.
• Client-rendered app: Verify what the crawler receives from the published URL. If the tags are added only after browser-side JavaScript runs, the preview crawler may not see them. Prefer server-rendered or prerendered metadata when crawler behavior is uncertain.
• CMS: Enter the share image and page-specific title and description in the CMS fields, then inspect the generated HTML source to confirm the tags and absolute image URL are present.

4. Verify the actual published preview

1. Open the published page and inspect its HTML head. Confirm the intended og:image, og:title, og:url, and description are present.
2. Open the image URL directly in a private browser window. Confirm it loads without signing in or relying on a prior session.
3. Check the page in each platform’s current preview/debugging facility, where available. A browser view alone does not prove a platform crawler can fetch the image.
4. If you changed the image but see the old preview, verify the URL and metadata first, then account for platform caching. Use the platform’s current refresh facility when available.

There is no current official X image limit established by this research. Check X’s current developer documentation before relying on a specific dimension, file limit, or card behavior.

5. Troubleshoot missing or incorrect images

Symptom	Likely cause	What to check or fix
No image appears	The crawler cannot fetch the image, the URL is protected, or the metadata points to a different path.	Open the full image URL without authentication; check server access rules and confirm the published page has the intended absolute og:image URL.
The old image still appears	The platform is showing a cached preview.	Confirm the HTML and image URL are updated, then use the platform’s current refresh or debugging facility if available.
The wrong page’s image appears	Page metadata is shared across routes, or og:url and the canonical URL do not identify the intended page.	Render page-specific tags and compare the canonical URL, og:url, and requested page URL.
The image is cropped badly	The composition relies on edge content or the platform applies a different crop.	Keep essential details away from edges, test the actual platform card, and consider a platform-specific variant where necessary.
The preview has no title or description	The relevant tags are missing, malformed, or not in the HTML the crawler receives.	Inspect the published document head and verify the correct route returns the expected metadata.
The image works in your browser but not in a platform preview	Your session can access a protected resource that the crawler cannot.	Test the page and image without login state; remove access restrictions that prevent the intended crawler from fetching them.

6. Performance, reliability, and maintenance

• Keep the asset efficient: Large files take longer to retrieve and may exceed a platform’s limit. For LinkedIn, the cited help page lists 5 MB as the maximum; verify current limits for other destinations.
• Use stable URLs: A durable image URL reduces broken previews. If you replace the file at the same URL, a platform may continue to show a cached version for some time.
• Check every important route: A correct homepage tag does not ensure article pages have their own metadata. Validate templates and representative published URLs.
• Budget for variants: One shared asset is simpler to maintain. Variants add design and publishing work, so use them when crop or platform requirements justify it.
• Do not assume one platform’s limits apply everywhere: Platform specifications and cache behavior can change. Confirm current primary documentation for the channels that matter.

Or skip the browser setup

You can inspect the published page with ScreenshotNeo, a website screenshot API and MCP server. One GET request returns a screenshot or PDF; see the ScreenshotNeo API documentation for options.

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

import requests

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

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/articles/launch'
});
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('page.webp', Buffer.from(await res.arrayBuffer())));

• Cookie banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, and failed loads are never billed. Responses identify the page verdict and billing status in headers.
• An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
• 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Every feature is on every plan.

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

Frequently asked questions

Does an Open Graph image have to be unique for every page?

No. A shared default can work, but page-specific images can make individual links clearer. Ensure each page’s metadata points to the intended asset.

Can I use a relative path for og:image?

Use a full absolute URL. It gives a crawler the complete address to retrieve.

Is 1200 × 630 guaranteed to display correctly everywhere?

No. It is a practical landscape starting point. Check the current specifications and preview behavior of each destination platform.

Why does the image show in a browser but not in a social preview?

The browser may have access through a session or other state that the crawler does not. Check that the image and page are publicly retrievable and that the crawler is not blocked.