Recommended Free Tools
A social card is the preview that a social network or messaging service may display when someone shares a webpage link. The page’s HTML metadata supplies clues such as the title, description, image and canonical URL; the platform’s crawler reads that information and decides how to render the preview. A social card is therefore usually not a separate file you upload to each service—it is a platform-generated presentation of a webpage.
What a social card is—and what it is not
When you paste a webpage URL into a post or message, the receiving service may show a preview alongside the link. Depending on the service and context, that preview can contain an image, a headline, a short description, or some combination of them. That preview is commonly called a social card, link preview, or link embed.
The webpage publisher provides metadata that describes the page. A crawler operated by the destination platform can fetch the URL and read metadata from the HTML, then use it to construct a preview. The platform controls the final appearance, so supplying metadata does not guarantee that every service will show the same fields—or show a card at all.
The Open Graph Protocol describes its purpose this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.” In practical terms, it gives publishers a widely used set of HTML properties for describing a page to services that may display it when shared.
#1 Best Overall
How a social card works
- The page declares its preferred information. The site places metadata in the document’s HTML
<head>. These values can describe the page title, summary, representative image, and canonical URL. - A platform fetches the shared URL. When a person shares a link, the destination service may request the page and inspect the HTML it can access.
- The platform builds a preview. The service interprets the metadata and may show a card. Different platforms can interpret and display available values differently.
- The preview may be reused or change later. A service may not fetch and display the page exactly as expected every time. For a particular platform’s current cache behavior, crawler rules, or rendering constraints, check that platform’s current documentation or inspection facility rather than assuming universal rules.
This process explains why correct metadata is necessary but not a guarantee of identical results everywhere: the publisher describes the page, while the destination platform determines what it will display.
Which metadata fields matter?
Open Graph is the broadly used vocabulary for describing a webpage preview. Its four basic properties are og:title, og:type, og:image, and og:url. The protocol also identifies og:description as an optional, generally recommended property.
| Field | What it describes | Practical guidance |
|---|---|---|
og:title |
The page’s title for the social object. | Use a clear, page-specific title that accurately represents the destination. |
og:type |
The type of object being described. | Set it as appropriate for the page; do not treat the field as a substitute for the page title or description. |
og:image |
A representative image URL. | Point to the intended image asset and ensure the URL is the one you want a platform to fetch. |
og:url |
The canonical URL used as the object’s permanent identifier. | Use the canonical address for the page, rather than an unrelated or transient URL. |
og:description |
A description of the page. | Although optional in the protocol, a concise, useful page-specific summary helps describe what the link leads to. |
X has its own card metadata names, including twitter:card, twitter:title, twitter:description, and twitter:image. Open Graph and X fields are related in purpose, but they are not identical field names. A publisher can include both sets of metadata in the same page. Do not assume that every destination service will use a particular field or a specific fallback; inspect the actual destination’s rendering.
Adding social-card metadata to a page
Place the metadata in the page’s <head>, and generate values that describe that specific page. Here is a generic HTML example; replace the sample text and URLs with the real page and image URLs before deployment.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches<head>
<title>A Practical Guide to Example Topic</title>
<meta property="og:title" content="A Practical Guide to Example Topic">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/example-topic.jpg">
<meta property="og:url" content="https://example.com/guides/example-topic">
<meta property="og:description" content="A concise summary of this guide.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A Practical Guide to Example Topic">
<meta name="twitter:description" content="A concise summary of this guide.">
<meta name="twitter:image" content="https://example.com/images/example-topic.jpg">
</head>The example uses an article type and a particular X card value as sample markup, not as a claim that this is the correct configuration for every site or that each platform will render it in a particular way. Choose values appropriate to your page and the platform you intend to use, then verify the deployed result.
Keep values specific to each page
A site-wide default title or image can be useful as a fallback in a publishing system, but every page that should have its own preview needs suitable page-specific metadata. Otherwise, separate links may appear to describe the same content. Review the rendered HTML for individual URLs rather than checking only a template or an editor screen.
Use the deployed URL and asset
The metadata matters only if it is present in the HTML a crawler can fetch. Confirm that the deployed page—not merely a local preview or CMS configuration—contains the expected tags, and that the image value points to the intended asset. A correct-looking setting in a site editor does not by itself establish what the published HTML exposes.
How to inspect and troubleshoot a social card
When a preview is missing, incorrect, or stale, work from the actual shared URL and narrow down where the mismatch occurs: metadata generation, deployed HTML, crawler access, or the destination service’s interpretation.
Best Value
- Inspect the served HTML. Open the deployed page’s source and search its
<head>for the expected Open Graph and X tags. Check the title, description, canonical URL, and image URL—not just whether a tag exists. - Check for page-specific values. Make sure the page has its own intended metadata and is not inadvertently using a generic site-wide value.
- Check the image URL. Confirm that the metadata points to the intended image asset and that the URL is correct. Do not infer that an image will be accepted or rendered solely because the tag is present.
- Inspect the deployed page on the target service. Use the destination platform’s current preview or inspection facility, if available. Each platform controls its own rendering and any facility it offers.
- Compare what the crawler can see with what you expected. If the HTML source is right but the service’s preview is not, check the platform’s current guidance for crawler access, cache handling, and supported fields. Those behaviors are platform-specific.
| Symptom | What to check | Next step |
|---|---|---|
| No preview appears | Whether the deployed HTML contains the intended tags and whether the target service can fetch the shared page. | Inspect the page source, then use the destination service’s current inspection facility or documentation, if available. |
| The preview has the wrong title or summary | Whether the served page has page-specific values or is exposing a template default. | Correct the values in the generated HTML and inspect the deployed URL again. |
| The wrong image appears—or no image appears | The exact og:image or twitter:image value in the served source. |
Fix the image URL if needed, then verify the result on the target platform. |
| The preview looks old after a change | Whether the platform is showing a previously fetched version and what its current cache guidance says. | Follow that platform’s current refresh or inspection process, if provided; do not assume a universal cache duration. |
| Different services show different results | Which fields each service reads and how it interprets the available metadata. | Test each intended destination separately. A single page’s metadata does not force uniform presentation. |
Exact image constraints, cache windows, crawler access rules, and fallback behavior are not universal values established here. Avoid building a diagnosis around an assumed dimension, delay, or tag precedence; consult the destination service’s current documentation for the service and feature you are using.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
For a quick look at how a deployed page appears, you can request a screenshot rather than configuring a local browser capture. ScreenshotNeo is a website screenshot API and MCP server for developers. Its service can remove known cookie or consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server gives AI agents and MCP clients tools to take screenshots, get page information, and capture PDFs. This can help inspect a page visually, but it does not replace checking the HTML metadata or the destination platform’s own rendering.
One GET request can return a screenshot. See the ScreenshotNeo API documentation for request options and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo offers 1,000 screenshots per month on its free plan with no card required; paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
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 →What to remember when publishing a social card
- A social card is a destination platform’s possible preview of a shared webpage, not necessarily a separately uploaded image.
- Open Graph offers common fields for page title, type, image, URL, and description; X metadata uses its own field names.
- Put accurate, page-specific metadata in the HTML head and inspect the HTML that is actually deployed.
- Check the preview on each destination service you care about: metadata informs the preview, but the platform controls the result.
Frequently Asked Questions
Is a social card the same thing as an Open Graph image?
No. The card is the link preview a platform may render. An Open Graph image is one metadata value that points to an image a platform may use in that preview.
Can I control exactly how the same link appears everywhere?
No. You can provide metadata, but each destination service interprets it and controls its own presentation. Verify the deployed link separately on the services where you plan to share it.
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.
