How to manage SEO when prerendering with Quasar ?



  • I did lot of tests from the recommandations of this page: http://quasar-framework.org/guide/app-prerendering-for-seo.html
    Because there are not a lot of pages, I use prerender-spa-plugin.

    I wanted to couple this plugin with vue-meta to add easily on each page meta tags (description, change title…)
    Vue Meta works alone, but nearly doesn’t work with prerender-spa-plugin: it adds tags too late. When I check my website structured data with Google checker tool, it shows me nothing.

    Indeed, how do you manage SEO with Quasar Framework ? Really need help about that.



  • I worked through a similar issue with vue-meta which didn’t fill in the values for the head tags that were ready by PhantomJS.

    Turned out it was a problem with data availability, I am reading the values through a vuex state with an action dispatch on the components, and although things look ok on normal testing, on a first direct entry to a given route (like the prerenderer does), the data would initially not be there. I changed to having a beforeEnter navigation guard that resolves the data promise and then renders the component and suddenly vue-meta started working properly.

    Not sure this also applies to you, just thought I’d share it.



  • I don’t use Vuex, but I am in the same case.

    Very interesting ! Can you be a bit more specific about your resolves the data promise and then renders the component please ?



  • Any news about it ?



  • Okay now I am able to change title and description, as well as meta data.

    I found my REAL problem:

    When I go on a route like /vision, it always go first on the main index.html (/ route) before going to the /vision route index.html. It’s like what… 0.2 seconds max loading.
    Problem is that the same is happening when Google bot goes to /vision, the result for him is / route title and description instead of the good one.
    Why do I have this problem ? Is it normal ?

    Here is my router code:

    const ROUTER_INSTANCE = new VueRouter({
      mode: 'history',
      routes: [
        {
          path: '/',
          component: load('Layout/Navigation'),
          meta: {
            breadcrumb: 'Accueil',
            name: '/'
          },
          children: [
            {
              path: '',
              name: 'HomeComponentName',
              component: load('Home/Home'),
              meta: {
                breadcrumb: 'Accueil',
                title: 'Accueil | Alenvi'
              }
          // beforeEnter (toRoute, fromRoute, next) {
          //   window.document.title = PAGE_TITLE[toRoute.name];
          //   console.log(toRoute);
          //   next()
          // }
            },
            {
              path: 'vision',
              name: 'VisionComponentName',
              component: load('StaticPages/Vision'),
              meta: {
                breadcrumb: 'Vision',
                name: 'vision',
                title: 'Vision | Alenvi'
              }
          // beforeEnter (toRoute, fromRoute, next) {
          //   window.document.title = PAGE_TITLE[toRoute.name];
          //   console.log(toRoute);
          //   next()
          // }
        },
      // ...
      ]
    },
    // Always leave this last one
    { path: '*', name: 'RouteErrorName', component: load('Error404') } // Not found
    ]
    })
    
    const PAGE_TITLE = {
      HomeComponentName: 'Accueil | Alenvi',
      VisionComponentName: 'Vision | Alenvi',
      RouteErrorName: 'Erreur: Page non trouvée'
    }
    
    ROUTER_INSTANCE.beforeEach((to, from, next) => {
      // window.document.title = PAGE_TITLE[toRoute.name]
      document.title = to.meta.title
      console.log(to);
      next()
    })
    
    export default ROUTER_INSTANCE
    

    It makes me sick, I don’t know what to do. Release is for tomorrow night, and I’m stuck on SEO… Really need help, someone ?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.