Jump to main content

Open Graph, Facebook and client side rendering

Open Graph is a protocol that specifies a set of meta tags to be used on a website. When used they affect how the website will appear when shared on social media services such as Facebook, Twitter and Linkedin. What I didn't know and just stumbled upon was the problem when using Open Graph meta tags on a client side only webapp (SPA).
This webapp was using React and React Helmet to handle meta tags. But when shared on Facebook the Open Graph meta tags set by React Helmet didn't work.

After some quick googling I found out that even today (2020) Facebook scraper only rely on the meta tags that are set by the server. It doesn't work with client side rendered meta tags.
This means, if you want to be able to control your sites share appearance with Open Graph, you'll need to run server side rendering as well.
(Which also has many other benefits, but I really believed that of all companies Facebook would handle SPA better when shared).

Read more / sources: