獨(dú)立站首頁(yè)優(yōu)化與布局指南

主頁(yè)是網(wǎng)站最重要的頁(yè)面，對(duì)網(wǎng)站整體SEO效果有著重要的作用。對(duì)跨境電商網(wǎng)站而言，即使你的網(wǎng)站不是用首頁(yè)去獲得排名和流量的，也要做好首頁(yè)的SEO優(yōu)化。George想在這篇文章中講講跨境電商網(wǎng)站的主頁(yè)應(yīng)該怎么優(yōu)化。

主頁(yè)優(yōu)化的重要性

對(duì)電商網(wǎng)站而言，即使你的首頁(yè)不是廣告的著陸頁(yè)(Landing Page)，首頁(yè)也是用戶最常訪問(wèn)的頁(yè)面，往往會(huì)獲得最多的外鏈和權(quán)重。

• 別的網(wǎng)站在資源頁(yè)、博客頁(yè)插入外鏈(Outbound Links)時(shí)很多時(shí)候會(huì)選擇首頁(yè)
• 即使用戶首次訪問(wèn)的是產(chǎn)品分類頁(yè)或者產(chǎn)品詳情頁(yè)，一般也會(huì)訪問(wèn)首頁(yè)來(lái)確認(rèn)網(wǎng)站是否值得信任
• 首頁(yè)的權(quán)重(PA)最高，可以用來(lái)競(jìng)爭(zhēng)一些難度大、搜索量高的行業(yè)大詞
• 當(dāng)用戶搜品牌名進(jìn)行調(diào)研時(shí)，谷歌往往會(huì)在SERP上展示電商網(wǎng)站的首頁(yè)
• 老客戶經(jīng)常會(huì)訪問(wèn)網(wǎng)站首頁(yè)來(lái)查看網(wǎng)站是否有新產(chǎn)品上架、是否有打折活動(dòng)

顯然，首頁(yè)是一個(gè)電商網(wǎng)站的門面，在建站初期，咱們就要做好首頁(yè)的SEO優(yōu)化，為網(wǎng)站流量和轉(zhuǎn)換打下良好的基礎(chǔ)。

如果是對(duì)SEO有所了解的小伙伴應(yīng)該都知道，做好谷歌SEO需要兩個(gè)條件：1、讓用戶滿意；2、讓搜索引擎滿意。

一般來(lái)說(shuō)讓用戶滿意就能讓谷歌滿意，畢竟谷歌的目標(biāo)就是通過(guò)良好的體驗(yàn)增加用戶粘性；但是我們還是要注意一些站內(nèi)優(yōu)化（On-page SEO）的點(diǎn)，好讓谷歌爬蟲(chóng)更好地明白我們?yōu)橛脩趔w驗(yàn)做了哪些努力。

針對(duì)良好的用戶體驗(yàn)，主頁(yè)應(yīng)該如何優(yōu)化？

當(dāng)一個(gè)用戶來(lái)到我們的首頁(yè)，我們應(yīng)該用最快的速度提供用戶關(guān)于公司信息、產(chǎn)品、服務(wù)等重要信息，第一時(shí)間讓用戶了解網(wǎng)站的主題，以及你希望用戶接下來(lái)做什么（Call to Action)。

只有這樣才能給用戶留下良好的第一印象，增加用戶的停留時(shí)長(zhǎng)(Dwell Time)，降低跳出率(Bounce Rate)。而這兩個(gè)指標(biāo)也是重要的用戶體驗(yàn)指標(biāo)（User-Experience Metrics)。要知道，較長(zhǎng)時(shí)間內(nèi)的用戶體驗(yàn)指標(biāo)是可以影響頁(yè)面排名的。

為了讓主頁(yè)給用戶留下良好的第一印象，我們需要注意以下幾個(gè)點(diǎn)：

1. 良好的首屏內(nèi)容優(yōu)化（Above-the-fold Content）
2. 移動(dòng)端適配

首屏內(nèi)容優(yōu)化

用戶體驗(yàn)良好的電商網(wǎng)站首屏需要有以下元素：

• 網(wǎng)站Logo
• 結(jié)構(gòu)清晰、便于用戶導(dǎo)航的主菜單 （好的主菜單是根據(jù)網(wǎng)站邏輯結(jié)構(gòu)以及關(guān)鍵詞調(diào)研決定的）
• 網(wǎng)站提供的服務(wù)或者促銷活動(dòng)
• 大字標(biāo)題
• 搜索框（便于迅速導(dǎo)航產(chǎn)品和服務(wù)）
• 用戶行為號(hào)召按鈕（就是Call-to-action Button,引導(dǎo)用戶到轉(zhuǎn)化頁(yè)面）
• 購(gòu)物車和用戶賬號(hào)登錄的鏈接 (一般在左上角，對(duì)電商網(wǎng)站來(lái)說(shuō)是很重要的)

拿國(guó)外著名的按需打印服務(wù)公司Printful舉例：

圖片來(lái)源：Printful官網(wǎng)

移動(dòng)端適配

根據(jù)研究統(tǒng)計(jì)，進(jìn)入移動(dòng)時(shí)代以后，如今超過(guò)50%的谷歌搜索都來(lái)自于移動(dòng)端。

圖片來(lái)源：Hitwise

鑒于移動(dòng)搜索的大趨勢(shì)，谷歌引進(jìn)了移動(dòng)端優(yōu)先索引(Mobile-first Index)的算法。所以我們?cè)谶M(jìn)行主頁(yè)SEO優(yōu)化時(shí)，應(yīng)當(dāng)多關(guān)注移動(dòng)端適配，從而帶給用戶更好的購(gòu)物體驗(yàn)。

主頁(yè)移動(dòng)端SEO優(yōu)化難點(diǎn)

• 比起PC端，移動(dòng)端的內(nèi)容展示空間會(huì)更小、更緊湊
• 手機(jī)用戶一般使用移動(dòng)數(shù)據(jù)，比起寬帶，網(wǎng)速更加不穩(wěn)定，對(duì)頁(yè)面加載速度優(yōu)化要求更高
• 手機(jī)用戶可能是在旅途、出差中瀏覽網(wǎng)頁(yè)的，往往需要在較短短時(shí)間內(nèi)獲得關(guān)鍵信息

總之，在PC端，我們的主頁(yè)總有充足的空間展示公司信息、提供的服務(wù)和產(chǎn)品，獲取用戶信任后再引導(dǎo)他們到產(chǎn)品頁(yè)進(jìn)行轉(zhuǎn)化。

主頁(yè)移動(dòng)端優(yōu)化的重要性

但是在移動(dòng)端，我們往往沒(méi)有那么多空間和時(shí)間吸引用戶。因?yàn)槭謾C(jī)的屏幕小，同樣的內(nèi)容，在手機(jī)上我們可能需要更多屏數(shù)才能完整展示出來(lái)；比起拿著筆記本辦公的用戶，手機(jī)用戶可能沒(méi)有太多耐心，更容易跳出。

主頁(yè)移動(dòng)端SEO最佳實(shí)踐

一般而言，電商網(wǎng)站主頁(yè)的移動(dòng)端優(yōu)化需要注意：

• 用戶行為號(hào)召（Call-to-action）需在屏幕中突出位置
• 頂部主菜單文字簡(jiǎn)短清晰；或者使用左滑菜單（Hamburger Menu）
• 首屏展示站內(nèi)搜索欄、購(gòu)物車、用戶登陸等提升購(gòu)物體驗(yàn)的元素

做好移動(dòng)端適配，我們可以參考谷歌官方的移動(dòng)頁(yè)面設(shè)計(jì)指南。

針對(duì)搜索引擎，主頁(yè)應(yīng)該如何優(yōu)化？

之前已經(jīng)說(shuō)了，SEO的工作其實(shí)就是為了同時(shí)讓用戶和搜索引擎都滿意。在上述內(nèi)容中，George已經(jīng)寫(xiě)明了如何提升主頁(yè)的用戶體驗(yàn)，降低跳出率，提升停留時(shí)長(zhǎng)。

但是除了良好的瀏覽和購(gòu)物體驗(yàn)，搜索引擎還在意以下幾個(gè)方面：

• 網(wǎng)站安全證書(shū)（SSL）
• 首頁(yè)的標(biāo)題標(biāo)簽（Title Tag）
• 首頁(yè)的元描述(Meta Description)
• 首頁(yè)的H1標(biāo)題 (H1 Title)
• 首頁(yè)內(nèi)容 (Content)
• 圖片優(yōu)化 （Image SEO）
• 結(jié)構(gòu)化數(shù)據(jù)（Structured Data）
• 首頁(yè)頁(yè)腳 (Footer)

網(wǎng)站安全證書(shū)（SSL）

安全套接子層（SSL）也就是我們常說(shuō)的網(wǎng)站安全證書(shū)，已經(jīng)成為所有電商網(wǎng)站的標(biāo)配了。

有了SSL，用戶名、訂單信息等隱私信息在客戶端和服務(wù)器之間的傳輸會(huì)被加密，黑客只能看到一串亂碼。這樣才能最大程度保證用戶信息安全。

除了保護(hù)客戶信息，有https標(biāo)志的網(wǎng)站還有以下好處：

1. 安全證書(shū)是個(gè)很小的排名因素，也就是說(shuō)，有https的網(wǎng)站會(huì)比http網(wǎng)站有一定排名優(yōu)勢(shì)。
2. 建立用戶信任。當(dāng)我們看到頂部地址欄里出現(xiàn)一個(gè)灰色的小鎖??，心里往往會(huì)踏實(shí)很多。否則用戶可能還沒(méi)瀏覽就被嚇跑了。。

首頁(yè)的標(biāo)題標(biāo)簽（Title Tag）

傳統(tǒng)的TDK優(yōu)化也許已經(jīng)過(guò)時(shí)了，但是標(biāo)題標(biāo)簽至今都是重要的排名因素。谷歌很大程度上會(huì)通過(guò)你的標(biāo)題標(biāo)簽來(lái)理解頁(yè)面的主題。此外，標(biāo)題標(biāo)簽也會(huì)在SERP結(jié)果頁(yè)上展示出來(lái)，是我們網(wǎng)站門面。

圖片來(lái)源：谷歌搜索結(jié)果

標(biāo)題標(biāo)簽優(yōu)化要點(diǎn)：

• Title Tag應(yīng)該在60個(gè)英文字符內(nèi)，否則標(biāo)題在搜索結(jié)果頁(yè)的展示就不完整了，可能會(huì)降低點(diǎn)擊率。
• 標(biāo)題應(yīng)該包含我們的品牌名
• 將我們的服務(wù)/產(chǎn)品通過(guò)關(guān)鍵字+描述的方式加入標(biāo)題中
• 不要關(guān)鍵詞堆砌，一般針對(duì)一個(gè)關(guān)鍵詞即可，主頁(yè)一般針對(duì)行業(yè)大詞

圖片來(lái)源：谷歌搜索結(jié)果

以著名的SEO工具Ahrefs為例，它的首頁(yè)標(biāo)題包括了品牌名Ahrefs,關(guān)鍵詞SEO tools,以及吸引人的描述”to grow your search traffic”。

當(dāng)然針對(duì)電商網(wǎng)站，我們首頁(yè)的標(biāo)題標(biāo)簽完全可以加一些網(wǎng)站的亮點(diǎn)。比如包郵啊，免費(fèi)退換啊，打多少多少折啊，全額退款保證之類客戶在意的點(diǎn)。

比如下面的FashionTIY網(wǎng)站70%和Cheap都是很有吸引力的標(biāo)題描述：

圖片來(lái)源：谷歌搜索結(jié)果

首頁(yè)的元描述 (Meta Description)

元描述(Meta Description)就是我們常說(shuō)的頁(yè)面描述(Page Description)了。

在主頁(yè)內(nèi)我們是看不到它的，但是在谷歌SERP結(jié)果頁(yè)上，我們可以讀到這段簡(jiǎn)短的描述。并且谷歌往往會(huì)把用戶搜索的關(guān)鍵詞加粗展示在里面：

圖片來(lái)源：谷歌搜索結(jié)果

值得注意的是，我們自己撰寫(xiě)的元描述，谷歌不一定會(huì)采納。根據(jù)用戶不同的搜索詞，谷歌會(huì)自己抓取頁(yè)面中與搜索意圖更為相關(guān)的文字內(nèi)容。

如果你的元描述過(guò)短（少于130英文字符）或者過(guò)長(zhǎng)（大于155字符），谷歌也可能會(huì)自己抓取頁(yè)面內(nèi)容，提供用戶更好的搜索體驗(yàn)。

另外，和標(biāo)題標(biāo)簽不一樣，頁(yè)面描述不是直接的排名因素。但是吸引人的電商網(wǎng)站描述更容易抓住用戶的眼球，增加點(diǎn)擊率（CTR），不是嗎？
Wish首頁(yè)元描述用了很多吸引客戶的字眼 圖片來(lái)源：谷歌搜索結(jié)果

首頁(yè)的H1標(biāo)題 (H1 Title)

和標(biāo)題標(biāo)題一樣(Title Tag),首頁(yè)的H1標(biāo)題也是一個(gè)重要的排名因素，因此也應(yīng)當(dāng)針對(duì)關(guān)鍵詞進(jìn)行SEO優(yōu)化。

首頁(yè)的H1一般展示在頁(yè)面頂部。很多主題默認(rèn)會(huì)將標(biāo)題標(biāo)簽當(dāng)作H1。當(dāng)然，如果你能自定義首頁(yè)的H1，那么我們也可以在H1里布局與Title Tag主關(guān)鍵詞相關(guān)的關(guān)鍵詞。

比如膠囊灌注機(jī)公司LFA，頁(yè)面標(biāo)題標(biāo)簽用了關(guān)鍵詞capsule filling machine, 在h1里就使用了capsule filler，而這兩個(gè)詞都是膠囊灌注機(jī)的英文變體：

圖片來(lái)源：LFA Machine 官網(wǎng)

另外，主頁(yè)H標(biāo)題的布局應(yīng)當(dāng)有層級(jí)結(jié)構(gòu)，不能亂套，一個(gè)頁(yè)面有且只有一個(gè)h1, h1底下是h2，h2底下是h3,h3下是h4。不能h1下面是h4。否則不利于搜索引擎理解頁(yè)面的邏輯結(jié)構(gòu)。

首頁(yè)內(nèi)容(Content)

主頁(yè)的頁(yè)面優(yōu)化，除去基礎(chǔ)的三件套：頁(yè)面標(biāo)題、h1標(biāo)題、頁(yè)面描述，接下來(lái)便是頁(yè)面內(nèi)容了。

頁(yè)面內(nèi)容因?yàn)椴煌袠I(yè)、不同網(wǎng)站情況不同，George就不在這里對(duì)所有情況一概而論了。

適當(dāng)添加文字內(nèi)容，重要信息避免以圖片形式展示

針對(duì)電商網(wǎng)站主頁(yè)的內(nèi)容優(yōu)化，George想指出一個(gè)常見(jiàn)的誤區(qū): 很多電商網(wǎng)站主頁(yè)會(huì)使用大量圖片，幾乎沒(méi)有HTML文字描述；或者重要文字信息，比如call-to-action，包含在圖片中，沒(méi)有用HTML和圖片分離。

一個(gè)全是圖片，幾乎沒(méi)有文字內(nèi)容，甚至連鏈接都是圖片而不是錨文本的主頁(yè)，是對(duì)SEO不友好的。

因?yàn)楣雀枘壳皩?duì)文本的理解程度遠(yuǎn)超圖片，它的爬蟲(chóng)主要是通過(guò)h標(biāo)題以及HTML文字內(nèi)容來(lái)理解頁(yè)面主題的。即使是圖片，一般也要加Alt屬性來(lái)幫助爬蟲(chóng)理解圖片。

根據(jù)George的經(jīng)驗(yàn)，上述誤區(qū)在快消品的服飾/配飾/首飾行業(yè)比較常見(jiàn)。因?yàn)檫@個(gè)行業(yè)日新月異，產(chǎn)品以及促銷活動(dòng)的更新非常頻繁，客戶挑選產(chǎn)品時(shí)很大程度上依賴圖片的視覺(jué)效果。

但是為了讓你的首頁(yè)搜索引擎可見(jiàn)，還是要將關(guān)鍵信息以文本形式展現(xiàn)。圖片的視覺(jué)效果帶來(lái)轉(zhuǎn)化，最好還是采用圖片和文字結(jié)合的形式。一個(gè)完全是圖片的主頁(yè)，搜索引擎是無(wú)法理解主頁(yè)內(nèi)容的。

想了解原因和常見(jiàn)案例解析的小伙伴可以讀一下George在雨果網(wǎng)上發(fā)布這篇文章：電商網(wǎng)站首頁(yè)SEO誤區(qū)：圖片代替文字

適當(dāng)添加信息類內(nèi)容，增加排名機(jī)會(huì)

如果在主頁(yè)/產(chǎn)品分類頁(yè)/產(chǎn)品詳情頁(yè)中插入一些有價(jià)值的信息，是有可能獲得相關(guān)關(guān)鍵詞排名的。這可以讓一個(gè)頁(yè)面排盡可能多的關(guān)鍵詞，并獲得更多流量。

以IFA Capsule Filler為例，我們搜types of capsule filling machines這個(gè)信息詞搜索膠囊機(jī)的種類時(shí)，谷歌直接以富文本摘要形式展示了其產(chǎn)品分類頁(yè)的文本信息：

圖片來(lái)源：谷歌搜索結(jié)果

打開(kāi)頁(yè)面后發(fā)現(xiàn)這段內(nèi)容巧妙地插在了頁(yè)面內(nèi)容中間，作為產(chǎn)品參數(shù)和產(chǎn)品介紹之間的過(guò)渡：

圖片來(lái)源：LFA Machine官網(wǎng)

避免內(nèi)容重復(fù)（Duplicate Content）

內(nèi)容重復(fù)肯定是SEO不友好的，無(wú)論是用戶還是谷歌都不想看到太多的重復(fù)內(nèi)容。站內(nèi)重復(fù)在一定比例內(nèi)是允許的（一般在30%以內(nèi)），畢竟如果采用SKU鋪貨的形式，不同色號(hào)的同類產(chǎn)品描述是差不多的。。。

但是不同站之間的內(nèi)容重復(fù)就有可能被谷歌認(rèn)定為抄襲了。所以我們?cè)趦?yōu)化頁(yè)面時(shí)，對(duì)產(chǎn)品的描述還是得注意。即使你和別人賣一樣的產(chǎn)品，提供差不多的服務(wù)，咱們的產(chǎn)品和服務(wù)描述還是要注意原創(chuàng)性。

查重工具推薦：

• 站內(nèi)重復(fù)：Siteliner 
• 站外重復(fù)：Copyleaks 

圖片優(yōu)化（Image SEO）

對(duì)電商網(wǎng)站來(lái)說(shuō)，產(chǎn)品圖片非常重要。好的圖片可以吸引潛在用戶點(diǎn)擊和購(gòu)買，也可以讓你的網(wǎng)站看上去更有趣，內(nèi)容更豐富。

但是主頁(yè)大量使用圖片也會(huì)有些SEO問(wèn)題：

• 過(guò)大的圖片會(huì)增加頁(yè)面加載的時(shí)間
• 比起文本，圖片的內(nèi)容難以被搜索引擎理解

選擇合適的圖片格式，壓縮體積

針對(duì)圖片影響加載速度的問(wèn)題，我們先應(yīng)當(dāng)選擇合適的圖片格式。

對(duì)于首屏的Banner，我們可以使用png格式保證圖片的高品質(zhì)。對(duì)于底下的產(chǎn)品圖，可以在不影響圖片質(zhì)量的情況下使用jpeg（視情況而定）。因?yàn)橥瑯拥膱D片jpg格式體積會(huì)比png小。

其實(shí)除了jpeg和png，還有一種非常合適的格式webp。它不僅支持無(wú)損壓縮，同等圖片質(zhì)量前提下，webp在體積上還比jpeg小25%-35%。

選擇合適的圖片格式后可以去在線圖片壓縮網(wǎng)站壓縮。一般png和webp支持無(wú)損壓縮，jpeg是有損壓縮。

圖片來(lái)源：Tinypng 官網(wǎng)

另外如果在主頁(yè)上圖片只顯示300×300 px，那我們上傳的圖片最好也調(diào)整到這個(gè)尺寸。如果顯示的只有300×300 px，但是你上傳的是1024x1024px，那就會(huì)增加加載時(shí)間了。

另外，如果網(wǎng)站是WordPress CMS系統(tǒng)，我們還可以使用Smush插件，那么在圖片上傳過(guò)程中還會(huì)有去除圖片的不必要信息，進(jìn)一步壓縮體積。

為圖片添加文本信息

前面也說(shuō)了，比起文本，圖片往往是難以被爬蟲(chóng)理解的，因此我們需要為圖片添加文字屬性：

• 為圖片添加簡(jiǎn)短的、描述性的文件名（File name）
• 為圖片添加Alt屬性，用Alt屬性描述圖片，幫助谷歌理解圖片
• 為圖片添加簡(jiǎn)短的、描述性的字幕（Caption）
• 為圖片添加結(jié)構(gòu)化數(shù)據(jù) (Structured Data)

在添加這些文字屬性時(shí)，可以適當(dāng)添加關(guān)鍵詞，但是不要關(guān)鍵詞堆砌。關(guān)于具體的圖片SEO細(xì)節(jié)，George會(huì)在圖片優(yōu)化終極指南里詳細(xì)解釋。

結(jié)構(gòu)化數(shù)據(jù)（Structured Data）

為了讓搜索引擎爬蟲(chóng)更好地理解主頁(yè)，為主頁(yè)添加結(jié)構(gòu)化數(shù)據(jù)也是非常重要的。

當(dāng)然了，即使沒(méi)有結(jié)構(gòu)化數(shù)據(jù)，搜索引擎爬蟲(chóng)也能夠根據(jù)頁(yè)面的標(biāo)題，內(nèi)容結(jié)構(gòu)和其他的站內(nèi)SEO元素了解你的內(nèi)容。

但是結(jié)構(gòu)化數(shù)據(jù)能讓爬蟲(chóng)更好地理解內(nèi)容的上下文，理解哪些是公司名、網(wǎng)站logo、網(wǎng)站url，哪些是公司地址和聯(lián)系方式。

具體的主頁(yè)結(jié)構(gòu)化數(shù)據(jù)可以參考schema.org的organization schema，可以復(fù)制里面的JSON-LD代碼。

咱們也可以用technicalseo.com的結(jié)構(gòu)化數(shù)據(jù)生成工具生成。生成后可以用谷歌官方的富文本結(jié)果檢測(cè)工具檢測(cè)是否正確。

下面是一個(gè)Organization的結(jié)構(gòu)化數(shù)據(jù)例子：

添加結(jié)構(gòu)化數(shù)據(jù)的話，WordPress網(wǎng)站可以用Yoast插件自動(dòng)生成；非WordPress網(wǎng)站需要用谷歌代碼管理器（Google Tag Manager）添加。具體操作方法，George會(huì)在結(jié)構(gòu)化數(shù)據(jù)終極指南里講解。

圖片來(lái)源：Google Tag Manager操作面板

頁(yè)腳（Footer）

Ok,主頁(yè)的最底部是頁(yè)腳了，和頂部主菜單（Main Menu)一樣，頁(yè)腳不僅出現(xiàn)在首頁(yè)，在網(wǎng)站的每一頁(yè)都會(huì)出現(xiàn)。頁(yè)腳的鏈接爬蟲(chóng)和用戶都經(jīng)常會(huì)使用，所以頁(yè)腳的內(nèi)容也是非常重要的。那么頁(yè)腳可以添加哪些有用的元素呢：

（來(lái)源：George Han）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果跨境立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?