Debugging social sharing cards
Tags: socialsharingcards, twitter, personalsite, gatsby
Published: 2021-08-12 04:57:53

---
title: Debugging social sharing cards
published: true
date: 2021-08-11 00:00:00 UTC
tags: SocialSharingCards,Twitter,PersonalSite,GatsbyJS
canonical_url: https://MihaiBojin.com/personal-site/debugging-social-cards
---

![Photo: Debugging](https://MihaiBojin.com/static/b863610b47cb2ade27d4bf032c53ec21/4968a/sigmund-QuusekRfTI8-unsplash.jpg)<figcaption>"Photo by <a href="https://unsplash.com/@sigmund?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sigmund</a> on <a href="https://unsplash.com/s/photos/debug?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>"</figcaption>

🔔 This article was originally posted on my site, [MihaiBojin.com](https://MihaiBojin.com/personal-site/debugging-social-cards?utm_source=DevTo&utm_medium=organic&utm_campaign=top-promo "MihaiBojin.com"). 🔔

* * *

I am currently working on the [Tools section](https://mihaibojin.com/tools?utm_source=DevTo&utm_medium=organic&utm_campaign=rss) of my site. While implementing it, I had to reconfigure Tailwind to include CSS classes for additional colors.

Just as I [posted this on Twitter](https://twitter.com/mihaibojin/status/1425073010030022656), I noticed the [Twitter card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started) no longer worked.

Since these used to work, I started investigating.

The first step was to check the [Twitter card validator](https://cards-dev.twitter.com/validator).

[![Twitter card validation error](https://MihaiBojin.com/static/6ece1171d6a5633ad10df2d852f20b34/e9beb/twitter-card-validation-error.png "Twitter card fails to validate")](https://MihaiBojin.com/static/6ece1171d6a5633ad10df2d852f20b34/f4281/twitter-card-validation-error.png)

The output was not at all helpful. So, I started scouring the web and found [various advice on robots.txt](https://twittercommunity.com/t/error-no-card-found-card-error/130123), [rules for setting up meta tags](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started), and general [troubleshooting advice](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards).

Nothing made sense, though, as the problems described in these resources did not affect my site.

However, I found the [Facebook debug tool](https://developers.facebook.com/tools/debug/) [during my searches](https://stackoverflow.com/questions/41740110/twitter-twitter-cards-not-showing-image-after-tweet-post) and promptly used it to test my site.

[![Facebook validation error](https://MihaiBojin.com/static/9e7263e3cb932d45b346275000d0aa79/e9beb/facebook-debug-error.png "Facebook debug shows missing og: tags")](https://MihaiBojin.com/static/9e7263e3cb932d45b346275000d0aa79/51ed8/facebook-debug-error.png)

This tool was better than Twitter's one and showed me more information:

- missing `og:image`
- and other properties: `og:url`, `og:type`, `og:title`, etc.

At this point, I had a WTF moment since, as you can see below, my site included valid meta tags...

[![Valid meta tags for social cards](https://MihaiBojin.com/static/6ca96c1448f434ff7f259fb0b6677257/e9beb/valid-card-tags.png "My site's markup included valid meta tags for cards")](https://MihaiBojin.com/static/6ca96c1448f434ff7f259fb0b6677257/5bf79/valid-card-tags.png)

One thing jumped at me - the HTTP response code was `206`. This was unexpected, but in retrospect, quite logical. Twitter and Facebook deal with a large majority of the open web. Allowing their crawlers to process an unlimited input size means opening them up to abuse. Status code 206 means Partial Content, a.k.a that the requested data range was received (but not ALL of the page's content!)

Immediately, I looked at where the meta tags were placed on my site's HTML and discovered that the [global CSS](https://www.gatsbyjs.com/docs/how-to/styling/global-css/) preceded my meta tags... all 2 MB of it!

[![2MB CSS before social tags](https://MihaiBojin.com/static/c625d3d6ec924d4d2681dabaaeaf3abb/3996e/2mb-css.png "Two MB of CSS preceding the social tags")](https://MihaiBojin.com/static/c625d3d6ec924d4d2681dabaaeaf3abb/3996e/2mb-css.png)

My next thought was to configure where `react-helmet` places its tags, but [no luck](https://github.com/nfl/react-helmet/issues/514) 😔.

I thought `Gatsby` would surely have this feature, but [no go](https://stackoverflow.com/questions/59975501/gatsby-puts-all-css-in-head)!

I did, however, find the [gatsby-plugin-split-css](https://www.gatsbyjs.com/plugins/gatsby-plugin-split-css/) plugin that brought down the CSS to 600K, which is low enough that I no longer run into this issue.

**SCORE!**

* * *

I am not entirely happy with this fix - something is off, almost like a code smell. I'm no frontend expert, but I'm starting to suspect why [CSS-in-JS](https://cssinjs.org/) and [Emotion](https://emotion.sh/docs/styled) are a thing...

Long term, I want to try a few things:

- get rid of global CSS styles, or at least find a way to include them as a separate file
- reorder the head tags
- move Tailwind's `<style>` at the very end of `<head>`

But for now, this will have to do.

Until next time!

Mihai

* * *

If you liked this article and want to read more like it, [please subscribe to my newsletter](https://motivated-founder-807.ck.page/db1cf284bf "newsletter link"); I send one out every few weeks!