Above the Fold是什么意思？
折叠上方（ATF）是指在用户向下滚动之前网页的可见部分。
折线是展开页在底部切断的那条线。任何你需要向下滚动到的东西都在折叠下面。
如上图所示，用户的设备会影响页面折叠的精确位置。其他因素，如浏览器设置，也会影响查看窗口（即视口）的大小和形状。
请注意
上面的意思来自报纸出版。报摊上的报纸通常是对折的，所以编辑们把最吸引眼球的元素放在了上面。
为什么Above the Fold很重要？
页面上方的内容很重要，因为这是用户形成第一印象的地方。以及他们希望在哪里看到某些网站功能（例如，注册链接）。
如果访问者不能立即找到他们想要的东西，他们可能会退出你的页面。
这种行为会损害业务绩效和你的SEO。因为像b谷歌这样的搜索引擎希望提供用户积极参与的结果。
此外，谷歌认为出现在页面顶部附近的内容更重要。这意味着ATF内容比BTF内容对搜索排名的影响更大。
这就是为什么上面的搜索引擎优化应该是优先考虑的。
最佳实践
上面的内容对于吸引访问者的注意力至关重要。我们收集了一些最佳实践，可以帮助您提供出色的用户体验。并最终增加收入。
另外，我们已经包括了上面的搜索引擎优化策略，可以帮助您的网页在谷歌排名更高。
以下是您的ATF设计的最佳实践：
使用响应式网站设计
响应式网站设计会自动适应用户视窗的大小和形状。它有助于确保图像、文本和其他元素始终合适。
这允许你充分利用折叠上方（和下方）的空间，无论用户是在浏览：
一个大型的水平桌面显示器
一个小的，垂直的智能手机屏幕
或者其他的东西
以下是Semrush博客中响应性的例子：
有关实现响应式布局的建议，请查看谷歌的帮助指南。
然后，确保定期进行技术审核。这样您就可以检查任何性能问题。
Semrush的站点审计工具执行140多项检查。确保您的站点在桌面和移动设备上运行良好。
您可以安排每日或每周的审计。或者手动重新运行爬行。
优化你的网站标题
网站标题是网页的最顶部，通常在网站的每个页面上都有重复。它将关键元素保持在同样容易到达的地方。这对用户体验来说是很好的。
网站标题通常包括链接到主页的品牌徽标。因此，用户可以快速导航到这个关键页面。
标题通常也包括主导航菜单。，链接到网站的主要部分。
许多网页设计师通过将主导航放在汉堡包菜单中来节省空间。尤其是在手机上。但这意味着用户需要额外点击才能访问关键页面。
下面是一些其他的元素，要考虑包括在你的网站标题：
横幅：使用网站横幅来宣传独特的卖点，比如免费送货
登录/注册链接：鼓励访问者创建帐户或登录，这使您更容易跟踪客户行为并提高参与度
区域/语言标志：如果您有一个多区域或多语言的站点，允许用户在选项之间切换
搜索功能：包括一个搜索栏或图标，以便用户可以快速找到他们想要的
购物车图标：如果你有一个电子商务网站，让购物者尽可能容易地开始结账过程
添加额外的元素到你的网站标题可以增加它的功能。但是一个杂乱的设计占用了折叠上方的宝贵空间，用户很难浏览。设计师必须在这方面取得平衡。
包含一个唯一的标题
每一页都应该有一个独特的、描述性的标题。这允许用户快速理解页面的目的。
在Mashable网站上，醒目的标题会告诉访问者该期待什么。
包含一个独特的标题也可以帮助上面的搜索引擎优化。
当被问及ATF对排名的影响时，b谷歌的约翰·穆勒（John Mueller）表示：“对我们来说，重要的一点是，在排名靠前的领域确实有一些独特的内容。
“如果你在顶部放了一条横幅，上面放了一个普通的英雄形象，这完全没问题。但是，页面上方的一些内容对于该页面来说应该是独一无二的。这可能是标题之类的东西。”
为了进一步提高你的网页搜索引擎优化，用H1标签（最上面的HTML标题）包裹标题。
是这样的:
并确保标题包含你的主要关键字（你想要排名的主要搜索查询）。
回顾你当前的标题，使用Semrush的页面搜索引擎优化检查。
导入您的页面及其目标关键字。该工具将提供一个要优化的顶级页面列表。
打开任意页面的idea，查看H1是否包含目标关键字。
如果是，关键字是否被过度使用。这是一个被称为关键词填充的问题，它会损害你的SEO。
你还会看到与以下相关的想法：
标题标签（可以出现在搜索结果中的页面标题）
元描述（可以出现在搜索结果中的描述）
语义关键词（概念相关术语）
还有更多。
直奔主题
用户应该能够快速、轻松地找到他们想要的东西。所以尽快切入正题。最好是在上面。
这就是所谓的提高时间价值。这对SEO和用户体验都有好处。
在创建页面时，问自己以下问题：
当有人进入这个页面时，他们想要实现什么？
我怎样才能帮助他们快速实现这个目标？
以李维斯网站上的男士牛仔裤分类页面为例。顾客会立即看到各种各样的产品选择和照片。
在Prana网站上，大多数产品图片和信息都位于页面折叠栏下方。用户必须滚动才能到达好的部分。这意味着页面不太可能吸引他们的注意力。
还要考虑Semrush博客模板。
预计的阅读时间和目录将读者的期望放在前面。访问者可以开始阅读文章，而无需滚动过去不必要的视觉元素。
注意作者是如何开门见山的。这是一种SEO文案技巧，被称为BLUF （bottom line up front）。
不要把篇幅浪费在空洞的介绍上。专注于为访问者提供他们想要的东西。
提示
需要别人帮你写一篇有影响力的文章吗？看看Semrush的内容写作服务。
平衡广告和原创内容
如果你通过b谷歌AdSense或其他广告计划来盈利，你可能想要在页面上方显示广告。让更多的用户看到并点击它们。
没关系。但重要的是要平衡广告和你自己的内容。如果访问者看到的是大量的广告——而不是他们来这里的目的——他们可能会离开你的网站去找竞争对手。
另外，不平衡的广告会损害你的搜索引擎优化。尤其是在手机上，它们可以占据更大的屏幕份额。
2012年，b谷歌发布了一个页面布局算法更新，将使用ATF广告的网站降级为“过度”。
该公告称：“如果你点击一个网站，而你首先看到的部分要么没有很多可见内容，要么在网站的初始屏幕上有很大一部分是广告，那就不是一个很好的用户体验。这类网站未来的排名可能不会那么靠前。”
谷歌建议遵循更好的广告标准，该标准建议反对以下移动网络体验：
弹出式广告
大型粘性广告
广告密度30%以上
例如，ESPN将移动广告置于页面上方，以最大化点击量。但广告与大量的原创内容相平衡。
提高装载速度
上面的内容应该加载得很快。如果用户等待的时间太长，他们更有可能退出您的页面。另外，加载速度会影响SEO排名。
最重要的页面速度指标被称为核心Web vital：
最大含量涂料（LCP）
加载最大的图像或文本块所需的时间
首次输入延迟（FID）
页面响应用户交互所需的时间
累积布局移位（CLS）
对装载过程中发生的意外运动的测量
你可以在b谷歌搜索控制台检查你的核心网络生命体征。
或者使用Semrush的站点审计工具。Core Web vital报告可以一目了然地显示关键指标。并就如何改进提供了详细的建议。
以下是改善ATF加载时间的一些最佳实践：
构建你的HTML：构建你的HTML，使ATF内容首先加载
精简HTML、CSS和JavaScript：简化代码，以便更快地处理
内联关键CSS：关键CSS是一种提取ATF内容的CSS并将其放置在HTML的部分的技术。这可以帮助更快地加载ATF内容。
优化图像：调整大小、重新格式化和压缩图像文件，以确保它们尽可能小，同时不牺牲质量
预加载资源：使用rel= “ Preload “链接属性在渲染过程的早期加载顶部折叠元素
提示
阅读我们的指南，了解更多关于页面速度和如何提高它。
让它看起来不错
您的ATF内容应该正常运行。但也要好看。如果访问者不喜欢他们所看到的，他们更有可能离开。
根据一项行为与信息技术的研究，网页设计只有0.05秒的时间来给人留下良好的第一印象。
这里有一些关于显眼设计的建议：
确保文本易于阅读，并具有清晰的视觉层次
添加独特的视觉效果来分解文本并帮助理解
插入相关的视频和动画来吸引用户的注意力
通过使用可识别的图标来节省空间-在谷歌的材料符号中探索选项
使用空白空间（也称为负空间或空白空间）来防止你的布局看起来混乱
确保设计与你的品牌形象相辅相成
确保你的网站符合可访问性准则
提示
需要专家的帮助吗？看看Semrush值得信赖的网页设计机构。
分析性能指标
性能指标告诉您，在您的上层设计中，哪些是有效的。什么不是。
最重要的指标取决于你的具体目标。但下面这些值得考虑。它们都可以通过谷歌Analytics访问。
度规
描述
为什么重要？
跳出率
没有采取任何行动就离开页面的访问者的百分比
更强的ATF含量可以降低跳出率
退出率
访问者从当前页面离开网站的百分比
更强的ATF含量可以降低退出率
滚动深度
一般访问者浏览的网页部分
显示您的ATF内容是否鼓励用户向下滚动页面
目标转化率
采取预期行动（例如，购买）的访问者百分比
更强的ATF含量可以提高转化率
有机的交通
由谷歌等搜索引擎引用的未付费访问量
好的上方搜索引擎优化可以增加自然流量
提示
阅读我们的谷歌Analytics指南以获得帮助。
要在一个地方查看关键数据，请将您的b谷歌Analytics和谷歌Search Console帐户连接到Semrush的有机流量洞察工具。
在你的登陆页面（旨在提示特定操作的页面）上比较以下指标：
关键词排名次数
跳出率
目标完成率
cta应该在页面上方还是下方？
一般来说，每个登陆页面都应该至少有一个CTA （call to action）来提示访问者采取预期的行动（例如，“添加到购物车”或“立即注册”）。
一些营销人员认为CTA应该总是出现在页面上方（如下图）。因此，用户可以快速看到并与之交互。
但是访问者并不总是准备好在他们登陆你的页面后立即采取行动。
因此，如果您将CTA放置在更低的位置，可能会得到更好的结果。在用户有机会吸收更多信息并做出决定之后。
为了找出最适合你的页面，进行A/B测试（或分割测试）。
下面是它如何工作的快速指南：
决定您想要测试的CTA位置并创建新的网页设计
为50%的访问者提供新设计（变体），为另一半的访问者提供现有设计（控制）
完全实现产生最多转换的版本
以上折叠网站的例子
上面这些示例展示了实际的最佳实践。跨越各种类型的网站和页面。
获取ATF设计的灵感：
郁郁葱葱的
在Lush主页的上方，一张引人注目的产品照片吸引了用户的注意力。
有趣，大胆，色彩丰富，是品牌的形象。它与相关的母亲节活动相结合，吸引购物者。
Lush将其他有用的链接叠加在图像上，而不是使用导航栏。这有助于把注意力集中在母亲节活动上。并使网站标题干净，易于使用。相反，搜索栏（包括建议）确保购物者可以找到他们需要的东西。
在页面的右侧，圆形指示器显示，在折页下方还有更多的东西有待发现。
海藻
登陆这个海带产品页面的人可能以前喝过这种饮料。我们准备下订单了。ATF设计的核心就是这个简单的动作。
“添加到购物车”按钮在高对比度的背景下显眼地出现。简约的布局确保不会让人分心。
也就是说，在左下角有一个“滚动”提示。让访问者知道，如果他们想要的话，他们可以获得更多的信息。
提示
更多产品页面示例和最佳实践请参见我们的专用指南。
ESPN
在ESPN的桌面网站上，广告占据了相对较高的页面比例。但它符合桌面体验的更好的广告标准，避免了弹出式广告、带声音的自动播放视频广告、倒计时广告和大型粘性广告。
这个ATF设计的一个突出元素是“即将到来的事件”酒吧。它出现在大多数页面的顶部，并自动更新到当前的运动视图。
事件栏预先提供有价值的信息，帮助确保积极的用户体验。它还汇集了有用的链接，鼓励访问者留在网站上。
还要注意从折叠上方开始的自动播放视频。这有助于吸引用户的注意力，并鼓励他们向下滚动。（为确保符合更好的广告标准，该声音默认为静音。）
微笑直营俱乐部
很明显，价格对Smile Direct Club的顾客来说很重要。ATF的横幅、标题和描述预先解决了价格异议。
随附的图片展示了产品（清晰的牙齿矫正器）和它的好处（直牙）。而奖项标志和Trustpilot审查则建立了信任。
注意CTA按钮“我是候选人吗？”这句话出现了两次。用户很清楚他们接下来应该做什么。他们可以马上开始。
想要了解更多信息的访问者可以在导航栏中找到关键链接。或者打开右下角的实时聊天。
诺德斯特姆
诺德斯特龙的产品分类页面在页面上方有多个导航功能。
子类别标签，如“膝盖以上”和“徒步旅行”，给人的印象是一个庞大而多样的产品范围。让顾客放心，他们会找到他们想要的东西。
与此同时，产品过滤和分类选项可以防止购物者感到不知所措。他们知道产品范围不会太难或耗时。
所以，他们更有可能留下来。找到完美的产品。
Airbnb
Airbnb的主页将基本的导航元素放在页面上方，鼓励旅行者开始搜索。图标方便用户查找和可视化住宿类型。
否则，布局会为“令人惊叹的观点”类别中引人注目的列表留下尽可能多的空间。
每个住宿预览都包含了对旅行者最重要的细节。并吸引点击。
照片
平均星级
位置
日期
主机类型
价格
当你搜索一个地点时，Airbnb会根据质量、受欢迎程度和价格对搜索结果进行排名。帮助确保最吸引人的列表出现在页面上方。
然后出现了一张地图。无论你是用台式机、手机还是应用程序。因为Airbnb知道位置对旅行计划用户来说至关重要。
通过分割测试进行改进
如果你更新了你的ATF内容，比较前后的关键指标是很重要的。这样你就可以确保你的改变产生积极的效果。
更好的方法是使用分割测试（或A/B测试）。这允许您比较两种以上的设计，并根据实际用户数据查看哪一种性能最好。
方法如下:
创建ATF内容的新版本（称为变体）
向一半用户显示旧版本（称为控件），向另一半用户显示变体
在设定的时间段内分析关键指标
实现性能最好的版本
SplitSignal应用程序可以轻松运行A/B测试并测量对自然流量的影响。你不需要web开发或数据科学专业知识。