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會有很大的幫助。
聯系方式
客服QQ：
1483340977
。
客服電話：
18038047036
。
掃一掃添加網站優化為好友
評論