To set the image shown when a page link is shared, add an Open Graph og:image meta tag inside the document’s <head>. Include the page’s og:title, og:type, and og:url as well, then point og:image at a representative image URL. Optional tags can provide alternative text, dimensions, MIME type, and an HTTPS URL.
These tags express your preferred image; they do not force every search engine or social platform to use it. Google says its image selection is automated and can draw from several sources.
What a website preview image is
The image that appears beside a shared link is usually controlled by metadata rather than by an image placed in the visible page body. The Open Graph protocol lets a web page describe itself as a rich object. Its four basic properties are og:title, og:type, og:image, and og:url.
For this purpose, og:image is the important property: its value is the URL of the image a consuming service should consider for the preview. Put the tags in the HTML document’s <head>, not inside <body>.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Basic HTML implementation
Add this block to the page template and replace every example value with data for the specific page:
<head prefix='og: https://ogp.me/ns#'>
<title>Page title</title>
<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/page-preview.jpg'>
<meta property='og:image:alt' content='A concise description of the preview image'>
<meta property='og:image:type' content='image/jpeg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>
</head>The 1200 by 630 values above are illustrative example values, not a universal platform requirement. Check the current specification or sharing guidance for the destination you care about before standardizing dimensions.
Core properties
| Property | Purpose | What to enter |
|---|---|---|
og:title |
Title associated with the shared object | The page’s concise title |
og:type |
Object type | website is appropriate for an ordinary site page |
og:url |
Canonical page URL for the object | The URL you want associated with the preview |
og:image |
Preferred preview image | An image URL the consuming service can fetch |
Optional image properties
og:image:altdescribes what is visible in the image. It is an image description, not a caption; web.dev’s metadata guidance documents its use for social cards.og:image:typeidentifies the MIME type, such asimage/jpeg.og:image:widthandog:image:heightstate the image dimensions.og:image:secure_urlcan provide an HTTPS version when that is useful to the consumer.
The Open Graph specification lists these as structured image properties. When you provide og:image, include og:image:alt whenever you can so the image has a meaningful textual description.
How to choose the image
Use an image that represents the page, not a generic site logo or a graphic made mostly of text. Google recommends a relevant, representative, high-resolution image and warns against extreme aspect ratios. Its Image SEO Best Practices page lists og:image as one way to indicate a preferred image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Match the subject to the page. A product page should show that product; an article should show the article’s subject.
- Keep important content away from edges where a platform might crop it.
- Use an image large enough for the destination’s display, while checking that the file is practical to download.
- Write alt text that identifies the visual content in a short phrase. Do not repeat the page title as a substitute for describing the image.
No single pixel size or aspect ratio is established as a requirement for every service. If several destinations matter, consult each one’s current documentation.
Using more than one preview image
The protocol permits multiple og:image elements. The first image listed has preference when values conflict. Keep each image’s structured properties immediately after its root image tag and before the next root tag, so consumers can associate width, height, type, and alt text with the intended image.
<meta property='og:image' content='https://example.com/images/primary.jpg'>
<meta property='og:image:alt' content='A laptop displaying the example dashboard'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>
<meta property='og:image' content='https://example.com/images/alternate.jpg'>
<meta property='og:image:alt' content='A close-up of the dashboard chart'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>Place the image you most want selected first. Do not put the structured tags for one image after the next image’s root tag.
Adding the tags in a real site
Static HTML
Edit the page or shared layout file that emits the document head. Give each page its own title, URL, image URL, and alt text. After deployment, inspect the returned HTML source to confirm the values are present in the head.
Server-rendered templates
Put the properties in the server-side layout or head partial and populate them from the current page’s metadata. The important result is that the HTML response contains the tags; do not assume a consumer will execute client-side JavaScript to create them later.
Client-rendered applications
Check the HTML response and the rendered document separately. If the initial response lacks the Open Graph tags, a crawler or sharing service may not see values that are inserted only after JavaScript runs. Use the framework’s server-rendering or static-generation head mechanism when available, then verify the deployed response.
Verify what a consumer can see
- Open the deployed page and choose “View source” (not only the live DOM inspector).
- Search for
og:title,og:type,og:url, andog:imageinside<head>. - Copy the image URL and request it directly. Confirm it returns the intended image rather than an error, login page, or HTML document.
- Check that the page URL and image URL are the values for this page, not placeholders from a site-wide template.
- Use the target platform’s current preview or sharing debugger when one is available, because each service can apply its own selection and caching behavior.
Why a platform may show a different image
A meta tag is an instruction for consumers, not a guarantee. Google explicitly states: “Google’s selection of an image preview is completely automated and takes into account a number of different sources to select which image on a given page is shown on Google (for example, a text result image or the preview image in Discover).” Therefore, og:image can express your preference while Google may still choose another image for a particular search or discovery surface.
Other services may also cache a previously fetched preview or apply destination-specific rules. There is no single cache-expiration or refresh procedure that applies to every platform. For a particular service, follow its current official sharing documentation and inspect the HTML and image URL it received.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallRank #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
Troubleshooting checklist
No preview image appears
- Confirm the
og:imageelement is in the response’s<head>, with the property name spelled exactly. - Make sure the image URL is usable by the consuming service and returns the image file when requested directly.
- Check for a template bug that emits an empty value, a local development URL, or the wrong page’s image.
- Test through the destination’s current debugger or preview tool rather than relying only on your browser.
The wrong image is selected
- If several
og:imagetags exist, move the preferred one to the top; the protocol gives the first value precedence. - Remove stale or generic image tags from a shared layout.
- For Google surfaces, remember that selection is automated and may use sources other than the Open Graph image.
The image is cropped badly
- Replace an extreme-aspect-ratio image with a composition that keeps its subject clear when cropped.
- Keep essential text and faces away from the edges.
- Check the destination’s own current image guidance; the example dimensions in this article are not universal rules.
Alt text is missing or unhelpful
Add og:image:alt immediately after each corresponding og:image. Describe the visible subject and purpose in a concise phrase rather than repeating a marketing caption.
Or skip the browser setup
If you need a current screenshot of a page as the preview asset, ScreenshotNeo can return one through a single request. It accepts the page URL and can produce PNG, JPEG, WebP, or PDF; its full-page mode loads lazy images. The API also supports element capture, dark mode, device and viewport settings, retina scale, custom CSS and JavaScript, waits, cookies and headers, request blocking, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous jobs, bulk capture, and a usage API. Every feature is on every plan.
See the ScreenshotNeo API documentation for all parameters. A minimal cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const data = Buffer.from(await res.arrayBuffer());Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response identifies the page verdict and billing result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
FAQ
Is an HTML image element enough to control a shared-link preview?
No. A visible <img> can be part of the page, but the preferred shared-link image is declared separately with <meta property='og:image'> in the head.
Best Value
Should every page use the same Open Graph image?
Only when the same image genuinely represents every page. Page-specific images generally communicate the destination more accurately; avoid replacing them with a generic logo.
Can I rely on one preview image across search, social, and messaging apps?
No universal guarantee exists. Consumers interpret metadata independently, and Google’s image choice is automated. Validate the destinations that matter to your audience.
Frequently Asked Questions
Is an HTML image element enough to control a shared-link preview?
No. A visible <img> is separate from the Open Graph declaration. Put <meta property='og:image'> in the document head.
Recommended Free Tools
Should every page use the same Open Graph image?
Only if one image accurately represents every page. Otherwise provide a page-specific image instead of a generic logo.
Can one preview image be guaranteed across all platforms?
No. Each consumer can interpret metadata differently, and Google says its image selection is automated.
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.
