How to Create a Social Sharing Image for a Website

To create a social sharing image, make an image that represents the page, publish it somewhere the sharing platform can fetch, and identify it in the page’s Open Graph metadata. At minimum, add og:title, og:type, og:image, and og:url inside the page’s <head>. Then check the preview on the platform you care about: valid metadata cannot make a preview appear if the crawler cannot retrieve the image.

What you need to create

A social sharing image is an image a service may show alongside a shared page link. Creating the image file is only half the job: page metadata tells sharing systems which image and page details to use. The Open Graph Protocol describes its purpose this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.”

#	Preview	Product	Price
1		Canva Pro User Guide 2026: A Step-by-Step Manual to Create Stunning Designs, Social Media Graphics,...	$20.99	Buy on Amazon

There are two connected tasks:

1. Prepare and publish an image. Choose a visual that makes sense for the particular page, then place it at an address that the relevant platform can access.
2. Point the page metadata at it. Add Open Graph properties in the HTML head, including the image URL and the URL of the page being shared.

Open Graph provides a metadata baseline; it does not set one universal image size for every platform. Check the current requirements of the service where the page will be shared.

Choose an image that works as a preview

Make the subject recognizable at small sizes

Choose an image that represents the page rather than a generic illustration that could belong to any article. If you include words in the graphic, keep them brief and make sure they remain legible when the image is shown in a small link preview. Put the main subject and any essential text where cropping is less likely to cut them off. These are practical design considerations, not Open Graph or universal platform requirements.

#1 Best Overall

Canva Pro User Guide 2026: A Step-by-Step Manual to Create Stunning Designs, Social Media Graphics, Presentations, Videos, and Brand Content with Ease

$20.99

Buy on Amazon

Start with a landscape layout, then check the platform

A landscape image is a useful starting point for a link preview, but the appropriate dimensions and crop depend on the target service. For LinkedIn’s sharing module, LinkedIn Help specifies a minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio, and sets a 5 MB maximum. LinkedIn says images less than 401 pixels wide display as thumbnails. Treat those figures as LinkedIn-specific guidance, not rules for every social platform.

LinkedIn’s article also lists JPG, PNG, or GIF for single-image ads. That is an ad-specific statement; it should not be taken as confirmation of accepted formats for organic website link previews. The LinkedIn Help article was last updated two years before it was accessed in 2026, so check its current guidance before relying on these specifications for a campaign.

Publish a suitable image file

Export the graphic in an image format supported by your site and hosting setup. Keep the file within the relevant platform’s limit, and use an image URL that can be fetched without a login or other access restriction. The supplied Open Graph guidance lists image MIME type, width, and height as optional structured metadata; it does not establish a universally required file format or dimension.

Add Open Graph metadata to the page

Place the properties in the page’s HTML <head>. Replace the example values with the actual title, page URL, and published image URL for the page. The image address should identify the image itself; the og:url should identify the page being shared.

<head>
  <meta property="og:title" content="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-preview.jpg">
  <meta property="og:image:alt" content="Description of the share preview image">
</head>

This is a starting example of the protocol fields, not a tested implementation. Use content that accurately describes the real page and image. The protocol’s four basic required properties are og:title, og:type, og:image, and og:url. The example uses website as the type; select a value appropriate to your page and implementation.

Add image details when useful

The protocol lists og:image:type, og:image:width, and og:image:height as optional structured properties. They let you provide details about the image, but the protocol does not make them part of the four basic required properties.

Use og:image:alt for a concise description of what the image depicts. The Open Graph guidance says this text should describe the image rather than serve as its caption, and recommends including it when you supply og:image. For example, describe the subject and relevant visual details; do not use the field as a second headline or promotional slogan.

Publish and validate the image URL

After uploading the image and adding metadata, check that the values point to the intended resources. The image must be available to the sharing crawler, not only to a logged-in editor or a visitor whose browser has a private session. LinkedIn specifically notes that a preview image may fail to appear if access is blocked or the image is in a protected directory. A correct tag cannot compensate for an image the platform cannot fetch.

1. Open the page source or inspect its HTML. Confirm that the Open Graph properties are present in the page head and belong to the page you intend to share.
2. Check the values. Make sure og:title describes the page, og:url is the page URL, and og:image points to the intended image rather than to the page itself or an outdated asset.
3. Check image access. Confirm that the image is not behind a login or other restriction that prevents the target service from retrieving it. LinkedIn identifies blocked access and protected directories as possible reasons for a missing image.
4. Check the preview on the target platform. Confirm that the image and page details look right in the service where you plan to share the link. A screenshot of your own page can help you inspect the page’s appearance, but it cannot confirm what a social platform’s crawler has cached or will display.

Preview refresh and debugging procedures vary by service. The guidance available here does not verify current refresh steps for individual platforms, so use the chosen platform’s current official help or debugging tool when you need to refresh a preview.

Common problems and what to check

The preview has no image

• Check that og:image is present and contains the image URL, not the shared page URL.
• Check whether the image can be retrieved without authentication or access to a protected directory. LinkedIn identifies blocked image access as a possible cause.
• Check the target platform’s image limits and guidance. Do not assume that a size acceptable to one service will work everywhere.

The preview shows the wrong image

• Check that you edited the metadata for the exact page URL being shared and that og:image points to the intended current asset.
• Check the preview using the platform’s own tools or current help. A service may need to refresh its stored preview, but refresh procedures are platform-specific.

The image is cropped or too small

• Check the image’s actual dimensions and how the target service displays it. For LinkedIn’s sharing module, the stated minimum is 1200 × 627 pixels and the recommended ratio is 1.91:1; images below 401 pixels wide display as thumbnails.
• Keep essential content away from the edges and inspect the result at preview size. Platform-specific display behavior is not a guarantee that every image will be shown uncropped.

The metadata is present in your template but missing on the shared page

Inspect the HTML for the actual page URL you are sharing rather than relying only on the template or editor settings. Verify that the properties occur in the page head and that their values correspond to that page. If the platform still shows an unexpected result, use its current preview debugging or refresh process.

Use a screenshot to check the page’s presentation

A screenshot is useful for checking what a visitor sees on your page, such as whether a page title, hero image, or layout looks as intended. It is a separate check from validating Open Graph tags or a platform-generated link preview: a browser screenshot does not establish which metadata a crawler retrieved.

For a manual check, open the published page in a browser, confirm the relevant content visually, and inspect its page source or HTML separately for the Open Graph properties. If you want a capture without setting up a browser, ScreenshotNeo is a website screenshot API and MCP server for developers. The API can return a screenshot or PDF from a URL; use it to inspect page appearance, not as a substitute for checking the page metadata or target platform preview.

Or skip the browser setup

Make a one-call capture of your published page with ScreenshotNeo. Replace the example URL with the page you want to inspect and use your API key:

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

See the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free to get 1,000 screenshots a month with no card.

Frequently Asked Questions

Does adding Open Graph metadata guarantee that every service will show the same preview?

No. Open Graph supplies metadata, but platforms have their own retrieval and display behavior. The image also has to be accessible to the platform.

Are LinkedIn’s image dimensions universal social-sharing requirements?

No. The 1200 × 627 minimum and recommended 1.91:1 ratio cited here are for LinkedIn’s sharing module, not a universal standard.

Quick Recap

Bestseller No. 1

Canva Pro User Guide 2026: A Step-by-Step Manual to Create Stunning Designs, Social Media Graphics, Presentations, Videos, and Brand Content with Ease

$20.99

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.