Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Add four Open Graph properties to every shareable page: og:title, og:type, og:image, and og:url. Use the canonical page URL for og:url, provide a descriptive og:image:alt, and keep image metadata accurate. X (formerly Twitter) may use page metadata differently over time; the currently verified material here establishes the Open Graph requirements, not a complete, authoritative X Cards specification.
The minimum metadata to put in your page head
The official Open Graph Protocol identifies four basic properties that every page should declare. Put them inside the document’s <head>:
<meta property="og:title" content="Open Graph and Twitter Card Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:url" content="https://example.com/guides/social-metadata">These values describe the object that a social graph should represent. The title is the displayed object name, the type identifies what the object is, the image is its representative URL, and og:url is the permanent canonical identifier. Choose a URL that resolves to the same page and is stable across tracking parameters, print views, and alternate paths.
Recommended Free Tools
Choosing an object type
Use the type that best describes the page, such as website for a home page or article for a published story. The protocol notes that some object types can require additional properties. Check the type’s definition on ogp.me before adding type-specific fields.
#1 Best Overall
Build a complete Open Graph image declaration
If you specify og:image, the protocol says you should also specify og:image:alt. The alt value describes what is visible in the image; it is not a caption or a sales message.
<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/social-card.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 browser window showing a page source with social metadata">og:image:url is identical to og:image; use it only when your tooling or schema requires the explicit alias. The secure URL is an HTTPS alternate, while the type and dimensions should match the actual asset’s MIME type and pixel size. The protocol material does not prescribe one universally best image size, so select dimensions that suit your design and the channels you support, then verify that the file is reachable without authentication.
Keep structured properties attached to the right image
Open Graph permits multiple values by repeating a meta tag. For images, declare each root image and immediately follow it with that image’s structured fields:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors<meta property="og:image" content="https://example.com/images/hero.jpg">
<meta property="og:image:alt" content="A mountain trail at sunrise">
<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" content="https://example.com/images/diagram.png">
<meta property="og:image:alt" content="A flow diagram of the deployment process">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">The first value has preference when a conflict exists. Once a new root property is declared, following structured fields belong to that new root. Do not put all image dimensions at the end of the head and assume a crawler will infer which image they describe.
What to put in each field
og:title: A concise, accurate title for the shared object. It can differ from the HTML<title>, but keeping the subject consistent avoids confusing previews.og:type: The object category, such asarticleorwebsite. Use a more specific protocol-supported type only when it genuinely fits.og:image: A full, publicly reachable image URL. Select the image that represents the page most clearly, not merely the first image in the article.og:url: The canonical permanent URL of the page represented. Normalize trailing slashes and avoid session IDs or campaign parameters.og:image:alt: A literal visual description, for example “Blue terminal window displaying a successful build.” Do not repeat a headline as if it were image content.og:image:type,og:image:width,og:image:height: Optional structured details that accurately describe the delivered file.og:image:secure_url: An HTTPS version of the image when you also maintain another image URL.
A framework example for server-rendered pages
Render values from the same page model that supplies the canonical link. Escaping is essential when titles or URLs contain quotation marks or ampersands.
<head>
<link rel="canonical" href="https://example.com/posts/release-notes">
<meta property="og:title" content="Release notes for version 4.2">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/posts/release-notes">
<meta property="og:image" content="https://example.com/assets/release-4-2.png">
<meta property="og:image:secure_url" content="https://example.com/assets/release-4-2.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Product dashboard highlighting version 4.2 features">
</head>For a single-page application, ensure these tags are present in the server-rendered HTML returned to a crawler, not only injected after JavaScript runs. Keep one authoritative set per page so stale tags from a template do not override route-specific values.
Multiple images and precedence
Repeating og:image lets you offer alternatives. The first declaration is preferred when a consumer chooses one value, so place your intended default first. Keep every image’s alt text, type, width, and height adjacent to its declaration. If a page has a hero photograph and an explanatory diagram, decide which one communicates the page in a small preview and put that one first.
Twitter/X cards: what can safely be claimed
The available official X result is a Tweet data dictionary, which documents API Tweet objects rather than webpage-card metadata. Third-party summaries often describe X as falling back to Open Graph values, but that behavior, card variants, image limits, crawler rules, and validator availability are not established by an authoritative source in the material available for this guide.
Therefore, treat your Open Graph implementation as the verified baseline and confirm any X-specific requirement against current X documentation for your deployment date. Do not assume that adding an unverified twitter:card value guarantees a particular layout. If an X preview differs from another service, inspect the actual HTML response, canonical URL, redirects, robots policy, and image response before changing markup.
Debugging a missing or incorrect preview
The wrong title or image appears
- View the raw response source, not only the post-rendered DOM, and confirm the expected tags are in
<head>. - Search for duplicate properties. Because the first value wins in conflicts, an earlier template tag may be overriding your route’s value.
- Check that
og:url, the canonical link, and the URL you shared identify the same page. - Verify that the image URL returns the intended file, with the correct
Content-Type, dimensions, and no login or hotlink barrier.
The image is blank or unavailable
- Open the image URL in a private browser session and with redirects enabled.
- Use HTTPS for
og:image:secure_urland check that your certificate is valid. - Confirm that firewall, bot protection, or a restrictive referrer policy is not denying automated fetches.
- Make sure declared MIME type and dimensions match the file actually served; regenerate stale CDN variants if necessary.
Changes do not appear immediately
Preview consumers can cache fetched metadata. First confirm the live HTML and asset are correct, then allow for the consumer’s cache to expire or use its current official refresh mechanism. Avoid changing the canonical URL merely to force a refresh; that creates a different graph object.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Generating a reliable social image
Your image should communicate the page at thumbnail size, leave text inside safe margins, and include meaningful alt text. A screenshot can be useful for documentation, changelogs, or product pages, but capture the final, consent-free state rather than a cookie dialog or chat bubble.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its capture flow accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. AI agents can call its MCP tools take_screenshot, get_page_info, and capture_pdf.
One GET request returns PNG, JPEG, WebP, or PDF. The API supports full-page and selector captures, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, click and wait actions, blocked resources, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Every feature is included on every plan. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/posts/release-notes -o shot.webpSee the ScreenshotNeo API documentation for parameters and output formats.
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/posts/release-notes"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/posts/release-notes' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Implementation checklist
- Add the four required Open Graph properties to every canonical, shareable page.
- Use a stable canonical URL in both
og:urland your canonical link. - Choose a representative, publicly reachable image and add descriptive
og:image:alt. - Add secure URL, MIME type, width, and height when those values are known and accurate.
- For multiple images, place each image’s structured fields directly after its root declaration.
- Inspect raw HTML, redirects, response headers, and image accessibility before diagnosing a platform-specific preview.
- Treat X card behavior as changeable until confirmed by current official X documentation.
Frequently Asked Questions
Is og:image:alt the same as an image caption?
No. It should describe what the image depicts. The Open Graph Protocol distinguishes this description from a caption.
Can I declare more than one Open Graph image?
Yes. Repeat og:image; the first value has preference, and each image’s structured metadata should follow its own declaration.
Does the Open Graph specification define a universal image size?
No single best size is prescribed in the protocol material. Use dimensions appropriate to your design and verify the delivered file.
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.
