你好,欢迎访问我的博客!登录
当前位置:首页 - SEO资讯 - 正文 SEO教程学习网

合适的meta,你选对了吗?

2018-12-07SEO资讯seo学习网27°c
A+ A-

合适的meta,你选对了吗?

meta标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见,但却是文档的最基本的元数据。

对于网页来说,meta data就是通过一些字段信息来描述一下当前网页,以便浏览器和搜索引擎在访问到此网页的时候,可以通过这些描述信息来知道如何去解析此网页数据。

meta标签共有四个属性:http-equiv、name、scheme和content;不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。其中http-equiv顾名思义,常用来做http协议上的一些限制,其作用是把 content 属性关联到 HTTP 头部。scheme 属性用于指定要用来翻译属性值的方案。

简单来说,就是meta标签提供的是一个“键值对”,name/http-equiv作为键,content作为值,scheme不常用。

基于以上理念,meta标签又常被用来作为SEO的有力提供。

常见的meta标识有:

//声明文档使用的字符编码

>meta charset=’utf-8′<

//页面描述

>meta name=”description” content=”网页描述”/<

//页面关键词

>meta name=”keywords” content=””/<

//网页作者

>meta name=”author” content=”name, email@gmail.com”/<

复制代码

这里的charset其实是h5的新属性,等同于 >meta http-equiv="Content-Type" content="text/html; charset=UTF-8"<,作用是会在本网页的http请求头中添加: content-type: text/html; charset=UTF-8

这些是最正规的meta用法,基本上每个浏览器都支持,也是定义在标签规范内的。


然而尴尬的是,就像当初script标签本意也不是作为jsonp的用法一样,现代浏览器支持的meta标签完全超出了其初始的定义。

上文有说过,meta标签的信息用户是不可见的,而且其简单的键值对结构无疑是最简单的传递网页信息的方式,才是浏览器厂商最终对meta标签下手的原因,加上每个浏览器希望体现自身特色,最终导致了meta标签的凌乱不堪。

其中有作为特定浏览器专用的meta标识。例:

//uc强制竖屏

>meta name=”screen-orientation” content=”portrait”<

//QQ强制竖屏

>meta name=”x5-orientation” content=”portrait”<

//UC强制全屏

>meta name=”full-screen” content=”yes”<

//设置苹果工具栏颜色

>meta name=”apple-mobile-web-app-status-bar-style” content=”black”/<

复制代码

这些其实都是浏览器厂商定制版本的meta,虽然不常见,但是一旦用上也能减少很多复杂的需求。

作为一个前端开发者,不得不说一句,还是很期待浏览器早日实现统一的 。

逃。。。


下面是收集的meta标签,以后有更多收**及时更新,也希望网友有更多的meta标签能不吝赐教:

//声明文档使用的字符编码

>meta charset=’utf-8′<

//优先使用 IE 最新版本和 Chrome

>meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/<

//页面描述

>meta name=”description” content=”网页描述”/<

//页面关键词

>meta name=”keywords” content=””/<

//网页作者

>meta name=”author” content=”name, email@gmail.com”/<

//搜索引擎抓取

>meta name=”robots” content=”index,follow”/<

//为移动设备添加 viewport

>meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”<

//添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

>meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”<

//设置苹果工具栏颜色

>meta name=”apple-mobile-web-app-status-bar-style” content=”black”/<

//启用360浏览器的极速模式(webkit)

>meta name=”renderer” content=”webkit”<

//避免IE使用兼容模式

>meta http-equiv=”X-UA-Compatible” content=”IE=edge”<

//不让百度转码

>meta http-equiv=”Cache-Control” content=”no-siteapp” /<

//针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

>meta name=”HandheldFriendly” content=”true”<

//微软的老式浏览器

>meta name=”MobileOptimized” content=”320″<

//uc强制竖屏

>meta name=”screen-orientation” content=”portrait”<

//QQ强制竖屏

>meta name=”x5-orientation” content=”portrait”<

//UC强制全屏

>meta name=”full-screen” content=”yes”<

//QQ强制全屏

>meta name=”x5-fullscreen” content=”true”<

//UC应用模式

>meta name=”browsermode” content=”application”<

//QQ应用模式

>meta name=”x5-page-mode” content=”app”<

//windows phone 点击无高光

>meta name=”msapplication-tap-highlight” content=”no”<

//设置页面不缓存

>meta http-equiv=”pragma” content=”no-cache”<

>meta http-equiv=”cache-control” content=”no-cache”<

>meta http-equiv=”expires” content=”0″<

作者:ZoenLeo

链接:https://juejin.im/post/5c08bb31518825371057fcd0

  选择分享方式
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录