常用的 HTML5 meta 标签

2016.05.12

对于移动端而言,meta 标签相当重要,本文介绍一些常用的 meta 标签。

charset

声明文档使用的字符编码

1
<meta charset="utf-8">

lang 属性

1
<html lang="zh-cmn-Hans">


1
<html lang="zh-CH">

前者是更标准的写法,后者的浏览器兼容比较好
参考自 zhi.hu/XyIa

优先使用 IE 最新版本和 Chrome

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

360 使用 Google Chrome Frame

1
<meta name="renderer" content="webkit">

SEO 优化

  • 页面关键词 keywords

    1
    <meta name="keywords" content="your keywords">
  • 页面描述内容 description

    1
    <meta name="description" content="your description">
  • 定义网页作者 author

    1
    <meta name="author" content="author,email address">
  • 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index 和 follow。

    1
    <meta name="robots" content="index,follow">

移动设备 viewport

1
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

其中 content 的参数:

  • width viewport 宽度(数值 /device-width)
  • height viewport 高度(数值 /device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

而如果你的网站不是响应式的,则不要使用 initial-scale 或者禁用缩放

1
<meta name="viewport" content="width=device-width,user-scalable=yes">

关闭 chrome 浏览器下翻译插件

关闭 chrome 浏览器下翻译插件

1
<meta name="google" value="notranslate" />

参考文章

常用的 HTML 头部标签