HTML 不缓存 & meta og

最新推荐文章于 2024-03-07 13:33:37 发布

Never Yu

最新推荐文章于 2024-03-07 13:33:37 发布

阅读量3.8k

点赞数

分类专栏：前端文章标签： html 缓存标签 meta og

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/70162745

版权

前端专栏收录该内容

181 篇文章 16 订阅

订阅专栏

HTML 设置不缓存页面内容
HTML META og
HTML meta 标签
- http-equiv 属性
- name 属性(对SEO的作用比较大)

HTML 设置不缓存页面内容

<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

HTML META og

og 是一种新的 HTTP 头部标记，即Open Graph Protocol

The Open Graph Protocol enables any web page to become a rich object in a social graph.

即这种协议可以让网页成为一个“富媒体对象”。
用了 meta property=og 标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被 SNS 网站如 Fackbook，renren，whatsapp 采用。
SNS 已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010 年 F8 会议上 Fackbook 公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS 就能从页面上提取最有效的信息并呈现给用户。

<meta property="og:title" content="hello world">
<meta property="og:type" content="website">
<meta property="og:url" content="https://neveryu.github.io/">
<meta property="og:image" content="https://neveryu.github.io/avatar/avatar.png">
<meta property="og:description" content="thank you follow me">

HTML meta 标签

所有的浏览器都支持 meta 标签，用于提供页面相关信息，信息都是以名（http-equiv 和 name 标示） / 值（content标示）对的形式实现。

属性 content，用于定义 http-equiv（定义 http 头部信息，服务器向浏览器提供的信息）和 name（指定网页信息的相关的名称）相关的信息。

http-equiv 属性

http-equiv 属性（一些保护网站措施）

http-equiv 顾名思义，相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精准地显示网页内容，与之对应的属性值为 content，content中的内容其实就是各个参数的变量值。

属性	值	作用	示例
http-equiv	content-type	设置页面字符集	`<meta http-equiv="content-Type" content="text/html; charset=UTF-8">` // html5 页面的做法是直接使用 `<meta charset="UTF-8">`
	Set-Cookie	如果cookie过期，则自动删除本地cookie	`<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">` // 注意：必须使用GMT的时间格式
	Window-target	强制页面在当前窗口以独立页面实现	`<meta http-equiv="Window=target" content="_top">` // 用来防止别人在框架里调用自己的页面，可以防止网页被别人作为一个Frame调用。
	expires	设置页面的过期时间	`<meta http-equiv="expires" content="Wed,20 Jun 2007 22:33:00 GMT">`
	refresh	自动刷新到新页面	`<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com"> //2代表页面停留多长时间后跳转到后面的网址上`
	pragma	禁止浏览器从本地调用缓存	`<meta http-equiv="Pragma" content="no-chach">`
	page_enter,page_exit	设定进入页面和退出页面的效果	`<meta http-equiv="Page-Exit" content="revealTrans(duration=1.0,transtion=12)"`
	cache-control	清除缓存	`<meta http-equiv="cache-control" content="no-cache">`

name 属性(对SEO的作用比较大)

name 属性主要用于描述网页，与之对应的属性值为 conent，content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

属性	值	作用	示例解释
nama	author	指定页面的所有者	`<meta name="author" content="Never Yu">`
	description	页面描述，用于搜索引擎收录	`<meta name="description" content="我的博客">`
	keywords	页面关键词，用于被搜索引擎收录	`<meta name="keywords" content="JavaScript HTML CSS NodeJS GO">`
	generator	用于说明网站制作生成工具	`<meta name="generator" content="Hexo">`
	revised	网页文档的修改时间	`<meta name="revised" content="2017/04/14">`
	viewport	用于控制页面缩放	<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”> //width指定页面的可视宽度, 像素值或device-width, initial-scale设置页面初始化时的缩放比例,user-scalable指定是否可以缩放可视区域, maximum-scale, minimun-scale页面最大最小缩放比例。如果想要页面在不同的设备都按照页面的设计尺寸缩放（那些宽度固定的网站）就不要使用viewport属性
	copyright	网页版权信息	`<meta name="copyright" content="Copyright 2017 All">`
	renderer	使用哪种模式显示网页	`
	robots	robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引	`<meta name="tobots" content="index,follow"` // content的参数有 all,none,index,noindex,follow,nofollow。默认是all
	format-detection	(忽略电话号码和邮箱)说明：忽略页面中的数字识别为电话号码	`<meta name="format-detection" content="telephone=no">` // 忽略页面中的数字识别为电话号码 `<meta name="format-detection" content="email=no">` //忽略页面中的邮箱格式为邮箱
	HandheldFriendly	针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓	`<meta name="HandheldFriendly" content="true">`
	screen-orientation	uc强制竖屏	`<meta name="screen-orientation" content="portrait">`
	x5-orientation	QQ强制竖屏	`<meta name="x5-orientation" content="portrait">`
	full-screen	uc强制全屏	`<meta name="full-screen" content="yes">`
	x5-fullscreen	QQ强制全屏	`<meta name="x5-fullscreen" content="true">`
	browsermode	uc应用模式	`<meta name="browsermode" content="application">`
	x5-page-mode	QQ 应用模式	`<meta name="x5-page-mode" content="app">`

—————————(正文完)————————————
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置——-软件开发的简约原则.

——————————– (完)————————————–

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博….

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">