How react-helmet is not a solution for improving the SEO of websites

hello everyone welcome back to my youtube channel if this is your first time here my name is tillian and on my space here i talk about tech i talk about all things tech from tools to practices to terminologies to various libraries and name it so if this is content you're interested in kindly subscribe and kindly like this video if you find this helpful in today's video i'll be showing us why react helmet is not a solution for seo seo stands for search engine optimization so what is react helmet just to recap react helmets is the documents head manager for your react applications what these two does is you can dynamically update the meta information of your application depending on the view you're on so if you're on the about page or if you're on the about view since react is a single page application if you're on the about view you can update the meta information for that view if you're on the contact view you can update the meta information or that view and i'll show us quickly how to use that in a react application in this example we're using this simple react application that i've set up with create react app so i've set up the basic routines that i need i need to home page to show the about to show the home component and then i need the about part to show the about component so here is my about page and for this page i'm going to set a different meta information helmet and i could just put this anywhere i can put it below it's not actually shown on the front and it just updates the meta information in the head tag so here i can have my about page and then i can go to the home page and just here i can have my home page import helmet react helmet now when you go over here you can see this my homepage and then we go to the about you have my about page this fancy looking page so that is how react helmets dynamically updates the meta information for your application so one thing i want you to know about react helmet which of course is the basis of this video is that react helmet is a javascript library which has javascript functions that are called or that i evoked and these are evoked depending on the view that you use the react helmet so if you use this in the about page or in the about view the functions in those react elements will be called accordingly so update the meta information as you have specified so this is an example of what react helmet is doing i'm going to open the browser console so i'm not saying this is exactly how they do it but this is similar to what the library does so you can do my contact page and as you can see above this is changed to my contacts page so that is basically what the react helmet is doing of course it can be advanced it has some advanced features but since this is javascript watch what happens when i refresh the page here when i refresh you see my beautiful app and then my home page if i refresh again you may not notice but if i tap refresh continuously you can see my beautiful app and then you can see my home page what this means is the default title is my beautiful app but once this component for the home page is mounted the javascript for in the react helmet is called thereby updating the meta information and what does this imply if the javascript is never called then the meta information would not be updated i can also for that test that without javascript our react helmets would not be used as we expect and this is by disabling javascript so i'm just going to head over here javascript site settings and javascript and disabled so when i go back here and i refresh my beautiful app you need to enable javascript to run this app so this is something in react that as you can see here it says no script you need to run javascript to run this app but of course it still got the head information so with javascript disabled on this application now you can see that this is my beautiful app so even if i am on the about page it is still my beautiful app and that is the reason why react helmet is not suitable for seo because every of these seo crawlers every of these seo bots they would not run the javascript functions that you have in react helmet for the browser the browser would run this even when we have a built version of this project of this application the browser would still run the react helmet but this seo crawlers they wouldn't run it so once the seo crawler comes to our home page what they pick up is my beautiful app and of course the description that is specified in the index.html once they go to the about page the only thing.cdr is my beautiful app if they if assuming they would run the javascript in it they would see that there are updated meta information but since they don't every of your pages say you have 1000 pages in your react application every page they go to the only thing they see there is my beautiful app my beautiful app and this is very bad for seo but that doesn't make react helmets entirely useless for example you're working on the customer dashboard you can have your default meta information to be customer dashboard for my beautiful application you can have the description as you expect but of course you would not want google to index the customer password page you wouldn't want google to index the customer edit profile page the customer transactions page so all you care about in this case can just be the home page so in that case you can just use the react helmet to show users as they change views that you are currently on the password page you are currently on the profile page you are currently on the transactions page so react helmet is only necessary when you just want to show the user the page they are on that is above here you want them to know what page they're on that is where react helmet is relevant just for user interactions but not for seo so i'm hoping that this video makes you understand react's helmet better i've seen some misconceptions around online saying react helmet is used for seo no react helmet is only used for updating meta information it is not a solution for seo if you're looking for solutions from seo you can consider server side rendering you can consider react hydration or you can use every of these frameworks like gatsby like next js all of these solves the problem of seo that bare react brings and that brings us to the end of this video so if you found this video helpful i would love you to do two things for me the third one is optional the first one is kindly like this video the second one is kindly subscribe and third one is turn on post notifications so they are notified when i upload another helpful video and lastly share with your friends let them know that this is what react helmets truly is

Channel: Dillion Megida

Views: 2,040

Keywords:

Id: j_nxKlnuOu0

Length: 7min 52sec (472 seconds)

Published: Wed Apr 21 2021