百度搜索資源平臺(tái)前幾天又公布了落地頁(yè)規(guī)范5.0,還是有很多人不是很明白,容易犯一些錯(cuò)誤。今天十二君這里說(shuō)下自己的經(jīng)驗(yàn)與心得,主要寫(xiě)一些大家常忽略的地方。
首先我們先看下名詞解釋
1. 主體內(nèi)容:
可以認(rèn)為是頁(yè)面最想表達(dá)的內(nèi)容總和。對(duì)于內(nèi)容詳情頁(yè)來(lái)說(shuō),主體內(nèi)容指從標(biāo)題開(kāi)始至正文內(nèi)容結(jié)束,翻頁(yè)區(qū)域也被視為主體內(nèi)容,文章后的評(píng)論、分享、推薦等不視為主體內(nèi)容。
例:下圖矩形框截圖區(qū)域即為內(nèi)容主體區(qū)域
2. 首屏
用戶(hù)點(diǎn)擊搜索結(jié)果后進(jìn)入移動(dòng)頁(yè)面,不滑動(dòng)屏幕即看到的所有內(nèi)容,稱(chēng)為首屏。
例:
3. 一屏:
用戶(hù)滑動(dòng)屏幕至主體內(nèi)容展現(xiàn)結(jié)束之前,在頁(yè)面任意位置停留時(shí)看到的所有內(nèi)容,稱(chēng)為一屏。
4. 移動(dòng)適配:
是指PC站點(diǎn)在移動(dòng)設(shè)備上能正常展現(xiàn)的手段,保證用戶(hù)不需要縮小、放大、左右滑動(dòng)即可看清全部字體。
5. 列表頁(yè):
指信息聚合展示的頁(yè)面,包括H5站點(diǎn)及小程序首頁(yè)、圖片列表頁(yè)、問(wèn)答列表頁(yè)、文章列表頁(yè)、黃頁(yè)信息列表頁(yè)等。
6. 詳情頁(yè):
指信息全部展開(kāi)顯示的頁(yè)面,包含文章內(nèi)容頁(yè)、問(wèn)答詳情頁(yè)、商品詳情頁(yè)等。
7. 廣告:
指為了某種特定的需要,通過(guò)一定形式的媒體,公開(kāi)且廣泛地向公眾傳遞信息的宣傳手段;本白皮書(shū)中的廣告泛指所有在落地頁(yè)中出現(xiàn)的面向用戶(hù)的傳播行為。需要注意的是,對(duì)網(wǎng)站自有產(chǎn)品的推廣也視作廣告。
例:
這一條注意事項(xiàng):廣告不僅僅局限于圖片,相關(guān)產(chǎn)品、相關(guān)閱讀等也算廣告位,甚至上一篇、下一篇也屬于廣告位的一種。
名詞解釋完了,下面我們說(shuō)下注意事項(xiàng),以下不僅僅局限于移動(dòng)端,其實(shí)很多地方PC端是一樣適用的。
1. 首屏加載速度小于1s
這個(gè)注意下首屏內(nèi)容,非整個(gè)頁(yè)面的速度。
2. 首屏主體內(nèi)容占比要高于50%
例
解釋說(shuō)明:①上圖為例子,也就是剛打開(kāi)這個(gè)頁(yè)面的時(shí)候,黃色矩形框的面積要大于整個(gè)紅色矩形框的二分之一。這意味著我們?cè)谠O(shè)計(jì)的時(shí)候需要盡可能地banner做矮一點(diǎn)或者直接沒(méi)有。因?yàn)樗闶灼林黧w內(nèi)容的時(shí)候是從當(dāng)前主體頁(yè)面的標(biāo)題開(kāi)始計(jì)算,banner圖區(qū)域是不算的。
3. 展開(kāi)全文功能:
展開(kāi)全文的設(shè)置必須具有文字標(biāo)示,且功能實(shí)際可用;展開(kāi)全文功能最多只能出現(xiàn)一次,但不可出現(xiàn)在落地頁(yè)的首屏內(nèi)容中(列表頁(yè)除外);展開(kāi)全文與廣告等引導(dǎo)性?xún)?nèi)容要設(shè)置一定距離間隔,避免干擾用戶(hù)操作。
例:
解讀:按照說(shuō)明,展開(kāi)全文功能最多只能出現(xiàn)一次,但是不能出現(xiàn)在落地頁(yè)首屏內(nèi)容中,意味著我們需要注意兩個(gè)點(diǎn):1.內(nèi)容區(qū)域我們的產(chǎn)品介紹/文章字?jǐn)?shù)不可過(guò)少。正常來(lái)說(shuō)手機(jī)一屏文字大概要300字左右,這里十二屆建議大寫(xiě)每篇內(nèi)容寫(xiě)800-1500字。2.若是有展開(kāi)全文功能,需要帶展開(kāi)全文這4個(gè)字,另外要距離其他點(diǎn)擊按鈕距離較遠(yuǎn),防止用戶(hù)觸碰。
正確案例如下
4. 字號(hào)、段間距、行間距、圖片等排版
百度搜索資源平臺(tái)要求:落地頁(yè)的字體大小及文本間距的選擇,不可明顯過(guò)大過(guò)小,需適合手機(jī)用戶(hù)閱讀。頁(yè)面主體內(nèi)容的字號(hào)應(yīng)不小于10pt,字體與行高的比率應(yīng)大于1.4。
這里有些小朋友可能不會(huì)計(jì)算,這里十二君給大家說(shuō)個(gè)一般的范圍
字號(hào)建議12-16px、行間距建議2或3、段間距建議15-20、圖片建議統(tǒng)一居中處理或居右或者居左。圖片有一個(gè)統(tǒng)一對(duì)齊方向即可,要是加水印只能加在邊角不影響看圖片整體感覺(jué)的角落。另外圖片的比例建議3:2-1:1之間,這樣可以具有高出圖率。至于尺寸建議低于300px*200px的高寬,大小不超過(guò)2M。
5. pc與移動(dòng)端的適配
如果PC與移動(dòng)端是分開(kāi)做的,非響應(yīng)式設(shè)計(jì)的網(wǎng)站,我們除了百度搜索資源平臺(tái)寫(xiě)適配規(guī)則以外,還需要加以下代碼
5.1. 全站head部分請(qǐng)?zhí)砑右韵麓a
Pc端
注意事項(xiàng):需要分別獲取PC端與移動(dòng)端的url,
以首頁(yè)為例
首頁(yè)應(yīng)該加如下代碼
其余內(nèi)頁(yè),需要PC與移動(dòng)端對(duì)應(yīng)。這是為了讓移動(dòng)端更好的繼承PC的排名,讓百度更好的識(shí)別這倆頁(yè)面是對(duì)應(yīng)的。
5.2移動(dòng)端
說(shuō)明:alternate這個(gè)標(biāo)簽是在PC端加了,告訴百度PC端頁(yè)面對(duì)應(yīng)移動(dòng)端的頁(yè)面。而canonical標(biāo)簽具有兩個(gè)作用,一是當(dāng)網(wǎng)頁(yè)存在多個(gè)url并存時(shí),此標(biāo)簽是說(shuō)明以哪個(gè)url為準(zhǔn),常見(jiàn)的是與301配合使用,效果為佳。這個(gè)標(biāo)簽第二個(gè)作用就是移動(dòng)端頁(yè)面添加后,告訴百度這個(gè)移動(dòng)端與PC端哪個(gè)頁(yè)面進(jìn)行對(duì)應(yīng)。
6. 廣告
上面我們所說(shuō)了網(wǎng)頁(yè)廣告的范圍與定義,這里說(shuō)下注意事項(xiàng)
6.1主體內(nèi)容區(qū)內(nèi)禁止插入廣告
比如聯(lián)系方式、微信二維碼、水?。蓸O小面積)、廣告圖輪播等均不可插入。
6.2廣告位置
廣告位置要與主體內(nèi)容區(qū)明顯區(qū)分。
什么叫明顯區(qū)分,當(dāng)人瀏覽一個(gè)頁(yè)面時(shí),一眼就可以看出來(lái),這個(gè)頁(yè)面哪個(gè)區(qū)域是介紹自己想看的內(nèi)容,若是移動(dòng)端瀏覽,也不會(huì)發(fā)現(xiàn)誤觸碰的情況。
6.3廣告面積
我們前面說(shuō)到了,首屏主體內(nèi)容區(qū)需要占比首屏整體面積的50%以上,
當(dāng)我們往下滑看內(nèi)容的時(shí)候,在主體內(nèi)容區(qū)高度未結(jié)束之前,要時(shí)刻大于一屏內(nèi)容的三分之二。需要注意的是這一塊占比,移動(dòng)端很容易完成。而PC端我們?cè)O(shè)計(jì)的時(shí)候就需要小心翼翼,不僅僅是高度注意,寬度也應(yīng)該注意。比如下圖位置面積都是需要盡可能小一點(diǎn),或者直接木有。這個(gè)十二君建議美觀(guān)度第一的情況下,盡可能靠攏哦。
7. 按鈕位置與說(shuō)明(手機(jī)端底部菜單按鈕,內(nèi)頁(yè)理解咨詢(xún)按鈕,頭部導(dǎo)航菜單等都算)
很多網(wǎng)站移動(dòng)端都會(huì)底部帶菜單與與內(nèi)頁(yè)有按鈕,功能設(shè)置要簡(jiǎn)單易用,符合用戶(hù)操作習(xí)慣,同一功能在同一頁(yè)面只能出現(xiàn)一次,不可重復(fù)設(shè)置。具體要求如下:
7.1. 功能位置必須固定,不可抖動(dòng)或閃爍,與頁(yè)面其他內(nèi)容模塊(如廣告)要有一定間距,不可重疊,避免用戶(hù)誤操作;
7.2.同一頁(yè)面上功能按鈕面積不可超過(guò)一屏面積的10%,針對(duì)移動(dòng)端來(lái)說(shuō),這塊要是底部菜單的話(huà),高度控制在10%以?xún)?nèi),面積就控制住了
7.3功能必須實(shí)際可用,操作友好便捷,且實(shí)際功能與文字描述需完全一致,不可出現(xiàn)誘導(dǎo)信息或引導(dǎo)跳轉(zhuǎn)第三方頁(yè)面;
7.4以上三條是百度搜索資源平臺(tái)加上自己的解讀,這里十二君再加一條,按鈕請(qǐng)不要出現(xiàn)遮擋任何內(nèi)容或者是容易觸碰到其他鏈接的地方。
8. 頁(yè)面的文本內(nèi)容應(yīng)支持長(zhǎng)按可復(fù)制,鏈接可點(diǎn)擊。
這點(diǎn)很多朋友害怕同行抄襲都愛(ài)禁止復(fù)制或者是禁止整個(gè)鼠標(biāo)右鍵,這里建議取消哦。并且當(dāng)前頁(yè)面內(nèi)盡量減少空鏈接。
9. 滿(mǎn)足標(biāo)題需求
很多朋友并不知道什么叫做滿(mǎn)足用戶(hù)需求,這里十二君給大家簡(jiǎn)單粗暴的解釋一下,滿(mǎn)足以下三點(diǎn)即可
9.1 符合百度搜索落地頁(yè)規(guī)范的排版與頁(yè)面結(jié)構(gòu)
9.2 通順的話(huà)語(yǔ),良好嚴(yán)謹(jǐn)?shù)倪壿媮?lái)介紹內(nèi)容
9.3 滿(mǎn)足標(biāo)題需求,比如當(dāng)你寫(xiě)一篇:影響網(wǎng)站報(bào)價(jià)的因素。那么你的文章內(nèi)容中就需要有影響因素1、影響2、影響3等,又為什么影響了來(lái)佐證,這就叫滿(mǎn)足了標(biāo)題需求。
9.4 滿(mǎn)足了以上三點(diǎn)后,就約等于滿(mǎn)足了基本的用戶(hù)搜索需求。
最后:今天的內(nèi)容就到這里,以上內(nèi)容僅供參考