網頁設計、網站架設前必備的8 個基本觀念

網頁設計公司除了為你前後台漂亮與功能兼具的網站以外，還要擁有執行SEO 的實戰能力。

要能隨時跟上Google 瞬息萬變的演算法調整策略，在技術與內容方面都跟上因應策略， ... Skiptocontent 網頁設計、網站架設前必備的8個基本觀念 首頁/網頁設計概念/網頁設計、網站架設前必備的8個基本觀念 架設網站需要準備哪些？是否需要懂技術才能溝通？在準備架站前要注意些什麼？請公司做網站需要花多少錢？有沒有推薦的網頁設計公司？當你開始準備為你的事業打造一個網站，你需要做一點功課，對網站架設有一些基本理解，來幫助你更快理解如何打造一個理想的網站。

目錄 1.架設網站有什麼好處？ 官方網站的好處 1.握有管理內容和演算法的主控權，不受第三方平台規則影響 長遠來看，打造自己的網站是一個相當好的投資，唯有擁有自己的網站，你才可以對自己的事業和商業成長擁有完全的主導權。

在前期花點時間與努力打造網站，未來你可以自由運用、更新你的網頁與商品陳設，在網路世界為你的網站累積權重與SEO表現，累積自己的流量池和潛在訂單。

最重要的，你可以擁有完整的後台數據，掌握你的使用者行為，持續為你的客戶提供最棒的產品。

2.數據是企業最重要的數位資產，了解精準受眾推出行銷策略 官網架設的一大好處，就是能依後台數據掌握消費者行為，驗證和優化經營策略，以利達成品牌的最終目標——提升營收業績並永續經營。

後台的消費者行為數據能夠幫助你得知這些資訊特定日期區間，有多少新客進站？回客比多少？依據進站流量判斷哪一個促銷檔期推動此行為？產品若是SaaS服務，觀察這個時間點和市場趨勢、使用者行為有何關聯？不受促銷影響、能鞏固品牌基本業績的忠實顧客輪廓是如何？這是擁有自家網域、架設自有品牌官網才能有的獨家數據資產。

若選用第三方平台架設網站，則幾乎不太可能掌握這些訊息。

有些平台會要你付更高的訂閱金額來取得，更多平台則不提供。

3.搭配完整CRM鞏固品牌忠誠度、提升消費者終生價值 獨立的官網能夠搭配CRM系統，若使用架站平台往往無法深度整合使用。

CRM(CustomerRelationshipManagement）全名為客戶關係管理，為你的官網串接一個強大的CRM系統，能夠掌握客戶的消費決策流程，協助業務團隊在不同階段推送客製化訊息、妥善回覆來自不同渠道的客戶問題，統整管理所有客戶資料、掌握用戶交易階段，讓消費者願意和品牌有長期的互動、創造顧客價值。

有粉專、IG、蝦皮、電商平台…還需要官網嗎？有人認為若只是「將產品上架」，那麼粉專、電商平台都可以辦到，不需為此專門架設一個網站、花錢又花時間，尤其目前有許多平台商前期成本相當低，輕鬆就能上手、上架商品。

然而就像Facebook的策略一樣，最終你會受到演算法所苦。

想要爭取更多曝光量，只能大砸廣告費，而廣告的紅利時代也已過去，廣告成本只會越來越高昂。

平台商由於其營運特質，往往提供制式化的套版，功能有限、幾乎無法客製化，也無法明確表現品牌和商品的獨特性，消費者往往買過一次後就不會再訪。

獨立官網的品牌形象、視覺呈現能由你打造，透過SEO和廣告觸及客戶，客戶對你整體的品牌形象產生印象烙印，才有高度機會再次回頭消費。

2.網站架設前的必備基礎觀念 網站架設趨勢 目前架設網站的主流是用WordPress架站，並使用RWD響應式網頁設計的技術。

使用RWD的好處在於你的網站介面，可以隨著不同裝置尺寸呈現最適合瀏覽的排版和大小，你不需要管理多個版本的網站。

RWD適應性設計： 另外，2020年後的趨勢上，手機版的網頁已經超越電腦版，而B2B企業的商業活動還是以電腦版網頁為主。

RWD響應式網頁設計是什麼? RWD全名為（ResponsiveWebDesige），是一種開發網頁設計的方法，運用CSS的技術，能夠在不改變網站架構的情況下瀏覽各種版本內容的設計方式。

繼高效率、又能大幅減少維運成本。

WordPress是什麼? WordPress是一個架設網站的開源式軟體。

意味著它開放全世界的工程師為其開發不同的工具和軟體，來符合自己網站想要的需求。

據hostingtribunal.com對ＷordPress2021年的分析報告：全世界已經超過1/3（39.6%)的網站使用它架站，小至個人部落格到複雜的大型企業網站，都有其用戶和愛好者。

WordPress也是目前少數幾個結合網站與部落格的內容管理系統（CMS)，具備豐富成熟的資源，對於想經營網站品牌的企業來說是理想而有效率的選擇。

網站有哪些種類？ 1.品牌官方網站 不限提供產品、服務，以傳遞、營造企業的形象與專業度為主的網站。

例如設計師的個人網站、顧問服務、美術館網站 2.電商網站 電子商務網站，須擁有金流、會員、多樣化折扣系統與資安防護的網站。

3.B2B網站 服務客戶以上下游廠商、企業為主體，無論是資訊顧問服務或製造業，擁有完整的產品介紹、能深度整合CRM、隨時彈性打造新的landingPage的網站。

4.內容媒體網站/部落格 提供內容為主軸，擁有部落格或是串流系統的內容媒體網站。

主機、網址URL、IP、Https是什麼？ 1.主機Server 主機是存放你網站內容的地方。

架網站用到的為「虛擬主機」，意味將一個實體的主機伺服器，透過程式語言切成許多空間，供有需要的人使用。

網站流量越大，主機的效能要求越高。

由於要負擔和管理一個實體主機的金錢、技術成本相當高昂，大部分人都是是向主機代管系統商購買虛擬主機存放自己的網站。

你可以選擇國外知名的主機代管商，通常外商的服務市場涵蓋範圍大，較有保障。

2.網址URL、網域 網址是你網站的「地址」，架設網站前，你需要先為自己的網站註冊和購買一個「網域」，告訴全世界這個網站的地址名稱。

一但註冊過後，其他人就不能再使用同樣的地址。

3.IP 網路（Internet）就像蜘蛛網一樣連結全世界的電腦，為彼此傳遞資料，需要將正確的資料傳遞到正確的電腦就需要正確的位置，IP有點像是你這個網站的地理位置、門牌號碼一樣的概念。

通常長的形式為一連串數字，如：119.153.77.168。

有些印表機可以用網路連結電腦，那麼這台印表機也會有屬於自己的IP。

網址和IP的概念區分，前者是你網站的「地址」，後者為你網站的「座標位置」，或說是「身分證帳號」也很貼切。

4.HTTP與HTTPS HTTP全名為「超文本傳輸協定」（英語：HyperTextTransferProtocol，縮寫：HTTP），最初目的是為了提供發布和接收HTML頁面的方法。

是一種通訊協定，通過它才能連結「瀏覽器」端與「主機」端。

HTTP協議沒有安全性的功能，不論是對網頁端和主機端都不會進行身份驗證，也無法驗證內文的完整性，所以內容很有可能被竊聽或是竄改而當事人不自知。

HTTPS全名「超文本傳輸安全協定」，透過SSL/TSL去做了一道安全鎖，能夠在傳輸訊息的過程中加密，包含andshake(交握)、公私鑰加密、第三方身分認證機構等等，解決前面HTTP無法解決的問題。

網站前台、後台是什麼？簡單區分，網站前台是「客戶看到的內容」，後台是「網站營運者看到的內容」。

舉凡網站在網路世界看得的每一個網路頁面，都屬於前台，後台則是你上傳文章、替換Banner視覺、觀看數據、調整網站分類、架構所操作的地方。

網站前台、後台是什麼？ 簡單區分，網站前台是「客戶看到的內容」，後台是「網站營運者看到的內容」。

舉凡網站在網路世界看得的每一個網路頁面，都屬於前台，後台則是你上傳文章、替換Banner視覺、觀看數據、調整網站分類、架構所操作的地方 3.架設網站的流程 1.租用網站虛擬主機 要架設網站，首先你要有個地方存放你的網站空間，舉凡你上傳到網站中的資料、圖片影片等都需要空間存放，你可以選擇租用知名的主機商確保你的網站資料安全性與穩定性。

例如GoDaddy、BlueHost。

2.申請與購買網域（網址） 你的網站需要有個專屬網址，讓其他人能夠過網址找到你，地址的概念。

架設網站前就可以先上網域商（如：GoDaddy）註冊一個網址，註冊網址需要費用，可以依據你的需求購買多長的使用時間。

如果過期而不繼續付費，視同你不要這個網域，也代表未來他人可以註冊這個網址。

3.規劃網站地圖 在架設網站前你應該為你的網站規劃一個清楚的架構，通常是採用樹狀組織圖來規劃出網站應該要有的物件和功能，下面會提到如何規劃網站地圖。

4.選擇網頁主題佈景、網站素材 先行挑選你喜歡的網站佈景主題，佈景主題能夠為你的網站視覺做基本定調，包含Framework、版型等，如果有需要再特別客製化的地方或頁面則再由工程師撰寫程式語言。

佈景主題可以從ThemeForest瀏覽與購買，網站有上萬種不同產業與功能定位的佈景主題讓你選擇。

ThemeForest：https://themeforest.net/ 5.製作WordPress網站 上述作業差不多之後，便可以由工程師為你製作網站。

包含串接資料庫、串接金流或物流系統、第三方套件、前後台建立、網頁設計、切版等，UI/UX設計師也會參與這個階段設計頁面的視覺形象。

如果企劃人員事前有提出想安裝的WordPress掛件名單，在這時候就可以安裝。

6.安裝WordPress外掛套件 這個階段網站的完成度大部分八九成了，你可以在這時挑選幾個必要的WordPress套件，幫助你完善你想要的客製化功能。

外掛套件的功能有上百種，小至防止機器人留言、大至購物車系統都有，我們這邊主要討論每個網站都應該必備的基本套件，包含YoastSEO、GoogleAnalytics、Smush（縮圖外掛）等等能夠提升你的網站效能、優化SEO、追蹤與改善數據追蹤的外掛。

7.公開網站、將網站提交Google 當你的網站完成就緒後，是時候讓網路世界知道你精心打造的網站了。

WordPress後台有個可見設定，這個設定在告訴WordPress可以將這個網站公開於網路世界。

設定方法：WordPress後台>設定>一般>隱私權設定>公開。

做好萬全的準備，建議也為你的網站安裝GoogleSearchConsole，將你的Sitemap提交給Google，讓Google收錄，你的網站才有可能被搜尋引擎檢索，進而爭取排名。

如何建立與提交Sitemap：你可以請工程師為你產生Sitemap，他通常是一份副檔名為.XML、RSS、mRSS的文件。

前往GoogleSearchConsole，驗證你的網域通過後，你就可以提交這份Sitemap給Google。

詳細方法可以見Google官方文件說明。

4.網頁設計的費用 網頁設計貴在哪？ 想了解網頁設計的報價範圍，可以初步以網站本身的架構來看，花錢主要花在以下三大部分：1.伺服器（主機）租用費2.後台管理系統架設費用3.前端網頁設計費用網頁設計費用是整個專案費用中佔最大比重的。

依據每一個公司網站功能的需求、負荷流量、設計素材複雜度等，有不同複雜程度的硬體設備和投入工時，費用範圍自然會有差距很大的情形。

因此，單只看費用金額多寡不是公平的判斷方式。

網站架設成本包含哪些？ 1.人力薪資成本 理論上，一項網頁設計專案會有四個角色：網頁工程師：架設網站、設計網頁、優化SEO架構，配置1-2人左右。

UI/UX設計師：使用者介面設計、使用者體驗流程規劃、設計頁面，配置1人。

行銷人員：品牌定位到行銷策略、使用者行為研究與經營多元的行銷渠道、SEO操略與內容規劃、數位廣告投放等。

配置1-2人左右。

專案經理（PM）：專案時程及進度的主要管理者，以利網頁如期架站完成。

配置1人。

若由企業內部另立專案、每個角色配置一人人力，一個網站的專案工期以3個月來算的話，則架設一個網站的成本保守估計約需48-72萬元左右。

2.時間成本 若企業自行架站，還有以下2項時間成本需考量：招募新員工：若公司沒有足夠的在職人員，需另花時間招募。

從決議開缺到上班，需至少2個月的時間，此將延後完成架站。

多工處理效率：4位員工需同時處理既有工作，並額外分配時間執行此專案。

各專案的處理時間互相壓縮，即便員工能夠加班，仍有效率不彰的隱憂。

相對地，網頁設計公司具備完整的專案人力，專案時程控管、內外溝通能力、網頁設計經驗等等等深厚的實戰經驗和架站專業。

能快速釐清你的網站需求、提出企劃。

若發案企業的需求及訊息溝通明確，成本便能大幅減少。

網頁設計費用項目一覽表 項目說明報價範圍 風格形象設計(CIS)包含全站。

品牌的整體形象設計，包含企業色、 品牌logo、品牌視覺調性60,000-150,000 CMS內容管理系統網站後台系統，不管在哪一個頁面都方便讓非技術 人員可以上手操作。

80,000-200,000 網站規劃與分析整體網站的架構、功能規劃與分析50,000~70,000 電商策略規劃與分析針對電商網站的架構、功能規劃與分析50,000~70,000 金物流串接設定串接付費金流（信用卡、支付系統、發票系統串接等）8,000-15,000 購物車系統購物車的設計與購物流程、包含我的收藏與加入購物車15,000-40,000 會員系統存取會員名單與會員管理10,000-30,000 常見問答(FAQ)常見問答5,000-8,000 文章系統編輯器頁面、文章管理系統等。

包含部落格、最新消息10,000-20,000 商品櫥窗商品頁面與瀏覽功能、分類商品30,000-60,000 SEO結構優化設計出對SEO友善的網站架構，幫助搜尋引擎認識你的 網站、有健康體質爭取排名。

40,000-100,000 資訊安全維護資訊安全依企業需求報價 其他客製功能其他客製化功能（例如預約系統）依企業需求報價 5.網站地圖如何規劃？ 1.定位網站種類定位 架網站前先了解自己架站的目的以及網站任務，非商業性個人網站或電商網站？需要金流購物系統或問卷收集系統？需不需要部落格？這三個問題回答後你的網站基本調性也就出來了。

2.規劃網站地圖、架構 網站地圖是正式架設網站前畫出來的結構圖，網站地圖應該包含所有頁面的規劃和功能，最常見的呈現方式為樹狀圖，用這份網站地圖來與客戶溝通網站的內容與設施。

一個完整的網站地圖元素，應該包含以下元素：首頁頁面頁首頁尾選單其他連結、按鈕登入頁面部落格頁面（視企業需要）商品頁（電商網站）其他頁面（e.g.聯絡我們、預約頁面）透過製作網站地圖，網頁設計公司能夠了解你的架站需求，對於後續架站和溝通流程會清晰很多。

3.網頁設計、UIUX 網站地圖定案之後，與網頁設計公司溝通頁面設計與視覺風格，期望的介面設計，打造出符合企業品牌調性的網站。

4.優化網站SEO 為你的網站生成一個Sitemap檔，常見格式為XML檔，這個Sitemap是給Google演算法看的，讓Google爬蟲知道你的網站架構長怎樣，提升未來他時時爬取與更新你的意願。

在部落格系統，善用關鍵字策略與內容策略為你的產品和服務撰寫相關內容，讓你的內容有助於被潛在用戶搜尋到。

你可以安裝ＷordPress外掛插件來協助你的文章內容和網站提升SEO表現。

6.網頁設計公司不會跟你說的事情 1.只為了快速結案而草率架設你的網站 大部分網頁設計公司會藉由壓低成本來爭取客戶，然而相對的，不會以永續、長期的眼光來看待你的網站。

你的事業是長期發展的，你的網站也需要跟上你的事業成長腳步。

你的網站不應該是免洗版的網站，兩三年後就因為草率的架站技術需要東補西補，笨重、跟不上技術的後台管理系統也需要整個打掉重練，要清除日以繼夜的技術債，遠比新建一個網站還困難、耗費大量成本。

2.大部分網頁設計公司沒有實質SEO實戰經驗 網頁設計的發展比SEO還久遠，在Google還沒成為主流搜尋引擎前就有人會架設網站。

這20年來Google的演算法正持續飛速進步，目前的現況是，網頁設計與SEO的關係已經密不可分，要架設網站，設計出友善於SEO的結構一開始就要考量進去。

目前市面上大部分網頁設計公司專長在網頁設計，SEO公司專長搜尋引擎優化，客戶的架設網站流程變成先找網頁設計公司架好一個網站，再找SEO公司優化SEO，花上起碼2倍以上的時間和金錢成本做出一個適合現在生存的網站。

找尋一個擁有SEO執行能力的網頁設計公司能確保你減少繞遠路，讓每一分錢都花在刀口上，並贏在網路事業的起跑點。

3.如何判斷好的網頁設計公司？ 先說結論，請務必選擇同時懂得RWD網頁設計，擁有SEO專業的網頁設計公司。

如果你希望網站擁有強健的體質與良好的SEO基礎，讓你贏在Google的排名起跑點，在一開始選擇網頁設計公司時就應該將這兩點納入考量。

Google喜歡你的網站在電腦、平板、手機上擁有快速的載入速度以及良好的適應性，良好的使用體驗包含網站美感、字型字體、頁面載入速度、內容專業度、網站分類清楚、隨時更新資訊。

網頁設計公司除了為你前後台漂亮與功能兼具的網站以外，還要擁有執行SEO的實戰能力。

要能隨時跟上Google瞬息萬變的演算法調整策略，在技術與內容方面都跟上因應策略，包含簡潔的前端設計、好用而有效率的後台架構、對SEO友善的內容管理系統。

4.網頁設計公司推薦名單 威德網頁設計公司 / 公司成立16年WDD是台灣少數深具品牌思維的數位設計公司，專注於設計與策略，擅長以創意與設計整合商業策略。

RWD網頁設計、品牌設計、商業攝影、程式設計、APP設計等專業服務。

https://www.wddgroup.com/ 愛貝斯網頁設計公司/ 公司成立14年iBest網站設計，以RWD響應式網頁設計技術架設網站。

行業包括購物車網站設計、飯店民宿網站設計、企業官網設計等。

台中網站設計公司-iBest成立10多年，服務超過千位客戶，專業的網站設計讓您的形象加分，為網路行銷帶來正面效益https://www.ibest.tw/ 雲端數位網頁設計公司 / 公司成立13年雲端數位提供客製化網頁設計、網站設計、RWD網頁設計、SEO網站優化、電商網頁設計、上市櫃企業、品牌公司，指定御用網頁設計公司，打造頂尖出類拔萃國際品牌網站設計。

https://minmax.tw/ 艾格網頁設計公司 / 公司成立10年艾格創意設計的強項在於擁有優異的視覺美感，為你的品牌注入力量，規劃出具有影響力的網站設計，扎實的SEO技術基礎讓你的網站美感與功能並存，讓行銷團隊在內容行銷與SEO上如虎添翼。

https://www.eg-creative.com/ 7.ＷordPress網頁設計成功範例 WordPress是世界上最多人選擇的網頁架設系統，從小至大企業都有人選擇WordPress架站，WordPress彈性的架構可以滿足各類型網站的需求。

以下提供各類型WordPress網站成功範例。

企業官方網站成功範例 WordPress支援多元的功能與套件和搜索引擎友好性，成為企業首選工具之一。

8.網頁架站,網頁設計教學資源整理 WordPress支援多元的功能與套件和搜索引擎友好性，成為企業首選工具之一。

WordPress是什麼？6個用WordPress網頁架站的強大優勢WordPress.org和WordPress.com有什麼不一樣？WordPress的優勢-SEO搜尋引擎最佳化、功能性、靈活的設計與編排 了解什麼是RWD響應式網頁設計 響應式網頁(RWD)對於SEO的影響Google怎麼看RWD網頁設計？行動搜尋排名提升必看！ 優化網站SEO與行銷 SEO是什麼?新手也可以輕鬆實踐的7個SEO執行策略什麼是網站體驗核心指標-三大指標LCP、FID、CLS具體優化方法攻打SEO搜尋排名前的關鍵，你應該先認識Google這三件事 相關文章 YoastSEO和RankMath我該怎麼選擇? 當你好不容易將WordPress網站的主機和個人網域完成申請，接著就是要思考該選用那些外掛來提升自己網站的SEO排名。

如果你正因為市場上琳瑯滿 11個優化WordPressSEO的技巧 WordPress是什麼？WordPress是全世界最廣為採用的CMS（ContentManagementSystem，內容管理系統 如何設計專業的個人品牌網站，設計師沒告訴你的事!? 我們曾介紹過，帶領架站新手解讀企業網站的網頁設計：網頁設計範本-新手如何向網頁範本學習？讀懂企業用網站的成功元素；今天我們來說說建立個人網站，在找尋喜 Prev上一篇YoastSEO和RankMath我該怎麼選擇? 分類 RWD網頁設計(7) WooCommerce電商整合(3) WordPressSEO(13) 網站規劃(19) 網路行銷(7) 網頁設計概念(15) 近期文章 網頁設計、網站架設前必備的8個基本觀念 YoastSEO和RankMath我該怎麼選擇? 11個優化WordPressSEO的技巧 如何設計專業的個人品牌網站，設計師沒告訴你的事!? 標籤RWD SEO 網頁設計 網頁設計範例 分享社群 公司介紹 MenuToggle 關於我們 WordPress優勢 網頁設計案例 MenuToggle 品牌形象官網 B2B網站規劃 電商購物網站 RWD網頁設計 RWD網頁設計 MenuToggle 定義-響應式網頁設計（RWD）是什麼意思？ RWD網頁設計優缺點有哪些？您對RWD網頁瞭解有多少 響應式網頁(RWD)對於SEO的影響 Google怎麼看RWD網頁設計？行動搜尋排名提升必看！ 服務項目 MenuToggle 服務流程 SEO服務 部落格 MenuToggle WordPressSEO 網站規劃 網頁設計概念 RWD網頁設計 網路行銷 網頁設計費用 疫情最新專案New