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

Is it possible to add .html at the end of the URL as you like while using NuxtJS or NextJS? – SEO

I am currently planning to develop a web application using NuxtJS/NextJS framework with SSR Universal architecture, I am facing difficulties related to SEO, because previously my project was written in .NET , so all URLs have .html at the end..

Ex:

  • domain.com/hotels (this is Cate)
  • domain.com/hotels-5-star.html (this is a Sub cate of Hotels Cate)

The example above is specific to my problem, which means that according to Google, the shorter the URL, the better, so my pages have all been shortened to a single "/", however because of the structure page has 2 hierarchies, Cate and Sub cate, so for Google to distinguish this, the URL (sub cate) must insert .html at the end.

Can I use NuxtJS/NextJS build pages with the same URL as above?, I have researched but found a specific solution, maybe my experience is not much so I need the help of experts on NuxtJS/NextJS

Tags:

3

Answers


  1. 0

    I’m not an expert in SEO, but I would just use 5-star as a query in domain.com/hotels

    This would mean you could use the single hierarchy like so:

    domain.com/hotels?rating=5-stars

    As far as using html files as URL routing for the site, the nuxt generate property builds the project into html files which is under your control. The structure comes from what you set in the pages directory

    Login or Signup to reply.
  2. 0

    yeah, in nuxtjs, you can use @nuxtjs/router to custom your router path like this

    nuxt.config.js

    buildModules: [
    '@nuxtjs/router'
]

    router.js

    import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);

const routes = [
    {
        path: '/hotels-:star-star.html',
        name: 'hotels',
        props: true,
        component: page('hotels')
    }
];
export function createRouter(){
    return new VueRouter({
        routes
    });
}

    pages/hotels.vue

    <template>
    <main>
        {{ star }}
    </main>
</template>

<script>
export default{
    props: {
        star: {
            type: Number
        }
    }
}
</script>

    enter image description here

    Login or Signup to reply.
  3. 0

    Nowadays, all modern apps are having some pretty URLs looking like domain.com/hotels/
    With a trailing slash at the end. Don’t mix and match them. Either put them everywhere or nowhere.
    SEO-wise, trailing slashes do not matter, you can let them.

    Modern JS frameworks are doing a great job at this, and they know that if you reach domain.com/hotels/, you’re actually wanting to serve the .html (aka the .vue) file in it, no need to add it.

    In Nuxt.js, the directory structures would look like this:

    -- pages
---- hotels.vue

    or

    -- pages
---- hotels
------ index.vue

    As for this

    the shorter the URL, the better

    Don’t stress it too much, you don’t need to make super shorts paths neither.

    Just keep it semantic and logic. Having domain.com/h5s will be super bad.
    Also, having domain.com/hotels/5-stars or domain.com/hotels/?rating=5 is totally fine.
    Basically, make them somehow readable for the end user.

    PS: be aware that Next.js >> React and Nuxt.js >> VueJS.

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

Back To Top
Search