在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，“首屏”是指用戶在不滾動(dòng)的情況下第一眼看到的網(wǎng)站部分。盡管這個(gè)概念多年來(lái)不斷擴(kuò)展，但許多人仍然認(rèn)為您在網(wǎng)頁(yè)頂部顯示的信息會(huì)影響用戶體驗(yàn)、跳出率和SEO。
“首屏”是什么意思
在出版界，“above the fold”曾經(jīng)指的是報(bào)紙上的故事。出版商將重要且引人注目的故事放在頁(yè)面頂部，這樣讀者就不必展開(kāi)報(bào)紙閱讀更多內(nèi)容。對(duì)于網(wǎng)絡(luò)內(nèi)容，原則保持不變。當(dāng)有人登陸您的網(wǎng)站時(shí)，首屏內(nèi)容是他們第一次登陸頁(yè)面時(shí)看到的內(nèi)容，無(wú)需向下滾動(dòng)。
作為一般經(jīng)驗(yàn)法則，好的首屏內(nèi)容應(yīng)該包括指向您網(wǎng)站上其他頁(yè)面的內(nèi)部鏈接，并且應(yīng)該進(jìn)行SEO優(yōu)化。使用粗體圖像和純色H1標(biāo)題告知用戶頁(yè)面內(nèi)容。在下面的例子中，這個(gè)宜家頁(yè)面顯然是關(guān)于貨架的。我們可以看到粗體標(biāo)題文本、簡(jiǎn)要說(shuō)明和進(jìn)一步閱讀的鏈接。如果您不是在尋找貨架，您會(huì)立即知道這不是適合您的頁(yè)面。
為什么首屏內(nèi)容很重要
首屏內(nèi)容是您的用戶在網(wǎng)頁(yè)加載時(shí)首先看到的內(nèi)容。如果您可以向用戶顯示他們所在的頁(yè)面與其搜索意圖相匹配，他們就不太可能返回SERP并點(diǎn)擊您競(jìng)爭(zhēng)對(duì)手的鏈接。如果您正在為某個(gè)活動(dòng)投放橫幅廣告，則首屏是觀看的主要位置。用戶向下滾動(dòng)時(shí)不太可能注意到廣告。
移動(dòng)端和PC端的注意事項(xiàng)
隨著移動(dòng)設(shè)備使用的增加，“首屏”標(biāo)準(zhǔn)發(fā)生了變化。如今的設(shè)備大小和分辨率各不相同，因此對(duì)于任何網(wǎng)站都沒(méi)有“一刀切”的折疊方式。在處理首屏內(nèi)容時(shí)使用最佳實(shí)踐仍然是一個(gè)好主意，這樣您就可以在每臺(tái)設(shè)備上保持良好的頁(yè)面加載速度。由于谷歌的Core Web Vitals更新，移動(dòng)加載速度是排名的重要因素。在構(gòu)建網(wǎng)頁(yè)時(shí)使用響應(yīng)式設(shè)計(jì)。確保您的內(nèi)容、布局和圖像適合大多數(shù)設(shè)備屏幕，并在設(shè)計(jì)首屏內(nèi)容時(shí)考慮到移動(dòng)設(shè)備。
首屏內(nèi)容如何影響SEO
折疊內(nèi)容上方可以說(shuō)是網(wǎng)頁(yè)中可見(jiàn)度最高的區(qū)域。用戶和爬網(wǎng)機(jī)器人使用此區(qū)域來(lái)了解網(wǎng)頁(yè)及其其余內(nèi)容。糟糕的首屏內(nèi)容會(huì)導(dǎo)致跳出率增加，從而對(duì)您的SEO產(chǎn)生負(fù)面影響。強(qiáng)大的文案、格式和CTA可以很好地工作，但不要過(guò)度擁擠這個(gè)空間。Google會(huì)懲罰在該區(qū)域投放廣告或關(guān)鍵字的網(wǎng)站。
首屏內(nèi)容和核心Web Vitals
對(duì)Google算法的Core Web Vitals更新強(qiáng)調(diào)了頁(yè)面加載速度和用戶體驗(yàn)。由于它通常是您網(wǎng)站上加載的第一件事，因此首屏內(nèi)容是核心Web Vitals指標(biāo)因素。Largest Contentful Paint對(duì)所有首屏內(nèi)容加載所需的時(shí)間進(jìn)行評(píng)分。任何低于2.5秒的時(shí)間都被視為良好的CLP分?jǐn)?shù)。在不到2.5秒的時(shí)間內(nèi)優(yōu)化您的首屏內(nèi)容加載是獲得良好LCP分?jǐn)?shù)的好方法。為避免更長(zhǎng)的頁(yè)面加載時(shí)間，請(qǐng)嘗試調(diào)整您在網(wǎng)頁(yè)上使用的CSS和Javascript。你可以試試：
實(shí)施關(guān)鍵CSS：“關(guān)鍵CSS”是一種將CSS放在<head>標(biāo)簽中的首屏內(nèi)容的技術(shù)。只添加加載所有上述折疊內(nèi)容所需的CSS；您希望盡快為用戶呈現(xiàn)內(nèi)容。
預(yù)加載英雄圖片：英雄圖片是內(nèi)容最突出的折疊元素。更快地加載它們有助于提高頁(yè)面加載速度。使用“l(fā)ink rel=preload”將顯著減少使用CSS或JS加載的圖像的加載時(shí)間。
衡量您網(wǎng)站的核心網(wǎng)絡(luò)要素
在構(gòu)建首屏內(nèi)容時(shí)，測(cè)試頁(yè)面加載速度和Core Web Vitals非常重要。站點(diǎn)審核工具可幫助您快速了解站點(diǎn)當(dāng)前的CWV分?jǐn)?shù)以及影響頁(yè)面加載速度的任何問(wèn)題。使用站點(diǎn)審核工具來(lái)審核站點(diǎn)的速度和性能。Core Web Vitals主題報(bào)告直接從Google Lighthouse顯示您的CWV分?jǐn)?shù)。查看平均頁(yè)面加載速度的站點(diǎn)性能主題報(bào)告，以大致了解您的站點(diǎn)性能。該工具會(huì)指示影響加載時(shí)間的任何問(wèn)題以及改進(jìn)方法。
如何優(yōu)化首屏內(nèi)容
確保您在折疊上方包含的任何內(nèi)容都能吸引用戶并通知爬網(wǎng)機(jī)器人。如果用戶登陸您的頁(yè)面并且他們感到困惑或不感興趣，他們將返回到SERP。使用您的首屏內(nèi)容來(lái)吸引他們的注意力。醒目的H1標(biāo)簽可以闡明頁(yè)面上的內(nèi)容，并讓他們知道他們是否想進(jìn)一步探索您的內(nèi)容。
引人注目的視覺(jué)效果吸引用戶的眼球，讓他們?cè)陧?yè)面上停留更長(zhǎng)時(shí)間，并表明下面的內(nèi)容可能會(huì)有所幫助。電子商務(wù)網(wǎng)站可以包含英雄圖片和對(duì)其核心產(chǎn)品或服務(wù)的號(hào)召性用語(yǔ)。謹(jǐn)慎使用首屏CTA。每個(gè)CTA都應(yīng)包含一個(gè)直接操作（“購(gòu)物”、“購(gòu)買”、“預(yù)訂”等），告訴您的用戶您希望他們做什么。
如果您希望您的用戶與您聯(lián)系，請(qǐng)包含他們可以輕松閱讀和點(diǎn)擊的按鈕。電子郵件地址和聯(lián)系電話是理想的，尤其是對(duì)于移動(dòng)用戶。首屏是展示指向網(wǎng)站其他部分的內(nèi)部鏈接的好地方。它有助于加快導(dǎo)航速度并增加用戶體驗(yàn)——這是良好SEO的兩個(gè)要素。
寫(xiě)在最后
首屏內(nèi)容是用戶在加載您的網(wǎng)頁(yè)時(shí)首先看到的內(nèi)容，因此您需要做出標(biāo)記。使用H1標(biāo)簽、品牌視覺(jué)效果和號(hào)召性用語(yǔ)來(lái)吸引訪問(wèn)者。太多的內(nèi)容會(huì)使用戶不知所措或減慢頁(yè)面加載速度。相反，使用圖像、縮短的代碼和簡(jiǎn)單的語(yǔ)言來(lái)傳達(dá)頁(yè)面的內(nèi)容。通過(guò)對(duì)首屏內(nèi)容進(jìn)行一些調(diào)整，您很有可能提升Google的排名。
Tabpear
專欄
甲骨文公司 （NYSE：ORCL） 創(chuàng)立于 1977 年，總部位于美國(guó)德克薩斯州。甲骨文公司是一家全球性的企業(yè)云技術(shù)提供商，致力于賦能各種規(guī)模的企業(yè)的數(shù)字化轉(zhuǎn)型。甲骨文公司提供自治數(shù)據(jù)庫(kù)、大數(shù)據(jù)、分析及機(jī)器學(xué)習(xí)等高科技產(chǎn)品，及在銷售、服務(wù)、市場(chǎng)營(yíng)銷、人力資源、財(cái)務(wù)、供應(yīng)鏈和生產(chǎn)制造等基于云技術(shù)平臺(tái)的集成應(yīng)用。
閩公網(wǎng)安備 35010202001226號(hào)
