What Is an OG Image in SEO?
Learn what an OG image is, how to add it correctly, platform size requirements, testing steps, and its real SEO impact.
Direct answer: An OG image is the image a webpage associates with itself through the Open Graph og:image metadata property. When a page link is shared, a social network or other supporting service may use that image in the link preview. It is metadata that points to an image URL, not a special image file format.
The Open Graph protocol defines og:image and optional companion properties for the image URL, dimensions, MIME type, secure URL, and alternative text. Google recommends explicitly specifying an accurate, representative image, but the sources cited here do not establish og:image as a direct Google ranking factor. Read the Open Graph protocol and Google’s image SEO guidance.
What an OG image does
Open Graph metadata lets a page be represented as a rich object when its URL is shared. A supporting service reads the page’s <head>, finds og:image, and can display that image beside the title and description in a preview.
Use an OG image to:
- Give shared links a page-specific visual preview.
- Help people identify the page before opening it.
- Provide an image that accurately represents the article, product, or landing page.
An OG image does not replace the page’s visible content, image alt attributes, structured data, or other technical SEO work. The available guidance does not support promising that adding this tag alone improves rankings.
How to add an OG image
Put the metadata in the HTML document’s <head>. The URL should identify the actual image served to sharing systems.
<head>
<meta property='og:image' content='https://example.com/images/article-preview.jpg'>
<meta property='og:image:alt' content='A developer reviewing an Open Graph image preview'>
</head>
The protocol says that if a page specifies og:image, it should specify og:image:alt as well. Describe what the image shows; do not use the alt value as a caption or a list of keywords.
Complete metadata example
<head>
<meta property='og:title' content='What Is an OG Image in SEO?'>
<meta property='og:description' content='A practical guide to Open Graph image metadata.'>
<meta property='og:url' content='https://example.com/guides/og-image-seo'>
<meta property='og:type' content='article'>
<meta property='og:image' content='https://example.com/images/og-image-seo.jpg'>
<meta property='og:image:secure_url' content='https://example.com/images/og-image-seo.jpg'>
<meta property='og:image:type' content='image/jpeg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='627'>
<meta property='og:image:alt' content='A webpage preview showing an Open Graph image concept'>
</head>
Keep the declared MIME type and dimensions consistent with the file you serve. Use https:// URLs when possible, and make sure the image URL is reachable by the service generating the preview.
Choosing the image and dimensions
Google recommends choosing an image that is relevant and representative of the page, avoiding a generic site logo, avoiding extreme aspect ratios, and using high resolution where possible. These recommendations improve the chance that an image is useful when discovered and presented; they do not define one universal size for every sharing service.
Platform requirements differ. For example, LinkedIn’s official sharing-module guidance lists a minimum of 1200 × 627 pixels and supports JPG, PNG, or GIF. Treat that as LinkedIn’s requirement, not a universal rule for every network or messaging app. Recheck each platform’s current documentation before standardizing a publishing pipeline.
| Decision | Practical guidance |
|---|---|
| Subject | Show the page’s actual topic. Avoid a generic logo unless the page is specifically about the brand. |
| Aspect ratio | Use a conventional landscape composition and avoid extreme shapes that may be cropped. |
| Resolution | Provide a high-resolution source where possible; follow the destination platform’s minimum. |
| Format | Use a format accepted by the platform receiving the share. LinkedIn documents JPG, PNG, and GIF. |
| Accessibility | Add og:image:alt that describes the image itself. |
How to verify an OG image
Inspect the HTML with cURL
curl -L https://example.com/guides/og-image-seo | grep -i 'og:image'
This confirms that the response contains the tag. It does not prove that a sharing service can fetch the image, so also request the image URL directly.
curl -I https://example.com/images/og-image-seo.jpg
Check for a successful response and an image content type such as image/jpeg or image/png.
Check with Python
import requests
from bs4 import BeautifulSoup
page_url = 'https://example.com/guides/og-image-seo'
html = requests.get(page_url, timeout=20).text
soup = BeautifulSoup(html, 'html.parser')
for tag in soup.find_all('meta', attrs={'property': True}):
if tag.get('property', '').startswith('og:image'):
print(tag['property'], tag.get('content', ''))
Check with Node.js
const pageUrl = 'https://example.com/guides/og-image-seo';
const html = await (await fetch(pageUrl)).text();
const matches = [...html.matchAll(/<meta[^>]+property=['\"](og:image[^'\"]*)['\"][^>]+content=['\"]([^'\"]*)['\"]/gi)];
for (const [, property, content] of matches) console.log(property, content);
Use a browser preview
- Open the page source or rendered DOM and confirm one intended
og:imageURL. - Open that URL directly in a private browser window.
- Confirm the image is not blocked by authentication, robots controls, a temporary token, or a referrer requirement.
- Share the page through the target service and check the generated preview.
- If the service caches previews, update the image URL or use its documented refresh tool after correcting metadata.
Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | The tag is missing, malformed, or outside <head>. |
Use property='og:image' with an absolute URL in the document head. |
| An old image appears | The sharing service cached the previous preview. | Use the service’s refresh or debugger workflow, or publish a new image URL. |
| The image URL works in a browser but not in previews | The service cannot access a protected, blocked, or rate-limited resource. | Serve the image publicly over HTTPS and review access controls, redirects, and firewall rules. |
| Image is cropped badly | The composition has an extreme aspect ratio or important content near an edge. | Use a landscape composition with safe margins and verify the target platform’s crop. |
| Wrong image type or dimensions are reported | Companion metadata does not match the actual file. | Update og:image:type, width, and height to match the served asset. |
| Dynamic site shows no tag in fetched HTML | Metadata is added only after client-side JavaScript runs. | Render OG tags in the initial server response or pre-render the page for crawlers. |
| Multiple images compete | Several og:image tags are present. |
Put the preferred image first and remove accidental duplicates unless you intentionally provide alternatives. |
Performance, reliability, and cost considerations
- Serve the image from a stable, cacheable URL so preview fetches do not depend on an expiring session.
- Keep the asset appropriately sized for the platform; unnecessarily large files increase transfer time.
- Generate images ahead of publishing when possible, rather than waiting for a request-time design operation.
- Use monitoring or a scheduled check to detect broken URLs, expired certificates, and changed metadata.
- Remember that each platform may fetch and cache the image at a different time. A correct tag cannot force an immediate refresh everywhere.
Or skip the browser setup
If you need a reliable image of the rendered page for an OG asset workflow, ScreenshotNeo can capture a URL through one request. It removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo API documentation for all options. Basic request:
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/og-image-seo -o shot.webp
import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://example.com/guides/og-image-seo'}, timeout=90)
open('shot.webp', 'wb').write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/og-image-seo' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
ScreenshotNeo supports full-page and element capture, custom CSS and JavaScript, device and viewport settings, retina scale, waiting rules, request blocking, headers and cookies, caching, signed links, asynchronous jobs, bulk capture, PDF output, and HTML/CSS-to-image. The Free plan includes 1,000 shots each month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Is an OG image the same as a favicon?
No. A favicon identifies a site or page in browser interface elements. An OG image is metadata for a shared link preview.
Does every page need a unique OG image?
A page-specific image is usually more representative, but the protocol does not require a unique file for every URL. Choose an image that accurately represents each page.
Is og:image a Google ranking factor?
The cited sources recommend specifying it for image discovery and presentation. They do not establish it as a direct ranking factor.
Can I use a relative image URL?
Use an absolute HTTPS URL so external fetchers can resolve it consistently.
Which image size should I use?
There is no universal size established by the sources. Follow the destination platform’s guidance; LinkedIn, for example, lists 1200 × 627 pixels minimum for its sharing module.
Implementation checklist
- Add an absolute
og:imageURL in the page head. - Add matching
og:image:alttext. - Add width, height, MIME type, and secure URL when you can keep them accurate.
- Select a relevant, high-resolution image without an extreme aspect ratio.
- Confirm the image URL is publicly fetchable over HTTPS.
- Verify the raw HTML and test a real share on each important platform.


