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

[Music] welcome back to the stream and in the last one we have explored something called react helmets which allowed us to set page titles and page descriptions for each of these pages right these titles will start appearing in Google search results very soon because Google actually goes into your website and runs the JavaScript and as soon as the JavaScript runs title gets set to this one and then Google the search engine will pick up the title and the meta description from the site but when these links get shared on social media then the JavaScript is not gonna run so let's say I'm sending a slack message to one of my colleagues and I just copied this link slack is not gonna run the JavaScript on the website to grab the meta headers right it's just gonna grab the default one and this is the static one that's being served by index.html so to fix this problem people usually do something called server-side rendering and in this video I'm gonna show you how you can skip server-side rendering altogether by using something called react snap this thing generates static HTML files with the meta tags automatically after you complete the build so when you do npm run script build this thing runs and then automatically crawls through every single link that you have in your page and then creates static HTML files with the meta tags inside them so if someone shares the link and they're gonna get the correct meta preview this is done without server-side rendering overhead right server-side rendering is very complex to solve this problem like I'd rather not do server-side rendering just to solve this tiny problem and fortunately this is here so we are gonna use in this one let's install this library and then use it NPM I react snap site so while this is installing let's go back to the documentation and let's see how this thing is used so in your index or J's for react 16 plus you you need this thing we're not using pre-act we are using create react app and it works out of the box which create reacts not local changes required which is perfect right so I'm just gonna copy this and let's go to our index ojs and I'll just paste this thing in here so this is our react app right and I'm gonna extract that into its own variable so I'm just gonna call it comes up equals and in parentheses you're gonna extract this thing into its own variable so it's okay we don't need this thing anymore we can remove that from there and let's just move this one to over there okay let's clean this file up and you're gonna use the app in here well this is pretty much it and we need to add this scripts thing into our package JSON the scripts this thing probably exists so just copy that line so let's go to package dot JSON and in your scripts array just put this thing in here up to the build completes the react snap script will start running and it will crow through all of your links and it will grab the correct metadata for all of them so let's do a 10:00 p.m. run script build let's see if that works okay so you can see that react snap started running and it scrolling through all of my pages now and you're gonna see some warnings those are being generated by firebase I'm gonna solve that problem in a later stream but you don't have to worry about that so it scrolling through all of the links that I have it's going to my blog my 404 page my other blog posts and I think we are good to do a deployment now I have tested this before that's how I know the deployment will work and after the deployment completes we should be able to see our tags and the meta tags I Oh website by the way this is this shouldn't be the only tool that you rely on there's another one called meta preview dot app this is made by one of my friends this guy is a reactive developer slash designer so you might as well check this one out as well this one just shows how your messages are going to look when you share also there is another one called LinkedIn post inspectors so if you search for this in Google you're gonna get the link for it okay so it seems like the deployment has been completed so let's try Sam's tool I'm just going to check if the correct meta tag exists for one of my blog posts alright so you can see the title is correct now and it says ear phones have come a long way it's about time we forget about the headphone jack so let's go back to this one it used to say hey this is my personal website so if I click sorry for doggie screen tap I lose press ENTER again I guess okay so you can see the updated ones so you can see the title is correct this part is correct as well now let's check the blog area and that's probably going to be yep that's it that's name and surname - blog and the description says this is my personal blog where I share my opinions accessories and stuff yeah so let's see check it using some stew again this seems to be fine the only thing that's missing is the images in here right the select messages and everything else seems to be sharing an image and that's what I'm gonna explore in my next video so I'm gonna have an image for my home page for my blog for the 404 page on all of my blog posts and all of those things are gonna get generated during the build hopefully so yeah we'll see we'll see how that will go but yeah that's the topic for my next video and I hope you learned something new from this one and yeah I will see you on the next one all right right

Channel: Çelik Köseoğlu

Views: 7,052

Keywords: react, programming, personal, website, celik, koseoglu, design, update, web, prototypes, navbar, scroll, bootstrap, horizontal, hooks, markdown, useEffect, proptype, shape, png, webp, helmet, metadata, without, ssr, snap, crawler, correct, slack, message, description, social, media, sharing, seo

Id: idq0UMulc6g

Length: 6min 6sec (366 seconds)

Published: Sun Jun 07 2020