陸俊

（江陰職業(yè)技術(shù)學(xué)院，江蘇無(wú)錫 214400）

SEO技術(shù)在XHTML+CSS網(wǎng)頁(yè)制作中的應(yīng)用

陸俊

（江陰職業(yè)技術(shù)學(xué)院，江蘇無(wú)錫 214400）

搜索引擎是獲取流量的重要工具，可以為企業(yè)發(fā)現(xiàn)大量的潛在用戶。網(wǎng)站建設(shè)分為前端網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站功能開(kāi)發(fā)兩個(gè)環(huán)節(jié)。該文在分析搜索引擎優(yōu)化方法的基礎(chǔ)上，以前端網(wǎng)頁(yè)設(shè)計(jì)為重點(diǎn)，分析SEO技術(shù)運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)的方法。

搜索引擎；優(yōu)化；結(jié)構(gòu)；文本；識(shí)別

0 引言

SEO是英文Search Engine Optimization的簡(jiǎn)稱(chēng)，是搜索引擎優(yōu)化的意思。通過(guò)SEO技術(shù)，利用搜索規(guī)則，能提高目標(biāo)網(wǎng)站在相關(guān)搜索引擎內(nèi)的排名，讓網(wǎng)站在行業(yè)內(nèi)占據(jù)領(lǐng)先地位，從而提高商品品牌的知名度。通過(guò)SEO技術(shù)，還能夠?yàn)榫W(wǎng)站提供生態(tài)式的自我營(yíng)銷(xiāo)解決方案。

隨著WEB2.0設(shè)計(jì)標(biāo)準(zhǔn)的普及，人們?cè)絹?lái)越關(guān)注XHTML+CSS的標(biāo)準(zhǔn)化設(shè)計(jì)，它對(duì)搜索引擎優(yōu)化起到明顯的作用。本文重點(diǎn)分析如何把SEO引入XHTML+CSS網(wǎng)頁(yè)設(shè)計(jì)中，以?xún)?yōu)化網(wǎng)頁(yè)結(jié)構(gòu)。

1 搜索引擎優(yōu)化的作用

據(jù)中國(guó)互聯(lián)網(wǎng)網(wǎng)絡(luò)信息中心（CNNIC）統(tǒng)計(jì)，截止2015年末，我國(guó)搜索引擎用戶規(guī)模達(dá)5.66億人，與2014年末相比，增加了4 400萬(wàn)人，增長(zhǎng)率為8.4%。用戶必須通過(guò)搜索引擎才能方便地獲取需要的信息。有關(guān)研究表明，用戶在搜索信息時(shí)，絕大部分用戶只關(guān)注目標(biāo)網(wǎng)站首頁(yè)的信息，尤其是網(wǎng)站首頁(yè)的前三條信息。搜索引擎優(yōu)化的根本目的是提高營(yíng)銷(xiāo)網(wǎng)站在搜索目標(biāo)網(wǎng)頁(yè)中的名次，以提高用戶對(duì)營(yíng)銷(xiāo)網(wǎng)站的關(guān)注度和暴光率，也方便用戶檢索企業(yè)和企業(yè)商品的信息，方便企業(yè)與用戶交流和溝通，從而擴(kuò)大客戶規(guī)模，拓展網(wǎng)絡(luò)營(yíng)銷(xiāo)業(yè)務(wù)，降低企業(yè)營(yíng)銷(xiāo)成本。搜索引擎優(yōu)化具有很高的商業(yè)價(jià)值。

2 搜索引擎優(yōu)化方式

雖然利用SEO技術(shù)優(yōu)化搜索引擎，優(yōu)化方法和策略很多，但主要是站外優(yōu)化和站內(nèi)優(yōu)化兩種方式。

SEO搜索引擎的外部?jī)?yōu)化是通過(guò)反向鏈接，把目標(biāo)網(wǎng)站與用戶感興趣的網(wǎng)站鏈接，并在網(wǎng)站中的友情鏈接交換、博客發(fā)布、文章投稿、分類(lèi)目錄、廣告購(gòu)買(mǎi)、論壇等欄目或板塊中發(fā)布目標(biāo)網(wǎng)站鏈接信息，使用戶方便鏈接目標(biāo)網(wǎng)站。

站內(nèi)優(yōu)化的核心是將網(wǎng)站中的關(guān)鍵詞合理地分配到網(wǎng)站的各個(gè)頁(yè)面，以增加網(wǎng)頁(yè)中關(guān)鍵詞的密度，使搜索引擎更容易識(shí)別網(wǎng)頁(yè)的核心內(nèi)容。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不僅要美化網(wǎng)頁(yè)頁(yè)面，更要注意提煉關(guān)鍵詞和在頁(yè)面的布局，因?yàn)樗悄繕?biāo)網(wǎng)站能否被用戶搜索出來(lái)的關(guān)鍵。一般把關(guān)鍵詞布局在頁(yè)面標(biāo)題 TITLE標(biāo)簽、META標(biāo)簽 keywords屬性、META標(biāo)簽屬性、主次導(dǎo)航處等位置，并通過(guò)網(wǎng)站內(nèi)鏈接串聯(lián)相關(guān)頁(yè)面，方便用戶調(diào)用相關(guān)頁(yè)面的內(nèi)容，以提高頁(yè)面關(guān)鍵詞的粘度。

由于網(wǎng)站是由若干網(wǎng)頁(yè)組成，網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站建設(shè)的基礎(chǔ)，必須通過(guò)SEO技術(shù)設(shè)計(jì)網(wǎng)頁(yè)，以提高搜索引擎的優(yōu)化效果。

3 SEO在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)技術(shù)發(fā)生了巨大的變化，從原始的“記事本”式網(wǎng)頁(yè)設(shè)計(jì)，到table表格網(wǎng)頁(yè)設(shè)計(jì)，再到XHTML+CSS網(wǎng)頁(yè)設(shè)計(jì)，以及HTML5的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。本文主要分析利用SEO技術(shù)進(jìn)行XHTML+CSS網(wǎng)頁(yè)設(shè)計(jì)的方法。

3.1 XHTML+CSS應(yīng)用

按照網(wǎng)頁(yè)結(jié)構(gòu)化標(biāo)準(zhǔn)設(shè)計(jì)的要求，把網(wǎng)站頁(yè)面內(nèi)容文件與其呈現(xiàn)格式文件相分離，簡(jiǎn)單地說(shuō)就是用XHTML+CSS格式寫(xiě)所有字體、樣式等文件，并把 CSS和 Javascript置于單獨(dú)的文件中。 用HTML格式寫(xiě)文字內(nèi)容文件，不使用CSS代碼，直接調(diào)用外部文件。通過(guò)這種方式，能夠精簡(jiǎn)HTML文件代碼，降低文件容量；搜索引擎能夠更好地索引和識(shí)別網(wǎng)站信息，并準(zhǔn)確地抓取頁(yè)面內(nèi)容。

通過(guò)XHTML+CSS網(wǎng)頁(yè)設(shè)計(jì)，不僅會(huì)使網(wǎng)頁(yè)容量小、頁(yè)面載入速度快，而且會(huì)使網(wǎng)頁(yè)結(jié)構(gòu)清晰、界面友好。把文字或圖片信息的樣式文件置于CSS中，搜索爬蟲(chóng)只采集 HTML中的信息，能夠提高搜索效率；網(wǎng)頁(yè)的關(guān)鍵詞更集中、密度更大。SEO技術(shù)更符合W3C標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的要求。

3.2 網(wǎng)頁(yè)模塊分析

網(wǎng)站首頁(yè)是網(wǎng)站的臉面，絕大多數(shù)用戶都從網(wǎng)站首頁(yè)開(kāi)始瀏覽網(wǎng)站。因此，應(yīng)加強(qiáng)網(wǎng)站首頁(yè)設(shè)計(jì)。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，應(yīng)遵循“以用戶為中心”和“4W”原則?！?W”的第一個(gè)W是“what”，明確網(wǎng)頁(yè)放什么內(nèi)容；第二個(gè)W是“why”，明確網(wǎng)頁(yè)所放內(nèi)容的理由；第三個(gè)W是“whom”，明確誰(shuí)看網(wǎng)頁(yè)內(nèi)容；第四個(gè)W指“what effect”，明確網(wǎng)頁(yè)布局達(dá)到什么效果。企業(yè)網(wǎng)站頁(yè)面一般包括網(wǎng)站logo和banner模塊、導(dǎo)航條模塊、網(wǎng)站幻燈模塊、產(chǎn)品列表模塊、成功案例模塊、公司介紹模塊等，其結(jié)構(gòu)如圖1所示。

圖1 網(wǎng)頁(yè)模塊結(jié)構(gòu)圖

表1 常用CSS命名規(guī)則

由于SEO技術(shù)優(yōu)化搜索引擎的目的是方便用戶通過(guò)關(guān)鍵詞檢索目標(biāo)網(wǎng)站，因此，必須按照用戶對(duì)網(wǎng)頁(yè)各模塊關(guān)心程度的強(qiáng)弱，布局頁(yè)面模塊。

1）“企業(yè)頭部”和“導(dǎo)航模塊”，是網(wǎng)頁(yè)的基本模塊，是用戶檢索目標(biāo)網(wǎng)站和搜索引擎識(shí)別網(wǎng)頁(yè)面的核心；

2）“網(wǎng)站幻燈圖”模塊，展示企業(yè)核心產(chǎn)品的圖片，強(qiáng)化用戶的視覺(jué)感，突顯產(chǎn)品特點(diǎn)，提高廣告宣傳效果；

3）“產(chǎn)品分類(lèi)”模塊，是用戶關(guān)心的核心內(nèi)容。商品分類(lèi)目錄置于頁(yè)面的左側(cè)，企業(yè)推薦產(chǎn)品模塊置于右側(cè)，方便用戶訪問(wèn)；

4）“成功案例”模塊，將企業(yè)積累的以往客戶名錄置于網(wǎng)頁(yè)，以增強(qiáng)用戶的信任；

5）“公司介紹”模塊，著重展示企業(yè)形象。

3.3 網(wǎng)頁(yè)CSS樣式命名規(guī)范

按照CSS命名規(guī)則命名，不僅方便網(wǎng)站維護(hù)和修改CSS代碼，而且還能加強(qiáng)搜索引擎的優(yōu)化和方便記憶。網(wǎng)頁(yè)的CSS命名規(guī)則如表1所示。

網(wǎng)頁(yè)中常用名的CSS代碼如下：

按照規(guī)則命名和編寫(xiě)標(biāo)準(zhǔn)代碼，不僅能保證網(wǎng)頁(yè)結(jié)構(gòu)清晰、命名規(guī)范，而且便于識(shí)別和后期修改。

3.4 非文本信息的處理

搜索引擎通過(guò)名為“spider”的小程序抓取網(wǎng)頁(yè)。因此，在網(wǎng)站設(shè)計(jì)過(guò)程中，必須重視spider抓取網(wǎng)頁(yè)的能力。spider僅能讀取頁(yè)面的文本內(nèi)容，無(wú)法選取和處理Flash、圖片等非文本信息，也無(wú)法識(shí)別和處理flash、圖片中的文字信息。然而，在網(wǎng)頁(yè)制作過(guò)程中，不可避免使用圖片，以增強(qiáng)用戶的視覺(jué)體驗(yàn)。因此，必須解決spider不能識(shí)別和處理非文本信息的問(wèn)題。采用圖文混排方式，并對(duì)圖片進(jìn)行SEO技術(shù)處理，可以解決這個(gè)問(wèn)題。在< img>標(biāo)記中，加入ALT屬性，屬性?xún)?nèi)容為圖片中的文字內(nèi)容。例如，在中，alt的內(nèi)容就是圖片中的文字信息，這樣搜索引擎就可以識(shí)別和處理圖片中的信息，以便于抓取。雖然flash可以使頁(yè)面更加生動(dòng)，但是一般盡量不要在網(wǎng)頁(yè)中使用flash。如果必須使用flash，在flash頁(yè)面創(chuàng)建供搜索引擎抓取的文本索引頁(yè)面，并創(chuàng)建超級(jí)鏈接索引到文本頁(yè)面。由于搜索引擎不能識(shí)別js文件，重要的內(nèi)容不要使用js文件輸出，并且盡量不使用iframe框架編寫(xiě)文件。

3.5 XHMTL標(biāo)記語(yǔ)義化

XHMTL標(biāo)記語(yǔ)義化就是對(duì)內(nèi)容結(jié)構(gòu)化。選擇合適的標(biāo)簽，以實(shí)現(xiàn)代碼語(yǔ)義化，便于開(kāi)發(fā)者閱讀和寫(xiě)出更好的代碼，方便瀏覽器爬蟲(chóng)更好地解析內(nèi)容。通過(guò)XHMTL標(biāo)記語(yǔ)義化和SEO技術(shù)，與搜索引擎建立良好的聯(lián)系，有助于spider抓取更多的有效信息。由于spider依靠標(biāo)簽確定上下文和關(guān)鍵字的權(quán)重，應(yīng)把標(biāo)題置于權(quán)重較大的標(biāo)簽之中。例如，在每個(gè)頁(yè)面只能出現(xiàn)一次H1標(biāo)簽，可以多次出現(xiàn)H2標(biāo)簽，但是H1標(biāo)簽的權(quán)重高于H2標(biāo)簽，僅次于title的權(quán)重，應(yīng)把標(biāo)題置于H1標(biāo)簽而不是H2標(biāo)簽。

[1]張磊.SEO技術(shù)研究與應(yīng)用 [J].電腦開(kāi)發(fā)與應(yīng)用, 2010(3).

[2]李淑曉.基于SEO的XHTML+CSS網(wǎng)頁(yè)布局與美化[J]電腦知識(shí)與技術(shù),2011(5).

[3]昝輝Zac(作者).SEO實(shí)戰(zhàn)密碼:60天網(wǎng)站流量提高20倍[M].北京：電子工業(yè)出版社，2011.

責(zé)任編輯 仇大勇

TP393

A

1674－5787（2016）06－0147－03

10.13887/j.cnki.jccee.2016（6）.43

2016-10-17

陸俊(1982—)，男，江蘇省淮安市人，碩士，江陰職業(yè)技術(shù)學(xué)院管理系電子商務(wù)專(zhuān)業(yè)，講師，研究方向：數(shù)據(jù)分析、網(wǎng)絡(luò)營(yíng)銷(xiāo)。