
## Earlier today, we had a problem at [Gymnasium](https://www.thegymnasium.com).

We released a [new 5 minute tutorial on Making Headings and Lists more Accessible](https://thegymnasium.com/take5/making-headings-and-lists-more-accessible) - which is great news! If you build things for the web, and you've got 5 minutes to spare in your day (you do), you should give it a look.

After the course was made public, our marketing wizard did her magic and started posting to our various social media pages: [Facebook](https://www.facebook.com/aquentgymnasium), [Twitter](https://twitter.com/AquentGymnasium), and [LinkedIn](https://www.linkedin.com/school/gymnasium/). 

It was immediately apparent that something was off. During our course release process, we missed the fact that Open Graph metadata for that course page wasn't correctly included. Unfortunately, that meant that _none_ of our posts on social media had the beautiful image previews that we'd expect to see (and by extension would likely see far less engagement).

<Aside>
  <em>Open Graph</em> metadata tells other services what kind of information is shown when a URL loads, so that they can create a preview of the URL that makes sense. Read more at <a href="https://ogp.me" target="_blank" rel="noopener noreferrer">ogp.me</a>.
</Aside>

Fast forward a short while, and we updated our CMS with the necessary metadata for Open Graph Shares to work correctly.  Newly shared links in our team Slack now looked great! 

<Image
  publicId="posts/open-graph-cache-reset/slack-after"
  alt="screenshot of a post in slack"
  caption="Screenshot from slack after the fix - our new course was shared with the correct image"
/>.

## Social networks cache link previews

Rather than redownload the preview image and metadata for a given link every time it's shared, your entire open graph preview is often cached.  Depending on the site, that cache may be cleared regularly throughout the day.  

Because we had _already_ posted links to our courses, every site we had shared to had cached our shared links with the bare defaults. The result was relatively plain, and not relevant to the content on the page - something like:

`Free online courses on design and web development | Gymnasium`

With Gymnasium's logo beside it.  Just defaults! Not a great look.

Because we were working on a concerted marketing push to announce our new courses, these extremely plain previews were bad news. We've seen from experience that having an attractive (and differentiated) share image helps gain traction during the initial publicity of new content.  

## _You_ can trigger a cache reset on each of these sites!

After some brief research, we found that there are tools to reset the cache on each of the major social networking sites.  They're each extremely easy to use - paste your URL in a box, click a button, and reset the cache if necessary.  Here's the ones we found to be useful:

### Use these links

| Site | Cache reset tool link |  
| :--- | :-------------------- |
| Facebook | [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/) |
| LinkedIn | [https://www.linkedin.com/post-inspector/](https://www.linkedin.com/post-inspector/) |
| Twitter | [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator) |

That's all there is to it! Hit reset, re-share your link, and you should see your latest Open Graph preview shared.  Phew! 😅


How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook


This morning, I fully switched my personal site from Google Analytics to [Fathom](https://usefathom.com/) - something that I had been considering for a while, and finally decided to go all in on.  Thanks to my colleagues [@andrewpmiller](https://twitter.com/andrewpmiller) and [@jeremias](https://twitter.com/jeremias) for planting this seed months ago - I'm glad I finally made the switch.

## What is Fathom?

In their words, Fathom is "simple analytics for website owners & businesses".  Near as I can tell, that's a perfect distillation of what they've built.  Fathom provides an easily digestible single page analytics view of your site's traffic.

It's a service that rids you of some of the heft of having Google watch you and your users' every move.  They're open and transparent about being [Privacy First](https://usefathom.com/privacy) - something which has long since melted away from Google's ethos.

In addition to giving you information about the traffic coming and going from your web property, fathom also lets you set goals for your site traffic - so that you can keep an eye on performance of what matters to you.  Maybe you want to see how many people are visiting your "about me" page, or track newsletter subscriptions -- with Fathom, it's a straightforward javascript call to make that happen.

## Why Fathom?

For me, the functionality it provides is perfect - [my personal site](https://mikebifulco.com) is slowly growing in traffic, which is great! I had been using Google Analytics to keep an eye on my site's traffic, but honestly - I spent a disproportionate amount of time getting lost in all of the bells and whistles of GA.  That time wasn't giving me more usable insight... I was just getting lost in the tool.

I also love the idea of Privacy First tooling, which Fathom hits out of the park.  When you visit my site, I'm not keeping any of your PII, or doing anything creepy with your browsing behavior.  I just want to know how various articles perform, so that I can make better decisions about what to write in the future.

Another benefit was the install process - getting Fathom set up was a breeze. You may know that my site is built on [Gatsby](https://gatsbyjs.org/) - it turns out there's a reasonably well-featured [plugin for gatsby](https://github.com/lgraubner/gatsby-plugin-fathom) created by a member of the community. In addition to that, they're reportedly shipping their own plugin in the next few weeks. 


<Tweet tweetLink="usefathom/status/1256954976238055424" align="center" />

<Aside>
  Note: it looks like in the coming weeks, Fathom will be providing their own Gatsby plugin!
</Aside>

## Looking for a free option?

**Fathom also has a self-hosted product** called "[fathom lite](https://github.com/usefathom/fathom)" which you can run yourself if you want to use their service for free.  It isn't as full-featured as full blown fathom, but it will give you a good idea of what you're in for.  I set it up on Heroku (using [these instructions](https://gist.github.com/gmolveau/78f88af3f5951ba6e093f93a07caa302)) for a few weeks before deciding to take the plunge and pay for Fathom's SaaS service.

## Try it yourself!

Thinking about giving it a whirl? One of the perks of being a Fathom customer is their affiliate program - you can use my link to [sign up for Fathom](https://usefathom.com/ref/DPSSYB) for a $10 discount on your first invoice.  Sweet!






Why I switched to Fathom for analytics


So, like all good things, the idea for this post comes from a tweet:

<Twitter tweetLink="irreverentmike/status/1141169316273897536" />

This is something I've been ruminating on for a bit.  I've even tried to build it - a few times! I keep starting in on the work and getting lost in the millions of directions I could take it. 

Here's what I'd like: When I publish a new post to [my gatsby site](https://mikebifulco.com) (you're on it now!), I'd like for that post to appear on [dev.to](https://dev.to) automatically.

## It should:

- recreate my post verbatim, from its original markdown source
- use the `canonical_url` frontmatter field to make sure I retain SEO goodness on my post
- happen without my intervention
- be agnostic of where my posts are coming from.  I use [takeshape.io](https://takeshape.io) as a headless CMS for my site, so my individual posts aren't in source control
- only take posts from my `master` branch, since I use feature branches for draft posts from time to time
- use the [dev.to API](https://dev.to/api), of course

## Nice to have:

- maybe posts should be set to `published: false` at first, so I can preview/review/update them as needed for dev.to?

## Possible approaches for this:

1. Tap into GitHub's webhooks somehow, and fire off a post here 
1. Come from a job kicked off after CI, maybe? I use CircleCI, but would like this feature to be fairly implementation agnostic.
1. Use a [GitHub App](https://developer.github.com/v3/apps/)?
1. ...or a [GitHub Action](https://github.com/mbifulco/thepraticaldev-crosspost-action)?
1. Perhaps just a lamba function deployed to AWS or [Netlify Functions](https://functions.netlify.com/).

So - here's where I ask for your help.  Surely there's a simple approach here I haven't thought of, or maybe it's a matter of collecting a few scenarios and building something based on 80/20.

What else am I missing here? I'd love your help.  What use cases would you have for a cross-poster from your gatsby site? How would you implement it? How can we help each other?



#gatsby: 3 posts tagged

How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook

Why I switched to Fathom for analytics

Do you have your own Gatsby site? Let's brainstorm a dev.to cross-poster

.css-1fb0br2{color:#A0AEC0;}#gatsby: 3 posts tagged

#gatsby: 3 posts tagged