Skip to contentSkip to footer

If you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.

X (Twitter) recently updated their link previews to hide both the title and description, and overlaying the domain on top of the image.

While this isn't great when it comes to accessibility, discoverability and the dissemination of fake news, as many have pointed out, it also means that text in your share image can be obscured.

For example, here's what the BBC's sharing images currently look like:

BCC Twitter message with previews, where the BBC logo in the bottom left is obscured by the domain

In their case, they've been putting their logo in the bottom left of the image, which is right where Twitter is now overlaying the domain. To prevent that from happening, we need to find the safe zone for text.

The new URL overlay

X's new URL overlay is positioned in the bottom left of the image, 12px from either side and is itself 20px high. The width is dependent on the length of the URL, but with a font-size of 13 pixels it's never going to be extremely wide. For example, the BBC URL in the image above is 64px wide.

Unfortunately, that overlay is shown at the same size on top of differently sized images, so just looking at the default width and height of the image served by X (680px by 383px) and keeping the bottom 32px free isn't going to cut it. For example while this image looks fine in the Twitter web ui:

A post shown on the regular site with the overlay bel=ow the text inside the image

The text is overlapped by the URL when the post is shown in Tweetdeck even though the overlay is slightly less high at a total of 27px because of less spacing and a smaller font-size:

The same post in Tweetdeck with the overlay sitting in front of the text inside the image

Tweetdeck seems to be the worst case, so we can use the dimension there to calculate the safe zone.

The safe zone

To find the safe zone we need to know the percentage that the url overlay takes up of the height of the image in Tweetdeck, and then extrapolate that to the full size of an image.

In Tweetdeck the image is 147px high and the URL overlay takes up 27px of that, which is 18.36% of the height. That's the height without any sort of space above the url overlay, so if you want to be safe you can increase that percentage a little to 20%, which is 29 pixels on Tweetdeck and ends up being 77px on the full size image, assuming you use 680x383px images.

If you use a different size, for example 1280px by 720px which we use on our site, or 1360px wide and 766px height which is exactly @2x you can calculate the safe zone by multiplying the height of the image by 0.2:

dimensionsheightsafe zone
680x383px383px77px
1280x720px720px144px
1360x766px766px153px

Template overlays

If you want to update your own social media images you can use the template overlays below to find the safe space for your images.

The overlays are transparent pngs with a 20% red fill, so you can put them on top of your images in your image editor of choice and then move your text around until it's not overlapped by the red.

680x383px

Template for 680 by 383px images:

Template for 680 wide

1280x720px

Template for 1280 by 720px images:

Template for 1280 wide

1366x766px

template for 1366 by 766px images:

Template for 1366 wide

Pixel perfect preview

If you want to see exactly how your social previews will look with the new design, keep an eye out for the next release of Polypane. Polypane has pixel-perfect previews for nine different social media platforms, X included.

We immediately went to work to implement the new design as soon as X made the change:

Polypane showing the new X previews

The upcoming version of Polypane includes a pixel perfect preview of the new X cards, so you can see not just how much space you should keep free vertically, but also see exactly how much space your URL will take up horizontally.

Sign up for the newsletter to be notified when the next version is released, or head over to our page on social media previews to learn more about our pixel perfect social media previews.

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane UI