Do not do this when setting up Twitter Cards for your blog

I recently started this blog. That is why you may have noticed small changes in the user interface in the last weeks. That is due to the fact that I have re-written the site entirely. I have not written a blog post about it yet but it is on my list, so you will be hearing more about it in the upcoming weeks.

When we publish a link to a website on social media and other websites, we may have realized that sometimes they are displayed really nicely with our header image. This is not magic. Websites usually include some metadata tags with the image URL and some other data to tell these websites how the link should be displayed.

This is how a link to a blog post should like like. In this case Twitter is displaying a large image as specified in the metadata.

This is how a link with image is displayed on Twitter

Instead, Twitter was completely ignoring my image URL and displaying the link like this:

This is how a link without image is displayed on Twitter

In this post I will talk about a clever solution that I implemented for such metadata tags and how it has been tormenting me for weeks. I hope this serves someone else to not repeat the same mistake.

Metadata tags

If you want your links to display an image with it, we must specify a metadata tag as previously mentioned.

• For Twitter Cards, these tags are twitter:image and twitter:image:alt for the image URL and the alt text respectively.
  • For links on Twitter, we can additionally specify the twitter:card tag to display normal images with summary (second screenshot) or large images with summary_large_image (first screenshot).
• For other sites we use the Open Graph tags: og:image and og:image:alt.

Location React Hook

Gatsby uses React components. In the @reach/router library there is a super handy React hook called useLocation, we can check its usage here. This hook provides an easy way to find out the base URL on runtime by just calling: useLocation().origin.

// Small example of its usage
import { useLocation } from "@reach/router"

...
createImageUrl((imagePath) => {
  let baseUrl = useLocation().origin
  return `${baseUrl}${imagePath}`
})
...

How I used the React Hook

While working on the re-write of the blog, I sometimes check how things look like by deploying a preview to a different place. The reason I wanted to use this hook was that when deploying a non-live version, newly added images were not available since the base URL was hardcoded to https://www.manusobles.com/. By using this React hook, I managed to change the URL of the metadata to something like https://whatever-preview-url.../image-path instead of always having https://www.manusobles.com/image-path.

My thinking was:

This is cool! I have found a clever solution that works like a charm ✨

What I did instead was creating the source of my torment for the upcoming weeks 😭

Why this is not a good idea

The images were not showing anywhere. Twitter and LinkedIn they both stopped showing the link images when I published the re-written site. I was using the React hook and when having a look at the metadata tags they always looked how I had expected.

I never thought it was related to the React hook, I had no reason to think that was the problem as the URL looked good everywhere. So I tried different solutions, all focusing on the delivery of the images and the URL. I thought the image was not accessible because of the Gatsby plugin that creates different resolutions depending on the screen size, so I did some changes there. I did some research online and some people were saying that for Twitter to show the images, a specific aspect ratio or size was needed. I did some more experiments with the aspect ratio, size and I tried another image sources, none of them worked.

Discovering the problem

Although I tried different aspect ratio and sizes, I quickly discarded them as the root issue simply because links shared on Twitter by others did not have any specific aspect ratio or size and they were being displayed just fine.

All this time I was using some tools to check the Twitter and LinkedIn links:

• Twitter Card Validator
• LinkedIn Post Inspector

On both tools, images were not showing either; no matter what changes I introduced.

Then I decided to give Facebook Debugger a try. When I used it I clearly saw my problem. There was a warning about the og:image tag and the content looked like this:

undefined/image-path

The site URL was missing! 😱 Then it came to me like a waterfall:

The problem lies in the “clever” solution I had with the React hook!

What I concluded was that the React hook resolves the site URL correctly on the browser but these websites use a crawler to inspect the metadata, hence the hook was not able to obtain a valid site URL.

Solving the problem

The problem was then easy to fix. I replaced the usage of the React hook with the hardcoded site URL as I had previously. It will not display images properly in non-live links but this is a price I am willing to pay at the moment. The important thing is that images show properly now 😁.

Summary

In this post I showed an issue I had with Twitter Card images and images on other social media platforms. And I explained why we should not use the React hook useLocation to get a dynamic site URL for our metadata images.

If you had the same problem, I hope you found it useful!

Thanks for reading!