扫描关注网站建设微信公众账号

微信二维码

当前位置:济南网站优化 > 技术洞察 > SEO > SEO站内优化篇之代码优化十六章

SEO站内优化篇之代码优化十六章

时间:2020-03-30•10:53:06文章来源:网站站内优化文章作者:SEO站内优化

 站内优化部分的重头戏来了,本文开始讲代码优化。内容有7000多字,但干货满满,越用心越有收获。

不用问“我不懂代码怎么做代码优化”。其实很简单,把需要掌握的部分掌握了,就足够用了,太深入的代码知识在初期用不到,所以只要按照本文的方法,先来掌握基础的代码知识,能做SEO站内优化就够了,如果需要更高级的技术优化,就需要熟练且全面的掌握代码才能操作,如果有兴趣可以去深入学习。

做SEO站内优化中,代码优化这部分需要经常查看“源代码”,想看某个页面的源代码,一般浏览器按快捷键“Ctrl+U”就可以看到,如果不行就点击鼠标右键,点击“查看网页源代码”,如图所示就是“租巴士”网站首页的源码:

熟悉代码的朋友觉得这都是小儿科,但对于新手来说这些都是看不懂的符号,这些符号就是我们所说的网页的源代码

下面关键词优化公司带大家一起来认识HTML。

一、初识HTML

互联网中的网页由代码组成,主要以HTML语言构成网页文档,网页源代码如图所示。

1.HTML简介

HTML是Hyper Text Markup Language的缩写,是超文本标记语言或是超文本标签语言,可以这样简单理解:

你在电脑上写文章,需要的是普通文本语言,但是需要写网页就需要超文本标记语言。

HTML文件以.html或,htm为扩展名,是目前网络上引用最广泛的语言,它可以跨网络、跨平台进行传输。

HTML是构成网页文档的主要语言,它使用一系列的标签来结构化信息,目前最新版本是HTML5。

(1)HTML文档结构

HTML源码结构如下:

<html>

<head>

<title>…/title>

</head>

<body>

    ....   ....

</body>

</html>

1)html:任何网页代码都以<html>开始,以</html>结束。

2)head:头部,定义网站类型和属性,以<head>开始,以</head>结束。

3)body:主体部分,展示网页主体内容,以<body>开始,以</body>结束。

这部分是网页主要内容的集合体,包含网页中显示的文本、图片、链接等具体内容。

(2)常用编辑工具

编辑文章需要的工具一般为word、text文本文档,同样的编写网页也需要专业的工具。

HTML代码编辑工具比较多,接下来介绍三种常用的代码编辑工具。

1 ) Sublime:Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。

使用Sublime创建网页的步骤:

第一步:打开Sublime,输入HTML代码。

第二步:编辑完成后,将文档保存为.htm或者.html格式的文件。

第三步:打开网页预览效果。

2)ULtraEdit(简称UE):是一套功能强大的文本编辑器,可同时编辑多个文件,而且即使开启很大的文件,速度也不会慢。

3)DreamWeaver:集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

二、HTML基本标签

这里就是我们需要掌握的基础代码知识了,需要重点牢记于心,并能深刻理解,其实很简单,不要被代码吓到。

作为一名合格的SEOer,我们不需要精通HTML代码,但是要懂得网站代码如何使用、如何优化。

网站中的重要内容,我们需要为其增加附加价值,这样才能得到搜索引擎的重视,这时就可以通过HTML代码中的标签将重要的内容标记,通过HTML代码标记重要内容之后,搜索引擎蜘蛛在抓取网站内容时就知道哪些内容应该赋予更高的权重。

因此SEOer需要掌握几种基本的代码,清楚其含义以及用法。

(1)<title>标签

网页标题,在<head>部分,以<title>开始,以</title>结束,下图是<title>标签展示。

<title>标签对关键词排名的作用很大,SEOer要确保网站每一个页面的<title>标签撰写正确合理。

(2)<meta>标签

网页信息,在<head>部分,下图所示是网页<meta>标签源代码展示。

<meta>标签主要用于三大属性的定义。

1)charset属性:字符集,也叫编码,是文字和符号的总称。如gb2312、utf-8、gbk等。

gb2312字符集:是简体中文字符集。

utf-8字符集:全球通用,可以全球访问。

gbk字符集:是gb2312的升级版,应用更广泛。

技术优化

charset属性的使用方法如下:

<meta charset="utf-8">

SEOer需要注意,如果网站使用的字符集不合适,可能会出现乱码。这时可以检查charset属性中的字符集,更换其他字符集。

2)description属性:简要地描述网站的相关信息,写法如下:

<meta name="description" content="租巴士是鹏兴隆汽车租赁公司一手租车平台,本公司提供企业通勤、公司旅游包车、大中小巴士出租、商务接待等各种用车需求,多年来为上万家企业提供过服务,深受公司企业的称赞!">

其中content中的内容为页面描述的信息,用一段话来概括该网页的内容。

3)keywords属性:用于设定网页的关键词,便于搜索引擎了解网页的主要内容,并将网页显示在对应的搜索结果中。写法为:

<meta name="keywords"content="大巴出租,公司包车,租巴士,旅游包车,企业通勤">

其中content中的内容为页面的关键词,keywords属性目前对排名的影响微乎其微,可以不写,一般出于习惯我还是会写。

(3)<h#>标签

用来定义文档标题,#可以用数字1-6替代,数字越小级别越高,在标题的默认外观上,级别越高的标题就越大越醒目。

<h>标签应用在网页body部分,以<h>开始,</h>结束,中间是标题内容。例如:

<hl>文档标题</hl>

<h2>文档标题</h2>

<h3>文档标题</h3>

<h>标签,不同的级别重要性不同,一般在一个网页中只出现一个<h1></h1>标签,且在该页面最重要的文本那里添加,通常是该页面的标题部分。

(4)<p>标签

定义段落,可以简单理解为换行标签,通常成对出现 <p>文本</p>,<p>表示标签开始,</p>表示标签结束。

例如以下是一段<p>标签定义的内容,对应的页面展示效果如下文所示。

源码如下:

<p>遥想公瑾当年,小乔初嫁了,雄姿英发。</p>

<p>羽扇纶巾,谈笑间,樯橹灰飞烟灭。</p>

<p>故国神游,多情应笑我,早生华发。</p>

<p>人生如梦,一尊还酹江月。</p>

显示效果:

遥想公瑾当年,小乔初嫁了,雄姿英发。

羽扇纶巾,谈笑间,樯橹灰飞烟灭。

故国神游,多情应笑我,早生华发。

人生如梦,一尊还酹江月。

不管源码里面是一行显示,还是成段显示,实际的显示效果都是以每对<p>标签为一个自然段来显示,这就是<p>标签的作用——给内容分段。

(5)<br/>标签

自动换行,应用在语句尾部。需要注意,<b/>标签比较特殊,与其他标签写法不一样,可以单独出现。

<br>标签的用法如下:

<p>大江东去,浪淘尽,千古风流人物。<br/>

故垒西边,人道是,三国周郎赤壁。<br/>

乱石穿空,惊涛拍岸,卷起千堆雪。<br/>

江山如画,一时多少豪杰。<br/>

遥想公瑾当年,小乔初嫁了,雄姿英发。<br/>

羽扇纶巾,谈笑间,樯橹灰飞烟灭。<br/>

故国神游,多情应笑我,早生华发。<br/>

人生如梦,一尊还酹江月。<p><br/>

<p>解释:</p>

<p>大江之水滚滚不断向东流去,淘尽了那些千古风流的人物。千古英雄人物。那旧营垒的西边,人们说是,三国周瑜破曹军的赤壁。陡峭的石壁直耸云天,如雷的惊涛拍击着江岸,激起的浪花好似卷起千万堆白雪。雄壮的江山奇丽如图画,一时间涌现出多少英雄豪杰。<br/>

遥想当年的周瑜春风得意,绝代佳人小乔刚嫁给他,他英姿奋发豪气满怀。手摇羽扇头戴纶巾,从容潇洒地在说笑闲谈之间,八十万曹军如灰飞烟灭一样。我今日神游当年的战地,可笑我多情善感,过早地生出满头白发。人生犹如一场梦,举起酒杯奠祭这万古的明月。</p>

该内容外观展示效果如下图所示:

(6)<strong>标签

加粗强调,以<strong>开始,以</strong>结束。例如<strong>英雄</strong>,那么“英雄”这个词就会变成粗体。

注意,在网站中使用<strong>标签时,切忌页面中大段文字、页面内非关键词使用此标签在HTML 代码中,<b>标签也是用来加粗显示页面内容的标签,但是该标签只是起到加粗的效果,没有强调作用。

因此在优化网站时,当文本中包含关键词时建议选择<strong>标签。

(7)<img>标签中的alt属性

<img>标签是表示图片信息的标签,而alt属性是一个必需属性。在<img>标签中添加alt属性,一是为了通过alt属性对图片进行说明,告诉搜索引等图片的含义;

二是为了提高用户体验,在<img>缺少title属性时,当鼠标移动到图片上展现的文字信息即为alt属性内容。另外,当图片不能正常显示时,atl属性中的文字将替代图片进行展示。

<img>标签中alt属性对SEO的作用包括:可以使搜索引擎更好地识别图片信息,从而使图片有收录和排名。

alt属性的内容可以是页面所优化的关键词,因此,<img>标签中的alt属性可以用来调整页面关键词的密度。

优化<img>标签的alt属性时,需要保证alt属性中的内容要和图片相符,字数控制在100个字符以内。

<img alt="54座大巴" src="http://www.zu84.cn/cartype/43.html" title="租大巴"  />

(8)<a>标签中的target属性

在使用<a>标签的时候,经常用到的一个属性是target属性,定义链接的网页在何处显示,可以是新窗口,也可以是本窗口。

● target="_blank",在新窗口打开,写法为:<a href="http://www.zu84.cn" target="blank">租巴士</a>。

● target="_self",在新窗口打开,写法为:<a href="http://www.zu84.cn" target="_self">租巴士</a>。

在新窗口打开,用户可以同时浏览多个页面,很方便,如果浏览同类页面,还可以进行对比,有利于提升网页转化率。另外,在新窗口打开一个页面,新窗口和原窗口都将会有流量,有利于提升网站的浏览量。

但是也需要注意,用户打开的窗口过多,需要逐个手动关闭,也会产生厌倦和疲劳感。

新窗口打开,会减少网站服务器的开销,不会出现网站打不开的情况,而且只保留一个窗口,用户会感觉很清爽,占用用户计算机的资源也少。

但是打开一个页面,原页面就不会存在,如果用户浏览完一个页面后随手关闭页面会将整个网站关闭,造成跳出率上升。比较之后发现,用新窗口打开网站用户体验要好一些。

国内网站常用的都是多窗口打开,而国外常用的是原窗口打开,可根据情况而定。

(9)<iframe>标签

<ifame>标签会创建包含另外一个文档的内联框架(行内框架),在页面内加载其他页面及资源。

<iframe>标签会导致搜索引擎蜘蛛抓取困难,搜索引擎的蜘蛛不会识别在<iframe>中被调用的图片、文本、URL等内容,因为这些内容不属于该页面,只是访问的时候被临时调用的,建议不要使用。

如果网站中必须要添加<iframe>框架结构,如何优化呢?

● 网站顶部不要使用,一般放在中间或尾部。

● 尽量减少<iframe>标签的使用。一个页面的<iframe>标签不要太多,一般不超过两个。

● <ifame>框架内的内容尽量简单,一般就是一个图片或者简单的网页。

SEOer在检查网站<iframe>标签时,直接在网站源代码中搜索 iframe,判断其使用是否合理。若不合理,可以配合技术人员进行修改,去掉不必要的内联框架。

三、代码编辑标准及注意事项

目前,互联网中的网站代码全部是根据W3C标准编写的,W3C是World Wide Web ConSortium的缩写,中文是W3C理事会或万维网联盟,是制定网络标准的一个非盈利组织。

W3C标准统一了各个浏览器HTML代码的显示,对用户来说,无论使用哪个主流浏览器都可以正确地浏览网页,对搜索引擎来说,统一的标准方便其“阅读”和抓取网页的内容。

为了保证页面能正常显示,在编辑HTML代码时需要注意:

(1)不要忘记标签的闭合。HTML标签需要有开始标签及闭合标签,若缺少其一则该条指令无法生效。例如,

<title>....</title>

<p>....</p>

<head>....</head>

<body>....</body>

(2)标签要正确嵌套,例如:

<html>

<head>

<title>…/title>

</head>

<body>

    ....   ....

</body>

</html>

四、JS、CSS代码优化

(1)JS代码优化

如今搜索引擎对用户体验的关注度越来越高,这就要求SEOer在优化网站时不仅要做好自身网站内容的建设,还要做好用户体验的优化。

网页打开速度是影响用户体验的一个重要因素,要提升网页打开速度,除了可以选择更好的服务器或者进行CDN之外,同时也可以对网站自身的代码进行优化。

网页中最影响网页打开速度的因素是什么?是网站中的JavaScript及图片。图片可以通过压缩或者单独存放在其他服务器,但是JS的优化方法是怎么样的呢?

JavaScript简称JS,它是一门面向对象的编程语言,用来开发网页,JS可以直接写在网页内,也可以写在网页外调用。

网页中引用的JS文件越多,打开速度越慢。网络上关于IS优化的资料有很多,但大多技术性很强,像变量、字符串、类型,本文主要介绍JS怎样放置、如何删减。

网页要实现强大的功能,必须使用JS文件。正是这些JS文件,在增强网站功能的同时,也影响了网站速度。

总体来说,关于JS优化通常有以下三种方法:

1)将不重要的JS放在页面最底部

这是最简单也是效果最好的优化方法。将不重要的JS全部放到页面的最底部。实现异步加载,也就是等网页都加载完了再加载这些不重要的Js,这样就不影响网页速度了。

2)合并JS文件

合并JS文件的目的是减少HTTP请求,向服务器请求越少,打开速度越快,而合并多个原本独立的JS文件需要一些技巧。因为JS是可关联型的,可能前面的JS代码中声明的变量在后面的JS代码中也需要调用。

如果顺序颠倒,JS调用未定义的变量就会出错。所以JS一定要按顺序合并,从上到下,包括JS文件以及JS代码。

如图所示是合并JS文件案例。body主体中间的“test(index);”代码中的“index”变量是在第一个文件common.js中声明的。如果把这段代码放到合并的JS文件中第一行,那么肯定会出错。所以应该按照从上到下的顺序,先把common.js里的代码放在合并的JS文件中的起始处,然后再放“test(index);”,接着再放HTML.js里的代码,完成合并。

3)压缩JS代码

建议使用在线JS压缩工具完成JS代码的压缩。直接在百度中搜索“在线JS压缩工具”即可找到多种可用工具。

而要注意的是JS代码对SEO的影响比较大,因为搜索引擎对JS抓取有压力,而且影响网站的打开速度。因此在优化网站时,要尽量减少JS代码的数量和体积,可以采用调用的形式来实现JS的功能,另外,重要链接不要添加在JS里。

对于SEOer来说,在优化网站时,发现网站打开速度过慢,可以检查网站源文件中的JS代码。如果发现JS代码过多,可以提交给技术人员进行代码调整。

(2)CSS代码优化

CSS(cascading style sheet),层叠样式表也叫级联样式表或者风格样式表,它是用来进行网页风格设计的,使页面内容呈现出丰富多样漂亮的效果,利于阅读。

CSS代码对于SEO的作用表现在:精简网页的代码体积,提高网页的打开速度。

然而在建站过程中,无论是CSS编写规范、代码长度,还是文件大小等,都会影响到网页的打开速度。那么应该如何进行CSS的优化呢?

1)优化网页加载CSS的方式

网页中使用CSS共有三种方式,分别为:Embedding(嵌入式)、Inline(内联式)、Linking(引用式),它们各自的特点是:

● 嵌入式:将CSS写在<head></head>之间,并且用<style></style>标记进行声明。

● 内联式:对HTML 的标记使用style属性,然后将CSS代码直接写在其中。

<h3 class="text-center" style="color: #333;">活动用车</h3>

● 引用式:将HTML 页面本身与CSS样式分离为两个或者多个文件,实现了页面框架HTML 代码与CSS代码的完全分离,使得前期制作和后期维护都十分方便。

<link href="/style/idangerous.swiper.css" rel="stylesheet">

<link href="/zu84/style/site.min.css" rel="stylesheet">

而同个CSS文件可以连接到多个HTML文件中,甚至可以连接到整个网站的所有页面中,使得网站整体风格统一、协调,并且后期维护的工作量也大大减少 。

通过以上介绍可知,嵌入式和内联式都是把CSS写在当前的HTML代码中,这将会造成HTML文档变大,降低响应速度。

所以,在优化网站时需要把页面的CSS样式优化成第三种引用式,即将所有与本页面相关的样式写入到该样式表中。

2)精简CSS代码

所谓精简,指的是用尽可能少的样式代码实现整个网页的样式效果,需要充分利用CSS的继承和综合使用。对于这点需要有一定CSS能力才可以做到。

举一个简单的例子来说明,如页面中的链接,全部不需要下划线,且大部分为12像素,但链接的颜色并不相同,个别的字体效果也不相同,可以采用如图所示CSS的继承和综合使用的代码实现。

因为CSS的继承作用,a_red和a_blue都具备没有下划线、12像素这一样式,而a_menu同样没有下划线,但因指定了大小,就不再继承12像素了,而使用14像素。

3)整合CSS文件

一般情况下,前端制作人员喜欢把通用样式写成一个文件,把专用样式写成另一个文件,以便于各个页面调用。

如:把页面通用样式(包括通用布局样式、文字样式等)写在common.css中,把首页专用的样式写在index.css中。

在制作首页时,要调用这两个样式表文件。这样做虽然能提高前端开发的效率,但页面的优化效果却不太好。因为多一个文件调用就需要多一次请求,当然也就会多耗费一点时间。

在网站制作完成后,可以将页面的所有样式合并在一起,以提高网页的响应速度。

综上所述,SEOer要对网站JS、CSS代码进行优化,需要熟练掌握代码知识,以免操作失误,影响网站的正常运营。

在进行网站代码优化时,SEOer需要在目标网站的源代码中检查上述几种重要标签的使用,判断其是否符合SEO的优化原则。如果标签使用不合理,需要将其进行适当调整。如若不熟练,也可以配合技术人员进行操作。

在源代码中查找想要看到的标签,可以直接按快捷键“Ctrl+F”,输入想要的内容进行查找,代码优化这一块需要掌握的内容较多,且掌握的深度也会决定一个SEOer对网站优化的程度,因此在通过以上简单的代码认知以后,可以进行专门的前端学习,对以后的SEO会有很大的帮助。

上一篇:SEO技术之提高网页速度的10个方法

下一篇:网站页面优化配置PC端怎样做移动适配

文章关键词
SEO优化
站内优化
代码优化