Google pages indexation on a Vue.js2 Application ( + Vue router)

Question

Hi folks! o/

I have a few-year-old personal website that I don't use much, but recently, I wanted to check its Google indexation for practice purposes.

Techs used : [ Vue.js2 + Vue-router ]

It's a 5-page app, but I've found that only my home page and a .PDF file linked on that same page are indexed. Obviously, I would like to see all five of my main pages indexed.

Here's the app's page tree:

1. https://edouard-herrengt.com/
2. https://edouard-herrengt.com/experiences
3. https://edouard-herrengt.com/formations
4. https://edouard-herrengt.com/competences
5. https://edouard-herrengt.com/portfolio

.The Google Indexation results:

What I've done so far:

• Generated a sitemap.xml file, but it only finds my home page to crawl.
• Created a Google Search Console account an hour ago; it needs several hours to be activated. I guess I will have some tasks to do there.

Is there anything I can do to troubleshoot this situation? My personal feeling is that it prbably comes from some vue-router miss configuration but i really have no idea where to look at ;c

Links:

• The Website
• GitHub Repo

Tanks for reading :-3

Answer 1

VueJS is a Single-Page app, hence there is nothing rendering it on the server-side.
Check this answer for a few ways of achieving such a thing.

You could double-check that one by checking the "Page source" of your portfolio or simply by disabling the JS on the page. Google can kinda crawl that, but not really. Some server (rendered or generated) app is usually a far better way to go so that you can have a good SEO.
Otherwise, you'll start far behind if at all.

It's not related at all to how vue-router works (which is by the way, a client-side only solution).

---

Also consider bumping it to Vue3 if you can!

Answer 2

Of course, it's easier in your case to switch to Nuxt.js and generate a static site via npm run generate...
But you can leave it as is.
First, add a simple .htaccess file to redirect requests to /, because you have SPA, and when going directly to internal pages, or reloading internal ones, they will be 404.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Second, if you only have 5 pages, you can add them manually to the sitemap.xml.
I'm pretty sure that after that Google will index them.
Good luck!