What does og:image:alt do and how should I write it?
Learn what og:image:alt describes, how to pair it with og:image, and how to write useful descriptions for photos, charts, and images with text.
og:image:alt is Open Graph metadata that describes the content of the page’s associated og:image. The Open Graph Protocol defines it as “A description of what is in the image (not a caption)” and recommends specifying it whenever a page specifies og:image. Write a plain, specific description of the image’s meaningful content; there is no mandatory word or character count in the protocol.
1. What og:image:alt does
Open Graph properties help describe a page and its share image in metadata placed in the document’s <head>. og:image identifies an image associated with the page. og:image:alt is a structured property that supplies a description for that image. Keep the description paired with the exact image URL it describes, particularly if the page declares multiple images.
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:alt" content="A hiker crossing a snow-covered ridge at sunrise">The example URL and description are illustrative. The Open Graph Protocol’s own example pairs an image with the description “A shiny red apple with a bite taken out.” The protocol calls for a description, not a caption: describe the image content rather than writing promotional copy or summarizing the whole page. Open Graph Protocol.
2. How to write a useful description
Look at the specific image and identify what a person needs to understand from it. Name the subject and, where relevant, its action, relationship, or meaningful context. Use ordinary language and include details that distinguish this image from a generic placeholder.
- Identify the image’s purpose. Is it a photograph, a poster, a chart, or an illustration that explains a process?
- Choose the essential information. Describe the subject and what is happening. Include text or data embedded in the image when that information matters.
- Write a direct description. Use a sentence fragment or sentence that describes the content. Avoid keyword lists, page titles pasted into the value, and generic labels like “image.”
- Check that it matches the actual image. If the image changes, update its description too. For multiple
og:imagevalues, associate each description with its corresponding image.
Examples:
- Photograph:
A brown dog catching a red ball in a grassy park - Poster with important text:
Event poster reading “Open house, Saturday at 10 a.m.” - Chart:
Line chart showing monthly signups rising from 200 to 850— use those values only if they are actually shown.
3. Match the description to the image’s purpose
Accessible-image guidance from W3C WAI offers a useful way to decide what information matters: informative images should convey their essential information; functional images should communicate their function; images containing important text should include that text; and complex charts or diagrams may require a fuller equivalent than a short description. Decorative images can use a null text alternative in the HTML image context. These are general accessibility principles for image alternatives, while Open Graph separately recommends providing og:image:alt when og:image is present. W3C WAI Images Tutorial and W3C H37.
Do not assume the Open Graph value replaces the image’s HTML alt attribute. They serve different markup contexts: one describes an Open Graph image in metadata, while the other is an HTML image alternative. Consider the purpose and context of each separately.
4. Add it to a page and keep the pair together
Put both properties in the page head and make sure the description belongs to the intended image. For a page with one share image:
<head>
<meta property="og:image" content="https://example.com/release-chart.png">
<meta property="og:image:alt" content="Bar chart comparing release downloads across three months">
</head>For a page with multiple Open Graph images, provide the corresponding metadata for each image in the order and association required by your page’s metadata setup. The core check is that an image description never accidentally describes a different image URL.
5. What the specification does and does not require
| Question | Answer |
|---|---|
| Is there a required word or character limit? | The reviewed Open Graph Protocol definition gives no mandatory length. |
| Should it be a caption? | No. The protocol explicitly distinguishes a description from a caption. |
| Should every image get a description? | The protocol recommends og:image:alt when a page specifies og:image. |
| Will every social platform display it the same way? | The protocol definition alone does not establish how each platform or preview client displays or exposes the value. |
6. Troubleshooting
- The description is actually a page summary. Rewrite it to describe the image itself, not the page’s topic or pitch.
- The value says only “photo,” “graphic,” or “image.” Add the subject and the action or information that makes this image meaningful.
- The description names text or numbers not visible in the asset. Check the image and remove inaccurate details; descriptions should reflect what is actually present.
- The page has several Open Graph images and the wrong description appears beside one. Review the metadata sequence and pair each description with the correct image URL.
- You expect a specific preview or screen-reader result everywhere. The Open Graph definition does not guarantee identical platform behavior. Check the destination platform’s own current guidance and test its preview if that behavior matters.
7. Inspect the rendered page when metadata is generated dynamically
If a framework or server renders metadata dynamically, inspect the delivered document head for the final og:image and og:image:alt values. A browser screenshot can help review the page’s visual state, but metadata itself is in the HTML head and may not be visible in the screenshot. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media; it can capture a page when you need a visual check of the rendered page.
Or skip the browser setup
To capture a page screenshot with ScreenshotNeo, send one GET request. See the ScreenshotNeo API documentation for the request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up free.
FAQ
Is og:image:alt the same as HTML alt text?
No. og:image:alt is metadata describing an Open Graph image. HTML alt is an alternative for an image element. Write each for its own context.
What should I put in og:image:alt?
Describe the associated image’s meaningful content in plain, specific language. Mention embedded words or data when they are important to understanding the image.
How long should og:image:alt be?
The Open Graph Protocol does not prescribe a fixed word or character count. Include enough detail to describe the image clearly without turning the value into a caption or keyword list.
