How to Create Effective Open Graph Images for Your Website

Use a 1200 × 630 pixel raster image as your practical starting point, keep the title and logo inside a generous central safe area, and publish Open Graph tags in the page’s initial HTML <head>. Then inspect the live URL with each social network’s preview tool. That workflow is broadly compatible, but it is not a universal guarantee: platforms crop, cache and limit images differently.

Start with a practical canvas

A 1200 × 630 pixel image (about a 1.91:1 ratio) is a sensible baseline for most website share cards. It gives social crawlers enough resolution while matching the proportions used by many previews. Treat it as a cross-platform starting point, not as a rule that every network follows.

#	Preview	Product	Price
1		HTML and CSS: Design and Build Websites	$14.94	Buy on Amazon
2		Building Websites All-in-One For Dummies (For Dummies Series)	$19.08	Buy on Amazon
3		HTML & CSS Web Design for Beginners: A Comprehensive Step-by-Step Starter Guide to Designing...	$19.99	Buy on Amazon
4		Building DIY Websites For Dummies	$15.80	Buy on Amazon

Design for the page being shared

Show the page’s actual subject rather than a generic brand panel. Use a short headline that remains readable when the card is reduced to a few hundred pixels, and make the visual hierarchy obvious: subject first, title second, branding third. Avoid paragraphs, tiny captions and decorative detail that disappears at card size.

Keep a central safe area

Place essential text, logos and faces well inside the edges. Preview cards can crop different sides or use a shorter presentation, so edge-aligned content is the first thing to vanish. The OG Image Design guide recommends this safe-area approach and treats it as practical design guidance rather than a protocol requirement.

#1 Best Overall

Sale

HTML and CSS: Design and Build Websites

• HTML CSS Design and Build Web Sites
• Comes with secure packaging
• It can be a gift option

$14.94

Buy on Amazon

Choose a broadly readable format

For flat artwork, diagrams and text-heavy graphics, PNG is a practical choice; JPEG is usually more efficient for photographs. This is guidance from the same industry guide, not a formal Open Graph rule. Format support and file-size limits vary among crawlers, so do not assume that SVG or WebP will render everywhere.

Add Open Graph metadata to the initial HTML

The Open Graph protocol defines four basic page properties: og:title, og:type, og:image and og:url. Add them to the server-rendered or otherwise initial document head, using a fully qualified image URL. og:description can supply a short explanation, while og:image:alt describes what the image depicts. The protocol documents width, height, MIME type and secure URL as optional image properties at ogp.me.

<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>

Use accurate values

• og:title: the title you want displayed, not necessarily the browser title.
• og:type: use website for a normal page; choose another protocol-supported type only when it accurately describes the content.
• og:url: the canonical, fully qualified URL represented by the card.
• og:image: an absolute HTTPS URL that can be fetched without a login.
• og:image:alt: a concise description of the visual; do not merely repeat the headline.
• og:description: a short page summary that still makes sense if the image is not shown.

If you publish more than one image

Keep each image’s structured properties immediately after its own og:image root tag. The protocol says that when multiple images are declared, the first one is preferred when a conflict exists. Put your intended default first and keep its width, height, MIME type and alt text together before declaring another image.

Account for platform-specific limits

Social networks are not required to display an image exactly as authored. Check the destinations that matter to your audience before finalizing a template.

Designing at 1200 × 630 also clears LinkedIn’s stated minimum height only when the image is adjusted to at least 1200 × 627 for that destination. If you need one asset everywhere, retain the central safe area and test the exact crop rather than assuming the ratio alone solves compatibility.

Rank #2

Sale

Building Websites All-in-One For Dummies (For Dummies Series)

• Used Book in Good Condition

$19.08

Buy on Amazon

Publish, inspect and validate the live URL

1. Export the image. Confirm the pixel dimensions, color profile and file size. Give it a stable HTTPS URL that returns the image itself rather than an HTML page or a redirect loop.
2. Insert tags in the initial response. View the page source or fetch the URL without a browser and verify that the Open Graph tags are present in the first HTML. Tags injected only after client-side JavaScript may be invisible to crawlers that do not execute scripts.
3. Check every value. Confirm that og:url matches the page, the image URL is absolute, and the alt text describes the picture. Make sure access controls, hotlink rules and robots settings do not block the social crawler.
4. Test the published address. Use the destination network’s own preview or sharing inspector with the real, publicly reachable URL. A local file or staging hostname cannot tell you how production caching behaves.
5. Re-scrape after a change. If an old image remains, request a fresh scrape in that platform’s debugger when available. A third-party service, OpenGraph.dev, reports that platforms cache metadata and that some crawlers do not execute JavaScript; this is practical platform behavior, not a guarantee of how every network works.

Troubleshoot the common failures

The preview shows the old image

The usual cause is a cached fetch of the page or image. Confirm that the new file is live at the exact URL, then use the relevant platform’s re-scrape control. If you replace an image at the same URL repeatedly, a versioned filename or query string can help a platform fetch a new resource, but follow that network’s own cache guidance.

No image appears

Inspect the initial HTML for a correctly spelled og:image property and an absolute URL. Open the image URL without authentication and check that it returns an image content type, a successful status and no challenge page. Also check whether a restrictive firewall, bot check or robots policy blocks the crawler.

The title or description is missing

Look for duplicate tags, malformed HTML and values inserted only after JavaScript runs. Keep one authoritative set in the head, use the property attribute, and confirm that the source returned by the server contains the values.

The image is cropped badly

Move critical content toward the center, reduce the headline to fewer words and test the actual card on each important network. A 1.91:1 source does not prevent a platform from displaying a narrower crop or a thumbnail.

LinkedIn rejects the asset

Check the dimensions against LinkedIn’s stated minimum of 1200 × 627 pixels and its 5 MB maximum, then verify the 1.91:1 recommendation and that the image is reachable publicly. Because the help page’s update date is not current to 2026, consult the live page before relying on those limits for a new integration.

Rank #3

HTML & CSS Web Design for Beginners: A Comprehensive Step-by-Step Starter Guide to Designing Responsive, Dynamic, and Modern Websites (Programming for Beginners)

$19.99

Buy on Amazon

Or skip the browser setup

When you need a deterministic screenshot of the rendered page while building or checking a share-image workflow, ScreenshotNeo provides a website screenshot API and MCP server. It is useful for capturing the page that contains your metadata; it does not replace each social network’s own preview inspector.

A single GET request returns PNG, JPEG, WebP or PDF output:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp

See the complete parameter reference in the ScreenshotNeo documentation. Equivalent runnable clients are:

import 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}`);
const file = Buffer.from(await res.arrayBuffer());
await Bun.write('shot.webp', file);

Why this is different for implementation work

• Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets. Each cleanup step can be turned off.
• Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers report the page verdict and whether it was billed through X-Page-Verdict and X-Billed.
• An MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
• The API supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, 12 device presets plus arbitrary viewports, retina scale, PDF paper size/margins/landscape/page ranges, HTML/CSS-to-image, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for selectors/delays/network idle, ad/tracker/request/resource blocking, custom headers/cookies/user agents/Authorization, timezone and geolocation, transparent backgrounds, image resizing, configurable-TTL caching, signed links for public <img> tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification.
• Parameter names used by other screenshot APIs also work, which can reduce migration changes.

Plans and predictable cost

Every feature is available on every plan, and yearly billing gives two months free. For reliability, use the verdict and billing headers in your pipeline, set an explicit wait condition for pages that hydrate slowly, and choose caching only when a repeated capture may safely reuse an earlier render.

Try the free ScreenshotNeo account: 1,000 screenshots a month are included with no card, and paid plans start at $5 for 3,000.

Rank #4

Sale

Building DIY Websites For Dummies

$15.80

Buy on Amazon

A maintainable Open Graph checklist

• Export a raster image at 1200 × 630, or adjust to a destination’s documented minimum.
• Keep the headline, logo and subject in the central safe area.
• Use PNG for flat graphics or JPEG for photographs when those formats fit the asset.
• Place accurate og:title, og:type, og:image and og:url tags in the initial head.
• Add og:description, og:image:alt and image dimensions where useful.
• Keep structured properties directly after their image root tag, with the preferred image first.
• Inspect the source returned to crawlers, not only the DOM after scripts run.
• Validate the published URL on each major destination and re-scrape after changes.

The Open Graph project summarizes its design principle as: “Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.” Start with that simple contract, then layer on the platform-specific testing needed for the networks your readers actually use.

Frequently Asked Questions

Should the Open Graph title match the HTML