前端meta标签知识梳理

概述

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

下面列一下前端meta标签常用的几大类：

1.用于SEO优化(搜索引擎优化)

网页关键字

<meta name="keywords"  content="jianshu-name"/>

网页描述

<meta name="description"  content="jianshu-description"/>

搜索引擎索引方式

<meta name="robots" content="index, nofollow" />
<!-- 这里content可用值有：none，noindex，nofollow，all，index和follow-->
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

通知搜索引擎多少天访问一次

 <meta name="revisit-after"  content="15days"/>

2.用于移动端H5

申明代码

<meta charset='utf-8' />

响应式web设计-viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

针对一些不识别viewport的浏览器（如黑莓）

<meta name="HandheldFriendly" content="true">

WebApp启用全屏模式

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

隐藏状态栏/设置状态栏颜色(启用全屏模式下生效)

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- content常用值有default,black,black-translucent -->

忽略数字自动识别为电话号码

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

忽略识别邮箱

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

QQ浏览器强制竖屏

<meta name="x5-orientation" content="portrait"/>

QQ浏览器强制全屏

<meta name="x5-fullscreen" content="true"/>

UC浏览器强制全屏

<meta name="screen-orientation" content="portrait"/>

UC浏览器强制全屏

<meta name="full-screen" content="yes"/>

3.用于Web端网页

网页中双内核浏览器优先加载webkit内核

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

网页中双内核浏览器优先加载IE兼容模式

<meta name="renderer" content="ie-comp">

禁止浏览器从本地计算机的缓存中访问页面内容

<meta http-equiv="Pragma" content="no-cache"/> 

避免从第三方打开网页进行转码的问题

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