在使用 NuxtJS 或 NextJS 时,是否可以根据需要在 URL 的末尾添加 .html ?
Is it possible to add .html at the end of the URL as you like while using NuxtJS or NextJS?
我目前正计划使用 NuxtJS/NextJS 框架和 SSR 通用架构开发一个 Web 应用程序,我面临与 SEO 相关的困难,因为之前我的项目是写在 .NET 中,所以所有 URL 的末尾都有 .html
..
例如:
- domain.com/hotels(这是Cate)
- domain.com/hotels-5-star.html(这是酒店类别的 子类别)
上面的例子是针对我的问题的,也就是说根据Google,URL越短越好,所以我的页面都被缩短为一个“/” , 但是因为结构页有 2 个层级,Cate 和 Sub cate,所以为了 Google 区分这一点,URL(sub cate)必须在末尾插入 .html
。
我可以用NuxtJS/NextJS构建页面和上面一样的URL吗?我研究了一下,找到了具体的解决方法,也许我的经验是不多,所以我需要 NuxtJS/NextJS
专家的帮助
我不是 SEO 专家,但我会在 domain.com/hotels
中使用 5-star
作为查询
这意味着您可以像这样使用单一层次结构:
domain.com/hotels?rating=5-stars
就使用 html 文件作为站点的 URL 路由而言,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
是的,在 nuxtjs
中,您可以使用 @nuxtjs/router
像这样自定义您的路由器路径
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>
现在,所有现代应用程序都有一些漂亮的 URL 看起来像 domain.com/hotels/
末尾有斜杠。不要混合搭配它们。要么无处不在,要么无处不在。
在 SEO 方面,尾部斜杠无关紧要,您可以使用它们。
现代 JS 框架在这方面做得很好,他们知道如果你达到 domain.com/hotels/
,你实际上想要服务 .html
(又名 .vue
)文件在里面,不用加。
在 Nuxt.js 中,目录结构如下所示:
-- pages
---- hotels.vue
或
-- pages
---- hotels
------ index.vue
至于这个
the shorter the URL, the better
不要太紧张,你也不需要做超短路径。
只要保持语义和逻辑。拥有 domain.com/h5s
会非常糟糕。
此外,domain.com/hotels/5-stars
或 domain.com/hotels/?rating=5
完全没问题。
基本上,以某种方式让最终用户可读。
PS:请注意 Next.js >> React 和 Nuxt.js >> VueJS。
我目前正计划使用 NuxtJS/NextJS 框架和 SSR 通用架构开发一个 Web 应用程序,我面临与 SEO 相关的困难,因为之前我的项目是写在 .NET 中,所以所有 URL 的末尾都有 .html
..
例如:
- domain.com/hotels(这是Cate)
- domain.com/hotels-5-star.html(这是酒店类别的 子类别)
上面的例子是针对我的问题的,也就是说根据Google,URL越短越好,所以我的页面都被缩短为一个“/” , 但是因为结构页有 2 个层级,Cate 和 Sub cate,所以为了 Google 区分这一点,URL(sub cate)必须在末尾插入 .html
。
我可以用NuxtJS/NextJS构建页面和上面一样的URL吗?我研究了一下,找到了具体的解决方法,也许我的经验是不多,所以我需要 NuxtJS/NextJS
专家的帮助我不是 SEO 专家,但我会在 domain.com/hotels
5-star
作为查询
这意味着您可以像这样使用单一层次结构:
domain.com/hotels?rating=5-stars
就使用 html 文件作为站点的 URL 路由而言,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
是的,在 nuxtjs
中,您可以使用 @nuxtjs/router
像这样自定义您的路由器路径
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>
现在,所有现代应用程序都有一些漂亮的 URL 看起来像 domain.com/hotels/
末尾有斜杠。不要混合搭配它们。要么无处不在,要么无处不在。
在 SEO 方面,尾部斜杠无关紧要,您可以使用它们。
现代 JS 框架在这方面做得很好,他们知道如果你达到 domain.com/hotels/
,你实际上想要服务 .html
(又名 .vue
)文件在里面,不用加。
在 Nuxt.js 中,目录结构如下所示:
-- pages
---- hotels.vue
或
-- pages
---- hotels
------ index.vue
至于这个
the shorter the URL, the better
不要太紧张,你也不需要做超短路径。
只要保持语义和逻辑。拥有 domain.com/h5s
会非常糟糕。
此外,domain.com/hotels/5-stars
或 domain.com/hotels/?rating=5
完全没问题。
基本上,以某种方式让最终用户可读。
PS:请注意 Next.js >> React 和 Nuxt.js >> VueJS。