How to Add Alt Text to Open Graph Images

To add alt text to an Open Graph image, put an og:image:alt meta element in the document’s <head>, alongside the matching og:image URL:

<meta property="og:image" content="https://example.com/images/product-card.jpg" />
<meta property="og:image:alt" content="Blue ceramic mug beside an open notebook on a wooden desk" />

The Open Graph Protocol defines this value as a description of what is in the image, not a caption, and recommends specifying it whenever a page specifies og:image. The property describes shared-image metadata; it does not replace the HTML alt attribute on an image displayed in the page. See the Open Graph Protocol.

1. What og:image:alt does

Open Graph metadata lets a page provide information about itself when another service creates a link preview. The og:image property identifies an image URL. The og:image:alt property provides a textual description of that image. Keep the two values paired: one says which image the metadata refers to; the other says what that image depicts.

The og:image URL identifies the preview image; og:image:alt describes what that image depicts.

For example, if a product page shares a photograph of a blue mug on a desk, a useful value might be “Blue ceramic mug beside an open notebook on a wooden desk.” That describes visible content. “Our new mug” is more like a caption or promotion and does not tell someone what is pictured.

This is distinct from the HTML alt attribute. For an image that appears in the page body, write appropriate HTML too:

<img src="/images/product-card.jpg"
     alt="Blue ceramic mug beside an open notebook on a wooden desk">

Use the page’s actual context when deciding what the image description should communicate. A descriptive alternative supports people who cannot see the image in the page itself; Google’s image guidance describes alt text as useful metadata and cautions against keyword stuffing. See Google Search Central’s image SEO best practices.

2. Add the metadata to your page

Place Open Graph properties in the document head. A basic set of page and image metadata can look like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hand-thrown ceramic mugs | Example Shop</title>
  <meta property="og:title" content="Hand-thrown ceramic mugs">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/mugs">
  <meta property="og:image" content="https://example.com/images/blue-mug.jpg">
  <meta property="og:image:alt" content="Blue ceramic mug beside an open notebook on a wooden desk">
</head>
<body>
  <h1>Hand-thrown ceramic mugs</h1>
  <img src="/images/blue-mug.jpg"
       alt="Blue ceramic mug beside an open notebook on a wooden desk">
</body>
</html>

For an existing site, the practical steps are:

Find the template or component that emits your page’s Open Graph tags.
Identify the image URL assigned to og:image.
Write a concise description of meaningful visible content in that image, in the context of the page.
Emit that text in a separate og:image:alt meta element in the head.
Check the rendered HTML for the page, not just the source template, to make sure the two properties are present and correspond to the intended image.

For a static HTML page, edit the head directly. In a server-rendered app, render the property from the same page data that selects the social image. In a CMS, add or map an image-description field to the Open Graph metadata output. The framework mechanism differs, but the HTML property and its relationship to og:image stay the same.

3. Write a useful image description

Describe what a person would need to know about the image, rather than repeating the page title or stuffing in search terms. The right detail depends on the image and the page. A product image may need its appearance and arrangement; a chart may need the trend or comparison it conveys; a decorative background may have little meaningful content to describe.

Use a short editorial check

Name the meaningful subject. Say what is visibly present, such as a person, product, landscape, diagram, or chart.
Include distinguishing details. Mention color, position, action, or relationships when they help identify the image.
Keep the context in view. The same photograph may need different emphasis on a recipe page and a product listing.
Avoid unsupported claims. Do not infer a person’s identity, a product’s properties, or a chart’s meaning unless the image and page establish it.
Skip keyword lists. Repeating search terms makes the description less useful and can harm the experience; Google warns that keyword stuffing may be treated as spam.

Consider these examples:

Image	Useful description	Why
Product photograph	“Blue ceramic mug beside an open notebook on a wooden desk”	Identifies the product and its visible setting.
Team photograph	“Four engineers standing in front of a whiteboard covered with diagrams”	Describes the people and relevant scene without guessing names.
Decorative texture	Consider whether the image communicates anything needed in the shared preview.	Do not invent significance for an image that serves only as decoration.

There is no character limit established by the cited protocol material here. Prefer a concise description that conveys the image’s useful content, and avoid turning the value into a long caption or a list of keywords.

4. Handle multiple Open Graph images

A page can provide more than one Open Graph image. When doing so, keep each image’s structured properties adjacent to its root og:image declaration:

<meta property="og:image" content="https://example.com/images/blue-mug.jpg">
<meta property="og:image:alt" content="Blue ceramic mug beside an open notebook on a wooden desk">
<meta property="og:image" content="https://example.com/images/mug-detail.jpg">
<meta property="og:image:alt" content="Close-up of the blue glaze and curved handle on a ceramic mug">

The protocol’s array guidance says the first tag from top to bottom is preferred when values conflict, and a new root image begins another image entry. Keep ordering intentional and pair each description with the image it describes. If your page emits just one image, one og:image and one corresponding og:image:alt are the straightforward case.

5. Check the rendered page

After changing a template or CMS setting, inspect the final HTML delivered for a representative URL. Confirm that:

og:image contains the intended image URL.
og:image:alt is present in the head and describes that image.
Multiple image declarations, if used, retain the intended order and pairing.
The page’s body images still have appropriate HTML alt values of their own.

Do not assume that a property being present means every social service will display or consume it in the same way. The Open Graph Protocol defines the property, but the available sources do not establish uniform platform behavior. LinkedIn’s website-sharing guidance lists og:title, og:image, og:description, and og:url; it does not list og:image:alt among those tags. This is not evidence that every LinkedIn workflow ignores the property, only a reason to avoid promising a particular result. Check the target service’s current documentation when a platform-specific result matters.

Google’s image-preview guidance says image selection is automated and can use multiple sources. It discusses og:image as one way to influence the preferred image, but that does not establish that Google displays og:image:alt as a description. Its recommendations about relevant, representative images concern image selection, not a guarantee about this property. See Google’s image guidance.

6. Keep webpage metadata separate from platform-native descriptions

Some platforms provide their own controls for adding alternative text to images uploaded or published directly within that service. Those controls are separate from metadata scraped from a webpage. LinkedIn documents adding alternative text to images shared in feeds or embedded in articles to help members using screen readers understand the image. X documents its ALT badge as a way to open an image description. Neither native workflow proves how a service handles a page’s og:image:alt when it fetches a link.

Open Graph metadata and platform-native image descriptions are separate publishing mechanisms.

If you publish an image directly to a social platform, use that platform’s own accessible-image workflow as appropriate. If you publish a webpage and share its URL, include og:image:alt as Open Graph metadata, and keep appropriate HTML alternatives on images in the webpage. Treat these as related accessibility tasks with different implementation points.

Platform details can change. LinkedIn’s sharing documentation gives specific image dimensions and file-size guidance for its sharing module, but verify current requirements with the platform before relying on those exact limits. The existence of an Open Graph image description does not determine whether an image meets a platform’s upload or preview constraints.

7. Troubleshooting

Symptom	Likely cause	What to do
The page has an image tag but no Open Graph description.	The template emits `og:image` but does not emit `og:image:alt`.	Add the property to the same head-generation path and populate it from the image description.
The description describes a different image.	The image URL and description are maintained in unrelated fields or multiple image properties are mispaired.	Keep each root `og:image` and its structured properties together; inspect the final tag order.
The property appears in a template but not in the page.	The template branch may not run for that page, or the CMS field may be empty.	Inspect the rendered HTML for the affected URL and correct the page data or conditional rendering.
A social preview does not show the text description.	The receiving service may not consume or display webpage `og:image:alt` consistently.	Do not treat that display as guaranteed. Consult the platform’s current documentation and use its native image-description controls for direct uploads where applicable.
The description reads like a search phrase.	Keywords were added without describing the actual image.	Rewrite it around visible, meaningful content. Google advises against keyword stuffing in alt text.
The page preview uses an unexpected image.	Preview image selection can be automated and may draw on multiple sources.	Check the final `og:image` output and follow the platform’s guidance for representative image selection; do not assume the alt property controls which image is selected.
The image is described only in Open Graph metadata.	The page-body image’s HTML alternative was overlooked.	Set the appropriate `alt` attribute on the actual `<img>` element too. The two mechanisms serve different placements.

8. Or skip the browser setup

If you need a screenshot of the page to review its rendered state alongside its metadata, ScreenshotNeo is a website screenshot API and MCP server. Its one-request API returns an image or PDF; the screenshot does not replace checking the page’s HTML metadata.

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

See the ScreenshotNeo documentation for API options. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers indicate the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is on every plan.

9. Performance and maintenance

og:image:alt is a metadata field in the page head, so adding it is a template or content-data change rather than a screenshot-processing step. Keep the description alongside the image selection data where practical; this makes it easier to avoid mismatches when images change. For multiple images, review the emitted order and pairings during content or template changes.

There is no evidence in the cited material for a quantified traffic, accessibility, or ranking uplift attributable specifically to this property. Add it because it gives a useful image description in Open Graph metadata and follows the protocol’s recommendation, not because a particular display or measurable outcome is guaranteed. Maintain the separate HTML alt text and platform-native descriptions that apply to other publishing paths.

FAQ

Is og:image:alt the same as alt on an img element?

No. One is Open Graph metadata for an image associated with a page share; the other is an HTML attribute on an image element in the page body. Use each where it applies.

No such guarantee is established by the sources here. The protocol defines the property, while platform-specific consumption and display can differ. Use native image-description controls for direct platform uploads when available.

Should the value be a caption or a list of keywords?

Neither. Describe the meaningful content of the image concisely in context. Avoid keyword stuffing.

Can a page have more than one Open Graph image?

Yes. Keep each image’s structured properties with its root image declaration, and make the order deliberate because the protocol says the first tag is preferred when values conflict.