Skip to Content
Social and Open GraphIssue 103

Twitter image missing alt text

What Is This Issue

The twitter:image:alt meta tag provides alternative text for your Twitter Card image. This describes the image content for accessibility tools and displays when the image cannot be loaded on X (Twitter).

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

  • twitter:image:alt - A descriptive text alternative for the Twitter Card image

Example of passing implementation:

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

Why Is This Important

The twitter:image:alt tag is important for accessibility and social media sharing on X:

  • Accessibility: Screen readers and assistive technologies can describe the image to visually impaired users on X
  • 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
  • X platform: X may use alt text for accessibility features

Without the twitter:image:alt tag:

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

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

How XeoPix Detects This

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

  1. Fetching the page HTML after following all redirects
  2. Parsing the <head> section to extract the meta tag with name="twitter:image:alt"
  3. Validating presence: Checks that the twitter: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 X’s crawler sees your pages.

How To Fix

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

    • Place it after the twitter: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 twitter:description verbatim

  3. Test your implementation:

    • Use X Card Validator to verify alt text is detected
    • Check accessibility with screen reader tools
    • Ensure alt text displays appropriately when images don’t load

What We Store

Storage Level

Page Level

Database Table / Prisma Model

SocialOpenGraphData

Stored Fields

FieldTypeDescription
twitterImageAltString?Twitter image alt text (twitter:image:alt)

Detection Dependencies

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

Examples

Example 1: Missing Twitter Image Alt

Problematic state (what fails):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/team-photo.jpg" />
<!-- Missing twitter:image:alt tag -->

Corrected state (what passes):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/team-photo.jpg" />
<meta
  name="twitter: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 name="twitter:image:alt" content="Image" />
<!-- Too vague, not descriptive -->

Corrected state (what passes):

<meta
  name="twitter: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 name="twitter:description" content="Learn SEO best practices for 2024" />
<meta name="twitter:image:alt" content="Learn SEO best practices for 2024" />
<!-- Alt text just repeats description -->

Corrected state (what passes):

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

Unit Test

Test File

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

Purpose

Validates that the crawler detects pages that have a twitter:image but are missing the twitter:image:alt attribute.

Tested Function

runSocialOpenGraph()

Issue Information

  • Issue Number: 129
  • Issue Code: twitter_image_alt
  • Toggle Group: socialOpenGraph

Test Scenarios

Positive Test Cases

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

Negative Test Cases

  • twitter:image is present but twitter:image:alt is missing → issue detected with message "Twitter image alt meta 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 twitter:image is absent, or both twitter:image and twitter:image:alt are present.

Fail

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

Validation

  • Correctly detects missing twitter:image:alt when twitter:image is present.
  • Does not report a false positive when twitter: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 twitter:image:alt scenarios.
  • Validates that the check is skipped when twitter:image is absent.
  • Includes resilience test for empty input.

References

Last updated on
Issue 102Issue 104