一个简单的 index.html 模板

<!DOCTYPE html><!-- DTD文档类型声明为HTML5版本的格式 -->
<html lang="zh-CN"><!--指定为中文网站,主要避免触发谷歌浏览器翻译功能-->
<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 字符编码写法 优于 html4.01的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
    <meta charset="UTF-8">
    <!-- 网站标题,最好在自己使用对应框架的路由拦截中每次设置不同的标题较好 -->
    <title>Condor Hero</title>
    <!-- 用于告诉搜索引擎,你网页的关键字,特别有用 -->
    <meta name="keywords"  content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    <!-- 网页作者,一般放在keywords之下 -->
    <meta name="author" content="重庆派臣科技有限公司,https://www.paichen.net/" />
    <!-- 用于告诉搜索引擎,你网站的主要内容。不超过150个字符 -->
    <meta name="description"  content="简书是一个优质的创作社区,在这里,你可以任性地创作,一篇短文、一张照片、一首诗、一幅画……我们相信,每个人都是生活中的艺术家,有着无穷的创造力。">
    <!-- 移动端网页布局必备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 用于告知浏览器以何种版本来渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
    <!-- renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。 -->
    <meta name="renderer" content="webkit"/><!--默认webkit内核-->
    <!-- Start of Baidu Transcode -->
    <!-- 移动端专用禁止百度转码乱加广告导致页面布局散了,此方法并不能百分之百有效 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <!-- 此网站可同时适合在移动设备和电脑上进行浏览会自动适配 -->
    <meta name="applicable-device" content="pc,mobile">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="width"/>
    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
    <meta name="HandheldFriendly" content="true"/>
    <meta name="mobile-agent" content="format=html5;url=https://www.jianshu.com/">
    <!-- End of Baidu Transcode -->
    <!-- robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引content默认是all搜索引擎将索引此网页与继续通过此网页的链接索引。 -->
    <meta name="robots" content="all" />
    <!-- 快捷方式图标推荐大小为32x32 -->
    <link href="//cdn2.jianshu.io/assets/favicons/favicon-e743bfb1821442341c3ab15bdbe804f7ad97676bd07a770ccc9483473aa76f06.ico" rel="shortcut icon" type="image/x-icon">
    <!-- iOS 设备 begin -->
    <!-- 添加到主屏后的标题(iOS 6 新增) -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- IOS 设备可以使用添加到主屏按钮将网站添加到主屏幕上apple-touch-icon-precomposed用来设置主屏幕上的图标 -->
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/57-a6f1f1ee62ace44f6dc2f6a08575abd3c3b163288881c78dd8d75247682a4b27.png" sizes="57x57" />
    <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/72-fb9834bcfce738fd7b9c5e31363e79443e09a81a8e931170b58bc815387c1562.png" sizes="72x72" />
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/76-49d88e539ff2489475d603994988d871219141ecaa0b1a7a9a1914f4fe3182d6.png" sizes="76x76" />
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/114-24252fe693524ed3a9d0905e49bff3cbd0228f25a320aa09053c2ebb4955de97.png" sizes="114x114" />
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/120-1bb7371f5e87f93ce780a5f1a05ff1b176828ee0d1d130e768575918a2e05834.png" sizes="120x120" />
    <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/152-bf209460fc1c17bfd3e2b84c8e758bc11ca3e570fd411c3bbd84149b97453b99.png" sizes="152x152" />
    <!-- iOS 图标 end -->
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="sNMk592JV2wwHn6DPJ8C5oy/hHDnjIlZBOHyngtTbpQ=" />
</head>
<body>
</body>
</html>

no-siteapp 和 no-transform 有什么区别??

作者:师旭
链接:https://www.zhihu.com/question/24375835/answer/77448034
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

说下我自己的理解吧:
no-transform是百度官方站长学院中提及过的禁止转码方式:(原文:移动搜索_官方课件

而当站长们采用no-transform这种方式后,发现得到的效果并不满意:并不能有效阻止百度转码。
于是在多次探寻中,终于求得一良方:通过手机百度查看网页时页面底部有个链接,里面有相关转码的说明,官方提到了”siteapp转码声明“。

页面底部有转码声明,上图一:

image

点击转码声明后,得到以下解释:

image

于是这两个标签就一传十、十传百的在各个网站中流行开来。
有只用no-transform,也有只用no-siteapp,当然也有两个都用的。

究竟用哪个好呢?反正不管咋用,至少现阶段都无法保证100%的不被转码。

<meta name="applicable-device" content="pc,mobile">

3,做好终端适配:
随着移动互联网的发展,越来越多的用户使用移动设备访问网站,百度移动搜索会对移动站给予优先排序的机会,对于有PC网站的站长,我们强烈建议您做以下工作:
  1、做好自适配,将移动终端的访问自主适配跳转至移动版站点;
  2、为了更快地告知百度移动搜索您PC网站与移动站内容的一一对应关系,建议使用站长平台移动适配工具进行适配关系提交。
    关于移动适配帮助可以参考:/wiki/39   3、同时还可以使用如下Meta标签协议规范:
  ●如果该网页只适合在电脑上进行浏览,例如(http://www.sina.com.cn/ ),在html中加入如下meta:
   <meta name="applicable-device" content="pc">
  ●如果该网页只适合在移动设备上进行浏览,例如(http://3g.sina.com.cn/ ),在html中加入如下meta:    <meta name="applicable-device" content="mobile">
  ●如果网页采用了响应式网页设计,例如(http://cdc.tencent.com/) 不需要经过url自适配跳转就可以根据浏览器的屏幕大小自适应的展现合适的效果,同时适合在移动设备和电脑上进行浏览,在html中加入如下meta:    <meta name="applicable-device" content="pc,mobile">

<meta name="mobile-agent" content="format=html5;url=https://www.jianshu.com/">

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

让页面出的所有手机号码和邮箱被忽略,让 a 标签在移动端不能识别电话和邮箱。

apple-touch-icon

在 iPhone,iPad,iTouch 的 safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签,如果设置了相应apple-touch-icon标签,则添加到主屏上的图标会使用指定的图片。在<head></head>区域加入下面代码即可。

<link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备。

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

分别放置57x57(默认值)的图标对应320x640的老设备,72x72对应ipad,114x114对应retina屏的iPhone及iTouch。由于手头没有iPad3,所以没测试是否支持144x144的图标在iPad3上的显示。

虽然官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐),图片无需做圆角处理,同Native App一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果,可以用apple-touch-icon-precomposed代替apple-touch-icon。

图标搜索的优先级如下:

  • 如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
  • 如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
  • 如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
  • 如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下:
  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

偷懒的方法,可以直接设置一个最大尺寸的图标,如我测试使用一个114x114大小的图标,在iPhone4以及iPad2上都可以正常显示。以上内容在iPhone4以及iPad2上测试通过。

google的网站认证代码,证明该网站的所有者是你,和利于搜索引擎收入:获取代码可以进入http://www.google.com/webmasters/tools/,将自己网站添加进 google网站管理,有利于google 的收录。

<meta name="google-site-verification"content="tPkY-Quj85Ni78uIWOIREPO9k5xczDgjch10qsLfVfs" />

360 和腾讯网站认证:

  <meta name="tencent-site-verification" content="39a5ed77a02c0103af6ac08addbc3851"/>
  <meta name="360-site-verification" content="604a14b53c6b871206001285921e81d8" />

QQ登陆声明:

<meta property="qc:admins" content="153033120760567656375" />

微博登陆声明:

<meta property="wb:webmaster" content="e9da5e10879ed7c9" />

关于这两个 meta 代码我实在是没搞懂怎么使用的,只知道是防止 CSRF:

<meta content="authenticity_token" name="csrf-param" />
<meta content="gv1xdpH2w4MYcMtoT52pRPV+tPoWFDSJhxNiBOC5idQ=" name="csrf-token" />

缓存不可缓存的内容:CSRF安全性 涉及到了 Ruby on Rails 就不懂了。

兼容IE浏览器

现在对低版本的 IE 浏览器,虽然不要刻意来处理兼容问题,但是为了防止用户使用低版本的 IE 浏览器访问我们的网页,一般使用只有 IE 认识的条件注释来强迫用户升级浏览器,常用的注释如下:

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

如果确实想兼容低版本的 IE 也可以使用条件注释来引入第三方兼容包。

在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。

<!--[if lt IE 9]>  
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
<![endif]—>
  • html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
  • respond:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

写作时间:2020年2月25日16点14分