My og:image Bug
Tags: html, webdev, seo
Published: 2021-08-18 00:07:37

---
title: My og:image Bug
published: true
description: This is the story of a bug that I found while developing my blog. It may be a bit silly, but it could also be interesting because it showcases a difference in how social networks processed the page's metadata.
tags: html,webdev,seo
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd85i2174na6std7jksy.jpg
canonical_url: http://alvaromontoro.com/blog/67985/my-og-image-bug
---

This is the story of a bug that I found while developing [my blog](https://alvaromontoro.com/blog/). It got me puzzled for a while until I found a seemingly unrelated issue that caused the problem. It may be a bit silly, but it could also be interesting because it showcases a difference in how social networks processed the page’s metadata.

## The problem

When sharing a link from my blog on social media, the thumbnail picture looked Ok on Twitter or Linkedin, but it was different on Facebook. The Twitter card had the blog post thumbnail, but the Facebook card showed the generic website thumbnail:

<figure>
![Screenshot of two social media cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwlis5yaqa89yl575br4.png)
<figcaption>The card on the left is from Twitter, and it has the correct image. The card on the right is from Facebook, and it shows a generic site's thumbnail instead.<br/>&nbsp;</figcaption>
</figure>

I was filling both the OpenGraph and the Twitter card metadata with the same information. So it should be the same image.

It couldn’t be that the image didn’t fit Facebook standards. I had shared similar-sized images generated with the same format and compression. Also, Facebook’s documentation didn’t have anything stating I was doing anything wrong. What was going on?

## The root cause

I started digging in the code and found that this was the meta-information for the blog posts (code reduced):

```html
<meta property="og:title" content="The Simpsons in CSS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://alvaromontoro.com/blog/" />
<meta property="og:image" content="https://alvaromontoro.com/images/blog/the-simpsons-in-css.png" />
<meta property="og:description" content="This is a personal project..." />

<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://alvaromontoro.com/blog/" />
<meta name="twitter:title" content="The Simpsons in CSS" />
<meta name="twitter:description" content="This is a personal project..." />
<meta name="twitter:image" content="https://alvaromontoro.com/images/blog/the-simpsons-in-css.png" />
```

The values matched: `og:title` was the same as `twitter:title`, and similar for `og:url` and `twitter:url`, `og:description` and `twitter:description`, and for `og:image` and `twitter:image`. All the same for OpenGraph and Twitter metadata.

I was puzzled until I realized that the `og:url`/`twitter:url` was not the correct one. It matched on both, but it was pointing to the wrong URL: instead of being the blog post, it was the landing page of the blog. But what couldn't be, what matters for the thumbnail is the `og:image`/`twitter:image` value... right?

Wrong! I ran a quick test and, correcting the URL, fixed the thumbnail image bug, too! Unfortunately, I had fallen for the [same error that I described in a previous article](https://alvaromontoro.com/blog/67844/web-confusion).

While **Twitter and Linkedin were pulling the `og:image` data** and using it to display the thumbnail picture, **Facebook was using the `og:url` value as an index** and pulling the image information from a cache/database instead of using the `og:image`. That caused the problem.

## The solution

Knowing the problem, the solution was simple: **make sure that the `og:url` matches the actual page URL**. Which anyway was the right thing to do:

```html
<meta property="og:title" content="The Simpsons in CSS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://alvaromontoro.com/blog/67971/the-simpsons-in-css" />
<meta property="og:image" content="https://alvaromontoro.com/images/blog/the-simpsons-in-css.png" />
<meta property="og:description" content="This is a personal project..." />

<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://alvaromontoro.com/blog/67971/the-simpsons-in-css" />
<meta name="twitter:title" content="The Simpsons in CSS" />
<meta name="twitter:description" content="This is a personal project..." />
<meta name="twitter:image" content="https://alvaromontoro.com/images/blog/the-simpsons-in-css.png" />
```

Now, the Facebook card displayed the correct image too:

<figure>
![Screenshot of a facebook social media card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u3723ggitnc8ttuyif4.png)
<figcaption>Success!<br/>&nbsp;</figcaption>
</figure>

And that's the story of the `og:image` bug on my blog and how I solved it. Thanks for reading :)