Free tools Windows power users keep installed
One-click scans. No signup required.
Use Open Graph tags as the shared foundation for website link previews, then add twitter:card to specify an X card layout. Add separate twitter:title, twitter:description, or twitter:image only when the X version should differ from the Open Graph content. Correct metadata is a useful starting point, not a guarantee that every platform will display the same preview.
Open Graph and Twitter Card tags do different jobs
Open Graph (OG) describes a page’s identity and content for social graph representations and link previews. Its four required properties are og:title, og:type, og:image, and og:url, according to the Open Graph Protocol. The protocol also defines optional properties such as og:description, og:site_name, and og:locale.
As an Amazon Associate I earn from qualifying purchases.
Twitter Card metadata uses the twitter: namespace for X-specific card presentation and optional customized fields. In practical terms, OG is the broad metadata baseline; twitter:card tells X which card type you want to use. The current X-specific requirements and image constraints are not established here, so do not treat the example below as a guarantee of a particular rendering.
Recommended Free Tools
| Question | Open Graph | Twitter Card / X metadata |
|---|---|---|
| Main role | Describes the page or object for social graph representations and previews. | Specifies X-oriented card presentation and can provide customized values. |
| Typical syntax | <meta property="og:title" content="…"> |
<meta name="twitter:card" content="…"> |
| Baseline fields | og:title, og:type, og:image, and og:url are required by the protocol. |
Current complete X requirements were not confirmed by the X developer documentation reviewed for this article. |
| Can values be shared? | Provides the general metadata baseline. | Yoast documents Open Graph fallback for many X values in its own implementation; other CMSs and crawlers may behave differently. |
Do you need both sets of tags?
For a typical page, provide the required OG properties and add twitter:card if you want to specify an X card layout. You do not need to duplicate every shared title, description, and image into separate Twitter fields when those values should be the same and your publishing system documents that it uses OG fallback.
#1 Best Overall
Yoast’s functional specification says its X output falls back to Open Graph for many tags. In that Yoast implementation, configuring different X text can result in separate X title or description tags. That behavior describes Yoast, not a universal rule for every plugin, CMS, or crawler.
- Use OG values for the page’s general preview identity and content.
- Set
twitter:cardwhen you want to specify the X card type. - Add
twitter:title,twitter:description, ortwitter:imagewhen you intentionally want an X-specific value. - Check your rendered page source to see what your theme, plugin, and custom template actually emit.
Example: a shared OG baseline with an X card type
Place the metadata in the document’s <head>. Replace the example title, URL, and image with values for the page being shared.
<html prefix="og: https://ogp.me/ns#">
<head>
<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/share-image.jpg" />
<meta property="og:description" content="A concise page summary." />
<meta property="og:image:alt" content="Description of the preview image" />
<meta name="twitter:card" content="summary_large_image" />
</head>The summary_large_image value is an illustrative layout choice; it does not guarantee how X or another platform will render the page. If the X copy should differ, add the matching tag with the intended content:
<meta name="twitter:title" content="A title specifically for X" />
<meta name="twitter:description" content="A description specifically for X." />
<meta name="twitter:image" content="https://example.com/x-share-image.jpg" />These X-specific tags are optional custom values in this implementation guidance; the available X documentation did not establish a complete current list of required fields. The OG protocol supports image structured properties for secure URL, MIME type, width, height, and alt text. It says that a page specifying og:image should also specify og:image:alt. It permits width and height metadata but does not, by itself, establish a universal image-size limit for every destination platform.
Prevent conflicting metadata
A page can receive tags from its theme, SEO plugin, and custom template at the same time. Inspect the final rendered HTML, not just the settings screen, and avoid multiple conflicting values. The Open Graph Protocol says that when a property is repeated, the first occurrence from top to bottom takes preference. This makes tag order relevant when duplicate OG values exist.
- Open the page’s rendered HTML source and locate the metadata in
<head>. - Check for repeated
og:title,og:description,og:image, andog:urltags. - Remove unintended duplicates or correct their order and values at the source that generates them.
- Confirm that
og:urlidentifies the intended canonical page and thatog:imagepoints to the intended preview image.
How to diagnose a wrong or missing preview
A correct tag set does not prove that every platform will fetch or render it identically. Test the final link on the destination platform; cached previews can make a corrected page appear unchanged for a time. The sources reviewed for this guide do not establish a universal cache expiry or a single image-size requirement, so avoid assuming either.
- Preview uses the wrong title or image: inspect the final HTML for duplicate OG properties, check their order, and verify the URL and image values.
- X should show different copy: configure explicit X-specific values rather than relying on a plugin’s fallback behavior.
- Tags appear correct but the preview is stale: allow for platform caching and test the link in the actual destination; no universal refresh interval is established here.
- Image does not appear as expected: verify the image URL and test the rendered result on the destination platform. Do not rely on a guessed universal size limit.
Or skip the browser setup
If you need a screenshot of the page while checking its rendered state, you can use ScreenshotNeo, a website screenshot API and MCP server for developers. One GET request can return an image or PDF; see the ScreenshotNeo API documentation for options and setup.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp- Cookie and consent banners are accepted like a visitor and removed, along with known newsletter popups and chat widgets; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free: 1,000 screenshots a month, no card required.
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.
