Skip to Content
Social and Open GraphIssue 95

Open Graph image missing alt text

What Is This Issue

The og:image:alt meta tag provides alternative text for your Open Graph image. This describes the image content for accessibility tools and displays when the image cannot be loaded.

This issue checks whether your page has the og:image:alt tag implemented. A passing implementation must include:

  • og:image:alt - A descriptive text alternative for the OG image

Example of passing implementation:

<meta property="og:image" content="https://example.com/team-photo.jpg" />
<meta
  property="og:image:alt"
  content="Our team of 10 engineers working on laptops in a modern office"
/>

Why Is This Important

The og:image:alt tag is important for accessibility and social media sharing:

  • Accessibility: Screen readers and assistive technologies can describe the image to visually impaired users
  • Fallback content: Displays when images fail to load due to network issues or blocking
  • Context: Provides additional context about the image content
  • AI Search / AEO: AI systems use alt text to understand image content and relevance
  • Social platforms: Some platforms may use alt text for accessibility features

Without the og:image:alt tag:

  • Images are inaccessible to visually impaired users
  • No context is provided if images don’t load
  • Missed opportunity for additional content description

Resolving this issue improves accessibility and contributes to a higher overall SEO health score by making your social sharing more inclusive.

How XeoPix Detects This

XeoPix checks for the og:image:alt tag by:

  1. Fetching the page HTML after following all redirects
  2. Parsing the <head> section to extract the meta tag with property="og:image:alt"
  3. Validating presence: Checks that the og:image:alt tag exists
  4. Validating content: Ensures the tag has a non-empty, meaningful value
  5. Flagging the issue if the tag is missing or empty

The detection is performed on the raw HTML response without JavaScript execution, matching how social media crawlers see your pages.

How To Fix

  1. Add the og:image:alt tag to your HTML <head> section:

    • Place it after the og:image tag
    • Write descriptive text that conveys the image’s content and purpose
    • Keep it concise but informative (under 100 characters recommended)

  2. Write good alt text:

    • Describe what’s in the image objectively
    • Include relevant context (people, objects, setting, action)
    • Avoid starting with “Image of…” or “Picture of…”
    • Don’t repeat the og:description verbatim

  3. Test your implementation:

    • Use Facebook Sharing Debugger to verify alt text is detected
    • Check accessibility with screen reader tools
    • Ensure alt text displays appropriately on social platforms

What We Store

Storage Level

Page Level

Database Table / Prisma Model

SocialOpenGraphData

Stored Fields

FieldTypeDescription
ogImageAltString?Open Graph image alt text (og:image:alt)

Detection Dependencies

  • HTML Document
  • Meta Tags (og:image:alt)

Examples

Example 1: Missing OG Image Alt

Problematic state (what fails):

<meta property="og:image" content="https://example.com/team-photo.jpg" />
<!-- Missing og:image:alt tag -->

Corrected state (what passes):

<meta property="og:image" content="https://example.com/team-photo.jpg" />
<meta
  property="og:image:alt"
  content="Our team of 10 engineers working on laptops in a modern office"
/>

Example 2: Poor Alt Text

Problematic state (what fails):

<meta property="og:image:alt" content="Image" />
<!-- Too vague, not descriptive -->

Corrected state (what passes):

<meta
  property="og:image:alt"
  content="Diverse team of engineers collaborating on code reviews around a whiteboard"
/>

Example 3: Alt Text Repeating Description

Problematic state (what fails):

<meta property="og:description" content="Learn SEO best practices for 2024" />
<meta property="og:image:alt" content="Learn SEO best practices for 2024" />
<!-- Alt text just repeats description -->

Corrected state (what passes):

<meta property="og:description" content="Learn SEO best practices for 2024" />
<meta
  property="og:image:alt"
  content="Infographic showing SEO checklist with checkmarks on clipboard"
/>

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/socialOpenGraph/issue-122-og-image-alt.test.js

Purpose

Validates that the crawler detects pages that have an og:image but are missing the og:image:alt attribute.

Tested Function

runSocialOpenGraph()

Issue Information

  • Issue Number: 122
  • Issue Code: og_image_alt
  • Toggle Group: socialOpenGraph

Test Scenarios

Positive Test Cases

  • og:image and og:image:alt are both present → no issue detected.
  • og:image is not present on the page → no issue detected.

Negative Test Cases

  • og:image is present but og:image:alt is missing → issue detected with message "Open Graph image alt tag is missing".

Boundary Cases

No boundary cases exist in the test.

Edge Cases

  • Empty HTML: The function handles an empty string without throwing.

Expected Outcome

Pass

The issue should not be reported when either og:image is absent, or both og:image and og:image:alt are present.

Fail

The issue should be reported when og:image is present but og:image:alt is missing.

Validation

  • Correctly detects missing og:image:alt when og:image is present.
  • Does not report a false positive when og:image is absent.
  • Handles empty HTML gracefully without crashing.
  • xeopix-crawling-v2/toggleGroups/socialOpenGraph.js
  • xeopix-crawling-v2/issueCodes.js

Coverage Summary

  • Covers present and missing og:image:alt scenarios.
  • Validates that the check is skipped when og:image is absent.
  • Includes resilience test for empty input.

References

Last updated on
Issue 94Issue 96