常用的meta标签总结

简介: 一、什么是标签meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

一、什么是<meta>标签

  • meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
  • 关于<meta>标签的基础用法,大家可以进入 W3school网站 学习,这里给出在项目中经常使用的一些<meta>元素

二、用于SEO优化( 搜索引擎优化)的<meta>标签

1.页面关键词
  • 每个网页应具有描述该网页内容的一组唯一的关键字。
  • 使用人们可能会搜索并准确描述网页上所提供信息的描述性和代表性关键字及短语。
  • 关键词内容太短,则搜索引擎可能不会认为关键词和页面相关。另外关键词内容不应超过 874 个字符。
<meta name="keywords" content="页面关键词(例如:音乐、下载、娱乐、新闻)" />
2.搜索引擎索引方式
  • 使用robots设置网页搜索引擎的索引方式,可以控制页面文件、页面上的链接是否被索引等
  • robots是一组使用逗号分割的值,通常有如下几种取值:
  • all文件将被检索,且页面上的链接可以被查询
  • none文件将不被检索,且页面上的链接不可以被查询
  • index文件将被检索
  • follow页面上的链接可以被查询
  • noindex文件将不被检索
  • nofollow页面上的链接不可以被查询
  • 在使用的过程中,一定要确保正确使用nofollownoindex属性值。
<!-- content可以使用多个值进行设置 -->
<meta name="robots" content="index,follow" />
3.页面重定向和刷新
  • 通过设置content内的数字代表时间(秒),控制当前页面时间后刷新。
  • 如果在刷新之后,需要跳转到其他页面,在content内添加url属性来重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
<!-- 2s后刷新并跳转到wwww.baidu.com页面 -->
<meta http-equiv="refresh" content="2;url=https://www.baidu.com">
3.设置作者
  • 这个就很好理解,就是指明当前页面是由哪个人或者哪个团队开发的
<meta name="author" content="振礼硕晨" /> 

三、移动设备中的<meta>标签

1.viewport
  • viewport能优化移动浏览器的显示,常用的属性如下:
  • width宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  • height高度(数值 / device-height)(范围从223 到10,000)
  • initial-scale初始的缩放比例 (范围从>0 到10)。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
  • minimum-scale允许用户缩放到的最小比例
  • maximum-scale允许用户缩放到的最大比例
  • user-scalable用户是否可以手动缩 (no,yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
2.WebApp全屏模式
  • 伪装app,离线应用。
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
3.隐藏状态栏/设置状态栏颜色
  • 只有在开启WebApp全屏模式时才生效。
  • content的值为**default | black | black-translucent **。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
4.添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">
5.忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
6.忽略识别邮箱
<meta content="email=no" name="format-detection" />

二、网页相关的<meta>标签

1.申明网页的编码
<meta charset='utf-8' />
2.优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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 -->
3.禁止浏览器从本地计算机的缓存中访问页面内容
  • 这样设定,访问者将无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
4.站点适配
  • 主要用于PC-手机页的对应关系。
  • format:[wml|xhtml|html5]根据手机页的协议语言,选择其中一种
  • url:代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
5.转码申明
  • 用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta。
<meta http-equiv="Cache-Control" content="no-siteapp" />
相关文章
|
8月前
|
Web App开发 缓存 搜索推荐
HTML中meta标签中属性详解并设置页面缓存策略
HTML中meta标签中属性详解并设置页面缓存策略
499 0
|
1月前
|
编解码 移动开发 前端开发
详细介绍Viewport Meta标签的作用、属性以及如何在移动端开发中合理使用它,以优化网页的显示效果
【6月更文挑战第14天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的应用。该标签定义了视口属性,如宽度、高度和缩放,解决屏幕尺寸差异导致的显示问题。通过设置`width=device-width`确保页面适应设备宽度,`initial-scale=1.0`保持原始比例,`user-scalable=no`可禁用手动缩放。此外,使用`viewport-fit=cover`适配不同像素比设备的安全区域。合理利用这些属性能改善移动端网页显示效果。
36 1
|
2月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
10月前
meta常用标签总结
meta常用标签总结
53 0
|
前端开发
HTML5-10(CSS布局)
HTML5-10(CSS布局)
97 0
HTML5-10(CSS布局)
|
数据采集 缓存 搜索推荐
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
|
Web App开发 缓存 搜索推荐
|
前端开发 容器
fbh
|
Web App开发 移动开发 iOS开发
h5 meta标签大全
H5标准声明,使用 HTML5 doctype,不区分大小写 标准的 lang 属性写法 声明文档使用的字符编码 优先使用 IE 最新版本和 Chrome 页面描述 页面...
fbh
1084 0