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?

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?

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?

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.


I created a free course website, check it out right now Hope I see your website tomorrow on google’s first result page 🚀



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aashish Peepra

Full-stack Web Developer, Python Developer, Computer geek, Programming Teacher, Writer and what not.