Twitter Card tags missing

What Is This Issue

Issue Number: 99 Category: Social & Open Graph Priority: IMPORTANT

What is This Issue?

Twitter Card tags allow you to attach rich photos, videos, and media experiences to tweets that link to your website. When properly implemented, a tweet linking to your page will display a card with a title, description, and image instead of just a plain link.

This issue checks whether your pages have the required Twitter Card meta tags in the HTML <head> section:

twitter:card — Specifies the type of card (summary, summary_large_image, app, or player)
twitter:title — The title of your content (should match or complement your page title)
twitter:description — A brief description of your content
twitter:image — The URL of the image to display in the card

What Passes

A page passes this check if it has:

A valid twitter:card tag with an accepted value
A meaningful twitter:title tag (not empty)
A meaningful twitter:description tag (not empty)
A valid twitter:image URL (for summary_large_image cards)

Example

Passing implementation:


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 SEO Tips for 2024" />
<meta
  name="twitter:description"
  content="Learn the top SEO strategies to improve your rankings this year."
/>
<meta
  name="twitter:image"
  content="https://example.com/images/seo-tips-2024.jpg"
/>

Failing implementation:


<!-- Missing all Twitter Card tags -->

Or:


<meta name="twitter:card" content="summary" />
<!-- Missing twitter:title, twitter:description, and twitter:image -->

Why Is This Important

Twitter Cards significantly improve how your content appears when shared on Twitter (now X). Without these tags, tweets linking to your site show only a plain URL, which has a much lower click-through rate.

Benefits of Proper Implementation

Increased Click-Through Rates — Tweets with cards get 2-3x more engagement than those without
Better Visual Appeal — Images and structured content stand out in the timeline
Professional Presentation — Shows attention to detail and technical SEO knowledge
Control Over Presentation — You decide how your content appears, not Twitter’s automatic parsing

SEO and Traffic Impact

While Twitter Cards don’t directly affect search rankings, they indirectly benefit SEO by:

Driving More Social Traffic — Better engagement means more visitors
Increasing Brand Visibility — Eye-catching cards increase brand recognition
Encouraging Backlinks — More shares lead to more exposure and potential backlinks
Improving User Signals — Higher CTR and longer time on site send positive signals to search engines

Impact on SEO Health Score

Proper Twitter Card implementation contributes to:

Social Media Optimization score (part of overall SEO health)
Technical SEO completeness
Content Presentation quality

Sites with properly implemented Twitter Cards typically score 5-10 points higher in social media optimization audits.

Real-World Impact

According to Twitter’s own data:

Tweets with cards see 43% higher engagement
Tweets with images receive 150% more retweets
Properly tagged pages get 2x more clicks from social media

For content-driven websites, news sites, and blogs, Twitter Cards are essential for maximizing the value of social media sharing.

How XeoPix Detects This

XeoPix checks for the presence and validity of Twitter Card meta tags in your pages. Here’s how the detection works:

Detection Process

Step 1: Fetch the HTML Document

XeoPix crawls each page and downloads the full HTML content.

Step 2: Parse the `<head>` Section

The crawler looks for meta tags in the HTML <head> section with the following names:

twitter:card
twitter:title
twitter:description
twitter:image

Step 3: Extract Tag Content

For each found meta tag, XeoPix extracts the content attribute value.

Step 4: Validate Each Tag

twitter:card

Check: Tag exists and has a valid value
Valid values: summary, summary_large_image, app, player
Fail condition: Missing tag or invalid value

twitter:title

Check: Tag exists and is not empty
Fail condition: Missing tag or empty content

twitter:description

Check: Tag exists and is not empty
Fail condition: Missing tag or empty content

twitter:image

Check: Tag exists and contains a valid URL
Optional: XeoPix may also check if the image is accessible (HTTP 200)
Fail condition: Missing tag or invalid URL format

Step 5: Determine Pass/Fail Status

A page passes this check if:

twitter:card is present with a valid value
twitter:title is present with non-empty content
twitter:description is present with non-empty content

A page fails if any of the above conditions are not met.

What XeoPix Stores

XeoPix saves the extracted values of all four Twitter Card tags in the SocialOpenGraphData table for each page. This allows you to:

See exactly what values are being used
Track changes over time
Compare implementations across pages
Identify patterns in missing or incorrect tags

Notes

XeoPix does not check if the image actually loads or its dimensions (this would slow down crawling significantly)
The check is performed at the page level, meaning each page is evaluated individually
Twitter Cards are different from Open Graph tags (og:title, og:description, etc.), though they often contain similar content
If both Twitter Card and Open Graph tags are present, XeoPix checks both independently

How To Fix

Step 1: Add Required Meta Tags

Add the following meta tags to the <head> section of your HTML document:


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Step 2: Choose the Right Card Type

Select the appropriate twitter:card value:

summary — Default card with small thumbnail and text (minimum required)
summary_large_image — Large image preview (recommended for most pages)
app — For mobile app promotion
player — For video/audio media

Recommendation: Use summary_large_image for most pages as it provides the best visual impact.

Step 3: Optimize Each Tag

twitter:title

Keep under 70 characters
Make it compelling and relevant
Don’t just duplicate the page title — optimize for social sharing
Include your brand name if space allows

twitter:description

Keep between 125-200 characters
Write for social media users, not search engines
Make it actionable and engaging
Front-load important information

twitter:image

Use high-quality images (minimum 300x157 pixels)
Aspect ratio should be 2:1 for summary_large_image
Keep file size under 5MB
Use JPG, PNG, or WEBP formats
Test with Twitter Card Validator

Step 4: Platform-Specific Implementation

WordPress

Use SEO plugins like Yoast or Rank Math — they automatically generate Twitter Card tags.

React/Next.js

Use the next/head component:


import Head from "next/head";
 
<Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={pageTitle} />
  <meta name="twitter:description" content={pageDescription} />
  <meta name="twitter:image" content={pageImage} />
</Head>;

Hugo/Static Sites

Use template partials to generate tags dynamically from front matter.

Step 5: Validate Your Implementation

Use the Twitter Card Validator
Test with real tweets by sharing your URL
Check with social media debugging tools (like Facebook Debugger)
Verify images load correctly on mobile and desktop

Common Mistakes to Avoid

❌ Using the same image for all pages — Each page should have a unique, relevant image ❌ Images too small — Minimum 300x157 pixels, recommended 1200x630 ❌ Missing protocol in image URL — Always use absolute URLs with https:// ❌ Non-crawlable content — Ensure Twitter’s crawler can access your pages (check robots.txt) ❌ Blocking Twitterbot — Don’t block Twitterbot in your robots.txt

Priority Fix Order

High Priority — Add twitter:card and twitter:title (minimum viable card)
Medium Priority — Add twitter:description and twitter:image
Low Priority — Optimize image dimensions and test different card types

What We Store

Storage Level

Page Level

Database Table / Prisma Model

SocialOpenGraphData

Stored Fields

Field	Type	Description
twitterCard	String?	Twitter card type
twitterTitle	String?	Twitter title tag content
twitterDescription	String?	Twitter description content
twitterImage	String?	Twitter image URL

Detection Dependencies

HTML Document
Meta Tags (twitter:card, twitter:title, twitter:description, twitter:image)

Examples

Example 1: Blog Post

Scenario

A blog post about “10 SEO Tips for 2024” needs proper Twitter Card tags.

❌ Problematic State (Fails)


<head>
  <title>10 SEO Tips for 2024</title>
  <meta name="description" content="Learn the top SEO strategies..." />
  <!-- Missing all Twitter Card tags -->
</head>

Result: Tweet appears as plain URL with no preview card.

✅ Corrected State (Passes)


<head>
  <title>10 SEO Tips for 2024</title>
  <meta name="description" content="Learn the top SEO strategies..." />
 
  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="10 SEO Tips for 2024" />
  <meta
    name="twitter:description"
    content="Boost your rankings with these proven SEO strategies. Complete guide with actionable tips."
  />
  <meta
    name="twitter:image"
    content="https://example.com/images/seo-tips-2024.jpg"
  />
</head>

Result: Tweet displays with large image, title, and description.

Example 2: Product Page

Scenario

An e-commerce product page for “Wireless Headphones” needs social optimization.

❌ Problematic State (Fails)


<head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="" />
  <meta name="twitter:description" content="" />
  <!-- Missing twitter:image -->
</head>

Issues:

Empty twitter:title and twitter:description
No product image specified
Using summary instead of summary_large_image

✅ Corrected State (Passes)


<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta
    name="twitter:title"
    content="Wireless Headphones - Premium Sound | BrandName"
  />
  <meta
    name="twitter:description"
    content="Experience crystal-clear audio with our premium wireless headphones. 30hr battery, noise cancelling. Free shipping!"
  />
  <meta
    name="twitter:image"
    content="https://example.com/products/headphones-main.jpg"
  />
</head>

Result: Tweet shows large product image with compelling title and description.

Example 3: Homepage

Scenario

A company homepage needs to make a strong impression on social media.

❌ Problematic State (Fails)


<head>
  <meta name="twitter:card" content="invalid_value" />
  <meta name="twitter:title" content="Home" />
  <meta name="twitter:description" content="Welcome to our website." />
</head>

Issues:

Invalid twitter:card value (invalid_value instead of summary or summary_large_image)
Generic, uncompelling title and description

✅ Corrected State (Passes)


<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="SEO Tools for Agencies | XeoPix" />
  <meta
    name="twitter:description"
    content="Powerful SEO auditing platform trusted by 500+ agencies. Crawl, analyze, and report on technical SEO issues. Start free trial."
  />
  <meta
    name="twitter:image"
    content="https://xeopix.com/images/social-preview.jpg"
  />
</head>

Result: Professional, branded card that encourages clicks and conveys value proposition.

Example 4: Article with Minimal Tags

Scenario

A news article only has minimal Twitter Card implementation.

⚠️ Partial Implementation (Passes but not optimal)


<head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Breaking: New Google Algorithm Update" />
  <meta
    name="twitter:description"
    content="Google announced a major core update affecting rankings worldwide."
  />
</head>

Status: Passes (has required tags) Issue: No image, using small summary card instead of summary_large_image

✅ Optimized State (Passes with excellence)


<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Breaking: New Google Algorithm Update" />
  <meta
    name="twitter:description"
    content="Google announced a major core update affecting rankings worldwide. Here's what you need to know and how to adapt."
  />
  <meta
    name="twitter:image"
    content="https://news.com/images/google-update-2024.jpg"
  />
</head>

Result: Maximum impact with large image preview.

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/socialOpenGraph/issue-99-twitter-card-meta.test.js

Purpose

Validates that the crawler correctly detects pages missing required Twitter Card meta tags (twitter:card, twitter:title, twitter:description, twitter:image).

Tested Function

runSocialOpenGraph()

Issue Information

Issue Number: 99
Issue Code: twitter_card_meta
Toggle Group: socialOpenGraph

Test Scenarios

Positive Test Cases

All required Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) are present → no issue detected.

Negative Test Cases

twitter:card is missing while other Twitter tags are present → issue detected with message containing twitter:card.
Multiple Twitter Card tags are missing (only twitter:card present) → issue detected with message listing all missing tags (twitter:title, twitter:description, twitter:image).

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 all four required Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) are present in the page HTML.

Fail

The issue should be reported when any of the required Twitter Card tags are missing. The details message lists which specific tags are absent.

Validation

Correctly detects the absence of required Twitter Card tags.
Does not report a false positive when all tags are present.
Handles empty HTML gracefully without crashing.

xeopix-crawling-v2/toggleGroups/socialOpenGraph.js
xeopix-crawling-v2/issueCodes.js

Coverage Summary

Covers the complete set of required Twitter Card tags.
Validates single-tag and multi-tag missing scenarios.
Includes resilience test for empty input.

References

Twitter Card Documentation — Twitter Developer Platform
Getting Started with Cards — Twitter Developer Platform
Card Validation Tool — Twitter

Twitter Card tags missing

What Is This Issue

What is This Issue?

What Passes

Example

Why Is This Important

Impact on Social Media Engagement

Benefits of Proper Implementation

SEO and Traffic Impact

Impact on SEO Health Score

Real-World Impact

How XeoPix Detects This

Detection Process

Step 1: Fetch the HTML Document

Step 2: Parse the <head> Section

Step 3: Extract Tag Content

Step 4: Validate Each Tag

twitter:card

twitter:title

twitter:description

twitter:image

Step 5: Determine Pass/Fail Status

What XeoPix Stores

Notes

How To Fix

Step 1: Add Required Meta Tags

Step 2: Choose the Right Card Type

Step 3: Optimize Each Tag

twitter:title

twitter:description

twitter:image

Step 4: Platform-Specific Implementation

WordPress

React/Next.js

Hugo/Static Sites

Step 5: Validate Your Implementation

Common Mistakes to Avoid

Priority Fix Order

What We Store

Storage Level

Database Table / Prisma Model

Stored Fields

Detection Dependencies

Examples

Example 1: Blog Post

Scenario

❌ Problematic State (Fails)

✅ Corrected State (Passes)

Example 2: Product Page

Scenario

❌ Problematic State (Fails)

✅ Corrected State (Passes)

Example 3: Homepage

Scenario

❌ Problematic State (Fails)

✅ Corrected State (Passes)

Example 4: Article with Minimal Tags

Scenario

⚠️ Partial Implementation (Passes but not optimal)

✅ Optimized State (Passes with excellence)

Unit Test

Test File

Purpose

Tested Function

Issue Information

Test Scenarios

Positive Test Cases

Negative Test Cases

Boundary Cases

Edge Cases

Expected Outcome

Pass

Fail

Validation

Related Production Files

Coverage Summary

References

Step 2: Parse the `<head>` Section