码迷,mamicode.com
首页 > 其他好文 > 详细

SEO之优化代码

时间:2017-11-01 18:51:22      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:let   lock   中心   广告   lan   firefox   dai   styles   移动化   

Meta标签:如果要做的非常简单,meta标签只需要设置一个字符编码就可以了,咱们在任意地方购买的模版都会写上字符编码,另外Title标题、关键词、Description描述这里也列为meta标签去优化,这三个地方,一半在模版中会直接调用到后台,可以直接在后台设置,所以代码上需要基本是不需要操作。

  CSS/JS引用:在我们购买到网站模版后,大多数的网站均是调用JS或CSS的,这里需要主意的是最好使用绝对路径调用JS/CSS,如下所示:

  <LINK rel=stylesheet type=text/css href="http://ssffx.com/templets/lusongsong/style/LuSongSong-Index.css?ver=20141015

  当然,绝对路径是全站都需要做到的,像图片、文章链接、CSS/JS调用等。这一点是许多优化人员不知道并且没有做的一点,那么绝对路径和相对路径是什么意思呢?下面的代码就是相对路径,看完后,我相信你已经明白了,无非就是在代码中加入自己的网站域名即可。

  <LINK rel=stylesheet type=text/css href="/templets/lusongsong/style/LuSongSong-Index.css?ver=20141015

  另外相信大家都看到上面这一段CSS的时候会感觉有点不一样,那就是我接下来要说的CSS设置缓存时间,当你的CSS/JS更新以后,浏览器会保持原来的缓存,如果不强行刷新,网站是不会更改过来,所以这里需要设置缓存时间(?ver=20141015)来帮用户更新新的界面,这一点对SEO没有直接作用,但是对用户体验有很大的帮助。

  JS位置:我们买来的模版,JS绝对都是放在头部,但在优化的过程中,而JS文件通常是效果文件,我们可以让网站先加载主题内容,其次加载效果内容,所以有必要把JS文件从头部移动到底部,这样用户看起来你的网站会访问的更快,当然如果CSS有必要,一样可以这样做,常规的CSS是不建议放到底部,会影响加载效果。另外JS及CSS不建议在html模版中写入,最好是新建一个JS或CSS文件,然后把JS或CSS内容放入,在调用这个CSS或JS文件即可。

  LOGO:LOGO部分需要优化的主要有两个方面,第一个方面在LOGO处加H1标签,其次是在LOGO的A标签处添加一个title属性,title属性中写上你优化的主关键词,之所以建议写主关键词而不写品牌词原因有两个,第一个增加优化主关键词的密度,其次是title属性用户很难得看得到。

  广告:如果你网站是自己接的广告,那可以使用百度广告管家统计数据,同时还可以把多个广告位的JS整合到一个JS里面,这是对广告联盟的JS做一个何必,如果你是使用百度广告联盟,没关系,一样对接到百度管家里面,然后把广告联盟的JS整合到一个JS。其他第三方的广告联盟就设置不了,也没有这个优势!

  导航:导航上的优化,通常就是一个A标签,这个A标签不建议设置新窗口打开,另外一个是A标签中的title属性,如果条件允许,可以直接设置成行业词,而A标签中可显示的文字可以设置成品牌词,这样在不影响体验的同时一样达到了优化关键词的效果。

  文章链接:文章链接通常是做两个,一个在标题上,一个做在描述上,我的博客之所以没做描述上的链接,主要是在百度热力图上并没有看到有多少人点击描述部位。不过我还是建议在描述位置增加一个A标签,A标签中增加title属性。

  这里需要提醒一点的是,当一篇文章出现两个一样的A标签指向的时候,我们需要用nofollow标签屏蔽其中一个链接,这里描述和标题都出现了同一个链接,这里建议使用nofollow标签屏蔽描述上的链接,加上去是为了让用户方便点击,屏蔽是为了不让搜索引擎重复抓取。

  搜索:站内搜索页面本不建议做SEO优化,因为大多站内搜索都是动态页面,而这些动态页面均直接用robots了屏蔽百度蜘蛛,艾瑞网曾使用搜索结果页面做SEO排名被刷排名出现降权,所以我们要吸取教训,不过最好还是建议使用百度的站内搜索。这样自己网页就不会出现太多的垃圾页面收录了。

  版权:版权是可以留下的,使用别人的程序不留版权是不道德的行为,所以有必要在底部留下对于的版权信息,但是版权、备案、站外链接都应该加nofollow标签,当然这是站外的链接,站内也有部分链接需要加入nofollow标签,比如我博客底部的广告合作、微信二维码、手机客户端、联系QQ等页面。

  体验:其实在用户体验上的优化本问说的并不少很多,但代码可以决定用户体验,比如增加百度统计的返回顶部功能,文章页面增加快速评论功能、一个网站最多只能显示3屏、左右可以翻页等功能,看起来功能非常少,但综合的细节决定一个网站的成败!

  网站地图:网站地图是搜索引擎最容易抓取的一个页面,这个页面里面有所有应该被抓取的内容,所以很多时候,搜索引擎为了偷懒,他自然会抓取网站地图文件,通常情况下网站地图的代码如下所示:

  <url>

  <loc>http://ssffx.com/SEOjishu/</loc>

  <changefreq>daily</changefreq>

  <priority>0.8</priority>

  </url>

  代码非常简单LOC为链接、changefreq为更新时间,我博客的更新时间为一周、priority为权重,比如首页为1,栏目为0.8。

  Robots:搜索引擎在抓取一个网站的时候,第一时间看robots 文件,这里可以识别到哪些文件可以抓取,哪些文件不可以,robots文件最主要一点就是把网站地图写上去,如下所示:

  Sitemap: http://ssffx.com/sitemap.xml

 

 

 

一、head标签中的部分

  1.URL设计

  URL尽量含有通用已成趋势的移动命名,例如“m./wap./3g./mobi./mobile./mob/wml/”,可以在子域名等方面体现

  2.页面顶部的doctype标签

  作为协议的重要部分,doctype中是否移动化也很重要,检查是否存在与移动相关的声明,如这些关键词,openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html

  例:“<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN””http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>”

  3.meta标签中的viewport属性和x-ua-compatible 属性

  viewport,移动前端开发中最重要的标签,响应式设计的根基,如果你的页面是遵守响应式设计的,那么说明这些页面对移动设备有友好的输出。

  典型的的viewport代码是这样的,<meta name=“viewport” content=“width=device-width, initial-scale=1.0″>,判断移动与否的关键属性值为width,如果width=device-width这是典型的移动友好的设计,增加判定为移动页面的砝码,如果width有具体值,且值大于典型的移动屏幕(应该小于600),那么该页面被判定为PC页面的几率大大增加。

  但,META中还有一个很独特的属性作为SEO人员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味非常强烈的功能性代码。示例代码如此,<meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” />,从百度工程师处得知,该代码会有较强暗示当前页面为PC页面的功能,需选择性使用。

  4.title中的移动暗示

  制作移动页面时,在title标签中写明:“移动版”、“手机版”、“WAP版”、“触屏版”不仅是照顾用户体验的方案,也利于页面的移动识别,反之PC页面要谨慎使用这些文案。

  5.链接link标签的media和href属性中需要注意的细节(多为样式文件)

  media属性值为screen时,表示屏幕中的显示样式,link的href所填写的URL(基本为样式文件的URL)就比较重要了,一定程度加大不同设备的偏重。此时URL中尽量出现/wap,/mobile/这样的命名,同URL设计一样,用于提高页面识别为移动的效率和概率。

  如URL中含有pc字样则加大识别为PC页面的几率。

  6.一些通用的PC类识别HTML代码

  embed:经常用于嵌入多媒体

  object:用于嵌入对象

  marquee:老旧的滚动特效实现代码

  iframe:想必网站优化人员很熟悉了,典型的PC常用标签

  这些典型的用于PC或者老旧的、HTML5已经有更高效替代方案的旧标签,意味着使用它们将增加页面的PC属性,需要有目的地取舍。

  7.一些javascript中典型的PC特征

  加载swfobject、含有activexobject语句:移动页面根本不会使用如此重的多媒体引用方案(不信你问问你的前端工程师)

  含有netscape(网景)、msie(IE)、firefox(火狐)、browser.msie(IE)这些典型的非移动端浏览器兼容代码的

  设置了timer的 ,以及JS代码含有settimeout,的(此处不知道为什么设置timer还有识别的问题)

  均大幅增加识别为PC页面的可能性

  以上这些<head></head>中出现的内容,

  二、正文body中需要注意的部分

  链接和文本遵照的原则基本与head中一样——多出现移动相关的字眼;页面设置的宽度不要超过常规移动设备的大小;那些常识中(除非招错前端工程师)绝对只用于PC的一些兼容性代码。

  此外div块的个数也值得注意,没有哪家移动页面会过量使用div块;还有典型的只用于适配PC机器的HTML代码,例如:accesskey(如果移动页面用,要不前端招错人了,要不产品招错人了,应该引起警觉)head和正文两大部分,基本涵盖了一张页面最主要的部分。

  网站优化人员一定要把握这些使用细节,协助前端工程师从正反方向将公司的PC和手机页面泾渭分明地呈现给搜索引擎。试想如果你每日被抓取页面达到90%的识别率,而一般水平是70%,这种优化增量是非常显著的。

  最后,分享一个机器学习的思想给网站优化的新人,此文中心思想截取如下:

  你从市场上的芒果里随机的抽取一定的样品(训练数据), 制作一张表格, 上面记着每个芒果的物理属性, 比如颜色, 大小, 形状, 产地, 卖家, 等等。(这些称之为特征)。

  还记录下这个芒果甜不甜, 是否多汁,是否成熟(输出变量)。你将这些数据提供给一个机器学习算法(分类算法/回归算法),然后它就会学习出一个关于芒果的物理属性和它的质量之间关系的模型。

  下次你再去市集, 只要测测那些芒果的特性(测试数据),然后将它输入一个机器学习算法。算法将根据之前计算出的模型来预测芒果是甜的,熟的, 并且/还是多汁的。

  来源:SEO自学网

SEO之优化代码

标签:let   lock   中心   广告   lan   firefox   dai   styles   移动化   

原文地址:http://www.cnblogs.com/ITMan-blogs/p/7767850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!