Why Social Cards Do Not Always Match Your Article
Open Graph metadata describes a page for software that creates rich link previews. The original protocol defines four core properties: og:title, og:type, og:image, and og:url. The commonly used og:description is optional under the protocol but valuable for a readable share summary. These properties belong in the document’s <head>, not in its visible article body.
Different platforms can crop images, shorten text, ignore some fields, or reuse previously fetched metadata. A preview checker is therefore an inspection aid, not a guarantee of an identical card on Facebook, LinkedIn, X, Slack, or another service. Validate important links with each platform’s debugger.
Which Open Graph Tags Matter Most?
Additional image properties, including og:image:width, og:image:height, and og:image:type, can clarify the asset’s dimensions and format. Their presence does not repair a broken image URL. Check that the actual file loads without authentication, redirects to an appropriate resource, and returns a compatible image response.
A Worked Example of Social Metadata in HTML
Imagine a fictional guide at https://example.com/guides/product-photos/. The markup below is an illustration, not output verified from the SEOToolCheckers plugin. The URLs are placeholders for the example, not destinations to publish unchanged. In an actual website, insert these tags once in the HTML head using your SEO or theme configuration.
<meta property="og:type" content="article">
<meta property="og:title" content="Better Product Photos for Online Stores">
<meta property="og:description" content="Prepare clear product images for website listings and social shares.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/media/product-photos-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Camera and product arranged on a studio table">
<meta name="twitter:card" content="summary_large_image">
In this example, the preview picture is a 1200 × 630-pixel landscape asset, close to the familiar 1.91:1 social-card shape. That size is a useful editorial default, not a universal minimum or a promise that every platform will show the entire image. Keep essential text and objects away from the edges so different crops remain readable.
How X Cards Differ From General Open Graph Previews
X supports its own card metadata. A twitter:card value such as summary requests a compact layout, while summary_large_image requests a larger picture. X may use suitable Open Graph title, description, and image values as fallbacks when equivalent X-specific fields are missing. However, platform behavior and current display rules may change.
The practical lesson is to inspect the requested card type as well as the image. A correctly configured og:image does not by itself guarantee a large-image card. If a service shows a small thumbnail, distinguish between a legitimate card-type choice and a problem with dimensions or image accessibility.
Choosing a Share Image That Survives Cropping
Make the main subject unmistakable at small sizes. A landscape social image around 1200 × 630 pixels is a practical starting point for many link cards. Test real previews rather than assuming all services share identical ratios. Avoid putting long sentences or critical logo details along the extreme edges, where mobile card crops can remove them.
An image’s pixel dimensions are not its file size. A 1200 × 630 image may still be unnecessarily heavy or difficult for a crawler to retrieve. Inspect the asset with the Image File Inspector, adjust framing with the Image Resizer and Cropper, and consider the Image Format Converter when a different delivery format is appropriate.
Use a relevant, owned or properly licensed image. For accessibility, add an image description where the publishing platform supports it. If the card uses og:image:alt, describe the picture rather than repeating the article title.
Diagnosing a Missing, Incorrect, or Old Share Preview
For Facebook, Meta’s Sharing Debugger can reveal metadata found during its crawl and can request a new scrape. LinkedIn’s Post Inspector can refresh the information used for new shares; LinkedIn notes that existing posts may retain their previous previews. These platform tools are distinct from a third-party visual preview. The SEOToolCheckers tool should not be assumed to clear either platform’s cache.
WordPress and Rank Math Social Preview Settings
On WordPress, Rank Math can generate Open Graph and X card tags from each post’s SEO and social settings. Open the post editor, review its social preview controls, and specify a suitable title, description, and image when the default values do not fit. A global fallback image can help for posts without dedicated artwork, but important pages usually benefit from their own representative image.
Do not paste a second set of Open Graph tags into the WordPress article body when Rank Math already generates them. Conflicting values from a theme, another SEO plugin, or custom code can make a social crawler choose an unintended title or image. Inspect the final rendered source instead of relying only on what the editor fields contain.
Social metadata is related to SEO, but it serves a different presentation problem. A Google search result title and a Facebook share headline are not interchangeable interfaces. Google may consider og:title among several sources when creating a search title link, yet editing social tags does not guarantee a particular Google snippet or a ranking improvement. For broader metadata review, use the Meta Tags Analyzer.
A Reliable Pre-Publication Social Sharing Checklist
- Confirm the page is published and publicly accessible at its intended URL.
- Check that the social headline and description represent the actual destination accurately.
- Inspect the image URL, format, dimensions, loading response, and crop.
- Look for duplicate or conflicting Open Graph metadata in the page source.
- Confirm that the final redirect destination and
og:url refer to the right page.
- Compare available mockups, then verify important shares with platform-specific tools.
- If you recently changed metadata, allow for caching and request a refresh where supported.
Repeat these checks across important campaign URLs; page templates and redirects can produce different metadata.
Common Questions About Open Graph Previews
Does an Open Graph preview tool publish or change my metadata?
Previewing or analyzing tags is separate from updating the live webpage. Only a tool with verified editing or publishing functionality can make such changes. Treat this interface as a checker unless its actual controls establish otherwise.
Do Open Graph tags directly improve Google rankings?
They describe pages for social sharing. Google can use og:title as one signal for its displayed title link, but that is not a promise of higher rankings or automatic AI-search visibility.
Why is Facebook still showing the previous image?
Facebook may be using cached metadata or a cached image. Verify that the new image is publicly available, clear website caches as needed, and use Meta’s Sharing Debugger to request an updated scrape.
Can Facebook, LinkedIn, and X display different images for one URL?
Yes. Platforms use their own preview layouts, supported tags, cropping behavior, and caches. Some also support network-specific metadata. Compare important destinations individually.
Should my og:url include tracking parameters?
Usually the stable, preferred public URL is the safer identity for a share object. Keep the value consistent with the intended canonical page where appropriate; do not accidentally identify a tracking variant as a separate article.
