vibecheck0.3.0
Search visibilityseotwitter-card-missinginfo

Missing Twitter/X card in Vanilla JS

X (Twitter) reads twitter:card to decide how to render a shared link. Without it, your link may appear as bare text instead of a rich card with image and headline. While X often falls back to Open Graph tags, declaring the card type explicitly guarantees the large-image layout.

Framework fixes
GeneralReactNext.jsVueSvelteVanilla JS

Symptoms

  • Links on X render as plain text, no image
  • The card uses a small thumbnail instead of the large image layout
  • Preview differs from other platforms that read og:*

How VibeCheck catches it

In your widget · Problems

infoseoMissing Twitter/X card

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "seo", issue: "Missing Twitter/X card", threshold: "no <meta name="twitter:card">" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • Only og:* tags were added; twitter:* was skipped
  • No explicit card type declared, so the large-image layout is not guaranteed
  • The head is unmanaged

The fix for Vanilla JS

Add the twitter:card tag to each page’s <head>. X reuses your og:image/title/description, so the card type is usually all you need.

html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@acme" />

Steps

  1. Add <meta name="twitter:card" content="summary_large_image">
  2. Ensure og:image/title/description are present (X reuses them)
  3. Validate the card in X’s card preview tooling

See the general, framework-agnostic fix →

FAQ

Do I need twitter:* tags if I already have og:* tags?
X falls back to og:* for image, title, and description, but you should still set twitter:card to guarantee the summary_large_image layout.
What card types exist?
The common ones are “summary” (small square thumbnail) and “summary_large_image” (full-width image). Use the latter for most content pages.
What are twitter:site and twitter:creator for?
They attribute the card to X handles — twitter:site to the publishing account, twitter:creator to the author. They are optional and don’t change the layout, but they add the “@handle” byline on the card.
My og:image is 1200×630 — does it work as a Twitter card?
Yes. summary_large_image uses the same 1200×630 (1.91:1) image as Open Graph, so one image covers both. X reads og:image when no separate twitter:image is set.