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

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

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

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

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

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

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

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

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

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

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

為了讓主頁給用戶留下良好的第一印象，我們需要注意以下幾個點：

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

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

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

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

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

移動端適配

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

圖片來源：Hitwise

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

主頁移動端SEO優(yōu)化難點

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

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

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

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

主頁移動端SEO最佳實踐

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

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

圖片來源：Amazon官網(wǎng)

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

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

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

但是除了良好的瀏覽和購物體驗，搜索引擎還在意以下幾個方面：

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

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

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

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

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

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

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

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

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

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

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

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

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

首頁的元描述 (Meta Description)

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

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

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

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

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

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

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

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

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

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

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

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

頁面內(nèi)容因為不同行業(yè)、不同網(wǎng)站情況不同，George就不在這里對所有情況一概而論了。

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

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

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

因為谷歌目前對文本的理解程度遠(yuǎn)超圖片，它的爬蟲主要是通過h標(biāo)題以及HTML文字內(nèi)容來理解頁面主題的。即使是圖片，一般也要加Alt屬性來幫助爬蟲理解圖片。

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

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

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

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

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

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

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

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

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

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

查重工具推薦：

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

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

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

但是主頁大量使用圖片也會有些SEO問題：

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

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

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

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

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

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

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

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

為圖片添加文本信息

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

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

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

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

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

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

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

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

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

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

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

圖片來源：Google Tag Manager操作面板

頁腳（Footer）

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

• 網(wǎng)站主要頁面的鏈接，比如產(chǎn)品分類頁、服務(wù)頁面、關(guān)于我們（About Us）、為什么選擇我們（Why Choose Us）等等。

• 認(rèn)證標(biāo)志。比如MacAfee認(rèn)證（網(wǎng)絡(luò)安全認(rèn)證）、BBB認(rèn)證（企業(yè)信譽(yù)認(rèn)證）、Paypal認(rèn)證（支持Paypal支付）等等?？傊@些認(rèn)證會增加消費者的信任度，讓消費者在獨立站放心購物。

• 聯(lián)系方式。可以直接展示聯(lián)系電話或者地址，或者直接添加聯(lián)系我們（Contact Us）頁面的鏈接。

• 公司名或者公司logo

• 隱私政策（Privacy Policy）、服務(wù)條款(Terms of Service)、郵寄和退換貨（Shipping & Returns）、幫助用戶導(dǎo)航的html站點地圖

• 社媒鏈接(Soical Media)

• 郵件訂閱(Email Subscription)輸入框

Graceeleyea網(wǎng)站是一個比較好的頁腳例子，它包含上述的所有元素：

圖片來源：graceeleyae官網(wǎng)

總結(jié)

我們的獨立站主頁SEO終極指南終于講完了。如果你從頭至尾認(rèn)真閱讀了這些內(nèi)容，應(yīng)該會對主頁的SEO優(yōu)化有一個全面的了解。

總之主頁優(yōu)化和別的重要頁面優(yōu)化一樣，需要讓用戶和搜索引擎都覺得你的主頁好。把這些原理牢記于心，在建站早期就規(guī)劃和布局好主頁內(nèi)容，會讓后期SEO效果如虎添翼。Smiles.

（來源：George Han）

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