昨天好學的Jack負責的網站終于上線了，特此開貼記錄下這一路走過來的經曆，給大家指導個方向。有些坑我踩進去了，大家可以避免踩坑。從九月下旬到十一月下旬，前後差不多兩個月時間，說長不長說短也不短。長的話是因為商量網站整體風格花了很多時間，比如首頁以什麼樣形式呈現，關鍵詞調研，整個網站版面設計，涉及到了一些代碼的修改，所以比較費時間。短的話因為實際上傳圖片産品文案的很快，包括域名遷移，綁定谷歌分析GA, Facebook Pixel，後期就是慢慢做on page seo 站内優化了。關于on page seo 站内優化和關鍵詞調研的可以看我之前的文章：

On Page SEO 單頁面優化,你需要知道這8點

關鍵詞不夠用？試試這幾個工具 本篇文章一共4385字，13張照片，1張思維導圖，閱讀完需要13分鐘。

一 選擇合适的運營級網站系統

建站前我們需要選擇哪個網站系統，目前國内市面上比較流行的建站系統有這麼幾個：Wordpress, Shopify, Magento。Wordpress主要适合搭建個人博客，搭建B2B網站，對代碼有一些基礎要求，要求不是很高，可以去W3schools去學些基礎代碼。Shopify主要适合搭建中小型B2C在線商城網站，公司産品SKU幾十上百個那種的。對代碼沒什麼要求，基本0代碼要求，不過你要是實現某些定制功能，還是需要懂點代碼知識。Magento 适合搭建大型B2C在線商城網站，公司産品SKU上千個以上那種。Magento的功能比較多了，對代碼要求很高，一般需要配備2個技術維護網站後台。PS: 運營還是需要懂些基礎代碼知識，不需要會編寫代碼，起碼能看懂，簡單的修改一些，很多功能在HTML代碼裡操作，會很簡單。代碼對于運營而言就像語法對于學英語的人一樣，懂得越多越好，多多益善。

因為公司對這個網站定位是品牌網站，到了後期肯定要開通在線商城的，這次好學的Jack 選擇的是Shopify這個平台。有的朋友會問為什麼不用WordPress，因為Shopify相對簡單點，相對省時間點，老闆對網站交期也是比較趕的。當然後期選擇了Shopify某個主題，發現這個主題有點坑，很多自定義功能實現不了，這個時候Jack果斷選擇了外包，找了個之前懂技術的朋友，他對shopify後台操作是相當的溜！所以後期交流的很順暢，和這位技術朋友來回修改了至少7-8次，因為有記錄的word 文檔需求有7-8個，其他的聊天截圖還沒考慮在内。所以如果大家後期建站遇到自己解決不了的問題，不妨考慮外包，一來節約時間，二來交流提高自己能力。

因為Jack來之前網站是用Wix搭建的，用過Wix的朋友都知道，Wix有這麼幾個坑：1. 不是自适應網站，桌面端和移動端是分開的，意味着需要搞兩套系統，圖片尺寸，網站位置排版都要搞兩套，如果隻是個人博客或者單頁面網站其實也還好。但是如果需要經常上傳産品，博客，banner圖片，對于運營和設計來說都很費時間和精力，因為同樣的事情做重複做兩遍。

2. 打開網速很慢，翻牆才能打開，前端和前端都慢，前端慢很多客戶反饋打開網站很慢，進不去，懷疑你們公司是不是出了什麼問題。很多新客戶因為等不急就關掉了網站，一來直接導緻影響SEO數據下降，畢竟網站停留時間，網站跳出率，浏覽頁面很影響SEO排名的。二來，知道導緻轉化減少，因為沒有流量進來，這是個硬傷！

3. 國内使用的人相對較少，所以不好和同行交流。現在做網站很多公司選擇Wordpress 和 Shopify了，你選擇用Wix系統搭建網站，很難和同行交流，也就很難進步。有人會說可以自己去谷歌YouTube看博客視頻自學啊，那樣子不是不可以，就是效率低了，特别是你的問題很緊急，你去問群友，群友們都沒遇到過，也很難給你建議，你自己經驗又不足，但是問題馬上要解決，這個時候矛盾就比較突出了。

說了Wix的幾個缺點，我們現在來看下Wix的優點：

1. 價格便宜，一年套餐150美金，差不多1000RMB，Shopify一年套餐接近300美金，是Wix的兩倍了。2. 拖拽方便，像做PPT一樣。

所以這次網站選擇用Shopify搭建，那麼Wix的缺點就是Shopify的優點了，shopify主要有以下3個優點：1. Shopify是支持自适應的，也就是桌面端和移動端是一起的，不需要編輯兩次，可以節約很多時間，特别是當你産品SKU很多的時候，不需要同一個産品上傳兩次。

2. 打開網速快，相對于Wix，shopify網速很快了，特别是後台，不需要等後台一直在加載，等後台加載那段時間，整個人都要崩潰。3. 國内使用的人很多，交流起來方便，主要shopify還搞了個中文論壇，把很多疑問翻譯成中文了，節約了很多我們找資料時間。

二 網站頁面規劃

選好了建站平台之後，我們需要進入建站的第二個要素：網站的布局和設計。網站的布局和設計主要考慮這四個因素，基礎規劃，首頁規劃，列表頁規劃，詳情頁規劃。

網站的布局和設計--基礎規劃

基礎規劃主要包括logo，産品方向，色彩風格，字體等。logo我們之前就已經有了，所以這次沒花什麼時間在logo上面，由于我們logo和Google的logo顔色很接近，所以後面的一些banner和圖片借鑒了Google的logo設計。産品方向這塊，我們主要做單一種類産品，沒做多種類産品，所以這一塊也沒怎麼花時間，如果你們公司産品種類很多的話，要做ABCD幾類産品，Jack建議你們多花點時間在産品方向上面。色彩風格主要是确定網站傳遞什麼樣的品牌形象和個性，這一塊我們讨論了好幾次，花費了很多時間，因為我們主要做蘋果手機配件，查看了很多國内外同行網站，保守估計起碼有30個國内外同行網站。最終決定借鑒蘋果公司官網的灰色和黑色那個色彩，最終讓設計重新設計主頁banner，網站詳情頁banner也是主要是灰黑色的。字體這塊，我們也是借鑒了好多種，最終選擇了比較合适的字體，大家可以根據自己公司的情況選擇适合自己公司網站的字體，字體建議不超過3種。

網站的布局和設計--首頁規劃

首頁規劃主要包括導航條，核心産品，價值信息，底部導航這四塊。導航條我們用了這幾個部分：Home, About, Products, Blog, Videos, Contact。導航條主要為了解決網站訪客所在的位置，方便用戶了解我們公司品牌，展示公司信息，方便客戶搜索産品和服務。Home 主頁是我們花的時間最多的版面，主頁5張大banner前後修改了十幾二十次吧，最後才弄出想要的style。我們首頁從上到下具體頁面就是這七個部分：5張大banner，最新産品，公司介紹，代理商招聘，産品結構展示，博客。核心産品我們目前主要是iPhone X系列産品，這個産品放在了首頁5張大banner下面，客戶進網站，第一眼就可以看到我們的核心産品，方便詢價。所以這個産品的詳情頁做的時候花了很多時間，文案介紹，參數介紹，詳情頁大圖等也是修改了七八次。後期會考慮做些内鍊，鍊接到這個核心産品上面。

價值信息我們放了真實客戶的評價，考慮到首頁網速加載問題，放在了About us頁面。首頁傳遞給客戶的信息就是我們公司做高端定制産品，可以提供OEM/ODM服務，首頁的代理商招聘，就是我們想要傳達給客戶的，讓客戶成為我們代理商，這是個比較核心的Call To Action.底部導航我們放了公司的社媒鍊接，客戶可以直接從網站到達公司的各大社媒頻道，可以快速了解我們的最新動态，因為有些即時信息是适合放在社媒的，不太合适放在官網的。底部導航增加了公司的品牌介紹，進一步強化了代理商合作按鈕，也放了公司重點産品，方便客戶從底部跳轉到産品詳情頁。

網站的布局和設計--列表頁規劃

列表頁我們采用了2級目錄，這個也是參考了很多同行的，發現客戶都比較懶，所以盡量把所有産品型号全部羅列出來，客戶喜歡哪個型号點擊那個型号就好了。由于Jack公司産品SKU不多，做的又是單一産品，所以列表頁規劃暫時介紹到這了。不同行業目錄參考标準肯定也不一樣，這裡大家根據自己公司和行業特點，針對性做目錄。

網站的布局和設計--詳情頁規劃

詳情頁這塊我們還是花了很多心思的，目前展示效果還是挺不錯的，詳情頁我們主要做了展示規劃和賣點規劃。展示規劃第一次考慮的就是圖片的尺寸了，因為桌面端和移動端圖片展示尺寸是不一樣大的，所以我們用了主題推薦的1920*750尺寸，在上傳圖片的時候選擇了original尺寸，因為不選擇original尺寸，系統默認是480*480，這樣子顯得很不自然。考慮到網頁加載速度問題，我們沒有做Gif動圖，就是簡單的圖文 參數表格，後期可能會放YouTube視屏鍊接，做到圖片文字表格視屏四位一體。賣點規劃，借鑒了很多國内外同行的，公司的業務根據客戶那邊的反饋，提煉了很多針對客戶痛點的賣點，比之前的賣點要好一些，後期看到同行或者客戶好的賣點，會在借鑒過來，賣點總結是個持續性學習的過程。

三 站内内容和SEO優化

網站的布局和設計敲定之後，我們就進入下一部分，站内内容和SEO優化了。這一塊主要有三個部分：内容原創，圖片優化，站内SEO優化。 站内内容和SEO優化--内容原創 内容原創顧名思義就是提供給客戶我們自己原創的有價值的内容，内容最重要作用是給客戶提供價值，可以借鑒同行和客戶的内容，再結合自己公司的産品特點進行加工修改，這種的僞原創也是可以的。也可以把框架搭建好，外包給老外寫手，後面我們自己在修改優化。 站内内容和SEO優化--圖片優化 圖片優化主要包含：圖片的大小，圖片Alt标簽，圖片命名規劃。一般圖片尺寸越大加載速度越慢，到了後期網站圖片多了，網速會更慢。如果公司有設計和美工，務必讓他們把照片給我們的時候壓縮下。如果公司沒有設計和美工，我們可以使用Tinypng這個工具壓縮圖片，這個工具一次性最多壓縮20張照片，每張照片尺寸不超過5M都可以。大部分圖片可以壓縮到之前大小的80%，加入之前照片是100Kb, 用這個工具壓縮後就變成20Kb了。如果網站1000個照片體積都可以壓縮80%，那麼網速會提高很多。

圖片Alt标簽允許你提供文字描述給圖片（通俗點就是在Html代碼給圖片命名），這樣子做有3個好處：好處1. 當你圖片加載不出來的時候，alt文本會出現替代圖片，假如你圖片alt命名為rugged tablet, 圖片沒加載出來，網頁會顯示rugged tablet這個，假如你圖片直接從相機複制到網頁，會顯示2849，2849是你相機第2849張照片，你的受衆很難理解2849是什麼意思。好處2. 幫助視力障礙的人閱讀，視力障礙的人會使用輔助程序例如屏幕閱讀器将alt屬性的可讀文字全部讀出，讓用戶以聆聽理解影像内容。在維基百科中，影像指令都是作為鍊接存在所以都會輸入alt屬性。好處3.幫助提高圖片在Google Image 的排名，這樣子用戶用谷歌圖片搜索rugged tablet時候，我們排名靠前，也會增加網站流量和排名。

圖片命名規劃，我們需要針對不同的型号産品建立不同的産品文件夾，然後先去搜集不同型号的關鍵詞，再把這些關鍵詞和這些産品命名。産品命名的好處可以方便自己找圖片，也方便接收我們圖片的同事和客戶，他那邊不打開圖片的情況下，可以看到關鍵詞，大概知道是什麼産品。 站内内容和SEO優化--站内SEO優化 站内SEO優化主要就是On Page SEO單頁面優化了，包含這八個地方

1、站内标題、描述、H1标簽

2、關鍵詞的密度、LSI關鍵詞以及TF-IDF關鍵詞的植入

3、頁面的文案

4、站内的内鍊以及導出外鍊

5、301、404的異常鍊接檢測

6、搜索者意圖分析

7、單頁面的速度測試

8、鍊接建設策略關于On Page SEO單頁面SEO優化，大家可以看我之前寫的：

On Page SEO 單頁面優化,你需要知道這8點

以上這些就是如何用shopify搭建營銷型網站的全部步驟了，最後我們再複盤一次怎麼用shopify搭建營銷型網站。主要是先選擇一個合适的運營系統，WordPress, Shopify, Magento, The choice is yours。第二個就是确定網站的布局和設計了，這一塊比較費時間，需要好好構思。第三個就是做站内優化了。貼心的Jack為大家準備好了思維導圖，老規矩需要思維導圖PDF的私信我。

（來源：好學的Jack）

以上内容屬作者個人觀點，不代表雨果網立場！本文經原作者授權轉載，轉載需經原作者授權同意。

上雨果網搜索“跨境資料庫”,領取歐美/東南亞各國市場商機、各大平台熱銷品報告、跨境電商營銷白皮書！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!