PART 1 生成器

生成器简介：

• 图形化界面点选，1分钟生成十数个头标签，无需代码。
• 针对移动端H5页面设置，含Android Chrome/iOS端显示设置、QQ微信分享设置、SEO优化、浏览器设置。
• 修改了一些目前网上H5头标签分享中的过时信息，比如touch-icon大小。

PART 2 移动端头标签

Android Chrome设置

注意本小标题下内容只针对Android Chrome浏览器，其他安卓设备自带浏览器因为基于内核不同，表现千奇百怪，因此不保证下面这些效果对除Android Chrome之外的安卓设备浏览器起作用。

• 添加到主屏的标题：默认跟页面标题一致，不用另写代码。
• 添加到主屏幕的图标：（1）生成器中默认图标路径为："./img/icon.png"；（2）图标图片大小为192x192即可。

<link rel="icon" sizes="192x192" href="./img/icon.png">

• WebAPP：（1）生成器中默认有；（2）Chrome39之前，至少需要本属性以及上面那条属性才能使得『保存到桌面按钮』起作用。

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

• 标签页主题颜色：（1）生成器中默认没有；（2）Chrome39之后才有该属性，且未开启“合并标签页和应用”；（3）系统要求Android5.0以上。

<meta name="theme-color" content="#262a30">

iOS设置

• 添加到主屏的标题：（1）生成器默认跟页面标题一致；（2）iOS6新增，至今保留。

<meta name="apple-mobile-web-app-title" content="添加到主屏的标题">

• 添加到主屏幕的图标：（1）生成器中默认图标路径为："./img/touch-icon.png"；（2）这张图片的路径与Android及桌面端favicon的路径均一致；（3）图标图片大小为128x128即可，网上所说为多重设备设置不同大小图片，实际测试没有必要；（4）rel属性指示是否添加默认iOS图标的效果，包括阴影及高光，默认属性apple-touch-icon-precomposed不添加，若要添加，rel属性改为apple-touch-icon。

<link rel="apple-touch-icon-precomposed" sizes="128x128" href="./img/touch-icon.png" />

• WebAPP全屏：（1）生成器中默认有；（2）浏览器默认状态栏消失；（3）浏览器默认左滑动返回、右滑动前进功能消失，网站网址也会因此难以获得；（3）手机默认的窄条状态栏颜色设置见下一条属性。

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

• 状态栏颜色：（1）生成器中默认为黑色半透明；（2）只有在前一条属性设置为yes是起作用，否则默认打开浏览器；（3）可设置属性：default白色，black黑色，black-translucent黑色半透明，此时状态栏可视为浮动在网页上。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• 禁止数字自动识别为电话号码：生成器中默认有。

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

• 启动画面：（1）生成器中默认没有；（2）若需要使用可以用下面这段代码，需要准备各种尺寸的启动画面，准确sizes尺寸信息见iOS官方文档

<link rel="apple-touch-startup-image" sizes="" href="./img/splash-screen.png" />

社交平台分享设置

微信发布了JSSDK，其中包含分享设置，但是需要开发者认证。以下方法实际上是针对QQ分享的，但是实践证明微信上也是能用的，因此免去开发者认证的麻烦。

• QQ/微信分享标题：（1）生成器中默认有；（2）生成器中默认为页面标题；（3）如果在添加本属性之前QQ或者微信已经转发了页面，那么再设置也没有用。

<meta name="others" itemprop="name" content="要分享的标题">

• QQ/微信分享图片：（1）生成器中默认有；（2）生成器中默认为图标./img/touch-icon.png；（3）如果在添加本属性之前QQ或者微信已经转发了页面，那么再设置也没有用；（4）QQ/微信默认选取第一张图作为分享用图片，另一种设置的方式是将想要作为分享图片的图片在页面中display:none，见徐少鹏《meta标签自定义链接预览信息》。

<meta name="others" itemprop="image" content="./img/touch-icon.png">

• QQ/微信分享简介：（1）生成器中默认有；（2）生成器中默认为页面介绍；（3）如果在添加本属性之前QQ或者微信已经转发了页面，那么再设置也没有用。

<meta name="description" itemprop="description" content="要分享的简介">

SEO优化

• title 标签：（1）head标签中必须有title标签；（2）建议写成『网站名 - 页面名』或者『页面名 - 网站名』的格式。

<title>网站标题</title>

• keywords 页面关键词：（1）因关键词较为重要，生成器中放在较前面（2）一旦写好，不要轻易修改，容易使得网站被降权；（3）个数控制在3~4个最佳，过多关键词会被搜索引擎认为过度优化；（4）隔开请用半角逗号；（5）使用词而非描述性语句，描述性内容有专门的位置放。

<meta name="keywords" content="关键词一, 关键词二, 关键词三">

• description 页面描述：（1）一小段描述性语言描述页面内容及功能即可；（2）可以包含网站标题、网站关键词等，但是不要用关键词这样用半角逗号分隔的方式。

<meta name="description" content="描述性语句">

• author 网页作者：（1）作者名字，中英文都可以；（2）多个作者的时候用逗号分隔；（3）可以把作者的电子邮件地址放进去。

<meta name="author" content="作者名字">

VIEWPORT视口设置

因生成器针对H5移动端（桌面端使用也OK），默认使用最适合响应式的设置方式，统一布局视口为理想视口。响应式视口信息见《移动前端基础》。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

VIEWPORT的一些属性：

• width 视口宽度
• height 视口高度
• initial-scale 初始缩放比例，如果不是响应式的网页，请不要设置initial-scale的值。
• maximum-scale 最大允许缩放比例
• minimum-scale 最小允许缩放比例
• user-scalable 用户是否被允许缩放，请注意当你的网页不是响应式或者专门为移动端写的网页的时候，不允许用户缩放是残忍的，很可能你的网站内容无法被看到。
• minimal-ui iOS7.1 beta2新增布尔值属性，加载时，最小化上下状态栏，生成器中没有添加，需要的话直接添加上minimal-ui即可。

浏览器设置

• 禁止百度转码：（1）生成器中默认有；（2）你不会希望百度对你的网站转码，即提取出一小部分文本信息并去除网站样式后，加上百度用于盈利的广告。

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

• IE最新版本及Chrome优先：生成器中默认有。

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

• webkit核渲染优先：（1）生成器中默认有；（2）360浏览器会因此切换默认极速核为webkit核，使用Google Chrome Frame（GCF）渲染，若未安装，使用IE内核渲染，因上一条设置中设置IE最新版本优先，故会用高版本IE浏览器内核渲染。

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

参考引用：
[1] 百度FEX
[2] 徐少鹏《meta标签自定义链接预览信息》
作者署名：Hongyang Wang, http://mr-why.com
版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0