发现meta标签可以做很多事情,查阅了相关资料,整理一份meta用途笔记。
所查阅资料:
http://segmentfault.com/blog/ciaocc/1190000002407912
http://blog.sina.com.cn/s/blog_666689090101bg8p.html
meta标签
属性 | 值 | 含义 |
http-equiv | content-type / expire / refresh / set-cookie | 把content属性关联到HTTP头部。 |
name | author / description / keywords / generator / revised / others | 把 content 属性关联到一个名称。 |
content | some text | 定义用于翻译 content 属性值的格式。 |
SEO方面
●搜索引擎索引方式
name是一些搜索引擎机器人的名称,如 Google的是googlebot ,MSN Search 的是 msnbot, Yahoo 的是 yahoo-slurp。content是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
<meta name="搜索引擎名称" content="index,follow" />
content取值:
all:文件将被检索,且页面上的链接可以被查询;=index,follow
none:文件将不被检索,且页面上的链接不可以被查询;=noindex,nofollow
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。搜索引擎不能追踪此网页上的链接
unavailable_after:[日期]:在指定的日期和时间后从搜索结果中删除这个网页
nosnippet: 在搜索结果中显示当前页时,不要显示页面摘要
noarchive: 在显示本网页于搜索结果中时,不要显示一个"网页快照"链接
noodp/noydir: 在为本页产生标题或页面摘要时,不要使用开放式目录项目(又名dmoz.org)中的文本(不使用DOMZ、Yahoo!目录中描述作为网页摘要 )
关于noodp和noydir,http://blog.sina.com.cn/s/blog_666689090101bg8p.html这篇文章提到:
做SEO的朋友都经常和meta标签打交道,比如写description、keywords之类,但却很少用到noodp和noydir这样的标签(这两个其实比较老了,只是国内一般不太实用),这里我想对这两个做下说明,因为在不少做英文SEO的地方还得使用到。(meta标签详解)
有些时候站点加入了dmoz或者yahoo的分类目录,这本是好事,但很多时候开始加入的时候并未考虑完全,或者后来网站业务出现的变化等等,这样的情况下,使得原本的好事可能在一些时候反倒有了负面影响,因为Google和yahoo默认情况下会优先抓取dmoz和雅虎分类目录里面的信息作为搜索结果的标题和描述。
●页面重定向和刷新
content内的数字代表多少秒后刷新。加了url就会重定向到指定网页(搜索引擎能够自动检测)。
<meta http-equiv="refresh" content="0;url=" />
SEO方面的用法还有一些例如设置作者帮助搜索。
<meta name="author" content="作者名字" />
移动设备
●viewport(用作移动端显示的设置)
设置在移动端显示的参数。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
1.width:宽度(可为特定数值 或 device-width)(范围从200 到10,000,默认为980 像素)
2.height:高度(可为特定数值 或 device-height)(范围从223 到10,000)
3.initial-scale:初始的缩放比例 (范围从>0 到10)
4.minimum-scale:允许用户缩放到的最小比例
5.maximum-scale:允许用户缩放到的最大比例
6.user-scalable:用户是否可以手动缩 (no,yes)
注意,在非响应式网站上使用initial-scale=1,这会让网站以100%宽度渲染,这样用户就需要手动移动页面或者对页面进行缩放,如果同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
●WebApp全屏模式
伪装app,离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" />
●隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
●忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
<!-- content为email=no 时则是忽略邮箱识别 -->
在网页部分的应用,最常见的就是编码形式
<meta charset='utf-8' />
然而在实际开发中还有很多用法
- 优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
- 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
- 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
- Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
- 站点适配:主要用于PC-手机页的对应关系。
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
-->
- 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
相关推荐
jsp中的base标签与meta标签对于一些新手朋友们来说还是有些陌生,下文整理了一些,不会的朋友可以参考下
Web-前端html+css从入门到精通 122. meta标签扩展学习.zip
之前学习前端中,对meta标签的了解仅仅只是这一句。 <meta charset=UTF-8> 但是打开任意的网站,其head标签内都有一列的meta标签。比如我们软件开发网网站,但是自己却很不熟悉,于是把meta标签加入了学习...
主要介绍了HTML中META标签的一些使用技巧,共举了10个小例子,HTML5中META标签也有演进,可以说是HTML学习中的重要知识点,需要的朋友可以参考下
meta标签是html网页源代码中非常重要的标签,下文重点给大家介绍html 中meta标签的知识,非常不错,感兴趣的朋友一起学习吧
"Suno AI教程"可能指的是针对Suno AI的学习资料或教程。然而,截止到我最后训练的时间,即2022年,Suno AI似乎不是一个广为人知的人工智能平台或技术。如果Suno AI是在2022年之后出现的新平台或技术,我可能无法提供...
各种快捷键的使用方法: 多行注释 快捷键 ctrl +/ 复制当前行到下一行 ctrl+d 标签的快捷写法 标签字母 + tab键 ...meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 utf-8
零和很少标签语义分割的语义投影网络 零射和少射; 分割 2。 MAML 与模型无关的元学习,可快速适应深度网络 元学习; 分类 3。 OML 在线元学习 在线的; 元学习分类 4, 元模拟 元模拟:学习生成合成数据集 概括 5, ...
自监督学习:传统的监督学习方法需要大量的标注数据来训练模型,而自监督学习则是一种无监督学习的方法,通过从无标签数据中生成标签进行自我监督,从而学习到有用的特征表示。自监督学习在许多领域中取得了显著的...
今天开始学习bootstrap发现官方的文档其实写的真的太棒啦,非常的清晰易懂。 <!...<... <...-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootst
HTML学习1的源码: HTML&CSS;学习1,包括乱码问题,常用标签,实体,图片标签,相对路径,图片格式,meta标签,xHtml语法规范八个部分
最近在重新学习JavaScript,手写了一个tabs标签页。 话不多说,直接开始。 首先,是前端页面。 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序...
其实这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依然没有找到使用纯css禁用a标签的办法——同事、同学、老师我都问过了,他们都千篇一律借助了JavaScript,难道真的必须要借助JavaScript吗?...
直接看Bootstrap标签例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link...
该项目主要致力于解决农作物病害检测的问题,特别是针对叶子病害的自动检测和分类。使用深度学习技术和计算机视觉算法来自动识别...该数据集是通过对植物叶子进行采样和图像处理得到的,包括数千张图像和对应的标签。
语言:English 在所有搜索互联网上轻松搜索所有...它还从您的行为中学习,所以您使用的越多,您的智能标签越好。Meta目前支持: - Google Drive. - Gmail. - dropbox. - Evernote. - 松弛 - Trello.......即将推出!
<META name=Description content=关于java异常处理(讲义),JSP中文网> <META name=keywords content=关于java异常处理(讲义)> href="http://www.jspcn.net/css/news.css"><LINK rel=stylesheet type=text/css ...
Bootstrap可以很轻松就实现标签切换的效果。 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
Meta Dialog Platform:用于NLP少量学习任务的工具包平台,包括: 文字分类 序列标记 它还提供了以下基准: 。 基准文件:“ FewJoint:对联合语言理解的少量学习基准” 更新 更新2021.3.8:修复了几次快照数据...