How to Change Your Website Thumbnail and Social Preview Image

Direct answer: change the page’s Open Graph og:image to an absolute HTTPS image URL, verify og:title, og:description, og:url, and og:type, publish the page, then re-check the URL in each platform’s debugger or inspector. A practical starting image is about 1200 × 630 pixels (a 1.91:1 ratio). Add twitter:card with summary_large_image when you want X’s large card layout.

The Open Graph protocol defines the metadata that turns a URL into a rich object when it is shared. See the Open Graph protocol documentation for the field definitions.

Put these tags in the page’s <head>. Replace the example values with the canonical details for the page you are publishing.

<head>
  <title>How to Change Your Website Thumbnail</title>
  <meta name="description" content="A practical guide to changing Open Graph images and refreshing social previews.">

  <meta property="og:title" content="How to Change Your Website Thumbnail">
  <meta property="og:description" content="A practical guide to changing Open Graph images and refreshing social previews.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/change-thumbnail">
  <meta property="og:image" content="https://example.com/images/change-thumbnail.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/change-thumbnail.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A website page preview card with a custom thumbnail">

  <meta name="twitter:card" content="summary_large_image">
</head>

Required and recommended fields

Field	Purpose	What to check
`og:title`	Headline shown in the preview	Matches the page title and is not accidentally truncated by your template
`og:description`	Summary below the headline	Describes this page, rather than the whole site
`og:type`	Object type	Use `website` for a general page or `article` for an article
`og:url`	Canonical URL for the shared object	Use the final HTTPS URL, with the intended trailing-slash and query-string policy
`og:image`	Main thumbnail	Use a complete, publicly fetchable HTTPS URL
`og:image:width` and `og:image:height`	Image dimensions	Report the actual pixel dimensions
`og:image:alt`	Accessible image description	Describe the image; do not paste the caption or keyword list
`twitter:card`	X card layout request	Set to `summary_large_image` for a large image card

Open Graph also defines structured properties such as og:image:secure_url, MIME type, dimensions, and alt text. They help crawlers interpret the image consistently.

2. Choose and prepare the image

Start near 1200 × 630 pixels, which is close to a 1.91:1 ratio used by several major platforms.
Keep essential subjects and text away from the edges. Some networks crop the image to a similar but not identical ratio.
Serve a raster image that a crawler can fetch without a login, cookie wall, IP allowlist, or client-side interaction.
Use a stable filename and URL. If you replace an image at the same URL, a platform may continue showing its cached copy.
Write useful og:image:alt text for people using assistive technology.

Do not assume that the image visible in the page body becomes the social thumbnail. The page-level og:image declaration is the main signal.

3. Change a thumbnail in a CMS

Wix

For one Wix page, open Pages & Menu, choose More Actions for the page, open Social share, upload the image, choose Add to Page, and publish.

To set a site-wide default, open Site settings → Site and Domain → Website settings → General social image, upload the image, save, and publish. Wix uses that site image when a page does not have its own page-specific image.

Other CMSs and frameworks

Look for a field named social image, share image, Open Graph image, or Twitter Card image. If the field is absent, add the tags in the document head through your theme, layout, SEO plugin, or server-rendered template. Confirm that only one final set of Open Graph tags is emitted; duplicate tags from two plugins can produce inconsistent results.

4. Publish, inspect, and refresh the cache

Publish the page and confirm the production URL returns the new HTML.
View the raw source or rendered head and verify that og:image is the intended absolute HTTPS URL.
Open the image URL directly in an unauthenticated browser window. Check that it returns the image, the correct content type, and a successful response.
Submit the page URL to the platform’s sharing debugger or inspector. Facebook/Meta provides a Sharing Debugger, X provides a Card Validator, and LinkedIn provides a Post Inspector.
Request a re-scrape or refresh where the tool offers one, then inspect the generated card again.

Preview caches can outlive the edit. A successful page change does not guarantee that an already-created post will immediately change, so validate the final rendered card after requesting a refresh.

5. Platform behavior and fallback rules

Platform	Primary signals	Practical check
Facebook/Meta	`og:title`, `og:description`, `og:image`, `og:url`, and `og:type`	Use the Sharing Debugger after publishing
X	Twitter Card fields, with Open Graph fallback for title, description, and image	Use `summary_large_image` and inspect with the Card Validator
LinkedIn	Core Open Graph fields	Use the Post Inspector; its crawl may remain cached for days

6. Troubleshooting wrong or missing thumbnails

Symptom	Likely cause	Fix
The old image still appears	Platform cache	Use the platform debugger or inspector to request a fresh scrape. Wait and inspect again.
No image appears	Relative URL, HTTP URL, blocked crawler, or failed image response	Use an absolute HTTPS URL and open it without authentication. Check server access rules and the response content type.
The wrong page image appears	Another template or SEO plugin emits a second `og:image`	Inspect the final HTML and remove duplicate or stale tags.
The image is cropped badly	Aspect ratio differs from the platform’s card	Start near 1200 × 630 and keep important content inside a safe margin.
The title or description is wrong	Template values override the page values	Inspect `og:title` and `og:description` in production, then fix the page or template data.
Changes work locally but not online	Only the development build changed, or a CDN serves old HTML	Deploy the production build, purge the relevant cache, and inspect the public URL.
Wix keeps using the default image	No page-specific social image is assigned	Set the image in that page’s Social share settings, publish, and re-scrape.

7. A deployment checklist

☐ og:title, og:description, og:type, and og:url describe the same page.
☐ og:image is an absolute HTTPS URL.
☐ The image is publicly fetchable and returns the expected MIME type.
☐ The image is near 1200 × 630 pixels, with important content away from edges.
☐ Width, height, and alt structured properties match the actual image.
☐ twitter:card is summary_large_image when a large X card is desired.
☐ Production HTML contains one authoritative set of social tags.
☐ Each target platform’s debugger or inspector shows the new card.

8. Or skip the browser setup

If you need a rendered screenshot of the page itself for documentation, QA, or an asset pipeline, ScreenshotNeo can capture it with one request. Its cleanup steps accept cookie and consent banners before capture and remove more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for all options. Basic calls:

cURL

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

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', buffer));

ScreenshotNeo also supports full-page captures with lazy images loaded, CSS element captures, dark mode, device presets, custom viewports, retina scale, PDF output, custom CSS and JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

There is a free plan with 1,000 shots per month and no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Create a free ScreenshotNeo account.

9. Performance, reliability, and cost notes

Use a stable, optimized image URL so crawlers download fewer bytes and render the card sooner.
Keep social metadata server-rendered or present in the initial HTML. A tag added only after client-side JavaScript runs may be missed by a crawler.
Use one canonical URL and one image choice per page to avoid conflicting cache entries.
Refreshing a debugger changes what a platform fetches; it does not rewrite previews already embedded in old posts.
For automated page-image workflows, ScreenshotNeo’s cache TTL, async jobs, bulk requests, and unbilled failed captures can help control request volume and spend. Check the response headers and usage API when accounting for captures.

10. FAQ

Can I use the same thumbnail everywhere?

Yes. A single 1.91:1 image near 1200 × 630 is a practical starting point, but inspect each platform because cropping and display layouts differ.

Does changing the page title change the thumbnail?

No. The thumbnail comes primarily from og:image. Update the image URL and the other metadata independently.

Why does a private image URL fail?

Social crawlers need to fetch the image without your browser session. Move it to a publicly accessible HTTPS URL or adjust access controls.

Should `og:type` be `website` or `article`?

Use website for a general site page and article for an article. Keep the value consistent with the page’s purpose.

Usually the post retains the preview captured when it was created. Refresh the platform cache for future shares and create a new post when the existing card must change.