亚洲无人区一区二区三区_农村玉米地少妇野战亚洲_国产欧美日韩VA另类在线播放_免费人成视频网站在线_国产在线精品一区二区高清不卡

SEO視角下DIV+CSS網(wǎng)頁(yè)布局優(yōu)化研究

作者:數(shù)風(fēng)流人物 瀏覽:135 發(fā)布時(shí)間:2017-04-12
分享 評(píng)論 4

網(wǎng)站設(shè)計(jì)者都希望用戶(hù)在搜索引擎上檢索某一內(nèi)容的相關(guān)網(wǎng)站時(shí),自己的網(wǎng)站能夠出現(xiàn)在搜索引擎結(jié)果頁(yè)面比較靠前的位置。隨著搜索引擎優(yōu)化技術(shù)的不斷發(fā)展,這種成本低而回報(bào)高的搜索引擎營(yíng)銷(xiāo)方式越來(lái)越受到網(wǎng)站設(shè)計(jì)者的喜愛(ài)和擁護(hù)。而DIV+CSS作為主流網(wǎng)頁(yè)布局方式,不僅要考慮網(wǎng)站的美觀性,還要考慮提高搜索引擎程序的爬行效率,使得搜索引擎能夠抓取大量的關(guān)鍵信息。因此高效合理的網(wǎng)頁(yè)布局在搜索引擎對(duì)網(wǎng)站評(píng)價(jià)排序時(shí)就顯得尤為重要。

1 SEO介紹

1.1 SEO及工作原理

SEO是Search Engine Optimization的縮寫(xiě),中文為搜索引擎優(yōu)化。搜索引擎優(yōu)化的主要任務(wù)之一就是提高網(wǎng)站的搜索引擎友好性,其每個(gè)環(huán)節(jié)都會(huì)與搜索引擎的工作流程存在必然的聯(lián)系,研究SEO實(shí)際上就是對(duì)搜索引擎工作過(guò)程進(jìn)行逆向推理。

SEO的工作原理主要基于頁(yè)面收錄、頁(yè)面分析、頁(yè)面排序及關(guān)鍵字查詢(xún)四部分。搜索引擎首先通過(guò)Spider(蜘蛛程序)自動(dòng)訪(fǎng)問(wèn)互聯(lián)網(wǎng),然后沿著網(wǎng)頁(yè)中的超鏈接爬到其他網(wǎng)頁(yè)上,并把爬行中經(jīng)過(guò)的網(wǎng)頁(yè)信息收集起來(lái);其次通過(guò)對(duì)原始頁(yè)面的索引快速定位,提取頁(yè)面關(guān)鍵信息后切詞并建立關(guān)鍵字索引和反向索引列表;最后結(jié)合頁(yè)面內(nèi)外部因素進(jìn)行評(píng)估排序。

用戶(hù)在搜索引擎中輸入查詢(xún)請(qǐng)求后,搜索引擎首先對(duì)查詢(xún)信息進(jìn)行切詞及匹配,再向用戶(hù)返回相應(yīng)的頁(yè)面排序列表。

1.2 搜索引擎優(yōu)化目標(biāo)

SEO對(duì)網(wǎng)站的處理主要是從根本上改善網(wǎng)站的結(jié)構(gòu)和內(nèi)容,擴(kuò)充網(wǎng)站的數(shù)據(jù)流通。隨著網(wǎng)站信息承載量的增加、內(nèi)部結(jié)構(gòu)的合理化完善化,可以將網(wǎng)站應(yīng)該發(fā)揮的作用最大化。SEO的終極目標(biāo)不是僅僅提高網(wǎng)站在搜索引擎中的排名,而是將網(wǎng)站收益和投資之比大幅提高。

2 DIV+CSS頁(yè)面布局技術(shù)

2.1 DIV+CSS技術(shù)

在網(wǎng)站設(shè)計(jì)制作過(guò)程中,定位布局是尤為重要的環(huán)節(jié)。與傳統(tǒng)的利用TABLE定位布局的方式不同,DIV+CSS布局技術(shù)可以實(shí)現(xiàn)頁(yè)面內(nèi)容與表現(xiàn)的分離。其標(biāo)準(zhǔn)的稱(chēng)呼應(yīng)該是“XHTML+CSS”,由于在使用XHTML對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)的時(shí)候,DIV作為使用頻率最高的元素,所以被習(xí)慣稱(chēng)為“DIV+CSS”。

“DIV+CSS”技術(shù)進(jìn)行網(wǎng)頁(yè)布局時(shí),就是在HTML中存放正文信息,而將控制正文信息的CSS與網(wǎng)頁(yè)分離,這種內(nèi)容和表現(xiàn)分離的形式是DIV+CSS布局區(qū)別于表格、框架、庫(kù)、模塊布局的最大優(yōu)勢(shì)。

2.2 DIV+CSS網(wǎng)頁(yè)布局特點(diǎn)

網(wǎng)頁(yè)代碼精簡(jiǎn)、結(jié)構(gòu)清晰。這種正文和表現(xiàn)的分離形式,大大減少了網(wǎng)頁(yè)代碼的體積。這種布局是將網(wǎng)頁(yè)的修飾部分剝離到一個(gè)獨(dú)立的樣式文件中,置于網(wǎng)頁(yè)文件以外,再以外部鏈接的形式引入到頁(yè)面中,使得頁(yè)面結(jié)構(gòu)清晰,網(wǎng)頁(yè)瀏覽速度提高。

易于維護(hù)且布局靈活。網(wǎng)站維護(hù)和更新階段需要對(duì)網(wǎng)頁(yè)的代碼進(jìn)行有針對(duì)性的修改,采用內(nèi)容與形式分離的DIV+CSS技術(shù),只需要修改CSS就能進(jìn)行網(wǎng)站的維護(hù)和更新,而不需要更改網(wǎng)頁(yè)的基本結(jié)構(gòu)。

3 基于SEO的網(wǎng)頁(yè)布局優(yōu)化

3.1 利于Spider爬行的布局結(jié)構(gòu)

搜索引擎優(yōu)化的主旨是使得Spider(爬行蜘蛛)能夠盡量多沿著網(wǎng)絡(luò)上的鏈接從一個(gè)網(wǎng)頁(yè)爬行到另一個(gè)網(wǎng)頁(yè),Spider爬行過(guò)程中會(huì)抓取所經(jīng)過(guò)網(wǎng)頁(yè)的內(nèi)容。Spider爬行中不會(huì)抓取網(wǎng)頁(yè)的完整信息,而是會(huì)按照某種準(zhǔn)則,抓取頁(yè)面最有價(jià)值的信息。如果希望Spider能夠帶走盡量多的網(wǎng)站信息,網(wǎng)頁(yè)布局就要盡量合理。

常見(jiàn)的網(wǎng)頁(yè)布局形式主要分為表格布局和DIV+CSS布局,而這兩種布局形式在SEO的角度下對(duì)于關(guān)鍵信息的抓取形式是不同的。

(1)采用表格布局的網(wǎng)頁(yè)

為了達(dá)到更好的網(wǎng)頁(yè)顯示效果,表格布局形式下一般采用多層表格嵌套來(lái)劃分網(wǎng)頁(yè)結(jié)構(gòu)。但是Spider的爬行對(duì)多層嵌套的表格敏感性較差,會(huì)選擇跳過(guò)嵌套內(nèi)容的方式進(jìn)行抓取,有時(shí)甚至?xí)苯臃艞壵麄€(gè)頁(yè)面。那么位于嵌套表格的關(guān)鍵信息很容易被忽略,并且由于抓取不到有效信息,Spider會(huì)將整個(gè)頁(yè)面認(rèn)作為相似頁(yè)面,直接影響到Spider對(duì)網(wǎng)站的評(píng)價(jià)排名。

(2)采用DIV+CSS布局的網(wǎng)頁(yè)

采用DIV+CSS布局的網(wǎng)頁(yè),由于網(wǎng)頁(yè)代碼精簡(jiǎn),Spider可以在最短時(shí)間內(nèi)爬完頁(yè)面,爬行效率的提高,可以影響到網(wǎng)頁(yè)的收錄情況。向W3C標(biāo)準(zhǔn)靠攏的DIV+CSS技術(shù),由于頁(yè)面標(biāo)簽較少,網(wǎng)頁(yè)關(guān)鍵內(nèi)容更直接的裸露在Spider面前,增大了關(guān)鍵信息的頁(yè)面的抓取比重,從而提高Spider對(duì)網(wǎng)站的評(píng)價(jià)排名。

由此可見(jiàn),DIV+CSS布局形式在搜索引擎優(yōu)化的角度下效果更優(yōu)。

3.2 一行三欄式的優(yōu)化途徑

搜索引擎的訪(fǎng)問(wèn)信息的規(guī)則是從上到下、從左到右的原則。因此在搜索代碼的時(shí)候,關(guān)鍵內(nèi)容在網(wǎng)頁(yè)中的位置顯得尤為重要。DIV+CSS在頁(yè)面布局中常用的一行三欄式結(jié)構(gòu)中,如果左欄內(nèi)容太多,頁(yè)面內(nèi)容權(quán)值就會(huì)隨之下降。因此,可以將關(guān)鍵信息寫(xiě)在頁(yè)面前部如圖1所示。

為了完整的顯示預(yù)設(shè)效果,則通過(guò)CSS定位控制左欄和右欄的位置達(dá)到預(yù)設(shè)效果,代碼實(shí)現(xiàn)如下,這樣的布局形式可以既不影響網(wǎng)頁(yè)的顯示效果,又能夠利于Spider的信息抓取。

3.3 符合SEO規(guī)范的命名原則

在搜索引擎優(yōu)化中,代碼優(yōu)化極為重要。因此在進(jìn)行DIV+CSS布局時(shí),容器的命名就顯得尤為重要,必須符合SEO的基本命名規(guī)則,才能利于Spider的爬行。實(shí)際設(shè)計(jì)實(shí)現(xiàn)過(guò)程中,建議遵循以下四大基本原則:

(1)以英文形式為優(yōu),拼音次之。

(2)容器名推薦小寫(xiě)命名,并盡量不縮寫(xiě)。

(3)所有Alt標(biāo)簽進(jìn)行優(yōu)化,并緊密聯(lián)系網(wǎng)頁(yè)關(guān)鍵詞信息。

(4)盡量符合技術(shù)員常用的命名約定如表1所示。

基于XTHML標(biāo)準(zhǔn)的DIV+CSS布局方式,由于結(jié)構(gòu)簡(jiǎn)單且內(nèi)容和形式分離,受到搜索引擎的喜愛(ài)。利用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局的同時(shí),了解搜索引擎的基本運(yùn)作原理,利用搜索引擎優(yōu)化技術(shù)合理布局設(shè)計(jì)網(wǎng)站,將有利于促進(jìn)網(wǎng)站長(zhǎng)期高效的發(fā)展。