A social image is the image a social network or messaging app displays in the preview card when someone shares a webpage URL. You normally choose it with the og:image Open Graph meta tag in the document’s <head>. It is separate from an image shown inside the page itself: a crawler reads the metadata, fetches the referenced file, and builds the preview with your title, description, URL, and image.
What a social image is—and what it is not
When a reader pastes an article URL into a social network, chat application, or collaboration tool, the service may create a rich link card. The card commonly contains a headline, short description, destination URL, and a representative image. That representative asset is the social image.
The image is metadata-driven rather than an ordinary decorative or content image. An <img> element in the article body helps visitors who load the page; og:image tells sharing crawlers which remote file to use before (or without) rendering the visible page. The Open Graph protocol describes a webpage as a rich object in a social graph and defines four required properties: og:title, og:type, og:image, and og:url (Open Graph protocol).
How og:image works
Place the tags in the rendered HTML head. Use one absolute, publicly fetchable HTTPS URL for the image. A minimal article example is:
Windows 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 reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
<head>
<meta property="og:title" content="Example article title">
<meta property="og:description" content="Short explanation of the page">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/images/article-share.jpg">
<meta property="og:image:alt" content="Description of the share image">
<meta name="twitter:card" content="summary_large_image">
</head>og:title, og:description, og:type, and og:url provide the surrounding card context. og:image supplies the image URL. The optional og:image:alt gives a text alternative, while twitter:card requests a large-image card where that platform supports the tag. Keep og:url aligned with the page’s canonical URL, including the correct protocol, host, path, and any deliberate trailing-slash convention.
Absolute URLs and crawler access
Do not use a relative value such as /images/share.jpg or a development hostname. The sharing service must be able to resolve and download the asset on its own. Serve it over HTTPS, return a real image response rather than an HTML error page, and avoid access rules that block the platform’s crawler. Authentication walls, robots or firewall rules that deny the crawler, expiring signed URLs, and a URL that only works in your browser can all produce a missing image.
Multiple images and structured properties
Open Graph permits structured image properties such as og:image:width and og:image:height. You may also provide multiple og:image tags; consumers generally treat the first usable declaration as the preferred image and later declarations as fallbacks or alternatives. Put your intended default first and keep every candidate publicly reachable.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What size should a social image be?
A practical general-purpose starting point is 1200 × 630 pixels, approximately a 1.91:1 ratio (OG Image Design size guide). It fits common Open Graph previews, but no single crop is guaranteed across every network, app, notification, or device.
- Keep the headline, logo, product name, and other essential details in the central safe area.
- Use strong contrast and typography that remains readable when the card is reduced.
- Leave breathing room near every edge because a service may crop or overlay controls.
- Export a supported raster format such as PNG, JPEG, or WebP, and keep dimensions and file size reasonable for quick crawler downloads.
Preview the final URL with the target service’s debugger or validator before publishing. A correctly sized file can still appear differently when a platform chooses a square, portrait, or reduced card layout.
Hand-designed versus generated social images
You can create one designed file for an entire site, prepare images manually for selected pages, or generate an asset from route data at build or request time. The right choice depends on how much each page needs its own visual identity.
Rank #3
| Approach | Consistency | Personalization | Cost and control |
|---|---|---|---|
| One shared image | Highest brand consistency | Lowest; every page looks similar | Simple, low maintenance, limited editorial control per URL |
| Hand-designed per page | Depends on the design system | Highest editorial control | More production time and asset maintenance |
| Generated at build time | Consistent template | Uses title, author, category, or product data | Predictable deployment cost; requires a build pipeline |
| Generated at request time | Template remains consistent | Can reflect current route data | Runtime work and caching considerations; validate failures carefully |
Next.js supports route conventions named opengraph-image and twitter-image for generated share assets (Next.js documentation). Whether generated or static, the response must be available at a stable URL and referenced by the page metadata. A generator does not remove the need to check dimensions, accessibility text, cache behavior, or crawler access.
Set the image in a reliable workflow
- Design the source. Start at 1200 × 630, place critical content centrally, and export PNG, JPEG, or WebP.
- Publish the file. Put it at a stable HTTPS URL that returns the image without login, a browser-only session, or a short-lived token.
- Add metadata. Insert
og:title,og:description,og:type,og:url, andog:imagein the rendered head. Addog:image:altand, when useful, width and height. - Inspect rendered output. View the actual HTML delivered to a crawler, not just a template or server component. Confirm there is one intended first image and that the URL is absolute.
- Validate sharing. Submit the public page to the destination platform’s preview/debugger. If the old image appears, account for crawler caching and use the platform’s documented refresh mechanism.
- Repeat after changes. Test a representative article, a page with a long title, and a generated route. Confirm that image, title, description, and canonical URL all belong to the same page.
Why a link preview image is missing or wrong
The tag is absent from rendered HTML
Inspect the response or browser-rendered head. Client-only code that adds tags after the crawler has fetched the initial document may not be seen. Emit metadata during server rendering or in the framework’s supported metadata system.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The URL is relative, HTTP, private, or broken
Change the value to a complete HTTPS URL. Open it in a fresh, unauthenticated request and verify a successful image response, correct content type, and no redirect chain that ends at an error or login page.
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
The wrong page is canonical
Make og:url and the page’s canonical link identify the same URL. Do not copy metadata from a staging host, another locale, or a template page.
The dimensions or format cause rejection
Re-export at 1200 × 630 as PNG, JPEG, or WebP, check that the file is not truncated, and reduce an unnecessarily large payload. Keep vital text away from edges where cropping is likely.
A previous preview is cached
Sharing crawlers can retain an older asset after you deploy a replacement. Use the destination’s debugger or validator to request a refresh, then test the exact public URL again. Changing a filename or URL is sometimes necessary when a service will not invalidate its cached response.
The platform crops differently
Compare the result in the target app rather than judging only the original file. Rework the safe area, shorten text, or supply a platform-specific variant when the service supports it. A single 1.91:1 image is a compatibility baseline, not a guarantee of identical presentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Inspecting and testing with a screenshot
A screenshot of your page can confirm that the visible design is ready for sharing, but it cannot replace inspecting the HTML head: the social image may never be displayed in the page body. For repeatable visual checks, ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a rendered URL, element, or PDF with options such as a viewport or device preset, full-page loading, custom CSS and JavaScript, waits, headers, cookies, and blocking rules. See ScreenshotNeo and its documentation for request parameters.
Or skip the browser setup
One GET request captures the rendered page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts consent banners before capture 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 are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf 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 shots. Sign up free.
Cost, performance, and reliability considerations
- Keep assets cacheable. A stable filename and long-lived cache headers speed crawler downloads; change the URL when you intentionally need a fresh image.
- Optimize payloads. Large files delay previews and may exceed a platform’s limits. Resize to the design dimensions and compress without making text illegible.
- Make generation deterministic. Use the same fonts, colors, and layout for identical route data. Pin assets and test missing author, category, or title fields.
- Protect dynamic endpoints. If images are generated on demand, cache successful responses and return a clear image error rather than an HTML stack trace.
- Test representative URLs. Include long and short titles, localized routes, redirects, unpublished pages, and pages behind consent or authentication boundaries.
Final implementation checklist
og:imagepoints to an absolute HTTPS URL.- The file is publicly fetchable, a supported raster format, and starts at 1200 × 630 pixels.
og:title,og:description,og:type, andog:urlare present and describe the same page.- Important design elements sit inside the central safe area.
- The rendered HTML—not only source templates—contains the tags.
- A platform debugger shows the expected image after cache refresh.
- Generated routes have stable URLs and tested fallback data.
Frequently Asked Questions
Is a social image the same as a featured image?
Not necessarily. A featured image is an editorial or in-page field; it becomes a social image only when sharing metadata, usually og:image, points to it.
Can I use an SVG for og:image?
The cited implementation guidance recommends raster PNG, JPEG, or WebP files for broad compatibility, so use one of those formats for the default card.
Do social images affect search rankings directly?
They control the appearance of shared-link previews. The metadata does not turn the asset into an in-page image or substitute for page content and accessibility.
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.
