Getting Your Vue Site Indexed

Just deployed your Vue site to production for the first time? Congrats on the launch!

The next step will be to get your site appearing on Google. Here are some tips on doing that.

SSR vs SPA Considerations

If your Vue app is a Single Page Application (SPA), Google needs to execute JavaScript to see your content. This can delay indexing and sometimes cause issues.

For better SEO:

• Use SSR with Vite SSR or a framework like Nuxt
• Pre-render critical pages at build time
• Ensure meta tags are set before hydration

If staying with SPA, make sure your hosting supports pre-rendering or use a service like Prerender.io.

Alternative Production URLs

If you have multiple domains or subdomains pointing to your main site, you only want one version indexed.

For example, www.example.com and example.com both serve your app, but you only want example.com to appear in Google.

Solutions:

• Redirect all non-canonical URLs to the canonical URL at the server level
• Set canonical URLs in your pages using Unhead

import { useHead } from '@unhead/vue'

useHead({
  link: [
    { rel: 'canonical', href: 'https://example.com/current-page' }
  ]
})

Submit Sitemap to Google

The first step is to submit your sitemap to Google.

You can do this by using the Google Search Console. Creating a Google Search Console property is also useful for monitoring your site's performance in search results.

For Vue apps, you'll need to generate a sitemap. Options include:

• Static sitemap file in your public/ directory
• Build-time generation with a Vite plugin
• Server-side generation if using SSR

Submit your sitemap which will typically be at /sitemap.xml.

Request Indexing

Once your sitemap is submitted, you can request indexing of your site. The simplest way to do this is to use the URL Inspection Tool.

If you'd like something more automated, you can use Request Indexing - a free, open-source tool that allows you to request indexing of your site in bulk.

Good Lighthouse Scores

Google Lighthouse is great for showing you issues on your site that may be affecting your SEO.

It's recommended to fix any issues that Lighthouse shows you, as they can affect your site's performance in search results.

I wouldn't be concerned about getting a perfect score and I wouldn't spend too long on the performance side of Lighthouse, but the other categories are important to get right.

You can use Unlighthouse to get Lighthouse reports for your entire site in bulk.

Backlinks

Backlinks are links from other websites to your site. They are one of the most important factors in SEO.

The easiest way to get some initial backlinks on your new site is to share it on social media.

Common Vue-Specific Issues

Meta tags not updating:

• Ensure you're using @unhead/vue correctly
• Check that meta tags are set during SSR, not just client-side
• Verify with "View Page Source" (not DevTools)

SPA content not indexed:

• Google may not execute your JavaScript properly
• Consider SSR or pre-rendering for important pages
• Test with Google's URL Inspection tool

Slow Time to First Byte:

• Optimize your server response time
• Use a CDN for static assets
• Consider static hosting for SPA builds

Using Nuxt?

If you're using Nuxt, check out Nuxt SEO which handles sitemap generation, robots.txt, and many SEO tasks automatically.

Learn more about going live with Nuxt →