Social preview guide
Open Graph images: test shared links before publishing
Open Graph images decide how your page looks when someone shares a link. This guide shows the practical size, tags, design checks, cache fixes, and publishing checklist that keep previews useful.
Quick answer
Choose one Open Graph image and test the link before sharing
For most pages, start with a 1200 x 630 image, keep important text and logos away from the edges, use absolute HTTPS image URLs, and test the final URL in the platform debug tools. That simple workflow catches most broken previews.
Preview role
Treat the Open Graph image as a page asset
An Open Graph image is not decoration. It is the image that represents the page when crawlers build a link card for social feeds, chat apps, and work tools. It should match the title, description, visible page topic, and structured data image.
It sells the click
The image, title, and description form the first impression before the visitor reaches your page.
It should match the content
A good preview image matches the page title, visible topic, and main user promise instead of using a generic brand graphic.
It belongs with SEO data
Open Graph images, Twitter card images, canonical URLs, and JSON-LD images should describe the same page.
It needs a naming rule
A clear filename and update rule prevent stale caches and old campaign images from returning later.
Size plan
Choose dimensions that survive real previews
Different platforms crop and cache previews in slightly different ways. A 1200 x 630 file is a strong default for Open Graph previews, but the safer rule is to design with a centered safe area and test the final URL on the platforms that matter for the page.
| Platform or use | Practical image plan | Watch for | Publishing check |
|---|---|---|---|
| General Open Graph | Use 1200 x 630 as the practical default for a large share image. | Small images can look soft or be shown as smaller thumbnails. | Preview the final URL in the platform debugger before sharing. |
| Facebook and LinkedIn | Use the same 1.91:1 style image unless the page needs a platform-specific asset. | Edges can crop differently across feed layouts and devices. | Keep important text and logos inside the center safe area. |
| X large card | Use summary_large_image and keep the visual centered; X supports a wide large-card image. | Tiny text and edge details can disappear when the card is cropped or resized. | Set twitter:image and test with the X card tools. |
| Chat apps and work tools | Keep the file small and the design simple because previews often appear in compact panes. | Busy screenshots, long headlines, and low contrast become unreadable quickly. | Paste the final link into the tools your audience actually uses. |
Keep the main message inside the center of the image. Edges are the risky area because feed cards, chat previews, and mobile layouts can crop differently.
HTML
Set the tags crawlers need before the page ships
Open Graph tags belong in the HTML head. Use absolute image URLs, declare width and height, add useful alt text, and keep the canonical URL consistent with the page users will actually share.
<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 | Why it matters | Common mistake |
|---|---|---|
| og:image | Points crawlers to the image that should represent the page. | Using a relative path or an image blocked by login, redirects, or robots rules. |
| og:image:width / og:image:height | Tells platforms the image size before they fetch and inspect the file. | Leaving dimensions out and letting each crawler guess how to render the preview. |
| og:image:alt | Describes the preview image for accessibility and gives crawlers more context. | Repeating the page title instead of describing what is visible in the image. |
| og:url | Connects the preview to the canonical page URL that should be shared. | Using a tracking, staging, or culture-wrong URL as the permanent page identity. |
| twitter:card / twitter:image | Gives X an explicit large-card instruction and optional platform-specific image. | Assuming X will always render the Open Graph image exactly like other platforms. |
If you use Blazor, the Blazor SEO Metadata Component keeps Open Graph tags, Twitter card tags, canonical URLs, and JSON-LD metadata together.
Design rules
Design for a small feed card first
Most people will not see the full image. They see a compressed card in a feed, message, or preview pane. Simple layouts win: one clear subject, readable contrast, and no tiny text that only works in the design file.
Workflow
A simple workflow for every important page
- 1
Write the preview promise
Decide what the card should say in one glance: topic, benefit, product, or article angle.
- 2
Create the image at the planned ratio
Use 1200 x 630 for the default file and keep the important content centered.
- 3
Optimize the file
Use JPG or PNG for the social image, keep the file reasonably small, and avoid visible compression damage.
- 4
Set metadata and schema
Update Open Graph tags, Twitter card tags, canonical URL, and JSON-LD image references together.
- 5
Publish with a stable filename
Use a meaningful filename, and change it when replacing the image if platform caches are likely to keep the old version.
- 6
Test the final URL
Run the public page URL through the debugger tools and check the real preview, not just the source code.
Tool tip
Use PixelPress after the preview size is decided
When the image plan names the final files, PixelPress can help with local WebP or AVIF conversion. Keep originals untouched, review output, then update the Open Graph URL.
Debugging
Refresh platform caches before you trust the preview
Social platforms cache preview data. If you replace an image but keep the same URL, a platform can continue showing the old preview. Use the official tools and, when needed, change the image filename or add a versioned URL.
Checklist
Open Graph image checklist before publishing
Use this list before an article, product page, tool page, or landing page goes live. It catches the preview problems that are expensive to notice after the link has already been shared.
FAQ
What size should an Open Graph image be?
Use 1200 x 630 as a practical default for most Open Graph previews. It is large enough for high-density screens and close to the common 1.91:1 preview shape. Still test the final URL because each platform can crop or cache previews differently.
Can I use the same Open Graph image for every page?
You can, but it is usually weaker. A generic brand image is better than no image, but important articles, product pages, and tools should have a preview image that matches the specific page.
Why is my old Open Graph image still showing?
The most common reason is platform caching. Use the Facebook Sharing Debugger, LinkedIn Post Inspector, or X card tools to refresh the URL. If the old file keeps returning, publish the new image with a new filename or versioned URL.
What is the difference between og:image and twitter:image?
og:image is the standard Open Graph image used by many platforms. twitter:image is specific to X cards. If you provide twitter:image, X can use that image instead of falling back to og:image.
Should the JSON-LD image match the Open Graph image?
It does not have to be identical, but it should tell the same page story. Search metadata, Open Graph tags, Twitter cards, and JSON-LD should not point to unrelated or stale images.
Where does PixelPress fit into Open Graph images?
PixelPress fits after you decide the image size, filename, and role. It can help convert the final files locally while keeping originals untouched. The page still needs correct metadata and preview testing afterward.