Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A default Open Graph image is the fallback image URL you declare with og:image for pages that do not have a more specific social preview. Put it in the document head alongside og:title, og:type and og:url. Use a relevant, representative image rather than a generic logo, and remember that Google may choose a different preview because image selection is automated.
The Open Graph Protocol defines the metadata and optional image properties; Google documents how that metadata can influence image previews. Neither source establishes one universal image size, aspect ratio, format or file-size limit for every platform.
What “default Open Graph image” means
Open Graph metadata describes a web page as an object when it is shared or interpreted by platforms that support the protocol. The og:image value is the URL of an image intended to represent that object. A site-wide default is the fallback you place in a common layout so pages without a custom image still have a declared representative.
For example, an article template might use a branded default, while an individual article can replace it with an image made for that article. The default is metadata, not a stored product or a special image file type.
#1 Best Overall
The protocol’s basic properties are og:title, og:type, og:image and og:url. See the Open Graph Protocol documentation for the field definitions.
How the metadata is read
Basic head markup
Add the tags inside the page’s <head>. Use the canonical page URL in og:url and the image URL in og:image.
<meta property='og:title' content='Example article title'>
<meta property='og:type' content='article'>
<meta property='og:url' content='https://example.com/articles/example'>
<meta property='og:image' content='https://example.com/images/default-social.webp'>The image URL should identify the asset you want crawlers and social clients to retrieve. Keep the image publicly reachable and stable; authentication walls or intermittent responses can prevent a preview client from obtaining it.
Optional image properties
The protocol documents additional properties that keep image information associated with the selected image:
og:image:secure_urlfor a secure image URL.og:image:typefor the MIME type.og:image:widthandog:image:heightfor known pixel dimensions.og:image:altfor an alternative description.
These properties are useful when you know the values. Do not attach dimensions or an alt description for one image and then accidentally pair them with a different image.
Rank #2
When more than one image is declared
The protocol allows multiple image declarations. If values conflict, the first tag from top to bottom is preferred. Put the intended primary image first, then any alternatives. A page-specific image should therefore appear before a fallback inherited from a broad template, or your template logic should emit only the one that applies.
Choosing a strong default image
Google recommends an image that is relevant and representative of the page, discourages a generic site logo as the preferred image, advises avoiding text-heavy artwork, and recommends high resolution where possible. Its Image SEO Best Practices also notes that preview selection is automated.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Decision | Better default | Why it matters |
|---|---|---|
| Subject | An image that reflects the site or the specific content type | It gives a viewer context before opening the page. |
| Branding | Light branding that supports the subject | A standalone logo can be too generic to represent an article. |
| Text in artwork | Little or no embedded text | Small preview cards can make text unreadable. |
| Composition | A conventional, balanced shape without extreme width or height | Severe aspect ratios are more likely to be cropped or rejected by a platform. |
| Resolution | The highest practical resolution for the asset | It gives automated systems more usable pixels. |
There is no single official pixel dimension, aspect ratio, file format or file-size limit that applies across all social platforms in the cited Open Graph specification. Check the requirements of each destination you actively support instead of treating one number as universal.
Set a site-wide fallback
- Create one representative asset. Choose an image that can stand for pages that have no custom artwork. Keep its URL stable when possible.
- Add the tags to the shared layout. Place the Open Graph block in the server-rendered or statically generated head used by your pages.
- Supply known image details. Add secure URL, MIME type, width, height and alt metadata when those values describe the same image.
- Override it for important pages. Emit a page-specific
og:imagebefore the fallback, or suppress the fallback on pages with a custom value. - Inspect the delivered HTML. View the final response, not only a client-side component tree, and confirm that the URL and property order are correct.
<meta property='og:title' content='My site'>
<meta property='og:type' content='website'>
<meta property='og:url' content='https://example.com/'>
<meta property='og:image' content='https://example.com/images/site-default.jpg'>
<meta property='og:image:secure_url' content='https://example.com/images/site-default.jpg'>
<meta property='og:image:type' content='image/jpeg'>
<meta property='og:image:width' content='1600'>
<meta property='og:image:height' content='900'>
<meta property='og:image:alt' content='Example site artwork'>The numeric dimensions in this example describe the file you created; they are not a universal platform requirement. Replace them with the actual values or omit the optional tags when the values are unknown.
Use page-specific images without breaking the fallback
A default works best as a safety net, not as the image for every page. A product page, documentation page or article can provide its own representative artwork. Your rendering logic should follow one deterministic rule:
- If a valid page image exists, output that image and its matching optional properties.
- Otherwise, output the site-wide default and its matching properties.
- Do not output two competing primary images unless you intentionally rely on top-to-bottom precedence.
After deployment, check a page with an override and a page without one. This catches template branches that accidentally emit the default first.
Recommended Free Tools
What Google will—and will not—guarantee
Google says og:image is one signal it may use when selecting an image preview. Selection is automated and can draw on multiple sources, so declaring a URL does not guarantee that Google will display it. The tag also should not be described as a direct ranking guarantee.
That distinction matters operationally: treat og:image as a clear preference and representation signal, then evaluate the actual previews produced for your pages. A different image in a Google result does not by itself prove that your markup is invalid.
Testing and troubleshooting
The preview shows an old image
Likely cause: a crawler or sharing client has cached an earlier response or asset. Fix: confirm the current HTML and image URL first, then use the destination’s documented refresh or inspection workflow. Avoid changing URLs repeatedly unless you have a real asset revision.
The wrong image wins
Likely cause: multiple og:image tags are present, with the undesired one appearing first. Fix: inspect the final head in order and emit the intended image first, or remove duplicate declarations.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →No image appears
Likely causes: the image response is unavailable to the crawler, the URL is malformed, or the page is returning different metadata to bots and users. Fix: request the exact image URL from an unauthenticated client, verify the response is an image, and compare server-rendered HTML with the page source delivered to a normal browser.
The image is cropped awkwardly
Likely cause: the destination applies its own card shape or the artwork has an extreme aspect ratio. Fix: choose a balanced composition with important subjects away from edges and test a page-specific crop where the subject demands it.
Optional fields describe the wrong file
Likely cause: width, height, MIME type or alt text were copied from a previous image. Fix: generate these values from the same asset record used for og:image, or omit unknown optional values.
JavaScript adds the tags too late
Likely cause: metadata exists only after client-side rendering, while a preview crawler reads the initial response. Fix: render Open Graph tags in the server response or static HTML whenever your framework permits it.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsCreate a representative image from a page
If your default should show a live landing page, dashboard or documentation layout, capture that page as an image and publish the resulting file at a stable URL. A do-it-yourself browser workflow is:
Best Value
- Open the target page at the viewport and theme you want represented.
- Dismiss consent notices and close newsletter or chat overlays.
- Wait for fonts and lazy-loaded images to finish, then capture the required viewport or full page.
- Crop out transient UI, export in a format your destinations accept, and upload it to your public image location.
- Reference that uploaded URL in
og:image, with optional properties that match the exported file.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It can accept consent banners before capture and remove more than 60 known consent platforms, newsletter popups and chat widgets. You can turn each cleanup step off, and its full-page, selector, device, dark-mode, custom CSS, JavaScript, wait, blocking, cookie and header options let you control what becomes the default image.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and each response reports the page verdict and billing state in X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
Use the ScreenshotNeo API documentation for all parameters. A basic capture is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.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://stripe.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://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the target URL with the page you want to represent, then store the returned image at the URL used by your metadata. ScreenshotNeo’s Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to start.
Performance, reliability and cost considerations
- Keep the default stable: changing the URL every time you edit artwork can leave downstream previews pointing at different revisions.
- Match metadata to the asset: stale dimensions or MIME values make debugging harder even when a client still displays the image.
- Separate capture from publishing: generate screenshots during a build or content workflow, then serve a finished static file to preview crawlers.
- Use caching deliberately: ScreenshotNeo supports a cache with a TTL you choose, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, and a usage API.
- Control sensitive pages: custom headers, cookies, user agents, authorization, timezone and geolocation can reproduce a viewing context, but do not publish private page content as a public social image.
Every ScreenshotNeo plan includes every feature. Yearly billing gives two months free; listed plans are Free (1,000 shots/month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000) and Business ($249 for 1,000,000).
Practical checklist
- Declare one intentional fallback
og:imagein the shared head. - Use an image relevant to the page type, not merely a generic logo.
- Add optional secure URL, MIME, dimensions and alt text only when they match that image.
- Place a page-specific image before the fallback or suppress the fallback on that page.
- Inspect delivered HTML and the image response from an unauthenticated request.
- Expect Google’s automated selection to differ from your declared preference.
- Recheck previews after major template, image or URL changes.
Frequently Asked Questions
Is an Open Graph image the same as a favicon?
No. A favicon identifies a site or page in browser interfaces, while og:image is a social-graph representation image used when a page is shared or interpreted by a compatible crawler.
Can one default image serve every page?
Yes, as a fallback, but pages with distinct subjects are better represented by page-specific images that replace the default.
Do I need to use a screenshot for og:image?
No. The metadata accepts an image URL; the file can be designed artwork, photography, an illustration or a captured page.
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.
