How to manage SEO when prerendering with Quasar ?

[BigAppear]

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.

[kangu]

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.

[BigAppear]

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 ?

[BigAppear]

Any news about it ?

[BigAppear]

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 ?

[king_of_leon]

This post is deleted!

[king_of_leon]

no update still?

[s.molinari]

@king_of_leon - This is an almost three year old thread. What update are you expecting?

Scott

[king_of_leon]

some direction to help with seo/ generating html ?

[qyloxe]

@king_of_leon said in How to manage SEO when prerendering with Quasar ?:

some direction to help with seo/ generating html ?

Well, firstly there are a few rules when thinking about SEO and google, I’ll drop them here in no particular order. MANY of that is available in details in google search “google seo dynamic pages vue spa”:

• google indexes dynamic vue spa pages quite ok because googlebot executes indexed pages, waits no more than 2 secs (some sources give a 1.5 sec) after loading and then grabs the text from pages. This is a lot of time for Vue initialization, BUT if your page initializes longer than this, than you MAY be in trouble. This works from 2014 google post. SSR, prerendering could be in many cases preferred solution.
• you NEED to have sitemap.xml file with deep links to your site (robots.txt for google is OK, too). This is IMPORTANT! You can add this sitemap.xml to your quasar site by hand (meh) or you could use webpack configuration and copy this from you source folder to root distribution folder.
• you should prefer history mode than hash mode for routing in Quasar
• this delay for javascript (1.5 - 2secs - some reports even 5 secs) is called “render budget” and it depends obviously from google algorithm and it could be different for different websites. This could be problematic for SPA pages, where the content is loaded from external server by javascript. THIS IS the main optimization challenge for SEO friendly pages in Vue!
• animations - in Vue or Quasar we could easily “animate” or “transition” almostc everything. THIS is a problem for googlebot - some animated content is not indexed and obviously animations takes a lot of time from this “render budget”.
• googlebot uses the latest chromium engine, BUT there are reports, that even a single javascript error stops it from indexing page! You should religiosly check your site with open debug console or other automated testing tool, that you DO NOT produce javascript errors (or any others) in debug console!
• make sure, that you have different meta tags on your subpages and there are all of them (description, keywords, author… many more according to current SEO best practices) also there are title tags and some other link tags. There are header social tags for facebook, twitter, the important also are icons, default images and microformats. This is a basic SEO, so I will not go deep into this. Quasar meta plugin is your friend
• testing - speaking of automated testing, it is a good practice to open your own pages with headless browser (from external connection) and try to print the page to pdf automatically. Generally it is a quite good “battle test” of how your page performs. Of course google allows to check “how your page is seen by google”, but the headless browser is still good.
• remember that there is also “smartphone google bot” and your page NEEDS to look good on mobile devices. I think that this recommendation should even be at the top of this list
• interesting fact: google uses its own metrics for ranking your page - it means that if your page generates more time on page, more visits, more social signals, more click throug rates (more ads?) than you SHOULD have more render budget or other goodies. Google bot is AI powered as for now, so you know… everything counts.

[petr_panek]

@qyloxe