Much has changed since Twitter rebranded to X. The way links unfurl and display social share previews on X is just one example.

If you share links to your website or blog on X, or if others do, you’ll want to ensure you have the proper OG tags set up. These tags will enable X to display your web page’s title, preview image, description, and url in the preview.

According to X’s own documentation about their requirements, you’ll want to have a few special og tags in place:

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@flickr" />

<meta name="twitter:title" content="Small Island Developing States Photo Submission" />

<meta name="twitter:description" content="View the album on Flickr." />

<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

While their documentation links to the Validator, the Card preview no longer exists. You can only see a preview in the Tweet Composer now. Of course, you can always use our free social and share preview tool if you want to check your preview before moving to the Tweet Composer.

Here is more information on the twitter:image tag:

“A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144×144 or maximum of 4096×4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.”

They also have a twitter:image:alt tag, where you can input “A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.” We recommend this for accessibility.

As you can see, X allows you to override the og:image tag with a different image by setting the twitter:image meta tag. If twitter:image doesn’t exist, the platform will use og:image.

According to their own documentation, Summary Card image sizes for tweets should be an aspect ratio of 1:1 (square) and images will be cropped to a square on all platforms.

However, according to our tests, they crop all images from shared links to 508x266px, a ratio of 2:1.04.

Not only do their stated specifications not hold true, we were actually unable to generate OG images at all without posting twice. As you can see in the screenshot above, we posted the link first (bottom post) and the link did not unfurl. The tweet simply shows a truncated url path.

Our second post did result in an unfurled link (shown in the post creator above). Below, you’ll see the final, posted tweet.

We also found that sometimes the OG image didn’t show up in the feed directly after posting, but did show up when the page was refreshed.

Title, Description, and URL OG Tags on X (Twitter)

The URL is completely hidden other than the top level domain which displays as an overlay in the bottom left corner. 

Hovering over it does not provide additional information (see lower left corner of browser window displaying a t.co abbreviated link).

No additional information displays. You might expect to see a Title and Description which is typical on other social platforms, and on Twitter in the past. But, we have not seen that additional metadata on X in some time.

Here’s one example where we do see Title and Description show up:

In this example, no OG image is shown, but the Title and Description do display.

Using our Social & Share Previews tool, we’re seeing the following meta tags specified by nasa.gov:

<meta property="og:title" content="Planning Guides - NASA Science">

<meta property="og:url" content="https://science.nasa.gov/multimedia-galleries/planning-guides/">

<meta name="description" content="This is a collection of NASA Science Planning Guides. High resolution printable PDF files are available for download. Low resolution PDFs are 508 compliant. Hard copies are also available for purchase through the GPO Bookstore.">

<meta property="og:description" content="This is a collection of NASA Science Planning Guides. High resolution printable PDF files are available for download. Low resolution PDFs are 508 compliant. Hard copies are also available for purchase through the GPO Bookstore.">

<meta property="og:image" content="/nasa-social-logo.webp">

<meta name="twitter:title" content="Planning Guides - NASA Science">

<meta name="twitter:description" content="This is a collection of NASA Science Planning Guides. High resolution printable PDF files are available for download. Low resolution PDFs are 508 compliant. Hard copies are also available for purchase through the GPO Bookstore.">

<meta name="twitter:image" content="/nasa-social-logo.webp">

<meta name="twitter:card" content="summary_large_image">

<meta property="og:image:alt" content>

<meta property="og:image:width" content>

<meta property="og:image:height" content>

Nasa’s web team has gone through the trouble of specifying Twitter-specific tags, yet did not use absolute URLs. The relative URLs used do not have the full URL path.

A best practice is always to use the full path, or absolute URL. 

Facebook and LinkedIn still are able to resolve it and do display the OG image. However, X and our own free social and search previews tool require an absolute URL.

Conclusion

• OG Image size will be a 2:1 ratio and will only display if your metatag specifies an absolute URL
• Only the top level URL of your page will be displayed
• The Title of your page will only be displayed if no image is found
• The Description of your page will only be displayed if no image is found

Preview Before You Share!

Try our Social Sharing Preview and Meta Tags Audit Tool, including previews for Twitter, LinkedIn, Google, and Slack.

Try For Free