Back to Browse

Set Metadata Per Page Without Server Side Rendering Using react-snap

24.8K views
Jun 8, 2020
6:06

In this video series, I work on my new personal website built using React. Website: https://www.celikk.me GitHub: https://github.com/celikkoseoglu/celikk-personal-website Playlist: https://www.youtube.com/watch?v=DyrydvufT5A&list=PLNkfllcUq3AkdeD4Aqp_Z2AIGyyF00_d8 Twitch: https://www.twitch.tv/celikkoseoglu You should watch the react-helmet video before this one: https://www.youtube.com/watch?v=R2WVKIJetyo This is a continuation of my previous work using React Helmet. We've set the metadata for Google's web crawlers. Plus, users can see the correct titles when they browse our site. However, when they share the website using a slack message (or facebook, linkedin etc.), they will not get the correct tags. This is where react-snap comes into play. It crawls through your website at build time and generates all html files with the correct headers so when you share your website online, you will get the correct metadata per page. This is super useful because it eliminates the need for Server Side Rendering for my use case. Decreases complexity by a lot.

Download

1 formats

Video Formats

360pmp410.8 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Set Metadata Per Page Without Server Side Rendering Using react-snap | NatokHD