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.

With the outstanding advancement in JavaScript. Frameworks like Vue.js, React.js and Angular started rendering the content with JavaScript on the client site. So the server is just sending some raw data (unstructured therefore useless for web crawlers) which is then converted into an eye-candy on the client’s browser.

So, I don’t get it?

Bundled files are sent from server to the client

Why this bundled data isn’t SEO friendly?

Well this is what the HTML file will look like to the web crawlers.

HTML file doesn’t contain the code yet, because it will be rendered later

This is what the HTML file looks like in the client browser.

Rendered HTML content on the client side after execution with javascript

React and Vue add data into this HTML file on the client side with the help of JavaScript.

HTML + JavaScript = Output Content

HTML = No Content

As web crawlers can’t execute these javascript files they will simply see no content. resulting into bad SEO.

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

For Vue.js you can use vue-meta. What you do is, you write all the meta tags as a javascript object and “export it as part of your component’s data using the meta-info property.” Here’s what it looks like in my code.

The meta object is storing all the meta information.

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.

For Vue.js you can use Nuxt.js and for React.js you can use Next.js.

Results

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 🚀