meta 教程

2016-07-31 鲁鲁槟 收藏

一、meta 入门

1.1、基本标签

说明:声明文档使用的字符编码 
代码:<meta charset='utf-8'> 
说明:优先使用 IE 最新版本和 Chrome 
代码:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
说明:定义网页作者 
代码:<meta name="author" content="name, email@gmail.com">
说明:定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值, 
通常有如下几种取值:none,noindex,nofollow,all,index和follow。 
代码:<meta name="robots" content="index,follow">

1.2、viewport:设置移动设备

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
content 参数: 
width viewport 宽度(数值/device-width) 
height viewport 高度(数值/device-height) 
initial-scale 初始缩放比例 
maximum-scale 最大缩放比例 
minimum-scale 最小缩放比例 
user-scalable 是否允许用户缩放(yes/no)

1.3、浏览器

①、360 浏览器

说明:设置 360 浏览器渲染模式,webkit 为极速内核,ie-comp 为 IE 兼容内核,ie-stand 为 IE 标准内核。 
代码:<meta name="renderer" content="webkit|ie-comp|ie-stand">

②、QQ 浏览器(X5 内核)

说明:设置横屏、竖屏显示,portrait 横屏,landscape 竖屏
代码:<meta name="x5-orientation" content="portrait|landscape">
说明:设置全屏显示
代码:<meta name="x5-fullscreen" content="true">
说明:开启应用模式
代码:<meta name="x5-page-mode" content="app">

③、Chrome 浏览器

说明:禁止 Chrome 浏览器中自动提示翻译<span class="redactor-invisible-space">
代码:<meta name="google" value="notranslate">

④、UC 浏览器

说明:设置屏幕方向,portrait 为横屏,landscape 为竖屏
代码:<meta name="screen-orientation" content="portrait|landscape"> 

说明:设置全屏 
代码:<meta name="full-screen" content="yes"> 

说明:设置适应屏幕排版(缩放是否显示滚动条),UC 浏览器在标准排版效果实现的基础上,提供适应屏幕的排版方式, 当设置为 uc-fitscreen=yes,页面进行缩放操作时,仅放大图片和文字等元素,但不放大屏幕宽度,保持不出现水平(横向)滚动条。 
代码:<meta name="viewport" content="uc-fitscreen=no|yes"> 

说明:排版模式,UC 浏览器提供两种排版模式,分别是适屏模式(fitscreen)及标准模式(standard),其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快,而标准模式则能按照标准规范对页面进行排版及渲染。 
代码:<meta name="layoutmode" content="fitscreen|standard"> 

说明:夜间模式,可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂,由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用),因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式,自行设计更适合用户使用的夜间模式。 
代码:<meta name="nightmode" content="enable|disable">
 注意:页面内的 frame/iframe 中的夜间模式的 meta 不生效。 

说明:整页图片强制显示,为了节省流量及加快速度,UC 为用户提供了无图模式,在实际使用中存在页面中的图片是不可缺少的,例如验证码,地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。 
代码:<meta name="imagemode" content="force"> 
注意:整页图片强制显示仅对当前页面生效,对页面内的 frame/iframe 不生效,也不影响前进后退的页面 

说明:开启应用模式,应用模式是为方便 Web 应用及游戏开发者设置的综合开关,通过meta标签进行指示打开,当进入应用模式时,浏览器将自动调整以下参数:
代码:<meta name="browsermode" content="application">

1.4、系统

①、ios

说明:添加到主屏后的标题(iOS 6 新增)
代码:<meta name="apple-mobile-web-app-title" content="标题">

说明:是否启用 webApp 全屏模式
代码:<meta name="apple-mobile-web-app-capable" content="yes"><span class="redactor-invisible-space">

说明:设置状态栏的背景颜色
代码:<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<span class="redactor-invisible-space">注意:只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数:default 默认值。black 状态栏背景是黑色。black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

说明:禁止数字自动识别为电话号码
代码:<meta name="format-detection" content="telephone=no">

说明:禁止自动自动识别地址
代码:<meta name="format-detection" content="address=no">

说明:禁止自动自动识别日期
代码:<meta name="format-detection" content="date=no">

说明:禁止自动自动识别 Email
代码:<meta name="format-detection" content="email=no">

二、http-equiv 属性详解

http-equiv 顾名思义,相当于 http 的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,

与之对应的属性值为 content,content中的内容其实就是各个参数的变量值。

meat 标签的 http-equiv 属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;

其中http-equiv属性主要有以下几种参数:

2.1、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

用法:<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

注意:必须使用 GMT 的时间格式。

2.2、Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 。

用法:<meta http-equiv="Pragma/cache-control" content="no-cache">

注意:这样设定,访问者将无法脱机浏览。

说明:禁止百度转码

用法:<meta http-equiv="Cache-Control" content="no-siteapp">

2.3、Refresh(刷新)

说明:自动刷新并指向新页面。

用法:<meta http-equiv="Refresh" content="2;URL=https://luluqi.cn/">

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

2.4、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。

用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">

注意:必须使用GMT的时间格式。

2.5、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。

用法:<meta http-equiv="Window-target" content="_top">

注意:用来防止别人在框架里调用自己的页面。

2.6、Content-Type(显示字符集的设定)

用法:<meta http-equiv="Content-Type" content="text/html; charset=utf8">

2.7、Pics-label(网页等级评定)

说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。

用法:<meta http-equiv="Pics-label" contect="">

2.8、Page_Enter、Page_Exit

说明:设定进入页面时的特殊效果

用法:<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=12)">

说明:设定离开页面时的特殊效果

用法:<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=12)">

Duration的值为网页动态过渡的时间,单位为秒。 
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下图:

三、SEO 优化

3.1、SEO 基本介绍

①、SEO 全称 Search Engine Optimization,即搜索引擎优化。搜索引擎数据库收录了很多网站的关键字及其链接,每天搜索引擎蜘蛛会下载网站的内容。

②、SEO 分为黑帽 SEO 和 白帽 SEO:黑帽 SEO指的是网站有很多关键字但是没有实际内容,几乎都是广告;而白帽 SEO 指的是通过优化网页让搜索引擎收录自己网站的内容。

③、白帽 SEO 常用手段:

A 标题、关键字、描述;B 内容优化;C robot.txt 文件;D 网站地图;E 增加外链引用

3.2、网站结构布局优化

①、用扁平化结构(层次结构超过三层小蜘蛛就不愿意爬了)

②、控制首页链接数量(中小网站100以内,页面导航、底部导航、锚文字链接等)

③、扁平化的目录层次(小蜘蛛跳转3次可以到达网站内任何一个内页,网站的设计主页、栏目、内容页,不要用纵线性的结构)

④、导航seo优化(头部、底部、内容部分,主导航、副导航、分类导航,尽量用文字,面包屑导航,在每个网站上留下面包屑,使用户可以了解网站组织形式,放于正文的左上方)

⑤、内容页面的布局细节:左面正文,右面热门文章、相关文章,下面是版权信息及链接,栏目排布:首页123456789下拉选择最赞)

⑥、网站的加载速度会影响小蜘蛛的爬行,页面最好不要超过100k

3.3、网页代码优化

①、各种标签的使用

A、a 标题尽量包含 title;一些非本站的链接,不要将该链接计入权重:rel='nofollow'。

题外话:rel='external':此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。

为什么要这样写呢?因为有些网站因为是采用严格的 DOCTYPE 声名的,如果你在网页源码中的第一行看到:在这种情况下 target='_blank' 会失效,因此采用 rel='external' 这个参数来替代。

B、主标题尽量使用 h1 标签,正文使用 p 标签,img 标签有 alt 属性,table 用 caption 做标题

C、br 标签用于文本内容换行,比如:<p>哈哈<br>哈哈</p>

D、用 <strong> <em>,而不用<b><i>

E、重要的内容放在前面,重要的内容不要用 JS 输出,不使用 iframe,慎用 display:none

F、少用 span 标签,用 ul li

②、title优化标准

A、标题的字数限制

Title标题的字数在25个字,50个字节以内是符合要求的,超过25个字,在搜索引擎上面是不出来,不同的浏览器可能字数有所差别。

B、标题的关键词位置

关键词位置非常重要,关键词位置越靠前越容易被用户关注,关键词也越重要,如果你网页做了3个关键词,那么你需要按照关键词的重要的次序依次排列,切记不要乱摆放。标题的最左边是最重要的位置。

C、标题的独特性

标题需要独特性的,搜索引擎检索同一个关键词,如果他发现你的标题在这个关键词的排序列表里面有重复和相识度达90%以上的标题,那对于你网站优化都是没有任何作用的。

所以我们的标题需要独特性,要有自己网站的特点,那我们如何解决独特性呢?因为做的关键词大多是一样的,我们的解决方法由2个。

  • 把公司名称或者网站名称写上去即可,公司的重复度机会没有,网站名称要注意不要采用关键词作为网站名称,比如:做的是免费发布信息的平台,取名为免费发布信息网,这样就失去独特性了。

  • 网站的关键词组合上面也可以减少重复度,比如 www..com 网站的标题,我们写成“免费发布信息-分类信息网-酿蜜网|.com” 这样带上自己的网址,并且用关键词、网站名称和域名相结合重复性就低。

③、标题不能含有描述性的词和短语

标题中切忌含有描述性的词语,描述性的词汇分散本身标题的权重,所以不建议在标题中含有描述性词语,

比如:第一、专业、尽在、货到付款、联系电话等等,只需要出现关键词和网站名称即可(中小型网站),大型网站和品牌站就使用网站名称就行了。

④、标题的字符标准化

标题的常用字符有“、|—— _ ,”那我们如何来标准化来使用这些字符呢?中小型网站的首页我们建议使用逗号(半角或者英文逗号)或中划线,目录页和内页建议使用下划线即可。从用户体验的角度来考虑不建议使用、或者|等符合。

⑤、标题的标准化

标题里面不能含有不想关的词会影响到原来的关键词排名,网站名称和公司名称等词汇除外(因为网站里面也会含有这些词),如果标题里出现页面上面都不存在的词汇就会影响到该页面的关键词排名同样也算是属于过度优化。

首页标题关键词建议放置在1至3个左右,越多越不利于关键词排名,因为资源是有限的,需要进行合理分配,做关键词的策略是先做少后做多,就是先把小量的关键词做上去后再去添加更多的关键词来优化进行排名。

3.4、keywords 和 description 优化标准

①、keywords优化标准

A keywords里面不要放置过多的关键词,一般7个以内为宜。

B keywords只建议首页、目录页、重要的内容页和主题页里面含有,不建议一般内页含有Keywords。

因为内页含有,第一是需要花费大量的人工,第二是Keywords如果编写不准确效果会适得其反,因为Keywords权重本身就给予非常低,如果你设置不合理,反而会导致长尾关键词页面降权。

C keywords不建议改动,改动后会导致页面权重下降(主要指百度搜索引擎)。

有个朋友做医疗网站的,全站一共1500个页面,改动了1000个 页面的keywords,原先1000左右的长尾关键词流量降到200,下降的关键词排名都是修改过的keywords关键词的页面。

②、description优化标准

A description字数建议 75 个字,150 个字符以内,这样搜索引擎刚好能够编入索引被用户查看到,超过该字数用户是看不到的也没有实际作用。

B 页面要做的关键词要把放入 description 中,并且要把标题里面没有包含的关键词写入进去。description含有关键词对于该关键词排名是有利的。

C description 需要符合用户体验优化,另外,我们也要把我们写入 description 的关键词进行位置排列,越重要的关键词越要靠前放置。

description就是我们的页面简介,只需要把页面的核心写出来就行了。下面我们来看一个实例:

<title>站长之家-中国站长站 CHINAZ.com|我们致力于为中文网站提供动力!</title>
<meta name="Keywords" content="站长,站长之家,站长资讯,站长网,站长工具"/>
<meta name="Description" content="站长之家(中国站长站)为个人站长与企业网络提供全面的站长资讯、
    最新最全的源代码程序下载、海量建站素材、强大的搜索优化工具、网站 流量统计服务已经一站式网络解决方案,
    七年来我们一直致力为中文网站提供动力。>/>

总结:标题“CHINAZ.com|我们致力于为中文网站提供动力!”具有独特性,Chinaz属于站长类门户网站。

所以只需要包含品牌关键词和网站名称就行了“站长之家-中国站长站”Keywords含有5个关键词,非常标准。

另外我们看Description包含了Title里面没有含的关键词“站长 资讯、站长工具”,这样属于自然性非常好的优化手段。

四、其他 html 头部

<!DOCTYPE html> 使用 HTML5 doctype,不区分大小写 
<html> 简体中文 
<html> 繁体中文 
<title>标题</title> 定义页面标题 
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> 添加 RSS 订阅 
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"> 添加 favicon icon

暂时还没有评论,快来抢沙发吧~

发表评论

您需要登录后才可以评论。登录 | 立即注册
阅读 1089