2020網頁設計要簡約 SEO又要內容豐富

常言道：「網站是設計給人看的，也是給Google看的」，SEO友善的網站才能排在搜尋結果上，從而提升網站流量，增加生意的機會。要做到SEO，內容佔最大的比重，網頁如只有一幅圖幾隻字，是很難獲得好的排名，所以很多公司都會推行內容營銷，爭取更好的SEO排名。同時自2016年手機上網數量超越桌面電腦後，網頁設計都講求精簡，人們的耐性一年比一年少，如3秒內未能在網頁上找到所需資料，就會離網站而去。SEO要求網站有豐富的內容，簡約主義網頁設計又講求簡單直接，究竟各位網主應何去何從?

即使將工作交給網頁設計公司及SEO公司分別處理，最終兩者的矛盾仍然存在。網頁設計公司可能要求精簡的文本，而SEO公司就要提交上千字的文案，網主總不能在一個頁面中同時滿足兩邊的要求。為了解決這個根本性的網頁設計問題，我們嘗試分析網頁各項元素，在網頁設計及搜尋器優化中找出共同基礎，再整合出符合兩者的網頁設計方式。

文章重溫：2020網頁設計流程

網站導航勝在一目了然

做網頁最留意的是外觀、設計風格及用戶體驗 (User experience, UX)，潛在客戶瀏覽公司網站，其間會閱讀資料、搜尋服務或產品等，網頁設計師會儘量令網頁容易使用，尤其是手機的限制較多，難以進行複雜的操作。嘗試想像一間網店，如將數百款產品一律放在同一版面上，客人根本找不到所需的產品，所以網頁設計師會先請公司將產品按不同屬性分類，例如牌子、用途、目標用家等，然後就以分層類別 (Hierarchical category)排好，方便客人搜尋。如果大家上網年資超過20年，應該用過 Yahoo搜尋器的原型，當時的Yahoo並非以文本搜索，反而更似是目錄 (Directory)，不過人人的分類方式都不同，難以一套方式歸納，這亦是日後Google以簡潔的文本搜尋勝出的原因。

故此，網站導航 (Website navigation)要做到精簡又SEO-friendly，應先進行關鍵字研究 (Keyword research)，理解大眾對有關產品或服務的分類認知，列出各種主要的可能性，並以可收起的選單排好 (常見的例子有「漢堡式選單」Hamburger button及 「特大選單」Mega menu等)。不要忽視排列次序，正如超級市場，應將熱門產品或服務放在更前更當眼的位置，讓用戶一目了然。

無論是網頁設計或SEO，目的都在令網站更透明，客戶上到網站可迅速搵到產品或服務，然後光顧或聯絡查詢。良好的網站導航可帶來更好的使用經驗，記著，Google都會以人工智能模彷人類瀏覽網站，從而檢視網站是否簡單易用。有一個很簡單去檢視網站導航的方法，就是請一位不太懂得電腦操作的朋友，嘗試在網站找到一些特定的資料，他找到了，就證明你的網站導航設計成功。

網站內容要精簡還是詳細

先要講明，網站內容不限文字，還有圖片、片段及其他一切，網頁內容協助潛在客戶了解你的服務或產品，直至轉化 (Conversion, 如網店的銷售或服務查詢等)。在Google的眼中，不是所有內容都是平等的，例如圖片上的文字 (Text-in-image)，除非另以Alt語法說明，否則搜尋器不能解讀圖上的文字，平面設計師初試網頁設計時往往會忽略此點。另一方面，SEO專家有時也會不易理解到太多的內容會影響網站設計、觀感及使用，高明的網頁設計師會像專業的銷售人員一樣，設計出「內容漏斗」(Content funnel)，再每一個使用階段配置適合的內容，例如先在最獲注視之處放置較廣泛的內容，一步步引導用戶吸收更具針對性的資料，直至去到轉化為止。如果網頁一次過將大量內容鋪在用戶眼前，用戶根本無從入手，所以SEO專家準備文案時，都會與網頁設計師溝通，明白每頁的內容角色，一起制定用戶旅程 (User journey)。

網頁設計和SEO亦有一個最大的矛盾位置，就是特殊互動效果處理。在此需要談一些技術歷史，網頁的基本編寫語言為HTML (Hypertext Markup Language，中文就無謂知道了)，裝載著網頁元素及內容，本身這些元素大部是靜態的，亦沒有互動功能，所以有很多年網頁都只作閱讀之用。到了90年代末，人們期望在網站上有互動和其他功能，各式外掛應運而生，當中最出名的要算是 Flash，亦有部份應用會直接行 Java (另一種電腦語言)，然而這些外掛在手機上很耗電，因手機潮流大可不擋，這類外掛就被淘汰了，只餘下Javascript (JS)這種瀏覽器內建支援的網頁互動程式語言大行其道。

矛盾之處是：JS能做到很好的互動，但Google不容易閱讀JS產生的內容。亦即是話，網頁設計師使用JS創作了有趣的互動後，SEO專家會跟他說馬上放棄它，因為Google根本不知你想表達甚麼。我們的建議是多使用CSS (Cascading Style Sheets，中文亦是無謂知道)，這種語言本來是控制網頁內容表達，在最近的版本中，多了很多動畫及互動元素，取代接近的JS方法，而CSS是非常SEO-friendly的，設計師應只留在處理數據或運算時才使用JS。

溫故知新：2019網站開發新趨勢

網頁圖片

最後的一個矛盾位置是圖片處理，設計而言，相片解象度越高越精緻，可是亦代表圖片檔案越大，這會減慢下載速度，增加手機瀏覽器的負荷，而Google將對此大減分數，影響SEO表現。這對網店來說絕不是好消息，因為越多的圖代表顧客可更了解產品，但SEO專家卻走來說要減少圖片數量和質量，這的確十分難做。

不過這點有三個技術可以解決，首先是今天的圖像壓縮工具較以前更好，在減少失真的情況下將圖片檔案大幅壓縮；第二是Load-on-demand，又稱Lazy loading，在用戶差不多讀到內容時才下載圖片，換句話說，若網頁有30張產品圖，可先顯示當中的一部份，有需要時才下載並顯示，這可減少下載等待時間；最後就是矢量圖技術 (Vector image)，如圖案不是相片，而是設計圖，可使用SVG等的檔案格式，由於它不是點陣圖 (Bitmap)，檔案會很小而且不太耗用運算資源，這都有理SEO的表現。

網頁設計和SEO都是網站的重要考慮，SEO為網站帶來流量，而網頁設計就將流量轉化成為生意。SEO專家說只有豐富的內容才能吸引客戶進來，而網頁設計師卻說簡單直接的內容才可方便顧客作出選擇，兩者確有矛盾之處，但目的都只為網上推廣及營銷。我們常說技術，正是解決類似的兩難，只懂視覺設計往往不能配合SEO，這之所以我們認為網頁設計相當獨特。

如你需要網頁設計服務，歡迎聯絡pnetform網頁設計公司([email protected])