Open Graph Image Tag Example
Copy-ready og:image HTML, dimensions, multiple-image rules, validation, troubleshooting, and a ScreenshotNeo capture option.
Direct answer: put an og:image meta tag in the document’s <head>, using an absolute, publicly reachable image URL. A complete Open Graph block also includes og:title, og:type, and og:url.
1. Copy-ready Open Graph image tag example
This is the smallest useful document head. Replace the example values with the page you are sharing.
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="Example 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/og-image.jpg" />
<meta property="og:image:alt" content="A concise description of the image contents" />
</head>
</html>The Open Graph protocol defines these properties so a page can be represented as a rich object when a crawler reads it. The official specification and example are at ogp.me and its reference document.
2. What og:image does
og:image is an HTML meta property. Its content value is the URL of the image that represents the page in a social preview. Put it in the initial HTML response, inside <head>; do not put it in the visible body or rely on client-side JavaScript to add it after load.
- Use an absolute URL:
https://example.com/assets/share.jpg, not/assets/share.jpg. - Make it fetchable: the image host must be reachable by the relevant crawler without a login, browser-only cookie, or blocked user agent.
- Use the right MIME type: the URL should return the format declared by
og:image:type, if you provide it. - Describe the image: add
og:image:altfor assistive and fallback contexts. It describes the image; it is not a visible caption.
3. Complete metadata block
A production page normally includes the four required properties plus image details and a canonical URL.
<head>
<meta property="og:title" content="How to export a report" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/reports/export" />
<meta property="og:image" content="https://cdn.example.com/social/report-export.jpg" />
<meta property="og:image:secure_url" content="https://cdn.example.com/social/report-export.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="A report export screen with a download arrow" />
</head>og:image:url is an alias for og:image. og:image:secure_url supplies an HTTPS alternative, while og:image:type, width, height and alt provide structured details defined by the protocol.
4. Choosing dimensions, format and URL
| Decision | Practical guidance |
|---|---|
| Pixel size | The protocol documents width and height but does not require one universal size. A current Facebook guide recommends 1200 × 630 pixels; treat that as platform guidance and recheck it when platform requirements change. |
| Aspect ratio | 1200 × 630 is about 1.91:1. Keep important text and subjects away from edges so different previews can crop safely. |
| Format | JPEG, PNG and other formats may work when the crawler supports them. Set og:image:type to the actual response MIME type. |
| Transport | Prefer HTTPS and include og:image:secure_url when an HTTPS URL is available. |
| Cache behavior | Social crawlers cache image responses and metadata. Use a new filename or query version when replacing an image, then request a fresh scrape in the platform’s debugger. |
5. Multiple Open Graph images
Repeat the root property when you want to offer more than one candidate. Structured properties belong to the image immediately preceding them. The first image has priority when a consumer must choose.
<meta property="og:image" content="https://example.com/first.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The primary report illustration" />
<meta property="og:image" content="https://example.com/second.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="An alternate report illustration" />Start a new group with each new og:image. Do not place the second image’s width or alt before its root tag.
6. Add tags in a template or framework
Server-rendered HTML
Render the tags in the shared document head and pass page-specific values through your template. Escape attribute values so a title containing quotes cannot break the markup.
React, Next.js and other SSR frameworks
Use the framework’s server metadata API or head component so crawlers receive tags in the initial response. A tag added only in an effect after hydration may be missed by a crawler.
Static sites
Put the same block in the layout or front-matter template used to build every route. Verify that the generated HTML, rather than only the source template, contains the tags.
7. Validate what crawlers actually receive
- Open the public page with “view source” or fetch it with
curl -L; confirm the tags are in the returned HTML head. - Open the image URL directly. Confirm it returns
200, the intendedContent-Type, and no login or redirect loop. - Check that
og:urlis canonical and absolute, and that every URL uses the correct host and scheme. - Use the social network’s official preview/debugger to request a fresh scrape after changes.
- Inspect the first
og:imagewhen multiple images exist; it is the preferred candidate.
curl -L -I https://example.com/og-image.jpg
curl -L https://example.com/page | sed -n '/<head>/,/<\/head>/p'8. Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No preview image | Relative URL, private asset, robots/WAF block, or non-200 response. | Use an absolute public HTTPS URL, allow the crawler, and verify the image with curl -I. |
| Old image still appears | Metadata or image is cached. | Change the asset URL (for example, a new filename), then request a fresh scrape. |
| Wrong image selected | Several og:image tags or structured fields are out of order. |
Put the preferred image first and keep its width, height, type and alt directly after it. |
| Image is cropped badly | Important content sits near an edge or the aspect ratio differs from the target preview. | Design a safe central area and provide dimensions; preview at the target platform. |
| Tags work locally but not in production | Development host, relative environment variable, or client-only rendering. | Inspect production’s raw HTML and replace environment-dependent URLs with the public origin. |
| Secure-content warning | og:image is HTTP while the page is HTTPS. |
Serve the image over HTTPS and set og:image:secure_url. |
9. Performance, reliability and security checklist
- Serve a correctly sized image instead of a multi-megabyte original; this shortens crawler fetch time.
- Put images behind a reliable CDN or object store and return a stable cacheable URL.
- Keep metadata server-rendered and identical across requests for the same canonical page.
- Do not put secrets, tokens or personal data in image URLs or alt text.
- Return the correct
Content-Type, follow redirects cleanly, and avoid expiring signed URLs unless crawlers can fetch them during their scrape. - When generating images dynamically, cache the result by a content hash so repeated crawls do not rebuild it.
10. Or skip the browser setup
If you need to create the image itself from a live page, ScreenshotNeo returns a PNG, JPEG, WebP or PDF from one GET request. It accepts cookie banners before capture and removes 60+ known consent platforms, newsletter popups and chat widgets; each step can be turned off. Only clean shots are billed: bot checks/CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the verdict and billing with X-Page-Verdict and X-Billed.
See the ScreenshotNeo API documentation for all options, including full-page and element capture, custom CSS/JavaScript, device presets, dark mode, blocking, headers and cookies, caching, signed links, async jobs, bulk capture and PDF output.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython
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)Node.js
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 with take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
11. FAQ
Is og:image required?
It is one of the four basic Open Graph properties and is required for an image preview. A page can still be shared without it, but the consumer chooses its own fallback.
Can I use a relative image path?
Use an absolute URL. Relative paths leave the crawler to guess the origin and commonly fail across environments.
Does the protocol require 1200 × 630?
No. The protocol defines width and height fields but no universal pixel size. 1200 × 630 is current Facebook guidance, not a protocol rule.
What is the difference between og:image:alt and a caption?
Alt describes the image for accessibility and fallback contexts. It does not create visible text under the image.
