移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

Meta 标签

meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 </code> 标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,但是其作用非常强大,特别是当今的前端开发工作中,设置合适的meta标签可以大大提升网站页面的可用性。</p> <p>桌面端开发中,meta标签通常用来为<code>搜索引擎优化(SEO)</code>及 robots<code>定义页面主题</code>,或者是<code>定义用户浏览器上的cookie</code>;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。</p> <p>移动端开发中,meta标签除了桌面端中的功能设置外,还包括,比如viewport设置,添加到主屏幕图标,标签页颜色等等实用设置。具体可以看后面详细的介绍。</p> <h2 id="meta标签分类">meta标签分类</h2> <p>meta标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。</p> <ul> <li><h5 id="http-equiv">http-equiv</h5> 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。</li> <li><h5 id="name属性">name属性</h5> 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。</li> </ul> <h2 id="推荐使用的meta标签">推荐使用的meta标签</h2> <pre><code class="language-html"><code>  <!-- 设置文档的字符编码 --> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* --> <!-- 允许控制资源的过度加载 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 尽早地放置在文档中 --> <!-- 仅应用于该标签下的内容 --> <!-- Web 应用的名称(仅当网站被用作为一个应用时才使用)--> <meta name="application-name" content="应用名称"> <!-- 针对页面的简短描述(限制 150 字符)--> <!-- 在*某些*情况下,该描述是被用作搜索结果展示片段的一部分 --> <meta name="description" content="一个页面描述"> <!-- 控制搜索引擎的抓取和索引行为 --> <meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 --> <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 --> <!-- 告诉 Google 不显示网站链接的搜索框 --> <meta name="google" content="nositelinkssearchbox"> <!-- 告诉 Google 不提供此页面的翻译 --> <meta name="google" content="notranslate"> <!-- 验证 Google 搜索控制台的所有权 --> <meta name="google-site-verification" content="verification_token"> <!-- 用来命名软件或用于构建网页(如 - WordPress、Dreamweaver)--> <meta name="generator" content="program"> <!-- 关于你的网站主题的简短描述 --> <meta name="subject" content="你的网站主题"> <!-- 非常简短(少于 10 个字)的描述。主要用于学术论文。--> <meta name="abstract" content=""> <!-- 完整的域名或网址 --> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <!-- 基于网站内容给出一般的年龄分级 --> <meta name="rating" content="General"> <!-- 允许控制 referrer 信息如何传递 --> <meta name="referrer" content="never"> <!-- 禁用自动检测和格式化可能的电话号码 --> <meta name="format-detection" content="telephone=no"> <!-- 通过设置为 “off” 完全退出 DNS 预取 --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- 在客户端存储 cookie,web 浏览器的客户端识别 --> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <!-- 指定要显示在一个特定框架中的页面 --> <meta http-equiv="Window-Target" content="_value"> <!-- 地理标签 --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" --> <meta name="geo.region" content="country[-state]"> <!-- 如 content="New York City" --> <meta name="geo.placename" content="city/town"></code></code></pre> <p>相关的详细说明请查看:</p> <ul> <li>Google 可以识别的 Meta 标签</li> <li>WHATWG Wiki: Meta 拓展</li> <li>ICBM – 维基百科</li> <li>地理标记 – 维基百科</li> </ul> <h1 id="为移动设备添加-viewport">为移动设备添加 viewport</h1> <p>viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p> <pre><code class="language-html"><code><meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --></code></code></pre> <table> <thead> <tr class="header"> <th style="text-align:center;">content 参数</th> <th style="text-align:center;"></th> </tr> </thead> <tbody> <tr class="odd"> <td style="text-align:center;">width</td> <td style="text-align:center;">viewport 宽度(数值/device-width)</td> </tr> <tr class="even"> <td style="text-align:center;">height</td> <td style="text-align:center;">viewport 高度(数值/device-height)</td> </tr> <tr class="odd"> <td style="text-align:center;">initial-scale</td> <td style="text-align:center;">初始缩放比例</td> </tr> <tr class="even"> <td style="text-align:center;">maximum-scale</td> <td style="text-align:center;">最大缩放比例</td> </tr> <tr class="odd"> <td style="text-align:center;">minimum-scale</td> <td style="text-align:center;">最小缩放比例</td> </tr> <tr class="even"> <td style="text-align:center;">user-scalable</td> <td style="text-align:center;">是否允许用户缩放(yes/no)</td> </tr> <tr class="odd"> <td style="text-align:center;">minimal-ui</td> <td style="text-align:center;">iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:</td> </tr> </tbody> </table> <pre><code class="language-html"><code> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></code></code></pre> <p>而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。</p> <pre><code class="language-html"><code> <meta name="viewport" content="width=device-width,user-scalable=yes"></code></code></pre> <h2 id="适配-iphone-6-和-iphone-6plus-则需要写">适配 iPhone 6 和 iPhone 6plus 则需要写:</h2> <pre><code class="language-html"><code> <meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"></code></code></pre> <p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。</p> <h1 id="seo-优化部分">SEO 优化部分</h1> <pre><code class="language-html"><code><!-- 页面标题<title>标签(head 头部必须) --> <title>your title

相关链接:WEB1038 – 标记包含无效的值

百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加

相关链接:SiteApp 转码声明

不推荐的 meta 属性

     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     
    
    
    
    
    
    

转载于:https://www.cnblogs.com/qiqi715/p/9125876.html

你可能感兴趣的:(移动前端不得不了解的HTML5 head 头标签 —— Meta 标签)