你所不知的meta和link用法

Jencia

字符编码

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两种写法等效,推荐写第一种

语言设置

简体中文

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

繁体中文

<html lang="zh-cmn-Hant">

不是写lang="zh-CN"

浏览器内核控制

设置IE的优先版本为edge,若不存在则选择当前最高版本,含有谷歌内核的会选择谷歌,如果设置多条的话只有第一条生效

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

针对多内核浏览器设置优先使用的内核

<meta name="renderer" content="webkit">
<!--
  webkit:   极速内核
  ie-comp:  ie兼容内核
  ie-stand: ie标准内核
-->

禁用百度转码

通过百度进去你的网页,百度可能会对你的网页进行转码,转码的意思就是会在你的网页上加广告,要防止这种情况需要加

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

SEO优化

<!-- 页面标题 -->
<title>页面标题</title>

<!-- 作者 -->
<meta name="author" content="Jencia">

<!-- 版权 -->
<meta name="copyright" content="本页版权归XXX所有">

<!-- 使用的编译器 -->
<meta name="generator" content="webstorm">

<!-- 网页描述 -->
<meta name="description" content="这是一个整合meta的页面">

<!-- 网页关键字 -->
<meta name="keywords" content="meta,教程,博客">

<!-- 搜索引擎索引方式 -->
<meta name="robots" content="index,follow">
<!--
  all        文件将被检索,且页面上的链接可以被查询
  none        文件将不被检索,且页面上的链接不可以被查询
  index        文件将被检索
  follow    页面上的链接可以被查询
  noindex    文件将不被检索
  nofollow    页面上的链接不可以被查询
-->

页面缓存

设置页面缓存的到期时间,content值为GMT时间格式,如果不想缓存就设置为0

<meta http-equiv="expires" content="Wed, 26 Feb 2012 08:21:57 GMT">

不想从缓存里读取页面,就添加

<meta http-equiv="pragma" content="no-cache">

win8图标

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000">

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png">

移动端设备

viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!--
  width             宽度(数值 / device-width)
  height            高度(数值 / device-height)
  initial-scale     初始的缩放比例 (范围从0到1)
  minimum-scale     允许用户缩放到的最小比例
  maximum-scale     允许用户缩放到的最大比例
  user-scalable     是否允许用户缩放页面 (no,yes)
  viewport-fit      适配iPhoneX,使页面完全覆盖整个窗口
-->

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器

<!-- 黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

忽略数字自动识别为电话号码

<meta name="format-detection" content="telephone=no"> 

忽略识别邮箱

<meta name="format-detection" content="email=no">

其他

<!-- uc强制竖屏 | 横屏 -->
<meta name="screen-orientation" content="portrait | landscape">
<!-- QQ强制竖屏 | 横屏 -->
<meta name="x5-orientation" content="portrait | landscape">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

其他

PWA应用定义

<link rel="manifest" href="manifest.json">

详细PWA介绍可参考 https://zhuanlan.zhihu.com/p/...

添加favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
// 或者
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

详细favicon介绍可参考 https://github.com/audreyr/fa...

自动刷新或重定向

<!-- 2秒后刷新 -->
<meta http-equiv="refresh" content="2;url=">
<!-- 5秒后重定向到百度页面 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

添加rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">

IOS设备添加主屏幕设置

添加到主屏后的标题(iOS 6 新增)

<meta name="apple-mobile-web-app-title" content="标题"> 

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes"> 

设置状态栏的背景颜色,全屏模式下才生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<!--
  default            默认
  black                黑色
  black-translucent    黑色半透明
-->

图标设置

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="xx.png">
<!-- sizes不写默认57x57 -->

启动画面设置

<link rel="apple-touch-startup-image" sizes="768x1004" href="xx.png">

建议考虑不同分辨率,对每个分辨率设置各自的sizes,配上对应尺寸的图片,可参考以下表格。

手机型号 图标大小 分辨率大小
iPad 72x72 768x1004(竖屏)、1024x748(竖屏)
iPad(Retina) 144x144 1536x2008(竖屏)、2048x1496(竖屏)
iPhone/iPod Touch 57x57 320x480
iPhone/iPod Touch(Retina) 114x114 640x960
iPhone 5/iPod Touch 5 114x114 640x1136
iPhone 6 120x120 750×1294
iPhone 6 Plus 180x180 1242×2148


添加智能APP广告条 Smart App Banner(iOS 6+ Safari),顶部会自动弹出一条关于应用下载的广告条,下载地址就是你设置的myURL

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

文档参考

阅读 2.5k
120 声望
5 粉丝
0 条评论
你知道吗?

120 声望
5 粉丝
宣传栏