9 Steps Strategy to introduce Vue in existing project without loosing SEO Ranking

Strategy / By

If you are introducing Vue in existing project where html is being generated on server side, then below process will help in not loosing current SEO score of the site. We’ll be introducing Vue progressively in the project.

  • Wrap everything from first to last html element within body tag inside a new div with id vue-app. It will look like this <body><div id="vue-app"><!-- All Those Html Elements --></div></body>

  • In your app.js or whichever is going to be your entry file for vue, instantiate Vue class and mount it to vue-app div. Something like this new Vue().$mount('#vue-app'). Make sure bundled/compiled js is loaded at the bottom of our html, preferably after #vue-app div.

  • Start with creating components which are not trivial for SEO and register them globally using Vue.component api, so that those components can be used anywhere in the project.

  • Introduce Pre-Rendering in the project using softwares like prerender.io or rendertron into the project. prerender.io provides hosted solution too. If you are planning to host it yourself, I would recommend hosting it on a separate server. This will prepare the ground for components important for SEO as prerendering would help search engines crawl SEO components.

  • Start creating one SEO component and see how it performs. After it starts performing as per expectations, create more SEO components.

    • *

REMAINING STEPS ARE OPTIONAL.

  • Now you can start looking into converting pages into SPAs

  • Once SPAs are created for all pages, introduce Server Side Rendering (SSR) in the project.

  • Once it is verified that SSR is working properly for all pages present in the project, get rid of Pre-Rendering software introduced in step 4.