CodeBlanks Logo Icon CodeBlanks
Login Register

Twitter card

HTML course · Advanced · Lesson 26/56

Use twitter:card, twitter:title and twitter:image.

What is a Twitter card?

Twitter (X) and other platforms show a special card when a link is shared. That card is built with Twitter card tags and is separate from Open Graph.

Twitter card tags use the form <meta name="twitter:...">; here you use name, not property. The three essential tags are twitter:card, twitter:title and twitter:image.

twitter:title and twitter:image

twitter:title is the title of the card. If og:title is defined in Open Graph, Twitter may fall back to it; but write both to be explicit.

twitter:image is the URL of the card image. For the summary_large_image card, an image around 1200x628 pixels is recommended. Use an absolute URL with https.

Using it together with Open Graph

Twitter card and Open Graph are usually written together. Twitter looks at twitter:* tags first, then falls back to og:* tags. So writing only Open Graph also works; but to fully control the card, add the twitter:* tags too.

If twitter:image is missing, og:image is used. The same rule applies to the description.

Exercise Add Twitter card tags for a blog

Add three Twitter card tags to the head for a blog post: <meta name="twitter:card" content="summary_large_image">, <meta name="twitter:title" content="..."> and <meta name="twitter:image" content="https://...">.

Show example solution 
<head>
  <title>Blog Post</title>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Blog Post: Web Design">
  <meta name="twitter:image" content="https://alexblog.com/cover/design.jpg">
</head>

Test yourself

  1. Complete the twitter:card tag

    <meta name="twitter:card" content="____">
    Show answer 
    <meta name="twitter:card" content="summary_large_image">

  2. What value does twitter:card take?

    <meta name="twitter:card" content="?">
    • summary_large_image
    • <meta>
    • og:title
    • <link>
    Show answer

    summary_large_image — Correct. summary_large_image is the large-image card type.

  3. Match the Twitter property with its role

    twitter:card
    Card type
    twitter:title
    Card title
    twitter:image
    Cover image
    twitter:description
    Card description

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone