几个你不知道的Head标签用法

HTML<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

Head标签在我们的开发实践中最常用的大概是定义标题和网站小图标、引入CSS/JS、定义字符集,这篇文章将总结几个我所遇到的Head标签的几个高级用法。

一、SEO相关

  • 1. 定义关键词 keywords:
    <meta name="keywords" content="your keywords">
    页面描述内容 description:
    <meta name="description" content="your description">

  • 2. 定义网页搜索引擎索引方式,通常有如下几种取值:none,noindex,nofollow,all,index和follow等。
    <meta name="robots" content="index,follow">
    其中的属性说明如下:

  • 设定为all:文件将被检索,且页面上的链接可以被查询;

  • 设定为none:文件将不被检索,且页面上的链接不可以被查询;

  • 设定为index:文件将被检索;

  • 设定为follow:页面上的链接可以被查询;

  • 设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  • 设定为nofollow:文件将不被检索,页面上的链接可以被查询。

  • 3. 结构化数据
    结构化,是通过网页特殊的标签将需要的数据提供给搜索引擎,并在搜索结果中按照既定的模版展现的实现形式,目的是为了提升搜索结果的体验,帮助站长提升搜索结果点击率。
    ** 如下时使用在head中设置结构化数据后的搜索引擎展示效果:**

    Paste_Image.png

    Paste_Image.png

Paste_Image.png

二、浏览器控制

  • 一、页面刷新:
    refresh示例
    5秒之后刷新本页面:
    <meta http-equiv="refresh" content="5" />
    5秒之后转到wangbaiyuan.cn:
    <meta http-equiv="refresh" content="5; url=http://wangbaiyuan.cn" />

  • **二、 控制页面与移动设备宽度相等 **
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    网页宽度默认等于屏幕宽度(width=device-width), 初始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

三、缓存控制:cache-control

<meta http-equiv="pragma" content="no-cache">
pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
<meta http-equiv="cache-control" content="no-cache">
常见的取值有private、no-cache、max-age、must-revalidate等,默认为private,其作用根据不同的重新浏览方式分为以下几种情况:

  • 1) 打开新窗口 值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如: Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)
  • 2) 在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器,以后就不再访问。 值为no-cache,那么每次都会访问。 值为max-age,则在过期之前不会重复访问。
  • 3) 按后退按扭 值为private、must-revalidate、max-age,则不会重访问, 值为no-cache,则每次都重复访问4) 按刷新按扭 无论为何值,都会重复访问 Cache-control值为“no-cache”时,访问此页面不会在Internet临时文件夹留下页面备份。
    <meta http-equiv="expires" content="0">
    指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问: Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如:禁止页面在IE中缓存 http响应消息头部设置: CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东,如果服务器上的网页经常变化,就把它设置为0,表示立即过期。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容