Use a 1200 × 630 pixel raster image as your starting canvas, keep the title and logo inside a generous central safe area, and publish Open Graph tags in the page’s initial HTML <head>. Then test the live URL in the preview tool for each social network you care about. This combination is broadly compatible, but it is not a universal guarantee: platforms crop, resize, cache and limit images differently.
The Open Graph protocol requires og:title, og:type, og:image and og:url. Add a concise description, image dimensions, MIME type, secure URL and alternative text where they help. The protocol’s goal is deliberately simple—“Developer simplicity is a key goal of the Open Graph protocol”—so a small, correct head block is better than a complicated client-side implementation.
Start with the right canvas
A 1200 × 630 pixel image has an aspect ratio of about 1.91:1 and is a practical cross-platform baseline. It gives many preview cards enough resolution to display a readable headline while preserving a familiar landscape shape. Treat that size as a starting point, not a promise that every destination will use the complete canvas.
LinkedIn’s help documentation specifies a minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio and lists a 5 MB maximum. It also says images narrower than 401 pixels are displayed as thumbnails. Those are LinkedIn requirements as documented on its help page, not rules for every network; the page reports an update roughly two years before September 2026, so verify the live policy before you ship a compliance-sensitive workflow. See LinkedIn’s website-sharing requirements.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Use case | Working specification | Qualification |
|---|---|---|
| General starting point | 1200 × 630 px, approximately 1.91:1 | Practical baseline; destinations can crop or resize it. |
| At least 1200 × 627 px; 1.91:1 recommended; 5 MB maximum | Requirements from LinkedIn’s help page; recheck before relying on them as permanent policy. | |
| Other destinations | Use the baseline, then check each destination’s current documentation | Limits, card shapes, accepted formats and cache behavior vary. |
Design the image for the page being shared
Give the card one clear subject
Show the page’s main idea immediately: a product interface, a person, a diagram or a single visual metaphor. A short headline can reinforce the subject, but the image should still make sense when the card is small or the text is not read.
Use a central safe area
Keep the important title, logo, face and key objects well away from all four edges. Preview cards do not share one crop rule, and a network may remove more from the sides or top than your design preview suggests. A centered composition survives those differences better than edge-to-edge typography. The OG Image Design size guide recommends this safe-area approach and is a secondary design source, not a platform specification.
Make text legible at card size
- Use one short promise or topic rather than a paragraph.
- Choose strong contrast between type and background.
- Prefer a heavy, simple typeface and avoid thin strokes.
- Check the design at a small preview size before publishing.
- Do not put essential information in a corner where a crop or overlay can hide it.
Choose a broadly readable file format
For flat graphics, diagrams and text-heavy cards, PNG is practical. For photographic imagery, JPEG is usually smaller. This is design guidance from the secondary OG Image Design guide, not a formal Open Graph rule. Do not assume that SVG or WebP will be accepted or rendered identically by every crawler; format support varies.
Add Open Graph metadata to the initial HTML
Put the tags in the server-rendered or statically generated <head> of the page that will be shared. Use absolute, publicly reachable URLs for both the page and image. A crawler that does not execute your client-side JavaScript may never see tags inserted after load.
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>
<meta property='og:title' content='A clear 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/images/page-share.jpg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>
<meta property='og:image:alt' content='Short description of the image'>
<meta property='og:description' content='A concise description of this page.'>
</head>The four basic properties and the structured image properties are defined by the Open Graph protocol specification. og:description gives a platform a useful summary when it displays one. og:image:alt should describe what the image depicts, rather than repeat the caption or page title.
Keep each image’s properties together
When you provide width, height, MIME type or alternative text, place those structured properties directly after their corresponding og:image root tag. If you declare several og:image tags, the first image is preferred when a conflict exists. Put your intended default first, then group the properties for that image before declaring another image.
Rank #2
<meta property='og:image' content='https://example.com/images/default.jpg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>
<meta property='og:image:type' content='image/jpeg'>
<meta property='og:image:alt' content='A dashboard showing monthly revenue'>
<meta property='og:image' content='https://example.com/images/alternate.jpg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>A repeatable creation and publishing workflow
- Identify the shared page. Write down its promise and the one visual that explains it. Do not design a generic site-wide banner when a page-specific subject would be clearer.
- Create a 1200 × 630 document. Add guides that mark a central margin. Keep the headline, logo and subject inside those guides.
- Compose for small previews. Reduce the design until it resembles a social card and check that the title, contrast and subject remain obvious.
- Export a raster file. Use PNG for flat, text-led art or JPEG for photographs. Keep the file within the destination’s limit; LinkedIn’s documented maximum is 5 MB.
- Upload it at a stable HTTPS URL. Confirm that the URL returns the image directly, does not require a login, and is not blocked by a hotlink or access policy.
- Add the metadata block. Place the tags in the initial HTML head, change the page-specific title, description, URL and image, and make sure the URLs are fully qualified.
- Publish and inspect source. View the live page source, not only a browser inspector after scripts run. Confirm that the intended values are present exactly once or in the deliberate order for multiple images.
- Run destination previews. Submit the published URL to the preview or debugger supplied by each network where the page will be shared. Check the crop, title, description, image and any warning.
Platform differences you should plan for
The 1200 × 630 baseline is useful because it is close to LinkedIn’s recommended ratio, but no single canvas guarantees identical rendering everywhere. Compare the destination’s current dimensions, file-size limit, format support, crop and cache-refresh process before treating a number as a contract. Secondary cross-platform figures in the OG Image Design guide can help with planning, but platform-owned documentation should win when the two disagree.
For LinkedIn specifically, stay at or above 1200 × 627 pixels and below 5 MB according to its help page. If you publish a much narrower image, LinkedIn says it may display as a thumbnail. Other platforms may select a different crop or ignore a field, so test the actual networks used by your audience rather than assuming LinkedIn behavior applies to them.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Test the live URL, not a local mockup
Open Graph metadata describes a URL, so testing a design file or localhost page cannot prove what a crawler will receive. After deployment:
- Fetch the page source and verify the tags are in the first HTML response.
- Open the image URL in a private browser window to confirm it is reachable without cookies or authentication.
- Check that the image’s content type and dimensions match the values you declared.
- Use each destination’s native sharing preview or debugger and record the displayed crop.
A third-party preview service reports that networks cache metadata and that some crawlers do not execute JavaScript. That is practical platform behavior, not a guarantee in the Open Graph specification. If you change an image and still see the old one, use the relevant network’s re-scrape or refresh control, then test again. See OpenGraph.dev’s preview guidance for this cache and crawler behavior.
Or skip the browser setup
If you need a rendered capture of your own page while checking the published design, ScreenshotNeo is a website screenshot API and MCP server. It can capture the live URL after you have placed the Open Graph tags; it does not replace a destination’s social-card debugger, which is still the authority for that network’s crop and metadata interpretation.
One GET request returns a PNG, JPEG, WebP or PDF. The API accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and whether it was billed.
Free tools Windows power users keep installed
One-click scans. No signup required.
Read the ScreenshotNeo API documentation for all options. These examples use the requested target URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server for Claude, Cursor and other MCP clients, so an AI agent can call take_screenshot, get_page_info or capture_pdf. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Sign up free for ScreenshotNeo.
Troubleshooting common failures
The preview shows an old image
The destination may be serving cached metadata or an earlier image fetch. Confirm the current source and image URL first, then use that platform’s re-scrape or debugger control. Changing the filename or URL can help distinguish a new asset, but it does not control every platform’s cache.
No image appears
Check that og:image is in the initial HTML, uses an absolute HTTPS URL and returns the file without authentication, redirects that the crawler cannot follow, or access rules that block it. Confirm that the image URL is not a page that requires JavaScript to render the asset.
The wrong image is selected
If several og:image values exist, the first is preferred when there is a conflict. Move the intended default and its structured properties to the first group, or remove obsolete declarations.
The title or description is missing
Inspect the server response for spelling, duplicate tags and malformed attribute values. Client-side insertion may be invisible to crawlers that do not execute JavaScript. Keep the title and description concise enough for the destination’s card layout.
The card is cropped awkwardly
Rework the safe area: move essential text and logos toward the center, reduce edge decorations and test the revised live URL in the destination preview. Do not infer that one network’s crop is the crop used elsewhere.
Rank #4
The image is rejected for size or format
Check the destination’s current limit. For LinkedIn, the documented maximum is 5 MB and the minimum dimensions are 1200 × 627 pixels. Re-export a smaller JPEG for a photo or an optimized PNG for flat artwork, then test the URL again.
Performance, reliability and maintenance
Keep the page response deterministic
Generate the tags during server-side rendering or build time. A stable first response reduces the chance that a crawler sees an incomplete head. Keep image URLs stable when possible, but publish a new URL when you intentionally need to separate a replacement asset from a cached one.
Maintain an image checklist
- Canvas is 1200 × 630 pixels unless a destination-specific requirement says otherwise.
- Essential content sits inside the central safe area.
- File format and size suit the destination.
og:title,og:type,og:imageandog:urlare present.- The image URL is absolute, HTTPS and publicly reachable.
- Width, height, MIME type and
og:image:altmatch the actual file when supplied. - The live URL has been checked in every relevant platform preview.
Review when platforms change
Platform limits and card designs can change. The Open Graph specification at ogp.me defines the metadata model, while each destination controls its own crawler and presentation. Recheck current platform documentation before baking a limit into an automated image pipeline.
Frequently Asked Questions
Should the words in the image exactly match the HTML title?
No. They should communicate the same page promise, but the image can use a shorter, more readable phrase while the HTML title supplies the precise page title.
Can I use one site-wide Open Graph image?
You can, but page-specific imagery usually gives a clearer preview. Use a shared fallback for pages without a custom asset and override it where the subject benefits from its own image.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Do Open Graph tags control the image shown in a normal browser tab?
No. They describe how a URL may appear when shared or referenced by a crawler; they do not replace the page title, favicon or other browser-tab metadata.
The Bottom Line
Build a 1200 × 630 raster card, keep vital content centered, publish complete Open Graph tags in the initial HTML, and validate the live URL on every destination that matters. Platform-specific limits and caches make real preview testing part of the implementation, not an optional final polish.
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.
