seo Question posted in
Some basic information to get you started with this can be found here.

Is there a recommended way to have all the HTML pre-loaded for SEO purposes while using VueJS, without using SSR?

As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don’t want to use server-side rendering (SSR).

That leaves me with the option to send HTML over the wire, the “old school” way. What I am thinking of doing is writing each page’s HTML like normal, but make one of the root html elements a Vue element in order to “upgrade” it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:

  • Am I limited to a single component, the root? It’d be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
  • Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it “takes over”. The downside is that I’d have to maintain that component both in the original HTML and in the vue template.

Are there any good examples of what I’m trying to accomplish here?

Edit: I want to clarify that I’m aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.

Tags:

3

Answers


  1. 0

    Recently I’ve developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):

    1. Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
    2. Script and style are of header and footer imported in page.js(eg: home.js, search.js).

    3. Add div.seo-zone to page.html‘s div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add

      .seo-zone {
      display: none;
      }

    in your css.
    4. Make sure your app’s root component’s el is ‘#app'(each page’s main content can be a Vue app).

    1. Develop your app as usual.

    After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)

    Login or Signup to reply.
  2. 0

    I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.

    This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn’t required anymore.

    But to answer your question in general, you should check out Laracast’s Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).

    I’d ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page’s heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an ‘overkill’ scenario.

    Login or Signup to reply.
  3. 0

    Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?

    It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search