Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Create an image that represents the page, publish it at a stable, publicly reachable URL, and set the page’s og:image property to that full URL. Add the core Open Graph properties—og:title, og:type, og:image, and og:url—in the document head, then check the deployed page and its shared-link preview. A 1200×630-pixel canvas is a useful starting point, not a universal requirement.
What an Open Graph image does
An Open Graph image is the image a page identifies for use when the page is represented as a rich object in a social graph. The Open Graph Protocol defines og:title, og:type, og:image, and og:url as the basic metadata for a page. These are properties placed in the page’s HTML head; the image file alone does not tell a crawler which page or image to associate.
The og:image value is the image’s URL. Use an absolute URL, including the scheme and host, such as https://example.com/images/article-preview.png, rather than a path that only makes sense relative to your site. The server hosting the file must make it reachable to the crawlers that fetch shared pages.
Recommended Free Tools
Think of the work as two connected parts: create and publish the artwork, then make the page metadata point to it. An image can be beautifully composed and still fail to appear if the page points to the wrong path, the metadata is missing from the rendered head, or the image cannot be fetched.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose a practical image size and design
A current practical recommendation is 1200×630 pixels, an aspect ratio of approximately 1.91:1. It is a reasonable canvas for broad compatibility, but the Open Graph Protocol itself does not mandate one universal pixel size. Display rules, crop behavior, and platform requirements can differ, so verify the guidance for the services that matter to your audience.
Design for the actual preview, not just the full-size file. Keep the page’s key subject, logo, and any essential words inside the canvas. Avoid relying on tiny text or details that only make sense when the image is viewed at full size. After export, inspect the image at a reduced preview size and check how it appears on the platforms you care about; a platform may crop or display it differently from your original canvas.
Pick an image that represents the specific page. A branded template with a page title may work well for articles, while a product page may need an image of the product. If the visual changes rarely and only a few pages need custom artwork, prepare files manually. If many routes need an image containing page-specific text or data, generating the artwork from route content can be more maintainable.
Create the artwork: static file or generated image
| Approach | Good fit | Trade-off |
|---|---|---|
| Static image file | A small site or pages whose preview art changes rarely | Simple to create and publish; page-specific images require separate files and updates. |
| Code-generated image | Many routes or content that changes by page | Repeatable and can create route-specific images; requires implementation and maintenance. |
| Visual editor such as Figma | Someone wants to compose or edit artwork visually | Useful for creating the image; metadata still needs to be published with the page. |
Make a static image
Create the composition in an editor, export the image, and upload it to a stable location on your site or another host that permits public access. Figma is one option for uploading and editing images in a design; it is not a protocol requirement. Record the resulting full URL, since that is what you will put in the page head. If you replace the artwork later, keep the URL and file contents in sync, or update the metadata to the new URL.
Generate images for routes with Next.js
Next.js documents both a file convention and programmatic generation. A route segment can contain an opengraph-image file, which causes Next.js to add the relevant metadata. The documented file convention supports JPG, JPEG, PNG, and GIF. For an image that must be assembled from route-specific content, Next.js also documents an opengraph-image route that generates images programmatically. Its guide includes a 1200×630 example; that example is not a universal platform requirement.
Use the static convention when a route’s artwork is already prepared and does not need to vary at request time. Consider a generated route when the image should reflect changing page content or when maintaining separate image files across many routes becomes cumbersome. A generated approach adds code and maintenance, so it is not automatically preferable for a small set of stable pages.
Rank #3
Add Open Graph metadata to the page
Put the metadata in the document head for the page being shared. Replace the example title, URL, description, and image path with values for the real page. The example includes optional structured image details as well as the core properties:
<head>
<meta property="og:title" content="A 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-preview.png" />
<meta property="og:image:alt" content="A concise description of the image contents" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="A short description of the page." />
</head>og:titleidentifies the page title to associate with the shared object.og:typeidentifies its type;websiteis the value used in this general-page example.og:urlgives the page’s canonical URL for the shared object.og:imagepoints to the image file using its full absolute URL.og:descriptionsupplies a useful summary where one is available.
The protocol lists structured properties for an image’s secure URL, MIME type, width, height, and alt text. The snippet shows width and height matching its example canvas. If you provide dimensions, make sure they describe the actual image rather than merely the size you intended to export. The protocol says a page specifying og:image should also specify og:image:alt. Write alt text that describes what the image contains; it should not simply be a promotional caption or a second page title.
Handle multiple candidate images correctly
The protocol permits more than one og:image value. If a page has several candidates, put the preferred image first: when values conflict, the first image tag in document order gets preference. Do not assume every consumer will choose a later image that seems better to you.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Keep structured properties with the image declaration they describe. For example, place that image’s width, height, MIME type, or alt text after its corresponding og:image entry and before the next image declaration. This makes the relationship clear when a page has multiple images with different formats or dimensions. If there is no meaningful reason to offer alternatives, one well-chosen image keeps the metadata straightforward.
Publish, inspect, and verify the preview
- Export and upload the artwork. Confirm the file is at the intended stable location and that its absolute URL is the one you plan to use.
- Update the page head. Add the Open Graph properties to the specific page, not just to an unrelated page or a template that does not render for that route.
- Inspect the deployed HTML. View the rendered page source or inspect its head in a browser. Confirm the expected title, page URL, image URL, and alt text are present, and check that a framework has not emitted conflicting tags ahead of them.
- Check the image URL itself. Open it directly and confirm it resolves to the intended image rather than an error page, a login screen, or a different asset.
- Test a shared-link preview. Use the relevant platform’s preview or debugging facility, where available, and compare the result with the artwork. Check the crop and legibility, not just whether a preview appears.
A preview may not reflect a metadata change immediately: platform crawlers can cache previews. If the page head and image URL are correct but an already-shared link still shows old content, allow for caching before concluding that the deployed metadata is wrong. Cache behavior and preview tools differ by platform, so there is no single refresh procedure that applies everywhere.
Troubleshoot missing or incorrect images
- No image appears: Check that
og:imageexists in the deployed page head and uses an absolute URL. Then open that exact URL to verify the file is reachable. - The wrong image appears: Look for multiple
og:imagetags. The first has preference when values conflict, so reorder the candidates or remove unintended duplicates. - A new image does not appear after an update: Confirm the page now points to the intended URL and that the URL returns the updated file. A platform may be showing a cached preview, so a successful metadata change may not alter an existing preview immediately.
- The preview is cropped or text is hard to read: Rework the image for the preview scale and check the display on the platforms important to your audience. A 1200×630 canvas is a starting point, not a promise that all services use the same crop or rendering.
- The image details do not match the asset: Correct any declared width, height, or MIME type so it describes the actual file. Keep the alt description with the image it describes and write it as a description of the image’s contents.
- Next.js does not emit the expected metadata: Check that the image file or generated route follows the
opengraph-imageconvention for the route segment in question, and inspect the rendered head after deployment rather than assuming the source file alone proves the final output.
Or skip the browser setup
If you need a screenshot of a live page as a visual asset or reference, ScreenshotNeo can return an image with one GET request. A screenshot is not a substitute for designing a branded Open Graph composition when the page needs custom artwork; use it when a faithful page capture suits the purpose. See the ScreenshotNeo website and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp- Cookie banners and consent overlays are accepted or removed before capture, along with supported newsletter popups and chat widgets; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether the request was billed.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Yearly billing gives two months free, and every feature is available on every plan.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
FAQ
Does an Open Graph image have to be 1200×630 pixels?
No. That size is a practical cross-platform starting point, not a universal size specified by the Open Graph Protocol. Check the current guidance for the platforms that matter to your audience.
Can I use Figma to create one?
Yes. Figma can be used to upload and edit images in a design, but any editor that can produce the artwork you need will do; the metadata still has to be published with the page.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
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.
