东台建设局网站,高大上网站欣赏,可视化app开发工具安卓版,网站设计特点文章目录 SEO 和 Meta默认值useHeaduseSeoMeta 和 useServerSeoMetaComponentsMeta 对象数据类型格式特性响应式 Reactivity标题模板 Title TemplateBody Tags 示例 ExamplesdefinePageMeta动态设置标题动态添加外部 CSS Nuxt 官网地址#xff1a;
https://nuxt.com/ SEO 和 … 文章目录 SEO 和 Meta默认值useHeaduseSeoMeta 和 useServerSeoMetaComponentsMeta 对象数据类型格式特性响应式 Reactivity标题模板 Title TemplateBody Tags 示例 ExamplesdefinePageMeta动态设置标题动态添加外部 CSS Nuxt 官网地址
https://nuxt.com/ SEO 和 Meta
Nuxt 可以通过 3 种方式提高 Nuxt 应用程序的搜索引擎优化
强大的头部配置nuxt.config组合式函数useHead组件Head、Title、Meta等
默认值
在开箱即用的情况下Nuxt 提供了合理的默认值如
charset: utf-8viewport: widthdevice-width, initial-scale1
如果需要可以覆盖这些默认值还可以设置 title 和 meta如下代码示例
// nuxt.config.tsexport default defineNuxtConfig({app: {head: {charset: utf-8,viewport: widthdevice-width, initial-scale1,title: Nuxt3学习实践,meta: [{name: description,content: 菜鸟小白nuxt3从入门到精通边理论边实践,},],},},
});上面的代码运行结果可以通过在浏览器中查看网页源代码。
在nuxt.config.ts中提供app.head属性允许自定义整个应用程序的head。 缺点这种方式无法使用响应式数据。 如果需要推荐在 app.vue 或者在页面中使用useHead组合式函数。 useHead
useHead组合式函数允许我们通过Unhead以编程和响应式的方式管理页面的head标签。 与所有组合式函数一样它只能用在组件的setup函数和生命周期钩子中。
// app.vuetemplatedivNuxtLayoutNuxtPage //NuxtLayout/div
/templatescript setup langts
useHead({title: Nuxt3学习实践 ~ 坚持,meta: [{ name: keywords, content: Nuxt Vue SSR Typescript }],bodyAttrs: {class: page-container,},script: [{children: console.log(Hello World),},],
});
/script我们建议您查看useHead和useHeadSafe组件。
useSeoMeta 和 useServerSeoMeta
通过useSeoMeta和useServerSeoMeta组合式函数可以将网站的 SEO 元标签定义为一个完全支持 TypeScript 的扁平对象。 这可以帮助您避免错别字和常见错误例如使用name而不是property。
// pages/about.vuescript setup langts
useSeoMeta({title: about page,ogTitle: about page ..ogTitle,description: about page ..description,ogDescription: about page ..ogDescription,ogImage: https://example.com/image.png,twitterCard: summary_large_image,
});
/script了解更多关于useSeoMeta和useServerSeoMeta可组合项的信息。
Components
Nuxt 提供了Title、Base、NoScript、Style、Meta、Link、Body、Html和Head组件这样就可以在组件模板中直接与元数据交互。 由于这些组件名称与本地 HTML 元素相匹配因此在模板中将它们大写是非常重要的。 Head和Body可以接受嵌套的元标签出于美观的考虑但这对嵌套的元标签在最终 HTML 中的呈现位置没有影响。
// pages/login.vuetemplatedivHeadTitle登录页/TitleMeta namedescription :contentmessage /Styletypetext/csschildrenbody { background-color: lightgreen; }//Headh1 login page/h1/div
/templatescript setup langts
const message ref(Hello World);
/scriptstyle langscss scoped/styleMeta 对象数据类型格式
以下是用于useHead、app.head和组件的非响应式类型。
interface MetaObject {title?: string;titleTemplate?: string | ((title?: string) string);templateParams?: Recordstring, string | Recordstring, string;base?: Base;link?: Link[];meta?: Meta[];style?: Style[];script?: Script[];noscript?: Noscript[];htmlAttrs?: HtmlAttributes;bodyAttrs?: BodyAttributes;
}特性
响应式 Reactivity
所有属性都支持响应式包括 computed、getters 和 reactive。 建议 computed 建议使用 getters(() value) 而不是computed(() value)。 useHead 响应式应用 script setup langts
const description ref(My amazing site.);useHead({meta: [{ name: description, content: description }],
});
/scriptuseSeoMeta 响应式应用 script setup langts
const description ref(My amazing site.);useSeoMeta({description,
});
/script标签组件响应式应用 script setup
const description ref(My amazing site.);
/scripttemplatedivMeta namedescription :contentdescription //div
/template标题模板 Title Template
可以使用titleTemplate选项为自定义网站标题提供一个动态模板例如在每个页面的标题中添加网站名称。 titleTemplate可以是一个字符串其中%s被title属性的值替换也可以是一个函数。 如果使用函数完全控制则不能在nuxt.config中设置建议在app.vue文件中设置它将适用于网站的所有页面
// app.vuescript setup langts
useHead({titleTemplate: (titleChunk) {return titleChunk ? ${titleChunk} - www.51blog.xyz : www.51blog.xyz;},
});
/script现在每个页面标题的后面都增加了 - www.51blog.xyz。
Body Tags
可以在适用的标记上增加 tagPosition 选项将它们追加到页面的不同位置。 tagPosition 可选值
head将标记添加到页面的 head 标签内bodyOpen将标记添加到页面的 body 标签的开始bodyClose将标记添加到页面的 body 标签的末尾
script setup langts
// pages/about.vueuseHead({script: [{src: https://third-party-script.com,tagPosition: bodyClose,},],
});
/script示例 Examples
definePageMeta
在pages/目录中您可以使用definePageMeta和useHead来设置基于当前路由的元数据。 例如可以首先设置当前页面的标题这是在构建时通过宏提取的因此无法动态设置
script setup
definePageMeta({title: Some Page,
});
/script然后在布局文件中您可以使用之前设置的路由元数据Route Meta
script setup
const route useRoute();useHead({meta: [{ property: og:title, content: App Name - ${route.meta.title} }],
});
/script动态设置标题
在下面的示例中titleTemplate既可以设置为带有%s占位符的字符串也可以设置为函数这样就可以为 Nuxt 应用程序的每个路由动态设置页面标题具有更大的灵活性
script setup
useHead({// 字符串形式 %s 将被 title 替换titleTemplate: %s - Site Title,// 函数形式titleTemplate: (productCategory) {return productCategory ? ${productCategory} - Site Title : Site Title;},
});
/scriptnuxt.config也是设置页面标题的另一种方法。但是nuxt.config不允许页面标题是动态的。因此建议在app.vue文件中使用titleTemplate添加动态标题然后将其应用于 Nuxt 应用程序的所有路由。
动态添加外部 CSS 使用useHead组合式函数的 link 属性 script setup langts
useHead({link: [{rel: preconnect,href: https://fonts.googleapis.com,},{rel: stylesheet,href: https://fonts.googleapis.com/css2?familyRobotodisplayswap,crossorigin: ,},],
});
/script使用组件来启用谷歌字体 templatedivLink relpreconnect hrefhttps://fonts.googleapis.com /Linkrelstylesheethrefhttps://fonts.googleapis.com/css2?familyRobotodisplayswapcrossorigin//div
/template
