当前位置:首页 > SEO网站 > 正文内容

常用meta标签的作用以及全面整理

admin3年前 (2022-07-19)SEO网站717

1、定义

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

2、作用

meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容,例如我们为页面中添加如下meta标签:


浏览器的头部就会包括这些:

charset:iso-8859-1
expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content,当然并不是说meta标签里一定要有content,而是当有http-equiv或name属性的时候,一定要有content属性对其进行说明。例如:

必需属性

这里面content里的属性就是对keywords进行的说明,所以呢也可以理解成一个键值对吧,就是{keywords:HTML,ASP,PHP,SQL}。

可选属性

在W3school中,对于meta的可选属性说到了三个,分别是http-equiv、name和scheme。考虑到scheme不是很常用,所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容,对一些自定义的,或者需要额外添加的http头部内容,需要发送到浏览器中,我们就可以是使用这个属性。在上面的meta作用中也有简单的说明,那么现在再举个例子。例如我们不想使用js来重定向,用http头部内容控制,那么就可以这样控制:

在页面中加入这个后,5秒钟后就会跳转到指定页面啦,效果可看W3school的例子

name

第二个可选属性是name,这个属性是供浏览器进行解析,对于一些浏览器兼容性问题,name属性是最常用的,当然有个前提就是浏览器能够解析你写进去的name属性才可以,不然就是没有意义的。还是举个例子吧:

这个meta标签的意思就是告诉浏览器,用webkit内核进行解析,当然前提是浏览器有webkit内核才可以,不然就是没有意义的啦。当然看到这个你可能会有疑问,这个renderer是从哪里冒出来的,我要怎么知道呢?这个就是在对应的浏览器的开发文档里就会有表明的,例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦,我会尽可能的做到全

charset

charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,值得一提的是,这个charset一定要写第一行,不然就可能会产生乱码了。

charset有两种写法


两个都是等效的。

百度禁止转码

百度会自动对网页进行转码,这个标签是禁止百度的自动转码

SEO 优化部分


your title







viewport

viewport主要是影响移动端页面布局的,例如:

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer











Google Chrome




360浏览器


QQ手机浏览器






Apple iOS











Google Android




App Links











最后——移动端常用的meta































本文链接:https://netlover.cn/2018/08/15/meta-all.html

扫描二维码推送至手机访问。

版权声明:本文由老苏SEO转载并发布,如侵权可联系删除。

本文链接:https://www.laosuseo.com/?id=428

分享给朋友:

“常用meta标签的作用以及全面整理” 的相关文章

常见的网站推广方式有哪些,各有什么优缺点

常见的网站推广方式有哪些,各有什么优缺点

做好企业网站的网络推广已经成为企业关注的焦点,各类各类推广的手段也被企业纷纷利用起来。现在很多公司都会选择付费的,因为效果最好,而且相对轻松很多,当然企业不同,所花费的费用也会不同,很多小公司是无法承担起巨大的广告费用的,而这时候就会选择一些免费的推广方式,今天比较就跟大家分享一下常见的网站推广方式...

做SEO怎样才能标签不乱?一个找竞品的绝妙方法告诉你!

做SEO怎样才能标签不乱?一个找竞品的绝妙方法告诉你!

引言在做单品SEO的过程中,找竞品是关键一步,这直接决定了你的顾客在你这里成交之前,头上的标签对不对,对则事半功倍,不对的话可能还会带来负面作用,得不偿失,找竞品一方面是经验或者对这个类目的认识,另一方面,就是技术方法了,其实淘宝已经告诉你竞品是谁了,今天就来给你讲怎么找竞品。1. 淘宝权重分配的底...

SEO代码优化之img图片标签

SEO代码优化之img图片标签

在网站的页面中,图片是重要的组成元素之一,所以,对网站img图片进行SEO优化,不仅有利于用户的浏览体验提升,也有利于搜索引擎蜘蛛的抓取识别,还可以丰富页面的内容,提升页面得分,有利于网页的关键词排名。1、从代码的角度分析img图片标签搜索引擎蜘蛛抓取的时候,主要就是看代码的,在代码中,图片标签是这...

网站前端SEO代码、标签的优化

网站前端SEO代码、标签的优化

欧哥马培训中心贵州专注互联网就业岗位培训点击关注▲欧哥马智库营销|设计|影视|管理|职场|资讯网站优化结构布局要求尽量往简单优化,提倡扁平化结构。所以代码优化是SEO内部优化一个重要部分,不然发个外链、写个文章,是个人基本都能够做到的,为了跟上SEO的步伐,学代码懂前端,甚至独立搭建网站是SEOER...

商品图片的优化的技巧有哪些?

商品图片的优化的技巧有哪些?

研究表明,如果电子商务网站的加载速度低于预期,会有超过45%的访问者放弃购买。而图片是否进行过优化,决定了网站打开速度的快慢,这里我们介绍了8种图像优化技巧,来帮助提升你网站的用户体验。1. 使用简洁直接的图像名称创建描述性的、关键字丰富的文件名,对于图像优化来说至关重要,因为搜索引擎不仅会抓取你网...

张子凡:SEO诊断之H1标签优化

张子凡:SEO诊断之H1标签优化

又一段时间没有写SEO诊断系列的文章了,差点就忘了自己还有这么重要的一些东西没有分享出来,真的是有些可惜哈! 最近这段时间其实也还好,不算太忙,做着自己喜欢的事,也很幸运的遇到了一个徒弟,怎么说呢,这或许又是一个新的起点吧!...