Social sharing guide
Open Graph images: check shared links before they go live
Open Graph images determine how your page appears when shared. This guide covers practical sizes, tags, design checks, cache clearing, and a publishing checklist to ensure effective previews.
Quick answer
Pick one Open Graph image and check the shared link
For most pages, begin with a 1200 x 630 image, keep key text and logos away from edges, use absolute HTTPS URLs, and test the final URL with platform debug tools. This straightforward process catches most preview issues.
Role of the link card
Consider the Open Graph image as a page asset
An Open Graph image isn’t merely decorative; it represents the page when crawlers generate link cards for social media, chat apps, and collaboration tools. It should correspond with the title, description, visible content, and structured data image.
It encourages clicks
The image, title, and description create the initial impression before visitors arrive at your page.
It must correspond with the content
An effective preview image aligns with the page title, visible subject, and key user benefit rather than a generic brand logo.
It should be included with SEO data
Open Graph images, Twitter card images, canonical URLs, and JSON-LD images should all represent the same page.
A naming convention is required
A clear naming convention and update policy help prevent stale caches and outdated campaign images from reappearing.
Image size plan
Select dimensions that display well in actual previews
Platforms crop and cache previews differently. A 1200 x 630 image is a solid default for Open Graph, but it’s safer to design with a centred safe zone and test the final URL on key platforms.
| Platform or usage | Practical image approach | What to watch | Pre-publish check |
|---|---|---|---|
| General Open Graph setup | Use 1200 x 630 as the standard size for a large share image. | Small images may appear blurry or as reduced thumbnails. | Preview the final URL using platform debugging tools before sharing. |
| Facebook and LinkedIn previews | Use the same 1.91:1 style image unless a platform-specific asset is required. | Edges may be cropped variably across different feeds and devices. | Keep key text and logos within the central safe zone. |
| X large summary card | Use summary_large_image and centre the visual; X supports a wide large-card format. | Small text and edge details may vanish when the card is cropped or resized. | Set twitter:image and verify with X card tools. |
| Chat applications and collaboration tools | Keep file size small and design simple, as previews often appear in compact spaces. | Cluttered screenshots, lengthy headlines, and poor contrast quickly become illegible. | Paste the final link into the tools your audience uses. |
Place the main message centrally; edges are risky as feed cards, chat previews, and mobile layouts may crop differently.
HTML
Set the necessary tags for crawlers before the page goes live
Open Graph tags belong in the HTML head. Use absolute image URLs, specify width and height, include helpful alt text, and ensure the canonical URL matches the shared page.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.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="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag name | Why it matters | Typical error |
|---|---|---|
| og:image | Directs crawlers to the image representing the page. | Using a relative path or an image blocked by login, redirects, or robots.txt rules. |
| og:image:width / og:image:height | Informs platforms of the image size before they retrieve and analyse the file. | Omitting dimensions forces each crawler to guess how to display the preview. |
| og:image:alt | Provides a description of the preview image for accessibility and additional crawler context. | Repeating the page title rather than describing the visible image content. |
| og:url | Links the preview to the canonical page URL intended for sharing. | Using a tracking, staging, or incorrect regional URL as the permanent page identity. |
| twitter:card / twitter:image | Provides X with a clear large-card directive and optional platform-specific image. | Assuming X will render Open Graph images identically to other platforms is incorrect. |
If using Blazor, the Blazor SEO Metadata Component consolidates Open Graph tags, Twitter card tags, canonical URLs, and JSON-LD metadata.
Design guidelines
Design primarily for small feed cards
Most users see a compressed card in feeds or messages, not the full image. Simple designs with one clear subject, strong contrast, and no tiny text perform best.
Workflow
A straightforward process for each key page
- 1
Craft the preview message
Determine the card’s message at a glance: topic, benefit, product, or article focus.
- 2
Design the image using the intended aspect ratio
Use 1200 x 630 for the default image, keeping key content centred.
- 3
Optimise the file
Use JPG or PNG for social images, keep file size moderate, and avoid visible compression artefacts.
- 4
Set metadata and structured data
Update Open Graph tags, Twitter card tags, canonical URL, and JSON-LD image references simultaneously.
- 5
Publish using a stable filename
Choose a meaningful filename and update it when replacing the image to avoid platform cache issues.
- 6
Check the final URL
Use debugger tools on the public page URL to verify the actual preview, not just the source code.
Tooltip
Use PixelPress once the preview size is determined
When final filenames are planned, PixelPress assists with local WebP or AVIF conversion. Keep originals intact, review output, then update the Open Graph URL.
Troubleshooting
Clear platform caches before relying on the preview
Social platforms cache preview data. Replacing an image without changing its URL may cause old previews to persist. Use official tools and, if necessary, update the filename or add a versioned URL.
Pre-publish checklist
Open Graph image checks before publishing
Use this checklist before publishing articles, product pages, tools, or landing pages to catch preview issues that are costly to fix after sharing.
FAQs
What is the ideal size for an Open Graph image?
Use 1200 x 630 as a practical default for most Open Graph previews. This size suits high-density screens and approximates the common 1.91:1 aspect ratio. Always test the final URL as platforms may crop or cache previews differently.
Is it advisable to use the same Open Graph image across all pages?
You can, but it’s generally less effective. A generic brand image is better than none, but key articles, product pages, and tools should have a preview image tailored to the specific page.
Why does my old Open Graph image continue to appear?
The most frequent cause is platform caching. Use Facebook Sharing Debugger, LinkedIn Post Inspector, or X card tools to refresh the URL. If the old image persists, publish a new image with a different filename or versioned URL.
What distinguishes og:image from twitter:image?
og:image is the standard Open Graph image for many platforms. twitter:image is specific to X cards; if provided, X uses it instead of falling back to og:image.
Should the JSON-LD image correspond with the Open Graph image?
It need not be identical but must convey the same page story. Search metadata, Open Graph tags, Twitter cards, and JSON-LD should not reference unrelated or outdated images.
What role does PixelPress play in Open Graph images?
PixelPress is used after deciding image size, filename, and purpose. It assists with local file conversion while preserving originals. Metadata and preview testing remain necessary.