Hubert Wang

I am
Hubert Wang

Wechat Official Account
Find fun things here!

HTML5 移动端 head 头标签生成器

PART 1 生成器

HTML5 移动端 head 头标签生成器(release soon)

生成器简介:

  • 图形化界面点选,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

1952
TOC
Comments
Write a Comment