Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

An OG image is the image a webpage declares with the Open Graph og:image metadata property. Social networks, messaging apps, and other link-preview services can use that URL when someone shares the page. It is page metadata, not a special image file format, and the tag alone is not an established Google ranking factor.

To implement one, add an absolute image URL to your page’s <head>, provide matching optional metadata such as dimensions and MIME type, and choose a representative, high-resolution image with a moderate aspect ratio. Because each service can apply its own rules, validate the result on the platforms that matter to your audience.

What an OG image does

Open Graph metadata lets a webpage be represented as a rich object when shared. The og:image property points to the image associated with that page:

<meta property="og:image" content="https://example.com/images/article-preview.jpg">

A crawler that supports Open Graph may fetch that URL and display the image in a link card. The image can appear beside the page title, description, and URL in a social post or message. The service decides whether to fetch it, cache it, crop it, or omit it.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

An OG image is therefore different from:

  • The page’s main image: an article can show one image in its content and declare another for sharing.
  • An image sitemap entry: sitemaps help search engines discover images; Open Graph describes a share preview.
  • A file format: JPG, PNG, and other formats are files. “OG image” describes how a page references an image.
  • A guaranteed ranking signal: the cited Google guidance recommends specifying og:image for image discovery and presentation, but does not establish that the tag by itself raises rankings.

Use a page-specific image rather than a generic site logo. Google recommends an image that accurately represents the page, avoids extreme aspect ratios, and uses high resolution when possible.

How Open Graph image metadata works

The Open Graph protocol defines og:image and companion properties. Put these tags in the document’s <head>; they are metadata, not visible page content.

Required property

og:image should contain the complete, publicly reachable image URL, including the scheme and hostname. Relative paths such as /images/share.jpg are less reliable for crawlers and should be avoided.

Recommended companion properties

The protocol documents these optional properties:

Property Purpose What to check
og:image:secure_url HTTPS alternative URL Use the HTTPS version when your site supports it.
og:image:type MIME type, such as image/jpeg Match the actual response content type.
og:image:width Declared pixel width Use the real width of the file.
og:image:height Declared pixel height Use the real height of the file.
og:image:alt Alternative text describing the image Describe what the image shows; do not write a promotional caption.

If a page specifies og:image, the protocol says it should specify og:image:alt as well. Keep every value synchronized with the actual asset. Incorrect dimensions or a false MIME type can make debugging preview behavior harder.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Complete head example

<head>
  <meta property="og:title" content="How to Configure a Secure Webhook">
  <meta property="og:description" content="A practical guide to signing and validating webhook requests.">
  <meta property="og:url" content="https://example.com/guides/webhooks">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/webhooks-share.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/webhooks-share.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="Diagram showing a signed webhook request and verification step">
</head>

Generate these tags server-side or in your static-site build so every canonical page receives the correct values. A single site-wide image is a fallback, not a substitute for relevant page-level artwork.

What size should an OG image be?

There is no single universal size established for every social network. Platform requirements, crops, file limits, and cache behavior differ. Design a master image at a high resolution and keep important text and faces away from the edges, where a service may crop them.

LinkedIn’s documented minimum

LinkedIn’s official sharing-module guidance lists a minimum of 1200 × 627 pixels and accepts JPG, PNG, or GIF. That is a LinkedIn specification, not a rule for every platform.

A practical design target

  • Use a landscape canvas close to 1.91:1 when you need a broadly usable preview.
  • Export a sharp image; avoid enlarging a small thumbnail.
  • Use readable typography with strong contrast and sufficient padding.
  • Keep the subject and headline inside a central safe area for square or portrait crops.
  • Choose JPG for photographic artwork and PNG when crisp text or transparency is important, unless the target service documents another preference.

The available evidence does not establish one universal maximum file size or one format set for every sharing service. Check the current documentation for each network and test the actual URL.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Does an OG image improve SEO?

It can improve how a page is presented when links are shared, which may make a result more recognizable and useful to people deciding whether to click. Google’s image SEO guidance specifically recommends specifying og:image, selecting a relevant representative image, avoiding generic logos and extreme aspect ratios, and using high resolution where possible.

Those recommendations concern image discovery and presentation. They do not prove that adding the tag alone increases organic rankings, guarantees image indexing, or forces a particular appearance in Google Search. Search engines consider many other signals, and social platforms independently decide how to render previews.

Choosing an effective OG image

Match the page’s promise

An image should help a visitor understand the destination before clicking. For a tutorial, show the result or a meaningful diagram. For a product page, show the product in context. Avoid an unrelated stock photograph or a logo that appears on every URL.

Plan for crops and overlays

Preview cards may crop the sides, center the image, or place text over it. Keep logos, faces, and essential words away from the outer margins. Do not put the only explanation of the page in tiny text inside the image; retain the meaning in the HTML title and description too.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Write useful image alt metadata

og:image:alt should identify the visual content, such as “Blue dashboard showing monthly API request volume.” It is not a caption, a keyword list, or a duplicate of the page title.

Implementation checklist

  1. Create or select a representative, high-resolution image.
  2. Publish it at a stable HTTPS URL that does not require a login, cookie, or expiring token.
  3. Add og:image and, preferably, the secure URL, MIME type, width, height, and alt properties.
  4. Confirm that the declared dimensions and MIME type match the file returned by the server.
  5. Use a unique image where the page’s subject differs; do not blindly reuse a global logo.
  6. Share the live URL on each important platform and inspect the generated card.
  7. If a preview is stale, remember that services cache metadata; update the image URL (for example, with a new filename) when a platform’s documented refresh process is unavailable.

Why an OG image does not appear

The tag is missing or malformed

View the delivered HTML, not only the template source. Confirm that the property is exactly og:image, the URL is absolute, and quotation marks and escaping are valid.

The crawler cannot fetch the file

Open the image URL without authentication. Check for DNS failures, TLS errors, robots or firewall rules, redirects, and a response that is actually an image. A browser session that can see the file does not prove an anonymous crawler can.

The wrong page or image is cached

Social services commonly cache previews. Verify the canonical URL and metadata first, then use that service’s official refresh or debugger tool. Changing the asset filename is a practical cache-busting measure, but it does not erase a service’s stored copy immediately.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The image is cropped or rejected

Compare the image’s aspect ratio and dimensions with the platform’s current requirements. Keep the important content central and provide a higher-resolution version when possible.

JavaScript supplies the tags too late

Many crawlers do not wait for client-side rendering in the same way a full browser does. Render Open Graph tags in the initial HTML response or at build time.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Verify the rendered result with a real page capture

A screenshot of the live URL is useful for checking whether the page itself renders correctly before you troubleshoot a social preview. It cannot replace a platform’s crawler debugger, because a screenshot browser and a social crawler may follow different rules.

Or skip the browser setup

ScreenshotNeo can capture the page with one API request while you check your implementation. Its clean-shot workflow accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

See the ScreenshotNeo documentation for authentication and all options. This cURL request saves a WebP capture:

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

Python:

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/webhooks"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/webhooks' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo if you need a repeatable capture check.

Performance, reliability, and maintenance

  • Keep URLs stable: changing an image filename can invalidate caches, but permanent URLs simplify long-term sharing.
  • Serve efficiently: compress the asset and use a dependable HTTPS host; an oversized file delays crawler fetches and user previews.
  • Separate page and image caching: updating HTML does not guarantee that a platform will immediately refetch the image.
  • Test representative templates: check an article, product, category, and error page rather than assuming one template covers every case.
  • Monitor changes: platform specifications can change, so recheck requirements before a major campaign or redesign.

FAQ

Is “OG” an abbreviation for a particular file type?

No. It refers to Open Graph metadata. The referenced file can use a normal web image format.

Can one OG image serve every page?

Technically yes, but page-specific artwork usually communicates the destination more accurately and avoids a generic preview.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Should I put keywords in og:image:alt?

No. Describe the visible image naturally. Search terms belong in accurate page content and metadata, not in an artificial keyword list.

Will changing an OG image update old social posts?

Not necessarily. Services may retain cached previews, and already-published posts can keep their original card.

Frequently Asked Questions

Is an OG image required for every webpage?

No. A page can function without one, but shared links may lack a useful image preview. Add it to pages where link sharing matters.

Can an OG image be hosted on another domain?

Yes, provided the URL is publicly fetchable and the host permits the relevant crawlers. Use HTTPS and keep the asset available.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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.