How to Create Social Media Preview Images from a Webpage

To control the image shown when someone shares a webpage, publish an image at a publicly accessible URL and point the page’s Open Graph og:image metadata to it. Add the other basic Open Graph properties—title, type, and canonical URL—in the page’s HTML <head>. Then check the preview on each platform you care about: metadata is a standard way to describe a page, but it does not guarantee identical rendering everywhere.

How the preview image is connected to a webpage

A social platform generally needs to retrieve two things: the page’s metadata and the image file referenced by og:image. The image URL should be absolute and publicly reachable by the platform’s crawler. A file that loads for you in a logged-in browser may still be inaccessible to a crawler if it is behind authentication or blocked by your server.

Open Graph defines four basic properties: og:title, og:type, og:image, and og:url. The URL in og:url is the canonical page URL; the URL in og:image is the image to use for the share preview. Add a concise og:description and descriptive og:image:alt as well. The protocol’s specification describes these properties and the optional image fields in its Open Graph documentation.

Choose and publish the image

Make an image that represents the specific page being shared. Publish it at a stable URL, then confirm that it can be retrieved without a login, cookie, or special browser session. Use an appropriate image format and avoid unnecessarily large files.

There is no single universal image dimension or file-size limit established by Open Graph. LinkedIn’s documented sharing-module guidance specifies a minimum of 1200 × 627 pixels, recommends a 1.91:1 aspect ratio, and sets a 5 MB maximum. It also says images narrower than 401 pixels appear as thumbnails. These are LinkedIn-specific sharing-module details, not universal requirements or a statement about LinkedIn ads. See LinkedIn’s website-sharing guidance and check the current requirements for each platform you use.

Add Open Graph tags to the page

Place the tags in the document’s <head>. Replace the example title, URLs, and description with values for the page. The example dimensions match the image’s actual dimensions; update them if the asset changes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A Practical Guide to Webpage Previews</title>

  <meta property="og:title" content="A Practical Guide to Webpage Previews">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/webpage-previews">
  <meta property="og:image" content="https://example.com/images/webpage-previews.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:alt" content="A browser page connected to its social sharing preview">
  <meta property="og:description" content="Learn how to add and troubleshoot social sharing images.">

  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <h1>A Practical Guide to Webpage Previews</h1>
</body>
</html>

The Open Graph tags above are the protocol-based metadata. The twitter:card line is an additional platform-specific tag; verify current platform guidance before relying on it. The Open Graph specification also permits og:image:secure_url for a secure image URL. When the image is served over HTTPS, use the HTTPS URL in og:image.

Using multiple candidate images

You can provide more than one og:image value. The Open Graph specification says the first value takes precedence in conflicts, so put the preferred image first. Keep an image’s structured properties, such as width, height, MIME type, and alt text, directly after that image’s root og:image tag. This keeps each set of details associated with its image.

<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="The primary page preview image">

<meta property="og:image" content="https://example.com/images/alternate.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="An alternate illustration for the page">

Publish and verify the preview

1. Upload the image and open its full URL in a private browser window. Confirm it loads without signing in.
2. View the page’s delivered HTML and confirm the Open Graph tags are in the <head>, contain the final absolute URLs, and describe the page and image you intend to share.
3. Check the image URL and the page URL over HTTPS if your site uses HTTPS. Confirm neither request redirects to a login page or an unrelated destination.
4. Use the sharing preview or inspection method provided by each target platform, where available, and compare the result with the tags and image you published.
5. After changing metadata or the image, check the preview again. A platform may still show a previously retrieved version; follow that platform’s current refresh guidance.

The Open Graph protocol defines metadata, not how every platform caches, selects, or displays it. Treat each platform preview as the practical verification step. The sources reviewed here do not establish current cache-reset procedures for Meta, X, or LinkedIn.

Or skip the browser setup

If you need the image asset itself, [ScreenshotNeo](https://screenshotneo.com) can capture a webpage as PNG, JPEG, or WebP. This one-call example saves a screenshot of a page; you can then publish the resulting image at a stable public URL and reference it in og:image. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/webpage-previews -o shot.webp

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

Common problems and fixes

Symptom	Likely cause	What to check
No image appears	The crawler cannot retrieve the image, or the page does not expose a usable og:image.	Open the exact image URL without signing in. Check the delivered page HTML, URL spelling, server access rules, and redirects. LinkedIn specifically warns that protected image locations or blocked retrieval can prevent an otherwise qualifying image from appearing.
The wrong image appears	The page has multiple image values, an old preview is being shown, or the metadata points to another asset.	Put the intended image first, check all og:image tags, and use the platform’s current preview inspection or refresh process.
The title or description is wrong	Open Graph values are missing, stale, or belong to a different page URL.	Check the final HTML for og:title, og:description, and the correct canonical og:url. Recheck the platform preview after publishing changes.
Image is a thumbnail or looks cropped	The asset may not fit the target platform’s display behavior or documented constraints.	Check that platform’s current image guidance. For LinkedIn’s sharing module, the documented recommendation is 1.91:1, with 1200 × 627 pixels as the minimum size.
Image works for a person but not the platform	The file may require authentication, be blocked to crawlers, or be served through a redirect the crawler cannot use.	Test the exact public image URL without a logged-in session and review server access restrictions and redirects. LinkedIn documents crawler retrieval and protected directories as possible causes.
Metadata looks right in source but preview differs	The platform may use cached data or platform-specific selection rules.	Inspect the rendered HTML actually delivered for the shared URL, then check the platform’s current preview tooling and refresh instructions.
Image dimensions or type do not match	Structured metadata was copied from an old asset or attached to the wrong image.	Update width, height, and MIME type to match the image. Keep each image’s structured properties adjacent to its og:image tag.

Performance, reliability, and maintenance

• Keep the image URL stable. Replacing an image at the same URL can leave platform previews showing an older retrieved copy. When you change assets, verify the preview again.
• Serve the image publicly and efficiently. Avoid access controls that prevent social crawlers from fetching it, and avoid redirects to pages that are not the image.
• Generate metadata per page. Reusing one title, canonical URL, or image across unrelated pages can produce previews that describe the wrong content.
• Keep metadata accurate. Dimensions, MIME type, and alternative text should describe the referenced image. Update them whenever the asset changes.
• Budget for platform variation. Open Graph gives platforms metadata to consume; it does not prescribe one universal image size or identical preview behavior. Verify the services that matter to your audience.
• Account for screenshot capture cost separately. If generating preview assets through an API, check that provider’s current pricing and billing rules. ScreenshotNeo’s stated free allowance is 1,000 shots per month without a card; paid plans start at $5 for 3,000.

FAQ

Does adding og:image guarantee the image appears?

No. It identifies the image in page metadata. The platform still needs to retrieve and process the page and image, and each service can have its own requirements and behavior.

Should I use the page URL or the image URL in og:url?

Use the canonical webpage URL in og:url. Put the image file’s URL in og:image.

Do all social platforms use the same image dimensions?

No universal size is specified by Open Graph. Check each platform’s current documentation; the 1200 × 627 minimum and 1.91:1 recommendation cited here are LinkedIn sharing-module guidance.

Can a screenshot become a social preview image?

Yes, if you capture the intended page, publish the resulting image at a publicly retrievable URL, and reference that URL in the page’s og:image metadata.