Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Set an og:image tag in the page’s HTML <head>, pointing to an absolute, publicly reachable HTTPS image URL. Add the other Open Graph fields for the page title, description, and URL, and use twitter:card=summary_large_image if you want a large image card on X. A 1200 × 630-pixel landscape image is a practical starting point, but each social platform can crop, cache, or otherwise handle previews differently.
What to add to your page
Open Graph metadata tells social services which page title, description, URL, and image to use when someone shares a link. The Open Graph protocol defines og:title, og:type, og:image, and og:url as its basic properties, and recommends og:description. Put the tags in the page’s HTML <head> and replace the example values with details for the specific page you are publishing:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the social preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://example.com/images/social-card.jpg">The og:image value is the image reference most link-preview systems use. The image dimensions describe the asset you intend to serve; they do not force a platform to display it uncropped. Open Graph also documents properties for image type, secure URL, and alt text. The example includes image alt text so you can provide a description, and includes Twitter Card tags because X uses its own twitter:card setting for a large-image card.
Make every value specific to the page
Use the canonical public URL of the page in og:url, not a local development URL, an administrative preview, or a URL that requires a login. Give each important page its own meaningful title, description, and image. If you paste a category page’s metadata into every product or article template, shares can show an irrelevant image or title even though the tags are technically present.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The image URL should be absolute: include https:// and the hostname rather than using a path such as /images/social-card.jpg. The image must be reachable by the social crawler without signing in or passing through a private directory. If you use a CDN or image service, check that the exact image URL—not just the page URL—can be fetched publicly.
Choose and prepare the social image
A 1200 × 630-pixel image, about a 1.91:1 landscape ratio, is a useful cross-platform starting point. LinkedIn’s sharing-module guidance specifies a minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio, and gives a 5 MB maximum. OpenGraph.dev also describes 1200 × 630 as a safe default and recommends at least 1200 pixels wide. These are practical starting points, not a guarantee that every network will display the image identically.
- Use a JPG or PNG and compress it so it is reasonably quick to fetch. LinkedIn’s cited 5 MB limit applies to its sharing module; do not treat it as a universal limit for every platform.
- Keep essential wording, faces, and logos away from the outer edges. A service may crop the image to fit its card.
- Use a clear image that still makes sense when shown as a small thumbnail. Avoid relying on fine print to communicate the main point.
- Write descriptive
og:image:alttext for accessibility. Describe the image’s useful content rather than repeating the page title. - If you serve multiple image formats, confirm that the URL in the metadata resolves to an image the target platform can fetch.
Start with one well-prepared landscape asset unless you have a reason to produce alternate crops. Since platforms have different display rules, inspect the result on the networks where your audience shares links before deciding whether separate artwork is worth maintaining.
Rank #2
Add the metadata in your site’s actual publishing system
Editing a template directly
For a custom site, add the tags to the shared head layout or to the template that renders the relevant page type. Populate them from that page’s data rather than hard-coding one title and image across the whole site. For example, an article template can render its article title and description, while its image field supplies the URL for that article’s social card.
Recommended Free Tools
Keep the metadata in the initial HTML response. A tag added only after client-side JavaScript runs may not be seen by crawlers that do not execute JavaScript. After deploying a template change, inspect the raw page source—not just the browser’s rendered Elements panel—to confirm that the response already contains the expected tags inside <head>.
Using a CMS or SEO plugin
Many content management systems offer SEO or social-sharing fields, and some SEO plugins generate Open Graph tags for you. Enter the page-specific title, description, and image in those fields, publish the page, then inspect its generated source. CMS interfaces vary, so check the output rather than assuming a field has emitted the tag you need. Watch for duplicate tags if both a theme and a plugin generate social metadata.
A shared default image can be useful for pages with no selected artwork, but it should be a fallback, not a substitute for the right image on every important page. Confirm that the final HTML has one coherent set of values and that its URLs point to the intended public page and image.
Verify the preview and refresh stale results
- Publish the image at a stable, publicly accessible HTTPS URL.
- Open the page’s raw source and confirm that the Open Graph and Twitter Card tags appear inside
<head>with the expected page-specific values. - Check your
robots.txtrules and access controls. HubSpot’s crawler guidance identifies user agents includingfacebookexternalhitandTwitterbotand recommends allowing them. Also make sure the image itself is not blocked or kept in a protected directory. - Submit the page URL to the Facebook Sharing Debugger, X Card Validator, and LinkedIn Post Inspector. HubSpot lists these tools for validation, and LinkedIn specifically recommends its Post Inspector for troubleshooting shares.
- Review each network’s preview. If the preview is old, use the relevant inspector to request a re-fetch, then check again.
Facebook, LinkedIn, Slack, Discord, WhatsApp, and X commonly read Open Graph fields, but their display rules and cache behavior differ. OpenGraph.dev notes that Facebook, LinkedIn, and X cache previews on different schedules. A successful preview in one inspector therefore does not establish that every other service has refreshed or will crop the image the same way.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Common problems and how to fix them
| Symptom | Likely cause | What to check |
|---|---|---|
| The wrong thumbnail appears | The platform has cached an earlier preview, or the page is emitting a different og:image than intended. |
Inspect the raw source for the exact og:image value. Use the target platform’s inspector to request a re-fetch, then validate again. |
| No image appears | The image URL may be inaccessible to the crawler, blocked, or stored in a protected directory. | Open the absolute HTTPS image URL without signing in. Check access controls and robots.txt; LinkedIn notes that a blocked site or protected image directory can prevent display. |
| The page has tags in the browser but the inspector misses them | The tags may be inserted only by client-side JavaScript, or the raw response may contain different metadata. | View the raw page source and ensure the tags are present in the initial HTML inside <head>. |
| The image is cropped or text is cut off | The platform is fitting the image to its own card dimensions. | Keep important content away from the edges, review the result in the target platform’s inspector, and consider a platform-specific crop if the shared asset does not work. |
| A replacement image does not show | The old image URL or preview may still be cached. | Re-fetch the page in the platform inspector. If needed, publish the replacement under a new filename or use a cache-busting query string, then validate the new URL. |
| The title or description is inconsistent | A CMS default, duplicate tag, or page template may be supplying another value. | Check the complete raw head output, remove conflicting metadata sources, and confirm the final values are specific to the page. |
Keep previews reliable as pages change
Social preview metadata is part of the page’s published output, so changes to a CMS field or template do not guarantee that a platform’s stored preview changes immediately. Validate after publishing changes to the image, URL, or metadata. Keep the image URL stable when possible; if you replace an asset at the same URL and the platform continues to show an old copy, use the relevant inspector first and change the filename or add a cache-busting query only when needed.
Rank #4
For larger sites, treat metadata as a template and content-quality issue: make sure each page type has a source for its title, description, and image, and spot-check representative pages in raw source and platform inspectors. This catches both template-wide mistakes and individual pages that have no suitable image. The available platform guidance does not establish one universal cache duration or one universal image limit, so rely on each target network’s current inspector and documentation for its own behavior.
Or skip the browser setup
If you need a captured screenshot of a rendered page while checking a share workflow, ScreenshotNeo can return an image from one GET request. This is a screenshot service, not a replacement for adding Open Graph tags or assigning the social preview image in your site. The example captures Stripe; replace the target URL with the page you want to inspect. See the ScreenshotNeo documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include 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 shots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Do Open Graph tags change what appears in a browser tab?
No. They describe a shared-link preview; they are separate from the page title shown in the browser tab.
Can I use the same social image on multiple pages?
You can, but page-specific artwork is more useful when the pages have distinct subjects. Use a shared image as a fallback if a page has no selected image.
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.
