手机移动端网页的头部标签和 meta该怎么写比较好?
做网页(zuowangye.com)编者注:替换以下《》,即可放入网页正常使用。meta标签对移动端网页同样有很大的作用,那么该如何写比较好呢?
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?
meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。
http-equiv:
该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
使用 HTML5 doctype,不区分大小写
《!DOCTYPE html》
--------------------------------------------------------------------------------
更加标准的 lang 属性写法
《html lang="zh-cmn-Hans"》
meta声明文档使用的字符编码
《meta charset='utf-8'》
--------------------------------------------------------------------------------
优先使用 IE 最新版本和 Chrome
《meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/》
--------------------------------------------------------------------------------
页面描述
《meta name="description" content="不超过150个字符"/》
--------------------------------------------------------------------------------
页面关键词
《meta name="keywords" content=""/》
--------------------------------------------------------------------------------
网页作者
《meta name="author" content="name, email@gmail.com"/》
--------------------------------------------------------------------------------
搜索引擎抓取
《meta name="robots" content="index,follow"/》
--------------------------------------------------------------------------------
为移动设备添加 viewport
说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?
viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?
《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 http://www.zuowangye.com
iOS 设备
添加到主屏后的标题(iOS 6 新增)
《meta name="apple-mobile-web-app-title" content="标题"》
--------------------------------------------------------------------------------
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
《meta name="apple-mobile-web-app-capable" content="yes"/》
--------------------------------------------------------------------------------
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"》
--------------------------------------------------------------------------------
设置苹果工具栏颜色
《meta name="apple-mobile-web-app-status-bar-style" content="black"/》
--------------------------------------------------------------------------------
忽略页面中的数字识别为电话,忽略email识别
《meta name="format-detection" content="telphone=no, email=no"/》
--------------------------------------------------------------------------------
启用360浏览器的极速模式(webkit)
《meta name="renderer" content="webkit"》
--------------------------------------------------------------------------------
避免IE使用兼容模式
《meta http-equiv="X-UA-Compatible" content="IE=edge"》
--------------------------------------------------------------------------------
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
《meta name="HandheldFriendly" content="true"》
--------------------------------------------------------------------------------
微软的老式浏览器
《meta name="MobileOptimized" content="320"》
--------------------------------------------------------------------------------
uc强制竖屏
《meta name="screen-orientation" content="portrait"》
--------------------------------------------------------------------------------
QQ强制竖屏
《meta name="x5-orientation" content="portrait"》
--------------------------------------------------------------------------------
UC强制全屏
《meta name="full-screen" content="yes"》
--------------------------------------------------------------------------------
QQ强制全屏
《meta name="x5-fullscreen" content="true"》
--------------------------------------------------------------------------------
UC应用模式
《meta name="browsermode" content="application"》
--------------------------------------------------------------------------------
QQ应用模式
--------------------------------------------------------------------------------
windows phone 点击无高光
《meta name="msapplication-tap-highlight" content="no"》
--------------------------------------------------------------------------------
iOS 图标
iPhone 和 iTouch,默认 57x57 像素,必须有
《link rel="apple-touch-icon-precomposed" href="http://wap.b2b6.com/apple-touch-icon-57x57.png"/》
--------------------------------------------------------------------------------
Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有
《link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/》
--------------------------------------------------------------------------------
Retina iPad,144x144 像素,可以没有,但推荐有
《link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/》
iOS 启动画面
iPad 竖屏 768 x 1004(标准分辨率)
《link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/》
--------------------------------------------------------------------------------
iPad 竖屏 1536x2008(Retina)
《link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/》
--------------------------------------------------------------------------------
iPad 横屏 1024x748(标准分辨率)
《link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/》
--------------------------------------------------------------------------------
iPad 横屏 2048x1496(Retina)
《link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/》
--------------------------------------------------------------------------------
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
《link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/》
--------------------------------------------------------------------------------
iPhone/iPod Touch 竖屏 640x960 (Retina)
《link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/》
--------------------------------------------------------------------------------
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
《link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/》
iOS 设备 end
Windows 8 磁贴颜色
《meta name="msapplication-TileColor" content="#000"/》
--------------------------------------------------------------------------------
Windows 8 磁贴图标
《meta name="msapplication-TileImage" content="icon.png"/》
--------------------------------------------------------------------------------
添加 RSS 订阅
《link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/》
--------------------------------------------------------------------------------
添加 favicon icon
《link rel="shortcut icon" type="image/ico" href="/favicon.ico"/》
做网页(zuowangye.com)编者注:替换以下《》,即可放入网页正常使用。meta标签对移动端网页同样有很大的作用,那么该如何写比较好呢?
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?
meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。
http-equiv:
该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
使用 HTML5 doctype,不区分大小写
《!DOCTYPE html》
--------------------------------------------------------------------------------
更加标准的 lang 属性写法
《html lang="zh-cmn-Hans"》
meta声明文档使用的字符编码
《meta charset='utf-8'》
--------------------------------------------------------------------------------
优先使用 IE 最新版本和 Chrome
《meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/》
--------------------------------------------------------------------------------
页面描述
《meta name="description" content="不超过150个字符"/》
--------------------------------------------------------------------------------
页面关键词
《meta name="keywords" content=""/》
--------------------------------------------------------------------------------
网页作者
《meta name="author" content="name, email@gmail.com"/》
--------------------------------------------------------------------------------
搜索引擎抓取
《meta name="robots" content="index,follow"/》
--------------------------------------------------------------------------------
为移动设备添加 viewport
说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?
viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?
《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 http://www.zuowangye.com
iOS 设备
添加到主屏后的标题(iOS 6 新增)
《meta name="apple-mobile-web-app-title" content="标题"》
--------------------------------------------------------------------------------
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
《meta name="apple-mobile-web-app-capable" content="yes"/》
--------------------------------------------------------------------------------
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"》
--------------------------------------------------------------------------------
设置苹果工具栏颜色
《meta name="apple-mobile-web-app-status-bar-style" content="black"/》
--------------------------------------------------------------------------------
忽略页面中的数字识别为电话,忽略email识别
《meta name="format-detection" content="telphone=no, email=no"/》
--------------------------------------------------------------------------------
启用360浏览器的极速模式(webkit)
《meta name="renderer" content="webkit"》
--------------------------------------------------------------------------------
避免IE使用兼容模式
《meta http-equiv="X-UA-Compatible" content="IE=edge"》
--------------------------------------------------------------------------------
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
《meta name="HandheldFriendly" content="true"》
--------------------------------------------------------------------------------
微软的老式浏览器
《meta name="MobileOptimized" content="320"》
--------------------------------------------------------------------------------
uc强制竖屏
《meta name="screen-orientation" content="portrait"》
--------------------------------------------------------------------------------
QQ强制竖屏
《meta name="x5-orientation" content="portrait"》
--------------------------------------------------------------------------------
UC强制全屏
《meta name="full-screen" content="yes"》
--------------------------------------------------------------------------------
QQ强制全屏
《meta name="x5-fullscreen" content="true"》
--------------------------------------------------------------------------------
UC应用模式
《meta name="browsermode" content="application"》
--------------------------------------------------------------------------------
QQ应用模式
--------------------------------------------------------------------------------
windows phone 点击无高光
《meta name="msapplication-tap-highlight" content="no"》
--------------------------------------------------------------------------------
iOS 图标
iPhone 和 iTouch,默认 57x57 像素,必须有
《link rel="apple-touch-icon-precomposed" href="http://wap.b2b6.com/apple-touch-icon-57x57.png"/》
--------------------------------------------------------------------------------
Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有
《link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/》
--------------------------------------------------------------------------------
Retina iPad,144x144 像素,可以没有,但推荐有
《link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/》
iOS 启动画面
iPad 竖屏 768 x 1004(标准分辨率)
《link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/》
--------------------------------------------------------------------------------
iPad 竖屏 1536x2008(Retina)
《link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/》
--------------------------------------------------------------------------------
iPad 横屏 1024x748(标准分辨率)
《link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/》
--------------------------------------------------------------------------------
iPad 横屏 2048x1496(Retina)
《link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/》
--------------------------------------------------------------------------------
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
《link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/》
--------------------------------------------------------------------------------
iPhone/iPod Touch 竖屏 640x960 (Retina)
《link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/》
--------------------------------------------------------------------------------
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
《link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/》
iOS 设备 end
Windows 8 磁贴颜色
《meta name="msapplication-TileColor" content="#000"/》
--------------------------------------------------------------------------------
Windows 8 磁贴图标
《meta name="msapplication-TileImage" content="icon.png"/》
--------------------------------------------------------------------------------
添加 RSS 订阅
《link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/》
--------------------------------------------------------------------------------
添加 favicon icon
《link rel="shortcut icon" type="image/ico" href="/favicon.ico"/》