1. 程式人生 > >網站優化(SEO、Yahoo)

網站優化(SEO、Yahoo)

一、SEO在網頁製作中的應用(html/css優化)

1.SEO (Search Engine Optimization)搜尋引擎優化;

白帽SEO:改良和規範網站設計作用,並且網站能從搜尋引擎中獲取更多合理的流量;

黑帽SEO:利用和放大搜索引擎政策缺陷來獲取更多使用者的訪問量

 

2.白帽SEO內容上的優化作用:

網站標題、關鍵字、描述;

網站內容優化;

Robot.txt檔案;

網站地圖;

增加外鏈引用;

白帽SEO前端優化:

網站結構佈局優化;

網頁程式碼優化;

 

3. 白帽SEO前端優化具體做法:

(1).網站結構佈局優化:

扁平化結構(層次越少,越容易被搜尋引擎收錄):

a.控制首頁連結數量(中小企業型連結100左右);

b.扁平化的目錄層次(儘量跳轉3次即可到達網站內任何一個內頁)如:主頁-欄目-內容頁

eg:3層目錄結構

一、SEO在網頁製作中的應用(html/css優化)

1.SEO (Search Engine Optimization)搜尋引擎優化;

白帽SEO:改良和規範網站設計作用,並且網站能從搜尋引擎中獲取更多合理的流量;

黑帽SEO:利用和放大搜索引擎政策缺陷來獲取更多使用者的訪問量

 

2.白帽SEO內容上的優化作用:

網站標題、關鍵字、描述;

網站內容優化;

Robot.txt檔案;

網站地圖;

增加外鏈引用;

白帽SEO前端優化:

網站結構佈局優化;

網頁程式碼優化;

 

3. 白帽SEO前端優化具體做法:

(1).網站結構佈局優化:

扁平化結構(層次越少,越容易被搜尋引擎收錄):

a.控制首頁連結數量(中小企業型連結100左右);

b.扁平化的目錄層次(儘量跳轉3次即可到達網站內任何一個內頁)如:主頁-欄目-內容頁

eg:3層目錄結構

c.導航SEO優化(通常網站導航為主導航,副導航,分類導航)

網站需要新增麵包屑導航(便於使用者瞭解當前所處位置以及當前頁面在整個網站的位置,幫助使用者瞭解網站組織形式) 一般處於左上角,比較醒目;

eg:麵包屑導航 如 全部問題>活動建議

 

一般網站注意點:

分頁條寫法注意:推薦第三種

一個網頁大小最好不超過100k,太大影響載入時間,影響收錄;

 

(2)程式碼SEO優化

<title>標題;

<meta keywords>關鍵詞

<meta description>網頁描述

eg:

<body>中的語義化程式碼:

eg:H1~H6用於標題;

UL標籤多用於無序列表;

OL標籤用於有序列表;

DL標籤用於定義資料列表;

em,strong表示強調;

<a>標籤:需新增title屬性;rel="nofollow"告訴爬蟲不繼續向下檢索;

<h1>標籤:主標題,副標題<h2>其他地方儘可能不用h標籤;

<p>標籤<br>標籤:<br>最好只用於文字換行;

<table>表格標籤需使用<caption>表格標題標籤;

<img> 標籤使用alt說明

<strong><em>標籤除了加粗斜體更側重強調文字內容,<b><i>標籤沒有那麼強調文字內容,若只是表現加粗斜體效果,不要使用<strong><em>,使用<b><i>;

重要內容HTML程式碼放在最前面;

重要內容不要用js輸出,爬蟲看不懂js程式碼;

儘量少使用iframe框架;

謹慎使用display:none,爬蟲會自動過濾掉display內容;應該使用z-index或者設定在瀏覽器顯示之外;

不斷精簡程式碼;

 

二、Yahoo軍規 (js)--如何提高網站速度的一些知識 共35條 以下講解14條

1.儘可能減少HTTP訊息請求;

HTTP請求:從客戶端到伺服器端的請求訊息,包括訊息首行中,對資源的請求方法,資源的識別符號及使用的協議 ;

每一個從伺服器獲取的檔案即一個http請求,將檔案儘可能合併減少http請求;

 

2.使用CDN(內容分發網路);

CDN:內容分發網路;意思是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定;

通俗地講:CDN就是在離你最近的地方,放置一臺效能好連結順暢的副本伺服器,讓你能夠以最近的距離,最快的速度獲取內容;

 

3.新增Expire/CaChe-Control頭;

Apache:阿帕奇,是世界使用排名第一的web伺服器軟體,它執行在幾乎所有廣泛使用的計算機平臺上,由於其跨平臺和安全性被廣泛使用,是最流行的伺服器端軟體之一;

如果Apache開啟了expire模組,當瀏覽器發生資源請求的時候,Apache返回資源的同時會返回一個名為expire的http頭,expire頭的內容是一個時間值,值就是資源在本地的過期時間,存在本地,在本地快取階段,找到一個對應的資源值,當前時間還沒超過資源的過期時間,就直接使用這一個資源,不會發送http請求;

CaChe-CONTROL:是http協議中常用的頭部之一,顧名思義,是負責控制頁面的快取機制,如果該頭部指示快取,快取的內容也會存在在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的選項,而且也有更多的處理方式;

 

4.啟用Gzip壓縮;

Gzip壓縮:就是把檔案先放在伺服器壓縮,然後再進行傳輸,瀏覽器會對檔案進行解壓後再執行;

在Yahoo強調幾乎所有的文字都能被Gzip壓縮:html,php,js,css,xml.txt等

 

5.將CSS放在頁面最上面;

css(Cascading Style Sheets)層疊樣式表單,即後面的css可覆蓋前面的css;級別高的可覆蓋級別低的css樣式;

css放在最上面先載入樣式,避免閃爍,或無樣式;

 

6.將Script放在頁面最下面;

將script放於頁面底部會保證頁面內容先加載出來;

 

7.避免在CSS中使用Expressions;

CSS Expressions即css表示式:將css屬性和JavaScript表示式關聯起來,css屬性的值等於JavaScript表示式計算的結果;css屬性可以是固有的屬性也可以是自定義屬性;

問題:css Expressions會在頁面顯示和縮放,頁面滾動,滑鼠移動時都重新計算一次;

 

8.把JavaScript和CSS都放到外部檔案中;

單獨提取:提高js和css的複用性;減小頁面體積;提高js和css的可維護性;

寫在頁面內(只應用於一個頁面,不經常被訪問到,指令碼和樣式很好):減少頁面請求;提升頁面渲染速度;

 

9.減少DNS查詢;

DNS查詢過程:大概需要20ms時間

解決辦法:快取

IE 30s Firefox 60s Chrome 60s

當快取時間長時:減少DNS的重複查詢,節省時間;

當快取時間短時:瀏覽器及時的檢測網站伺服器的變化,保證正確性;

 

多域/單域配置網站資源;

 

10.壓縮JavaScript和css

方法:去除不必要的空白符,格式符,註釋符;

簡寫方法名,引數名壓縮js指令碼;

在正式上線專案前,將JavaScript和css都進行壓縮,使線上版本是最輕量級的,大幅提升網站效能。

 

11.避免重定向

重定向:使用者原始請求被重新轉向到了其他請求;

在http中重定向狀態碼:

301 Moved Permanently (永久重定向) ; 被移動到了另外的位置,重新請求在新的位置

302 Found(臨時重定向) ;被找到了,但是不在原始的位置;

區別:

12.移除重複的指令碼

 

13.配置實體標籤(ETages)

ETag(Entity Tag):實體標籤,屬於http協議,受web伺服器支援;

作用:使用特殊的字串,來標識某個請求資源的版本;

即瀏覽器向伺服器傳送http請求,伺服器對比ETages,若瀏覽器的ETages與伺服器一致,伺服器會返回一個304碼告訴瀏覽器可以使用瀏覽器已經有的ETages;

 

14.使用Ajax快取

Ajax(Asynchronous javascript and XML):非同步的JavaScript和xml,分批載入,區域性更新;

ajax非同步請求的兩種方法:

post:每次都被執行,不被快取;

get:同一地址不重複執行,可以被快取;

三、Yahoo優化方法外掛--YSlow

1.基於瀏覽器的外掛,目前最流行的是基於Firefox的YSlow

2.作用:對網站進行分析,給些建議和規則,根據此優化網站;(優化報告)

3.安裝:先得安裝Firebug,再安裝YSlow;