Nuxt3-学习之路 03，useMeta

旺仔米苏
1,340 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

Nuxt3-学习之路 03， useMeta

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

useMeta

useMeta 可以知道，这是设置 html 里 head 标签下的 meta 属性

这个属性，通常用于告诉浏览器一些当前网站的一些信息，方便浏览器的爬虫，可用于 SEO

1.找到当前的 useMeta

那么我们目前启动的 Nuxt3 项目是在哪里配置这些信息的呢，可以通过 app.vue 里面的 NuxtWelcome 组件信息，找到 welcome.vue 页面

image.png

image.png

image.png

image.png

可以很清楚的看到 在这个 useMeta 的使用，我们的 title 也被定义出来。

下面是页面的一个展示效果。

image.png

2.为什么要有这个api

你可能会想，我直接在页面的 index.html 直接写 meat 属性的相关东西不就可以了。

但是这样是不对的，我们这样想的话，得到的结果就是所有页面的 meta 属性值都是一样的。所有的标题也都是一样的。

所以为了能够更好的处理每个页面，我们可以通过 useMeta 这个标签。

我们在 app.vue 页面使用这个属性，放置一些常见的 meta 属性值

useMeta({
  title:'测试标题',
  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }],
  meta: [{ name: 'description', content: '测试描述' }],
  bodyAttrs: {
    class: 'test'
  }
})

image.png

image.png

可以看到页面上 已经有我们写的 meta 值。 此时 useMeta 的说明到此结束。

3.meta 属性

这里总结一下 常见的 meta 属性有哪些

  • charset 意思是字符集，说明html文档的一个编码类型是什么

    <meta charset="UTF-8" >

  • keywords 关键词，页面的一个关键词

    <meta name="keywords" content="关键词" />

  • description 页面描述

    <meta name="description" content="页面描述" />

  • viewport 主要是移动端的一个视口区域

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    • width=device-width： 代表 宽度 为 设备宽度，当然我们也可以指定某个值，例如 500

    • initial-scale：初始化缩放比例，也就是页面第一次load完毕后，缩放的比例

    • maximum-scale：允许用户缩放到的最大比例

    • minimum-scale：允许用户缩放到的最小比例

    • user-scalable：用户是否可以手动缩放,no 代表不允许，yes代表允许

这里我们可以打开掘金，看下掘金的一个 meta，发现是有一个 http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

它的一个作用就是为了浏览器兼容性处理

X-UA-Compatible 值为是 IE8 的一个专有 meta 属性，通过设置这个值，可以将 IE8 的一个网页渲染变为，使用 Edge 引擎渲染网页，同时启用 Google Chrome Frame（谷歌浏览器内嵌框架）。

这个插件可以让使用 IE 的用户界面，以chrome内核的渲染方式来进行展示。所以当 安装有这个插件的 IE 浏览器发现这行 meta 属性时，可以马上使用 Chrome 渲染引擎 替换 IE 自身的渲染引擎。

其它浏览器将忽略此行代码，不会影响代码执行。

总结

meta 的常见值 和 useMeta 的使用，meta 可以有利于 SEO

avatar
文章
阅读
粉丝