我們今天要向大家介紹的是電商網頁的搭建和優化。
本文長度為5729字， 預估閱讀時間10分鐘。
從網站的頂層導航到交易內容， 在打造電商頁面時， 會需要很多的考慮。
在今天的白板星期五， Rand用他個人最喜歡的一個例子， 一步步詳細地給你講述如何創建一個真正精湛的電商網頁。
視頻文本
所以我今天要做的是讓我們瞭解這個經典的電商頁面的元素， 談談一些我認為Bellroy可以改進的地方， 然後在最後， 通過這個過程來改善你自己的電商網頁。
一個經典電商頁面的元素
讓我們從第一項開始， 很不幸的是， 很多人都不談論但對於電商流程和電商頁面來說卻是至關重要的， 那就是…
1 頂部導航
儘管頁面頂部的導航所需要做的事情很少， 但它必須幫助用戶：
瞭解並知道他們在網站結構中的位置， 尤其當你有一個較為複雜的網站時。 在Bellroy的案例中， 他們不需要強調任何東西，
我想瞭解關於品牌本身的資訊。 如果有用戶第一次流覽該網站， 他們通常是您對品牌首次曝光的切入點， 這是電商網頁常見的情況。 讓我們回想一下， 從我們所知道的關於轉化率優化的知識中， 要在用戶第一次流覽品牌或者網站頁面時轉化使用者是不太常見的， 但是你可以給用戶留下一個較好的第一印象， 而這其中的部分內容就是你的頂部導航所需要做的。 所以它應該幫助用戶認知品牌，
你需要知道從哪裡可以進入網站。 在哪裡可以搜索？如果這是我第一次或第二次流覽， 我嘗試想要瞭解更多關於公司的資訊， 我希望能夠簡單地找到類似“關於我們”， 又或者我想能夠瞭解更多關於他們的產品或他們是做什麼的， 瞭解更多的實用手冊， 瞭解更多關於他們的產品系列， 並且瞭解他們能夠提供給我的其他東西。
我也想要在購物車周圍有這種簡單的導航， 尤其是對於電商的重複訪客和購物不止一件商品的客戶。 實際上， 我並不喜歡Bellroy如何最小化導航， 但你需要確保搜索欄也要在這裡面。 搜索實際上是一個功能。 對於電商頁面平均大約10%到12%的訪問者將使用搜索來作為他們的首要導航功能。
我想要有關購物過程的資訊。 在Bellroy的案例中， 我喜歡他們所做的。 他們在每一頁巡覽列內都寫有“美國範圍內免郵”， 我想， 這顯然對他們來說肯定是他們一直以來都在關注的關鍵問題之一。 毫無疑問， 他們已經做了一些A/B測試和優化， 以確保把“嗨， 你知道嗎？放在每個人面前， 因為它不會傷害用戶感知並且能夠有助於提高轉化率。 ”
2 核心產品資訊
核心產品資訊往往是上述圖片的關鍵部分。 在關於Bellroy的案例中， 核心產品資訊非常簡約。 我們只是在談論這款錢包的圖片， 然後你可以點擊圖片的左邊或右邊，
視覺效果將服務於什麼呢？在這個案例中，我認為他們做的很好，他們向使用者全面地傳達了產品本身的定位。所以，Bellroy顯然就是極簡主義。他們傳承著工藝。他們是小小的利基商店。他們沒有要去做10000件東西。他們專注於錢包，並且他們嘗試將這個定位變得更加清晰。他們也試圖使產品的品質成為其中的重要部分，嘗試把產品本身的焦點聚焦到“纖薄”。當你進入頁面時，你真的可以很明顯的看到命名規範，同樣也包括拍攝的照片本身，都在向你展示與其他的錢包相比，這款錢包有多麼的苗條。他們取相同數量的卡片，將它們放入兩款不同的錢包，並向你展示他們的厚度，Bellroy非常、非常地纖薄。因此，這就是定位的意義所在。
在這裡，我們可能需要視頻或動畫。但我要說的是，當它真正有意義的時候，只是核心內容的一部分。Zappos就是一個很好的例子。Zappos在網上宣傳推廣的每一款鞋和鞋子品牌都有他們的視頻。他們見到了轉化率的巨大提升，因為用戶對於鞋子有很多問題，關於鞋子穿著行走和移動，與某些衣服搭配起來如何？讓別人給你解釋細節，正如我給你在視頻中講解電商頁面一樣，結果證明對他們的轉化率有很大的影響。你可能想要測試這個，但視頻和動畫內容可能在下面。我們將在視頻的的末端討論如何在底部的照片和流程中存放更多的視頻。
命名規範。我們要價格，我們想要核心結構的細節。我喜歡Bellroy，他們所展示的核心內容非常的簡潔，僅僅只有圖片、商品名以及價格。
但是我想讓你在這裡做的是：
幫助用戶瞭解什麼是可用的。快速示例，你可以選擇顏色。這是你唯一能用這個錢包做的事。沒有不同的尺寸可選，也沒有不同的製成材料可選。這裡僅僅只有顏色可以挑選。選擇顏色，結帳，順便再強調一下，免郵。
我們正努力消除障礙，我們正努力消除可能出現的任何問題，並且我們希望消除任何未知的挫折。舉個例子，我將在這裡做的事情之一，但Bellroy沒做，我將基於IP位址進行地理定位。所以我會看看訪問這個頁面的訪問者的IP位址，我會說，“我很確定你現在位於華盛頓州。因此，我就知道我所需要收取的銷售稅額。”或者說，“Bellroy不在華盛頓州。我不需要向您收取銷售稅。”所以我可能會在這裡說一下“銷售稅”，如果你知道，然後通過下拉式功能表選擇提前預填好的華盛頓或郵遞區號，那麼展示的銷售稅為“$0。”這樣做就是預測。就像已經說了這樣，“哦，很好。我知道我將要點擊的下一頁面是叫我詢問關於銷售稅，又或者是我進入我的信用卡後的頁面。”你知道嗎，提前回答這個問題很好。現在，Bellroy也許已經測試過這一點，他們發現它同樣也不能轉化，但是我猜測有那些資訊在的話，它可能會更好地轉化。
4 產品功能的詳細描述
這就是經常出現在電商頁面、產品頁面上大部分內容。在這種情況下，使用者得到了功能列表，包括尺寸、它是如何做成的、它是由什麼材料製造的以及它能夠容納的內容等等。
我在這裡想要做的一些事情是：
我想説明使用者瞭解這款產品有什麼值得期待的。我不想要高回報。特別是如果我已經提供免郵服務，我肯定不想要高回報。我希望使用者可以對這款產品滿意，並且知道他們將會得到什麼。
我想説明他們確定產品是否符合他們的需求，是否符合他們正努力完成的事情，是否符合他們想要解決的問題。
我想引導他們快速地回答一些常見問題。所以，如果我知道很多訪問這個頁面的人都有這樣的情況，“哦，天啊，你知道，我不知道他們快遞的過程是什麼樣的？需要多長的時間？因為這次旅行我需要一個錢包，我想要把這款錢包放進我的褲子口袋裡，所以我不要厚厚的錢包，這也正是導致我需要在Google裡搜索纖薄錢包，並引導到這個頁面的原因？”快遞，這是一個很重要的部分，你已經回答了這個問題，或者正如他們所問的那樣，這真的很重要。在用戶開始對結帳過程感到恐慌之前，預先回答給出他們想要的答案。
我同樣也喜歡他們回答那些還沒有被問到的問題。“Okay，錢包的尺寸是80毫米*95毫米。”“但是我不知道一毫米是多少。我不能在我的頭腦中保留這樣的資訊。”但是你會發現，他們在頁面上有一個連結“與其他比較。”如果你點擊這個連結，它將向你展示這款錢包和別人提供的其他款錢包的全方面比較。太棒了，在我提出問題之前，你已經在回答問題了。
5 大量的可靠內容
我們前面談論的關於視頻或者動畫或者其他的一些內容都屬於功能部分，或者僅僅只是結帳部分，但是還沒有達到我們所要求的重要程度，這就是你可以把內容放上去的地方。可以做成折疊，並向下滾動展示。我還沒有見到有電商頁面提供了使用者真正關心的事情的細節。我看到過有電商頁面提供了大量的內容，但卻沒有使用者關心，尤其是當內容影響到頁面的載入速度時，在移動終端上將會影響你的轉化率和你在Google中的排名，因為網站速度是一個真正的問題。但是可靠內容應該：
讓用戶覺得舒服並構建信任。所以，如果當我向下滾動頁面到這裡，我所看見的是更多關於這款錢包是怎麼製造的，人們是如何使用它的相關圖片。他們將其巧妙地命名為透明化方法，我確信它能夠帶來很多的點擊。用透明化方法構建一款錢包，展示為什麼皮革如此纖細，為什麼錢包如此輕便，為什麼它能使用那麼長時間，所有諸如此類的事情。
電商頁面的搜尋引擎優化
電商頁面的搜尋引擎優化只是基於幾個非常簡單的事情。我們搜尋引擎優化的元素是關鍵字、內容、參與度、連結和在某些情況下的新鮮度。你瞭解了這5項，你也就基本上掌握了搜尋引擎優化。
關鍵字，當使用者搜索你的產品時，使用者所稱呼的產品與你所提供產品是相同的嗎？如果答案是否，你還有機會來提升。即使你想使用品牌名稱，我建議將其與所有人都常用的產品名稱相結合。因此，如果這是一款纖薄錢包，如果歷史上Bellroy已經將其稱呼為纖薄錢包，我會強烈推薦給他們的，“嘿，用戶正在尋找一款纖薄錢包。我們怎麼找到合併這些東西的方法呢？”
內容是關於這個頁面的內容，Google正在尋找解決搜索者問題的內容，即搜索者的問題。這意味著要做好這些事情，並且必須要以Google能夠識別的格式處理。視頻可以，視頻的錄音也應該可以，圖片也可以，詳細的描述也應該可以。Google需要那樣的文本內容。
參與度，這將來自於訪問這個頁面的使用者，而不是點擊後退按鈕並返回Google，搜索其他的東西，並點擊你競爭對手的連結。它將來自於使用者點擊結帳按鈕或在網站上流覽更深層級的內容，來自通過在網站上與這個頁面的交互並且沒有跳出。這是你的工作和責任，這些東西都能幫助你。
來自媒體的連結。它可以來自博客。它可以來自一些高品質的目錄，在目錄連結構建關係要非常小心。它可以來自友情連結。它可以來自供應商。它可以來自於產品的粉絲。它可以來自評論。諸如此類的東西。還有那些給你見證的人，你可以向他們索要連結。這些連結，如果它們來自不同的領域，並且它們含有很好的錨文本，文本內容具體為實際產品的名稱，它們將特別指向這個頁面，也將極大地幫助你提升在競爭中的排名。
新鮮度。在某些行業和某些情況下，當你知道受眾對最新和最好的資訊有大量的需求時，你應該盡可能頻繁地使用新的資訊內容更新這個頁面，這些新的資訊是與你的受眾最契合和最相關的。
你做完SEO以及上述打造電商頁面這些事情，那麼你將擁有網上最好的電商頁面。
好的，謝謝大家加入我們。希望在下次白板星期五再次見到您。保重。
作者 Rand Fishkin：
Rand Fishkin是Moz的聯合創始人，也是團隊的個人貢獻者。喜歡寫博客、旅行，喜歡市場和技術方面的知識。
譯者簡介
陳明豔，最老90後！也是球場上傳說中的靈活小胖子！現就職於中國移動12582基地，運營支撐部產品汪一枚，也兼職著運營喵工作，主要涉及政企/農村資訊化、農村電商、資料分析等領域，熱衷於產品。
我們最好確保我們正在溝通的是關鍵的內容。視覺效果將服務於什麼呢？在這個案例中，我認為他們做的很好，他們向使用者全面地傳達了產品本身的定位。所以，Bellroy顯然就是極簡主義。他們傳承著工藝。他們是小小的利基商店。他們沒有要去做10000件東西。他們專注於錢包，並且他們嘗試將這個定位變得更加清晰。他們也試圖使產品的品質成為其中的重要部分，嘗試把產品本身的焦點聚焦到“纖薄”。當你進入頁面時，你真的可以很明顯的看到命名規範，同樣也包括拍攝的照片本身，都在向你展示與其他的錢包相比，這款錢包有多麼的苗條。他們取相同數量的卡片，將它們放入兩款不同的錢包，並向你展示他們的厚度，Bellroy非常、非常地纖薄。因此，這就是定位的意義所在。
在這裡，我們可能需要視頻或動畫。但我要說的是，當它真正有意義的時候，只是核心內容的一部分。Zappos就是一個很好的例子。Zappos在網上宣傳推廣的每一款鞋和鞋子品牌都有他們的視頻。他們見到了轉化率的巨大提升，因為用戶對於鞋子有很多問題，關於鞋子穿著行走和移動，與某些衣服搭配起來如何？讓別人給你解釋細節，正如我給你在視頻中講解電商頁面一樣，結果證明對他們的轉化率有很大的影響。你可能想要測試這個，但視頻和動畫內容可能在下面。我們將在視頻的的末端討論如何在底部的照片和流程中存放更多的視頻。
命名規範。我們要價格，我們想要核心結構的細節。我喜歡Bellroy，他們所展示的核心內容非常的簡潔，僅僅只有圖片、商品名以及價格。
但是我想讓你在這裡做的是：
幫助用戶瞭解什麼是可用的。快速示例，你可以選擇顏色。這是你唯一能用這個錢包做的事。沒有不同的尺寸可選，也沒有不同的製成材料可選。這裡僅僅只有顏色可以挑選。選擇顏色，結帳，順便再強調一下，免郵。
我們正努力消除障礙，我們正努力消除可能出現的任何問題，並且我們希望消除任何未知的挫折。舉個例子，我將在這裡做的事情之一，但Bellroy沒做，我將基於IP位址進行地理定位。所以我會看看訪問這個頁面的訪問者的IP位址，我會說，“我很確定你現在位於華盛頓州。因此，我就知道我所需要收取的銷售稅額。”或者說，“Bellroy不在華盛頓州。我不需要向您收取銷售稅。”所以我可能會在這裡說一下“銷售稅”，如果你知道，然後通過下拉式功能表選擇提前預填好的華盛頓或郵遞區號，那麼展示的銷售稅為“$0。”這樣做就是預測。就像已經說了這樣，“哦，很好。我知道我將要點擊的下一頁面是叫我詢問關於銷售稅，又或者是我進入我的信用卡後的頁面。”你知道嗎，提前回答這個問題很好。現在，Bellroy也許已經測試過這一點，他們發現它同樣也不能轉化，但是我猜測有那些資訊在的話，它可能會更好地轉化。
4 產品功能的詳細描述
這就是經常出現在電商頁面、產品頁面上大部分內容。在這種情況下，使用者得到了功能列表，包括尺寸、它是如何做成的、它是由什麼材料製造的以及它能夠容納的內容等等。
我在這裡想要做的一些事情是：
我想説明使用者瞭解這款產品有什麼值得期待的。我不想要高回報。特別是如果我已經提供免郵服務，我肯定不想要高回報。我希望使用者可以對這款產品滿意，並且知道他們將會得到什麼。
我想説明他們確定產品是否符合他們的需求，是否符合他們正努力完成的事情，是否符合他們想要解決的問題。
我想引導他們快速地回答一些常見問題。所以，如果我知道很多訪問這個頁面的人都有這樣的情況，“哦，天啊，你知道，我不知道他們快遞的過程是什麼樣的？需要多長的時間？因為這次旅行我需要一個錢包，我想要把這款錢包放進我的褲子口袋裡，所以我不要厚厚的錢包，這也正是導致我需要在Google裡搜索纖薄錢包，並引導到這個頁面的原因？”快遞，這是一個很重要的部分，你已經回答了這個問題，或者正如他們所問的那樣，這真的很重要。在用戶開始對結帳過程感到恐慌之前，預先回答給出他們想要的答案。
我同樣也喜歡他們回答那些還沒有被問到的問題。“Okay，錢包的尺寸是80毫米*95毫米。”“但是我不知道一毫米是多少。我不能在我的頭腦中保留這樣的資訊。”但是你會發現，他們在頁面上有一個連結“與其他比較。”如果你點擊這個連結，它將向你展示這款錢包和別人提供的其他款錢包的全方面比較。太棒了，在我提出問題之前，你已經在回答問題了。
5 大量的可靠內容
我們前面談論的關於視頻或者動畫或者其他的一些內容都屬於功能部分，或者僅僅只是結帳部分，但是還沒有達到我們所要求的重要程度，這就是你可以把內容放上去的地方。可以做成折疊，並向下滾動展示。我還沒有見到有電商頁面提供了使用者真正關心的事情的細節。我看到過有電商頁面提供了大量的內容，但卻沒有使用者關心，尤其是當內容影響到頁面的載入速度時，在移動終端上將會影響你的轉化率和你在Google中的排名，因為網站速度是一個真正的問題。但是可靠內容應該：
讓用戶覺得舒服並構建信任。所以，如果當我向下滾動頁面到這裡，我所看見的是更多關於這款錢包是怎麼製造的，人們是如何使用它的相關圖片。他們將其巧妙地命名為透明化方法，我確信它能夠帶來很多的點擊。用透明化方法構建一款錢包，展示為什麼皮革如此纖細，為什麼錢包如此輕便，為什麼它能使用那麼長時間，所有諸如此類的事情。
電商頁面的搜尋引擎優化
電商頁面的搜尋引擎優化只是基於幾個非常簡單的事情。我們搜尋引擎優化的元素是關鍵字、內容、參與度、連結和在某些情況下的新鮮度。你瞭解了這5項，你也就基本上掌握了搜尋引擎優化。
關鍵字，當使用者搜索你的產品時，使用者所稱呼的產品與你所提供產品是相同的嗎？如果答案是否，你還有機會來提升。即使你想使用品牌名稱，我建議將其與所有人都常用的產品名稱相結合。因此，如果這是一款纖薄錢包，如果歷史上Bellroy已經將其稱呼為纖薄錢包，我會強烈推薦給他們的，“嘿，用戶正在尋找一款纖薄錢包。我們怎麼找到合併這些東西的方法呢？”
內容是關於這個頁面的內容，Google正在尋找解決搜索者問題的內容，即搜索者的問題。這意味著要做好這些事情，並且必須要以Google能夠識別的格式處理。視頻可以，視頻的錄音也應該可以，圖片也可以，詳細的描述也應該可以。Google需要那樣的文本內容。
參與度，這將來自於訪問這個頁面的使用者，而不是點擊後退按鈕並返回Google，搜索其他的東西，並點擊你競爭對手的連結。它將來自於使用者點擊結帳按鈕或在網站上流覽更深層級的內容，來自通過在網站上與這個頁面的交互並且沒有跳出。這是你的工作和責任，這些東西都能幫助你。
來自媒體的連結。它可以來自博客。它可以來自一些高品質的目錄，在目錄連結構建關係要非常小心。它可以來自友情連結。它可以來自供應商。它可以來自於產品的粉絲。它可以來自評論。諸如此類的東西。還有那些給你見證的人，你可以向他們索要連結。這些連結，如果它們來自不同的領域，並且它們含有很好的錨文本，文本內容具體為實際產品的名稱，它們將特別指向這個頁面，也將極大地幫助你提升在競爭中的排名。
新鮮度。在某些行業和某些情況下，當你知道受眾對最新和最好的資訊有大量的需求時，你應該盡可能頻繁地使用新的資訊內容更新這個頁面，這些新的資訊是與你的受眾最契合和最相關的。
你做完SEO以及上述打造電商頁面這些事情，那麼你將擁有網上最好的電商頁面。
好的，謝謝大家加入我們。希望在下次白板星期五再次見到您。保重。
作者 Rand Fishkin：
Rand Fishkin是Moz的聯合創始人，也是團隊的個人貢獻者。喜歡寫博客、旅行，喜歡市場和技術方面的知識。
譯者簡介
陳明豔，最老90後！也是球場上傳說中的靈活小胖子！現就職於中國移動12582基地，運營支撐部產品汪一枚，也兼職著運營喵工作，主要涉及政企/農村資訊化、農村電商、資料分析等領域，熱衷於產品。