The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →To choose the image shown when someone shares a webpage, add Open Graph metadata to that page’s HTML <head>, including an absolute URL in og:image. Then make sure the page and image can be fetched by the platform where you’ll share the link. The visible hero image on the page does not, by itself, set the social preview image.
What a website link thumbnail is
A website link thumbnail is the image a social network or messaging app may display alongside a shared URL. It is also called a social preview image, link preview image, or Open Graph (OG) image. The sharing service fetches the page, reads metadata in its HTML, and uses that information to build a preview. The result can vary by platform; one set of tags does not guarantee identical rendering everywhere.
The key field is og:image, which points to the image you want associated with the page. The surrounding metadata gives the platform a title, description, page type, and canonical URL. The Open Graph protocol defines these fields and their basic use.
Add Open Graph tags to the page
Place the metadata in the document’s <head>, and write values for the exact page people will share. Use absolute URLs for both the page and image so a remote service can locate them without relying on your site’s navigation or relative paths.
Recommended Free Tools
#1 Best Overall
<head>
<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="627">
<meta property="og:description" content="A short description of this page.">
</head>Replace every example value with information and a publicly retrievable image for your page. The Open Graph protocol identifies og:title, og:type, og:image, and og:url as the four required properties for a page. It recommends og:description and og:site_name as additional properties. The snippet includes image type, dimensions, and alt text as useful image metadata; platforms may not all process every property the same way.
What each field does
og:title: the title associated with the shared page.og:type: the type of object represented;websiteis appropriate for a general web page.og:url: the canonical URL you want associated with the object.og:image: the absolute URL of the chosen preview image.og:image:alt: a concise description of the image. The protocol says that if a page specifiesog:image, it should specifyog:image:alt.og:image:type,og:image:width, andog:image:height: optional image details that describe the asset.og:description: a short summary of the page.
Open Graph permits repeated property values. If conflicting values are present, the protocol says the first value takes preference. Avoid accidental duplicates: an old tag earlier in the HTML can take precedence over the one you meant to use.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose and publish the image
Use an image that represents the specific page rather than a generic site logo when a more relevant image is available. Keep important text and the main subject away from the edges: platforms may resize or crop previews, and layouts differ. Check the result in the platform where your audience will see it instead of assuming every service will display the same crop.
The image must be retrievable by the service that builds the preview. A correct image URL and suitable dimensions are not enough if a protected directory, access restriction, or blocked site prevents the platform from fetching it. LinkedIn specifically identifies blocked sites and protected directories as possible obstacles to retrieving a sharing image.
LinkedIn’s documented image requirements
LinkedIn’s help page, “Make your website shareable on LinkedIn,” documents a minimum image size of 1200 × 627 pixels, recommends a 1.91:1 ratio, and sets a 5 MB maximum. It also says images under 401 pixels wide appear as thumbnails in LinkedIn’s sharing module. These are LinkedIn-specific requirements, not universal rules for all social networks and messaging services. The help page is marked as last updated two years before the research date; verify its current requirements if exact compliance matters.
Apple’s developer documentation also discusses rich previews for Messages and identifies og:image as relevant, but the available documentation does not establish that Messages and other services follow identical fallback, sizing, or rendering behavior. Treat platform-specific results as platform-specific.
Rank #4
Publish, then check the actual shared URL
- Save or deploy the page with its OG tags in the HTML head.
- Open the final page URL and inspect its delivered HTML. Confirm that the tags describe that page—not just the home page—and that there is one intended value for each important property.
- Open the image URL directly in a browser session that is not relying on your site’s authenticated session. Confirm it resolves to the intended file and is not behind a protected path or access requirement.
- Check image dimensions, file weight, and composition against the requirements of the platform you care about. For LinkedIn, use its documented limits above.
- Share or preview the page using the target platform’s current official inspection or preview tools, where available. Compare the image, title, and description shown there with your metadata.
Preview tools and platform caches can affect what you see, but exact current tool names and cache-clearing procedures are not established here. Consult the platform’s own documentation for its current re-fetch process rather than assuming that changing a tag instantly updates every previously shared link.
Generate a screenshot to inspect the page’s appearance
A screenshot can help you review how the page itself looks at a particular viewport, but it is not a substitute for checking a social platform’s link preview. A browser screenshot shows rendered page content; it does not prove that a sharing crawler can retrieve your metadata or image, nor does it predict each platform’s final card layout.
Best Value
- 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
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF capture. For this workflow, use a screenshot as a visual check of the page, then use the target platform’s preview to validate the actual share card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you want a rendered capture without setting up browser automation, ScreenshotNeo can capture a URL directly. This is a screenshot of the page, not a generator for Open Graph tags or a replacement for a platform preview. See the ScreenshotNeo API documentation for request options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the example URL and provide your API key. ScreenshotNeo can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month with no card.
Troubleshoot a missing or wrong thumbnail
- No thumbnail appears: Check that
og:imageis in the delivered page’s head, points to the right image, and uses an absolute URL. Then check whether the platform can fetch both the page and image. - The wrong image appears: Inspect the final HTML for duplicate
og:imagetags or conflicting metadata. Since the Open Graph protocol gives the first repeated value preference when conflicts arise, remove stale values and leave the intended value first. - The image URL works for you but not for the platform: Check for authentication, a protected directory, or other access restrictions. A browser session with access does not establish that a sharing platform can retrieve the same file.
- The image is cropped or unexpectedly small: Review the image’s subject placement and dimensions, then compare them with the target platform’s rules. LinkedIn documents its own minimum, ratio recommendation, maximum file size, and behavior for images under 401 pixels wide; do not apply those figures to other services without their documentation.
- The page title or description is stale: Confirm the metadata belongs to the exact shared URL and inspect the platform’s current preview or re-fetch guidance. Cached previews may not reflect a recent change immediately; the exact refresh steps vary and should be checked with that platform.
- A tag appears correct in your source template but is missing from delivered HTML: Check the published page response, not only the template file. The essential test is whether the final HTML head contains the intended metadata at the URL being shared.
Frequently Asked Questions
Is an Open Graph image the same thing as a favicon?
No. A favicon identifies a site or page in browser interfaces; og:image specifies an image intended for a shared-link preview.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can I use the same preview image on every page?
You can point multiple pages to the same image, but a page-specific image can represent that page more clearly. Set and check the metadata for each URL you expect people to share.
Does setting Open Graph tags guarantee a thumbnail in every app?
No. Open Graph is a common metadata mechanism, but services can differ in what they read and how they render previews. Check the platforms that matter to your audience.
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.
