常用的 meta 元素

常用的 meta 元素有哪些？

元素标签是提供有关 HTML 文档的元数据，元数据不会显示在页面上，但是能够被机器识别。

总而言之，meta 标签是用来让机器识别的，同时它对 SEO 起着重要的作用。

charset

指定了 html 文档的编码格式，常用的是 utf-8（Unicode 的字符编码），还有 ISO-8859-1（拉丁字母的字符编码）。当然还有其他的，但是一般不常用。

<meta charset="utf-8" />

name & content

指定元数据的名称（这部分对 SEO 非常有用）

• author —— 定义了页面的作者

<meta name="author" content="LBJhui" />

• keywords —— 为搜索引擎提供关键字

<meta name="keywords" content="HTML,CSS,JavaScript" />

• description —— 对网页整体的描述

<meta name="description" content="font-ended study" />

• viewport —— 对页面视图相关进行定义

  viewport 翻译为中文可以叫做 “视区”，是用户网页的可视区域。

  手机浏览器是把页面放在一个虚拟的 “窗口”（viewport）中，通常这个虚拟的 “窗口” 比屏蔽宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页布局），用户可以通过平移和缩放来看网页的不同部分。

  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以用手动缩放。

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

• generator —— 包含生成页面软件的标识符

which contains the identifier of the software that generated the page.

<meta name="generator" content="Hexo 3.8.0" />

• theme-color —— 定义主体颜色

<meta name="theme-color" content="#222" />

http-equiv & content

Provides an HTTP header for the information/value of the content attribute

• refresh —— 每 30s 刷新一次文档

<meta http-equiv="refresh" content="30" />

• X-UA-Compatible —— 告知浏览器以何种版本渲染界面。下面的例子有限使用 IE 最新版本

<meta http-equiv="X-UA-Compatible" content="ie-edge" />

关于是否有必要使用这一条在 stack overflow 尚且有争议。

• Cache-Control —— 请求和相应遵循的缓存机制，可以声明缓存的内容，修改国企时间，可多次声明

no-transform —— 不得对资源进行转换或转变

no-siteapp —— 禁止百度进行转码

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

property & content

可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，会提取相应耳朵信息展现给用户。

<meta http-equiv="og:type" content="website" />
<meta
  http-equiv="og:url"
  content="https://blog.csdn.net/qq_36081714?spm=1000.2115.3001.5343"
/>
<meta http-equiv="og:site_name" content="LBJhui's blog" />