This is the story of a bug that I found while developing my 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:
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):
<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.
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:
<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:
And that's the story of the og:image bug on my blog and how I solved it. Thanks for reading :)
Top comments (4)
You can always manually refresh the cache of facebook. If you go here: developers.facebook.com/tools/debu... and put your url you can crawl the information from the FB cache and you will find an option to "scrap again". You will also find the time of the last scrap.
Ultimately, the issue was that the og:url was pointing to the wrong URL, so even refreshing FB cache, I eventually had the same issue (as soon as it indexed the landing page of the blog) because FB looks for the image associated to the URL in og:url instead of the page URL.
I must say that this issue happened a few months back (this is one of the drafts I've had written but not published for a long time). Maybe it doesn't work the same anymore. I should check 😳
Oooh this seems like such a brain teaser to figure out. So frustrating when it seems like you have done everything correct.