Sticky Note | 重学 <meta />

366 阅读1分钟

meta 标签表示的是一种元属性 它不会对页面的布局造成影响

但是我们的页面离不开 meta 标签 合理的编写 meta 标签 也会让我们的页面有更好的体验

本文主要罗列一些常用到的 meta 标签的属性

charset

    <!-- 指定网页的编码方式 -->
    <meta charset="UTF-8" />

http-equiv

    <!-- 编译指令,提供的信息与类似命名的 HTTP 头部相同 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 1s后刷新页面 -->
    <meta http-equiv="refresh" content="1" />
    <!-- 1s后跳转/重定向 -->
    <meta
      http-equiv="refresh"
      content="1;URL='https://juejin.cn/user/1574156383563496'"
    />

name

name属性表示元数据的名字,content属性表示元数据的值。它们合在一起使用,就可以为网页指定一项元数据

viewport

    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

一些SEO优化

    <!-- SEO优化 -->
    <meta name="description" content="meta description" />
    <meta name="keywords" content="html" />
    <meta name="author" content="chou" />

OGP

OGP 是一种为社交分享而生协议 拿 Microsoft 官网举例

Screen Shot 2022-04-02 at 09.58.36.png

当我们在分享该网站的时候 就会显示对应 meta 信息中 og: 相应的内容

Screen Shot 2022-04-02 at 10.04.25.png

具体有关 OGP 的内容可以参考

ogp.me/