3 Important SEO Hacks for React Developers

your search engines need a lot of content in the index.html the first html file which the browser sees because they are lazy they would either defer or not execute your script at all which results in your client-side applications being blank that is having a white page for these seo bots that means no ranking if your bot see the white page that obviously they won't be ranking any content hey everyone welcome back and in this video we'll be discussing about why react is bad for seo what you can do what are the options on the table and how seo really works as well as a developer let's just go and discuss some seo stuff in this video if you're new here make sure you leave a like subscribe to the channel and hit the bell icon this is free of cost and helps the channel grow this video is a part of code dam's t-shirt giveaway program for the month if you want to take part and win an amazing go damn t-shirt all you have to do is leave a comment on this video about what you think and that's it you are eligible if your comment gets a heart from code damn you will win a t-shirt for absolutely free all right let's talk about seo a bit because i believe as developers we don't have a lot of knowledge about this so it's good to know about seo because when you're developing your own indie projects and if you want to get free traffic i mean google is the best way to get that over a sustained amount of time so seo stands for search engine optimization which means whenever you search something on google or any other search engine as a matter of fact how that particular search engine whether it's google whether that's bing whether that's dr.goh any other search engine tries to rank the web pages it has indexed that comes from how good the seo score or any sort of score which that particular engine uses is for that particular website right so i can write how to learn react but chances are codedam.com isn't ranking right now for this because condom would have slightly lower score than other websites which are ranking for this keyword right so over the long period of time the google or bing or any other search engine would realize would try to filter down which site is good for ranking at number one two three four and so on and which side it's not so how does that work let's understand and why react or any client side framework would not be able to help you in that manner let's take a look at a typical client-side application right so csa is kind of like a short form for client side application so what you do is you write an app let's say this is a react application and what react does let's say you did a create react app so what this would do is that would spit out at least two files which i'm pretty sure the first one would be an index.html and the second file would be a script.bundle.js or bundle.js or whatever some sort of js file and this file and this index.html links to this file right so what does this mean is that this index.html is just the bare bones html so this html is the bare bone html like i said just to load this script and this script start executing and create a rest of the things which you see on the page for example an h1 tag with uh you know hello world or whatever you have but that stuff is done on the fly by this script bundle right this is how client-side rendering applications actually mean client-side rendering basically csr apps mean as well that you send the whole javascript payload and the whole document is constructed on the client side now the problem with this approach is a search engine like google for example they use something known as crawling bots right and these bots are just piece of software which are just crawling on the web trying to index one page after another another trying to go from different side to site and reading their html right so google a search engine like google does claim that they execute javascript but they defer executing javascript to a later stage right so it might be possible that google crawling bot visits your web page sees that there is pretty much nothing in your html except for a script tag and it does not execute the script tag right away right because it's reading the source code it just sees the html and finds out nothing is there therefore your page pretty much gets no advantage on the first crawl itself right now google says that hey we go ahead and we execute the script later and we try to reconstruct and everything and you know do the nice work but i mean there isn't very a lot of confidence in in the things which google is saying for executing javascript because we haven't really seen any client-side application client-side rendering application ranking on google on a high-volume keyword right most of the people do prefer to have server-side applications because i mean for google it's fine but what about bing or duckduckgo or any other xyz search engine which the maybe like five percent of the world population still uses i don't know the numbers but you do want to optimize for this five percent traffic as well right so for that client-side rendering option is not an option at all because you don't get enough content in your first index.html page load or as a matter of fact if you're on any route that pretty much sends index.html that loads this then it'll load the router for example in react and then just render the page right so this this process search engines don't have time for this right they want the page ready instant on the view source the content should be there to solve this issue we have three options the first option is pre-rendering so what pre-rendering means is that you already have a constructed dom once the page loads right the user can see the page obviously so why not what the user sees we just copy that whole html and paste it in a file and kind of you know when the user first arrives send the pre-rendered page instead of the client-side rendering and do the client-centering ring afterwards now this is different from server side rendering this is not server side rendering this is basically saying that hey i'm gonna spin up a headless browser like puppeter and i'm gonna visit all of your pages on the website and create dot html files out of them and i'm just going to keep them on my desk right and whenever a page appears you know a visitor is appearing i'm going to send this index.html5 file and then i'm going to send the client side rendering bundle so that it actually works as well pre-rendering is the simplest yet i would say i mean the least friction but a little bit flaky as well kind of solution but i mean if you have a lot of pages and if you want to get started this is i think a good place to start one of the solutions is pre-render i believe prerender.i o or something you can google but this is what pre-rendering stands for and you can have independent packages as well for this the second solution is selective pre-rendering that is you keep your app just like you have for everyone but you pre-render the pages only for people or only for the bots with the help of their user agents right all these bots carry a user agent which kind of would help you determine if you want to send a pre-rendered page or a client-side rendering app and this is also a solution if your prerender.io or pre-rendering is having a bad experience for the end user if there's a lot of page you know just whites and then comes back to life or if there is any problem with pre-rendering this might be a better solution but this has small quirk that is you should not be having content differences between what you're serving to the bot versus what the user sees because google explicitly mentions that they do not want different content compared to the user right so you should be making sure that you are keeping the content same which finally gets surrendered for the user and the third option is of course server side rendering or server side generation server side generation you might get a bit confused with how pre-rendering works but there's a difference pre-rendering is just taking the output of the generated page by the client side rendering app and then putting it in the html server side generation is basically doing server side rendering but caching the response for a certain amount of time before you actually even regenerate it or not generate at all right plus this involves hydration and this is basically the legal and the nice and the clean way of doing pre-rendering if you want to say in that way so for ssg and ssr i believe we all know the answer the best solution right now is next js using your source code with nexus the only problem with nexus is that if you're trying to move your create react app you would be logged into certain conventions for example the file name is one of the biggest convention of next years for the better of the worst that file names are bound to the routes so if you are able to overcome that that's fine you would be able to use a lot of advantages but yeah i mean you might get stuck with a thousand other things if you have a custom whip pack then would it work here or would it not work here because next 11 and onwards also support web pack five you might be stuck with pack four there might be a lot of issues but this is definitely an option and definitely a solid option if you're starting a new project in today's time right and you want to focus on seo from the very starting so the gist of the video is that your search engines need a lot of content in the index.html the first html file which the browser sees because they are lazy they would either defer or not execute your script at all which results in your client-side applications being blank that is having a white page for these seo bots that means no ranking if your bot sees a white page that obviously they won't be ranking any content so to fix that you have a pre-rendering solution you have a selective pre-rendering which is better than free rendering but a little bit risky because you are sending different content and you also have the best solution available right now which might have a bit of problems if you're trying to port a huge code base that is using nexus with the help of server side rendering and server side generation firstly we use next.js for codedown.com so that is definitely a good option but yeah it depends on what you need so that is all for this video hopefully you were able to understand the basics of seo why react or as a matter of fact any client side application does not work very well with seo and how you can make your react application seo friendly with these three techniques so let me know in the comments what you think that is all for this one make sure you leave a like subscribe to the channel and hit the bell icon i'm gonna see you in the next video really soon you

Channel: codedamn

Views: 5,109

Keywords: web development, codedamn, mehul mohan, full stack development, full stack web development, React is BAD For SEO and Here's How to FIX It!, SEO For React Developers, seo, react, nextjs, react seo, nextjs seo, react seo tutorial, nextjs seo tutorial, react meta tags, seo ssr, nextjs ssr, react ssr seo, improving seo in react, react seo intro, react seo basics, SEO for Developers, search engine optimization, search ranking, html, html tutorial, seo tutorial, seo developer, js

Id: DOnAZpkuL8w

Length: 10min 36sec (636 seconds)

Published: Tue Sep 21 2021