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