設計分享列表設計分享
[SEO]SEO-CSS和網頁設計
time : 2008/12/29 上午 10:38:57 瀏覽次數:6272
[ 轉載 ] 索尼和香蕉王的紅燈人生
你的網站還在用傳統的Table在編輯排版嗎?如果是,請看下面的分析,
不管你是已經有網站或者正要準備建構網站,一定要要求承做的網頁設計公司,
一定要用CSS設計排版,這樣才會符合現今的網頁規格與往後的SEO優化。
我們知道SEO的目標是帶來網路流量,要如何實施SEO、要注意哪些細節
我整理了CSS和網站設計一些比較大方向的要點出來,與大家一起分享
首先,在設計網站前 我們應該先決定網站或是BLOG的主題。
因為 搜尋引擎也會分類,就像產品一樣,搜尋引擎會將您的網站放在正確的分類中。
讓您的網站在正確地被搜尋、正確地出現在瀏覽者的頁面中。
而網站的每個頁面應該遵循一個主題,所以在格式設計上應保持一制性或是內容的連貫性。
以下是網站設計和CSS對於SEO的幾項要點說明:
先簡單介紹一下CSS,CSS全名為『 Cascading Style Sheers 』,中文稱為串接樣式表。
用具體的話來描述CSS的運用,就是將網頁的標籤建立統一的規範。
W3C 於1996年12月發表了CSS1,直到這幾年越來越多網站設計師(公司)開始遵循並使用CSS。
造成趨勢的原因在於 網頁標準規格 (Web Standards)
所謂的網頁標準規格,其實就是 在網路世界上大家共通的規定。
主要目的是在不同的瀏覽器上,將網頁的內容完整並正確地顯示於瀏覽者面前,留下更好的網站使用體驗。
因此,在瀏覽器與瀏覽工具日益多樣化的情況下,CSS也逐漸開始受到重視與推廣運用。
接著,讓我們更了解CSS的主要優點在於哪些方面:
因此只要修改單一一個CSS檔,就能讓整個網站的版面一新。
因此,可以減少在網路上傳送的資料量。
尤其是在點閱率高的網站上,網路負荷的減輕就等於是成本的節省。
而且對使用者而言 還有等待時間縮短的優點。
而以連結方式外掛使用,還可以將網頁開頭的一些不重要的程式碼移到網頁頁尾,
以便搜尋引擎快速讀取中心內容。這樣不僅能為網頁減肥,而且能使搜尋引擎最佳化中,
可以對重要標題給予修飾的同時,而不影響網頁美觀。
以減少網頁的檔案大小,還能使搜尋引擎儘快地存取網頁內容,同時還可以使網頁顯示的速度加快。
首頁標題和內容小標題完備的網頁是最容易處理的。
所以只要網頁遵循網頁標準規格,網頁搜錄程式就能正確地顯示出頁面摘要。
在這裏介紹一下一個有趣的 Google 機器人與芭樂網經理的對話 (上) (中) (下),很好笑又很有料
接下來,在設計網站前,我們應該先了解以下幾種不利於最佳搜尋的狀況:
但,不幸的是,搜尋引擎卻沒有辦法觀賞動畫的內容,應該是說搜尋引擎無法判別這個動畫代表著什麼意義
因此我們可以在同一頁面上增加一些文字的說明或是在Flash檔案下面放上Flash檔案內容的相關說明。
在 FALSH與SEO 與Google中提供一些解決的方法,請大家參考看看。
當網站背景或頁面上有太多、太大的圖片,搜尋引擎探測器會浪費太多的時間在讀取圖片內容,
這樣會使得搜尋引擎不能完全抓到網站的內容,而影響網站在搜尋結果中出現的機率。
一般來說以GIF檔為適合,當然還是要以圖檔的使用目的與用途為前提來設計網站。
還有,避免用圖片做連結,因為搜尋引擎不認識圖片,它們只認識純文字。
所以,圖片加上註明的標籤、說明,不只讓瀏覽者了解,更是網頁中的一兩個關鍵字。
最主要的作用是協助搜尋引擎的探索機器人(Web Crawler)或蜘蛛機器人程式(Spider)
指引它們按照地圖上的指示進入各個網頁的連結,順利到達各個網頁,讓搜尋引擎收錄網站的全貌
而這個地圖對於使用JavaScript做的Menu網站,或使用Flash隱含連結的網站來說更是非常重要。
「Google 會在能力所及內支援頁框及 iframe。但是頁框可能會造成搜尋引擎的問題,
因為頁框與網頁的概念模組不符。在此模組內,一個網頁只能顯示一個網址。
使用頁框或 iframe 的網頁會在單一網頁內顯示數個網址 (每個頁框一個)
Google 會嘗試將頁框內容與包含頁框的網頁連結,但無法保證可以做到。」
從這段說明可以看出,使用框架或是表格都是有礙於SEO化。
使用過多的框架和表格,會讓搜尋引擎以爬行、非常緩慢的方式在來搜尋網站。
當遇到多個網頁組合在一起的時候,就像是火車在鐵軌上行駛一樣。
在交叉的軌道中只能隨著一條軌道走,存取一個網頁,其它網頁就會被忽略了。
因此,SEO強調網站必須擺脫使用框架或表格的組成方式,
這也是我推薦使用CSS來製作網站的最重要的原因。
[ 結論 ]
無論是自己要架設網站或是請網頁設計公司架設網站,這些設計細節都是極為重要的
在這個數位行銷的時代,將網站朝向SEO化確實是一件重要的龐大工程
從網站設計、CSS排版、關鍵字分析、網站登錄、資訊發佈、內外部連結的選擇...等等許多細節
都是需要時間的累積與實務的探討,在這過程往往是緩慢、持續、令人耗費精神的。
SEO沒有一步登天的方法,只有在穩紮穩打中累積自身的實力並和競爭對手抗衡。
相信,搜尋頁面被第一位的您佔據後,隨後而來的並不是只有驕傲和商業機會
而是,繼續維持現有的名次甚至朝向其它關鍵字發展,不斷地更新、充實自己。
SEO是一件很好玩、很複雜、很專業、很值得讓人研究的數位行銷方式,
在了解、接觸SEO後,它帶來的往往比你想像還要多更多。
你的網站還在用傳統的Table在編輯排版嗎?如果是,請看下面的分析,
不管你是已經有網站或者正要準備建構網站,一定要要求承做的網頁設計公司,
一定要用CSS設計排版,這樣才會符合現今的網頁規格與往後的SEO優化。
我們知道SEO的目標是帶來網路流量,要如何實施SEO、要注意哪些細節
我整理了CSS和網站設計一些比較大方向的要點出來,與大家一起分享
首先,在設計網站前 我們應該先決定網站或是BLOG的主題。
因為 搜尋引擎也會分類,就像產品一樣,搜尋引擎會將您的網站放在正確的分類中。
讓您的網站在正確地被搜尋、正確地出現在瀏覽者的頁面中。
而網站的每個頁面應該遵循一個主題,所以在格式設計上應保持一制性或是內容的連貫性。
以下是網站設計和CSS對於SEO的幾項要點說明:
先簡單介紹一下CSS,CSS全名為『 Cascading Style Sheers 』,中文稱為串接樣式表。
用具體的話來描述CSS的運用,就是將網頁的標籤建立統一的規範。
W3C 於1996年12月發表了CSS1,直到這幾年越來越多網站設計師(公司)開始遵循並使用CSS。
造成趨勢的原因在於 網頁標準規格 (Web Standards)
所謂的網頁標準規格,其實就是 在網路世界上大家共通的規定。
主要目的是在不同的瀏覽器上,將網頁的內容完整並正確地顯示於瀏覽者面前,留下更好的網站使用體驗。
因此,在瀏覽器與瀏覽工具日益多樣化的情況下,CSS也逐漸開始受到重視與推廣運用。
接著,讓我們更了解CSS的主要優點在於哪些方面:
1. 提高可維護性
藉由遵循網頁設計標準規格,文件的內容構造與版面設計變得可以分開管理。因此只要修改單一一個CSS檔,就能讓整個網站的版面一新。
2. 減輕網路負荷
原本為了版面設計使用的多層巢狀表格消失後,(X)HTML的檔案不在龐大。因此,可以減少在網路上傳送的資料量。
尤其是在點閱率高的網站上,網路負荷的減輕就等於是成本的節省。
而且對使用者而言 還有等待時間縮短的優點。
3. 外掛JavaScript
我們可以透過CSS將難看、冗長的JavaScript等一長串的程式置於網頁之外。而以連結方式外掛使用,還可以將網頁開頭的一些不重要的程式碼移到網頁頁尾,
以便搜尋引擎快速讀取中心內容。這樣不僅能為網頁減肥,而且能使搜尋引擎最佳化中,
可以對重要標題給予修飾的同時,而不影響網頁美觀。
4. 外掛CSS
將CSS程式碼做成外掛程式檔,當需要執行時在載入使用,不用放在網頁中,以減少網頁的檔案大小,還能使搜尋引擎儘快地存取網頁內容,同時還可以使網頁顯示的速度加快。
5. 實施SEO
這是最重要的原因,對於搜尋引擎的網頁搜錄程式(Web Crawler)或蜘蛛機器人程式(Spider)而言,首頁標題和內容小標題完備的網頁是最容易處理的。
所以只要網頁遵循網頁標準規格,網頁搜錄程式就能正確地顯示出頁面摘要。
在這裏介紹一下一個有趣的 Google 機器人與芭樂網經理的對話 (上) (中) (下),很好笑又很有料
接下來,在設計網站前,我們應該先了解以下幾種不利於最佳搜尋的狀況:
1. 動畫 (Flash)
許多網站採用了Flash動畫,使網站變得很精彩、動態感十足。但,不幸的是,搜尋引擎卻沒有辦法觀賞動畫的內容,應該是說搜尋引擎無法判別這個動畫代表著什麼意義
因此我們可以在同一頁面上增加一些文字的說明或是在Flash檔案下面放上Flash檔案內容的相關說明。
在 FALSH與SEO 與Google中提供一些解決的方法,請大家參考看看。
2. 圖片 (Picture)
網站上的圖片顯示速度比文字漫,所以實施SEO前,我們必須要求圖片的檔案大小儘量限制在最小。當網站背景或頁面上有太多、太大的圖片,搜尋引擎探測器會浪費太多的時間在讀取圖片內容,
這樣會使得搜尋引擎不能完全抓到網站的內容,而影響網站在搜尋結果中出現的機率。
一般來說以GIF檔為適合,當然還是要以圖檔的使用目的與用途為前提來設計網站。
還有,避免用圖片做連結,因為搜尋引擎不認識圖片,它們只認識純文字。
所以,圖片加上註明的標籤、說明,不只讓瀏覽者了解,更是網頁中的一兩個關鍵字。
3. 網站地圖 (Sitemap)
網站地圖不只方便瀏覽者導覽,更是SEO的一個重要步驟最主要的作用是協助搜尋引擎的探索機器人(Web Crawler)或蜘蛛機器人程式(Spider)
指引它們按照地圖上的指示進入各個網頁的連結,順利到達各個網頁,讓搜尋引擎收錄網站的全貌
而這個地圖對於使用JavaScript做的Menu網站,或使用Flash隱含連結的網站來說更是非常重要。
4. 框架和表格 Frame and Table
在探討框架和表格前,先來看看Google怎麼說「Google 會在能力所及內支援頁框及 iframe。但是頁框可能會造成搜尋引擎的問題,
因為頁框與網頁的概念模組不符。在此模組內,一個網頁只能顯示一個網址。
使用頁框或 iframe 的網頁會在單一網頁內顯示數個網址 (每個頁框一個)
Google 會嘗試將頁框內容與包含頁框的網頁連結,但無法保證可以做到。」
從這段說明可以看出,使用框架或是表格都是有礙於SEO化。
使用過多的框架和表格,會讓搜尋引擎以爬行、非常緩慢的方式在來搜尋網站。
當遇到多個網頁組合在一起的時候,就像是火車在鐵軌上行駛一樣。
在交叉的軌道中只能隨著一條軌道走,存取一個網頁,其它網頁就會被忽略了。
因此,SEO強調網站必須擺脫使用框架或表格的組成方式,
這也是我推薦使用CSS來製作網站的最重要的原因。
[ 結論 ]
無論是自己要架設網站或是請網頁設計公司架設網站,這些設計細節都是極為重要的
在這個數位行銷的時代,將網站朝向SEO化確實是一件重要的龐大工程
從網站設計、CSS排版、關鍵字分析、網站登錄、資訊發佈、內外部連結的選擇...等等許多細節
都是需要時間的累積與實務的探討,在這過程往往是緩慢、持續、令人耗費精神的。
SEO沒有一步登天的方法,只有在穩紮穩打中累積自身的實力並和競爭對手抗衡。
相信,搜尋頁面被第一位的您佔據後,隨後而來的並不是只有驕傲和商業機會
而是,繼續維持現有的名次甚至朝向其它關鍵字發展,不斷地更新、充實自己。
SEO是一件很好玩、很複雜、很專業、很值得讓人研究的數位行銷方式,
在了解、接觸SEO後,它帶來的往往比你想像還要多更多。