How I enhance Search Engine Optimization in React and Vue websites.
We already know we need keywords, content and relativity to be on the first page and blah blah. But how can you make your website more SEO friendly as a developer? This is a very short blog, I will write more in second part.
Where’s the problem?
When you search for something on the internet. Web crawlers will crawl through millions of pages to find the perfect result for you. To get all these pages they will have to send request to different servers, check if the response contains data which you are looking for and if all this criteria passes it will show the page to you.
So, I don’t get it?
Why this bundled data isn’t SEO friendly?
Well this is what the HTML file will look like to the web crawlers.
This is what the HTML file looks like in the client browser.
HTML = No Content
Further all there frameworks have SPA which makes hard to put meta data for different routes difficult. Because at the end all the code will be injected into the same HTML file.
How to solve it?
The solutions aren’t to easy to be honest.
One way is to use plugins
meta-info property.” Here’s what it looks like in my code.
For react you can dive into react-helmet. I haven’t used it in my projects yet, so no spoiler alerts.
Other ways are
The root problem is client-side-rendering of HTML files. What if we render are html files on the server itself. So the next time when web crawler will send request to our server, what it will see is content rich HTML file.
Implementing Server side rendering is better than plugins but more exhaustive. So if you are looking for fast search engine optimization in lesser efforts, go for plugins. For long term and better results go for SSR.
I created a free course website, check it out right now Ironprogrammers.com Hope I see your website tomorrow on google’s first result page 🚀