Skip to content
PressQueue

Twitter Cards (X Cards) explained: Tags, types and images

Updated · 6 min read

PressQueue is a free WordPress plugin that shares your posts through Buffer. See how it works

When someone shares a web page on X, formerly Twitter, X reads the page’s HTML to create a link preview. This preview is commonly called a Twitter Card or X Card. The site owner adds metadata tags to the HTML with the page title, description, and image. When X fetches the URL, its crawler reads those tags.

Most websites choose between a compact preview with a small thumbnail and a preview with a larger image above the text. X needs to find the tags and image in the page’s HTML, and the image URL must be complete and publicly accessible. WordPress publishers can use PressQueue to create social images, add them to the card metadata, and share posts to X through Buffer. PressQueue is a free, open source WordPress plugin for Buffer, and Buffer connects to the social accounts and sends the posts.

X builds a card from the page’s metadata tags. These tags tell X which card layout to use and what text and image to show. For example, twitter:card selects the layout, while twitter:title, twitter:description, and twitter:image provide the content. The twitter:site tag can name the site’s X account.

Open Graph is a set of tags that several social platforms use to describe a page. If the page has no Twitter Card tags, X can use corresponding Open Graph tags, such as og:title, og:description, and og:image. These tags give several services the same page details, while Twitter Card tags let a site set details specifically for X. The Conductor overview says a valid implementation needs twitter:card and twitter:title and recommends adding the other details.

Keep the title and description short because the preview can cut off text that does not fit. Conductor reports that titles longer than 55 characters can wrap and descriptions longer than 125 characters may not fit on two lines. These are observations about how text displays, not fixed limits for every screen. Add descriptive alternative text with twitter:image:alt to tell people using screen readers what the image shows.

The two card types most sites need

The Summary Card places a small, square thumbnail beside the title and description. Use it when the preview image is secondary and a compact layout suits the page. Conductor lists a 1:1 image ratio and a minimum size of 144 × 144 pixels; a square image around 400 × 400 pixels is a common recommendation in InspectWP’s WordPress guidance.

The Summary Card with Large Image places a wide image above the title and description. This is the more prominent format for an article or landing page whose image helps explain the link. Conductor lists a minimum image size of 300 × 157 pixels, while InspectWP recommends 1200 × 628 pixels for a sharper result.

The other documented types are App Cards, which promote mobile apps, and Player Cards, which embed media such as video or audio. Their tags are more specialized, and sources describe their availability as dependent on X approval or whitelisting. Most publishers sharing ordinary web pages should focus on the Summary and Summary Card with Large Image.

Choose an image that X can fetch

Use a complete image URL, including its protocol, such as HTTPS. A relative path like /images/article.jpg does not give X’s crawler the full address. Conductor lists JPG, PNG, WebP, and GIF as supported formats. For an animated GIF, it says X uses the first frame. Conductor does not list SVG as a supported format.

Sources give different recommendations for wide-card images. They suggest ratios around 1.91:1 or 2:1 and sizes such as 1200 × 628 or 1200 × 600 pixels. Since the recommendations conflict, choose a wide image close to those proportions and check how X displays the page. Do not treat any one size as a guaranteed current requirement. The card format specifications and InspectWP’s image recommendations offer reference points.

Choose an image with a clear subject and leave space around any text or logos. Small details can be hard to see in a preview. Conductor lists a 5 MB maximum for card images. A page can use the same image for its social image and Open Graph image, so other platforms may show it when someone shares the link.

Set up X Cards on WordPress with PressQueue

WordPress core does not generate Twitter Card tags by itself. An SEO or social plugin must add the metadata, unless the site owner adds it another way. PressQueue can generate a social image for each post and use it as the page’s og:image and twitter:image. It works with Yoast SEO, Rank Math, The SEO Framework, and Jetpack. If none of these SEO plugins is active, PressQueue adds the tags itself. An image set for an individual post in the SEO plugin takes priority.

To set up PressQueue for sharing WordPress posts to X:

  1. Download pressqueue.zip from the PressQueue download page. In WordPress, go to Plugins > Add Plugin > Upload Plugin and upload the ZIP. The site needs WordPress 6.8 or newer and PHP 8.1 or newer, and the publisher needs a Buffer account with social accounts added.
  2. In PressQueue, paste a personal Buffer API key from Buffer settings. There is no Buffer login button. PressQueue stores the key encrypted, then displays connected Buffer channels with switches; new channels start turned off.
  3. Set Test mode first. PressQueue records what it would share without sending posts. Create a sharing rule, test it against recent posts, then switch it on when the results look right. A one-click rule shares every new post to all connected channels, or you can choose posts by criteria such as category, tag, author, or post type.
  4. Under Settings > Social images, choose a design and review the live preview. PressQueue draws an image with the post title and site name in a wide link-preview shape. PressQueue creates the image when a post first needs one. It redraws the image when the title or style changes and keeps it out of the Media Library. The feature needs PHP GD with FreeType; if the host lacks it, posts still go out with text and a link.

For a shared post, publishers can select the featured image, a per-post image, the generated social image, or no image. Its sharing rules also control the message and timing. Messages can use placeholders such as {{ title }} and {{ excerpt }}, and PressQueue adds the post link. Publishers can add a post to the end of Buffer’s queue, put it at the top of the queue ahead of posts already waiting, or send it right away. They can also save it as a Buffer draft or set a date and time for an individual post.

PressQueue helps publish WordPress posts and share them on social media. It does not preview cards. X still builds the card from the metadata and image it can fetch from the page. See the PressQueue documentation for setup details.

Check the page when a preview looks wrong

If X shows only a plain URL or leaves out the expected image, start by checking the page’s HTML. Make sure the card tags appear in the page head and that the image URL is complete and reachable. X’s crawler does not run JavaScript to find tags added after the page loads, so the original HTML must contain the metadata. Check that robots.txt does not block Twitterbot. A broad User-agent: * block also applies to Twitterbot. Conductor says a card checker may also fail to find metadata if the server returns an HTTP response other than 200 or a content type other than text/html.

X caches card information, so changing a page’s tags does not immediately update an existing preview. X removed the Card Validator’s preview, so it no longer shows what X will display. To check a link, paste it into a draft post in X, look at the preview, then discard the draft. The Twitter Card Validator guide explains this in more detail. If the image still looks outdated, change its URL. Conductor describes changing the URL, for example by adding a query string, to prompt X to fetch the new image. Do not rely on a specific cache duration because published claims about the duration conflict.

On WordPress, avoid duplicate metadata. If an SEO plugin already adds Twitter Card tags, check the rendered HTML before adding another set manually. Duplicate tags can produce unpredictable results. According to InspectWP’s WordPress guide, X may use the first tag it finds.

More about link previews and social images