189-2522-6043

网站轮播图SEO优化的方法和技巧

时间:03-22 10:10 浏览:50

网站轮播图是一种UX组件,以类似于幻灯片的方式显示内容。 网站轮播图可以由用户“自动播放”或手动导航。 尽管网站轮播图可以在其他地方使用,但是网站轮播图通常用于在首页上显示图片,产品和促销信息。 性能 ...

网站轮播图是一种UX组件,以类似于幻灯片的方式显示内容。 网站轮播图可以由用户“自动播放”或手动导航。 尽管网站轮播图可以在其他地方使用,但是网站轮播图通常用于在首页上显示图片,产品和促销信息。


网站轮播图SEO优化的方法和技巧


性能 

本节讨论网站轮播图的性能影响以及构建高性能网站轮播图的最佳实践。

影响 

实施良好的网站轮播图本身对性能的影响应该很小或没有影响。 但是,网站轮播图通常包含大量媒体资产。 大型资产无论显示在网站轮播图中还是其他地方,都会影响性能。

  • LCP(最大含量的油漆)

大型折叠式转盘通常包含页面的LCP元素,因此可能会对LCP产生重大影响。 在这些情况下,优化网站轮播图可能会大大改善LCP。

有关LCP测量在包含转盘的页面上如何工作的深入说明,请参阅“ LCP的转盘测量” 部分。

  • FID(第一输入延迟)

网站轮播图对JavaScript的要求最低,因此不会影响页面互动性。 如果发现站点的网站轮播图具有长时间运行的脚本,则应考虑更换网站轮播图工具。

  • CLS(累积版式移位)

数量惊人的网站轮播图使用不稳定的,不合成的动画,可以为CLS做出贡献。 在带有自动播放网站轮播图的页面上,这有可能导致无限CLS。 这种类型的CLS通常在人眼中并不明显,这使得该问题易于忽略。 为避免此问题,请 避免 使用非合成动画 在转盘中 (例如,在幻灯片过渡期间)。

最佳实践 

优化网站轮播图的性能包括优化其技术架构和内容。


使用HTML 加载网站轮播图内容 

网站轮播图内容应通过页面的HTML标记加载,以便浏览器可以在页面加载过程的早期发现它。 使用JavaScript启动网站轮播图内容的加载可能是使用网站轮播图时要避免的最大的性能错误。 这会延迟图像加载,并可能对LCP产生负面影响。

对于高级网站轮播图优化,请考虑静态加载第一张幻灯片,然后逐步对其进行增强以包括导航控件和其他内容。 该技术最适用于您长时间受到用户关注的环境,这给加载额外的内容带来了时间。 在像首页这样的环境中,用户可能只停留一两秒钟,因此仅加载单个图像可能同样有效。


利用现代技术

许多站点使用 第三方JavaScript 库来实现网站轮播图。 如果当前使用较旧的网站轮播图工具,则可以通过切换到较新的工具来提高性能。 较新的工具倾向于使用更高效的API,并且不太需要像jQuery这样的附加依赖项。


但是,您可能根本不需要JavaScript。 新的 Scroll Snap API使得仅使用HTML和CSS即可构建功能齐全,类似本机的网站轮播图,而无需JavaScript。

以下是一些使用滚动快照的资源,您可能会有所帮助:

  • 构建故事组件(web.dev)

  • 下一代Web样式:滚动对齐(web.dev)

  • 仅CSS网站轮播图(CSS技巧)

  • 如何制作仅CSS的网站轮播图(CSS技巧)


优化网站轮播图的内容 


网站轮播图通常包含一些网站上最大的图像,因此值得您花些时间来确保这些图像得到完全优化。 选择正确的图像格式和压缩级别, 使用图像CDN 并 使用srcset服务多个图像版本 都是可以减小图像传输大小的技术。


绩效衡量 

本节讨论与网站轮播图相关的LCP测量。 尽管在LCP计算过程中对网站轮播图的处理方式与其他任何UX元素相同,但自动播放网站轮播图的LCP的计算机制却是普遍的困惑点。


LCP测量旋转木马 

这些是了解LCP如何计算网站轮播图的关键点:

  • LCP在将页面元素绘制到框架时会考虑它们。 一旦用户与页面交互(轻击,滚动或按键),就不再考虑LCP元素的新候选者。      因此,自动播放转盘中的任何幻灯片都有可能成为最终LCP元素,而在静态转盘中,只有第一个幻灯片才是潜在的LCP候选者。

  • 如果渲染了两个大小相等的图像,则第一个图像将被视为LCP元素。 仅当LCP候选值大于当前LCP元素时,才会更新LCP元素。 因此,如果所有网站轮播图元素的大小均等,则LCP元素应该是显示的第一个图像。

  • 在评估LCP候选者时,LCP会考虑“ 可见大小或固有大小,以较小者为准 ”。      因此,如果自动播放的网站轮播图以一致的尺寸显示图像,但包含的 的变化的图像 内在尺寸 小于显示尺寸      ,则LCP元素可能会随着新幻灯片的显示而改变。 在这种情况下,如果所有图像以相同的大小显示,则具有最大固有尺寸的图像将被视为LCP元素。 为了使LCP保持较低,您应确保自动播放网站轮播图中的所有项目都具有相同的固有大小。      


Chrome 88 网站轮播图的LCP计算更改


从 Chrome 88开始 ,后来从DOM中删除的图像被认为是潜在的最大内容满意的绘画。 在Chrome 88之前,这些图像已排除在考虑范围之外。 对于使用自动播放网站轮播图的网站,此定义更改将对LCP得分产生中性或积极影响。

做出此更改的原因是, 观察 到许多站点通过从DOM树中删除先前显示的图像来实现网站轮播图过渡。 在Chrome 88之前,每次展示一张新幻灯片时,删除前一个元素都会触发LCP更新。 顾名思义,此更改仅影响自动播放网站轮播图,只有在用户首次与页面进行交互之前,才可能出现最大程度的内容丰富的绘画。


其他注意事项 

本节讨论实现网站轮播图时应记住的UX和产品最佳实践。 网站轮播图应该以易于浏览和阅读的方式推进您的业务目标并呈现内容。


导航最佳实践 

提供突出的导航控件 

网站轮播图导航控件应易于点击且高度可见。 这是很少执行的事情,大多数网站轮播图的导航控件既小又微妙。 请记住,单一颜色或样式的导航控件在所有情况下都很少起作用。 例如,在深色背景下清晰可见的箭头在浅色背景下可能很难看到。


显示导航进度

网站轮播图导航控件应提供有关幻灯片总数以及用户在幻灯片中的进度的上下文。 此信息使用户可以更轻松地导航到特定幻灯片并了解已经查看了哪些内容。 在某些情况下,提供即将到来的内容的预览(无论是下一张幻灯片的摘录还是缩略图列表)也可能会有所帮助并增加参与度。

支持移动手势 #


在移动设备上,除传统的导航控件(如屏幕按钮)外,还应支持滑动手势。

提供备用导航路径 

由于大多数用户不太可能使用所有网站轮播图内容,因此,应从其他导航路径访问网站轮播图幻灯片链接到的内容。


可读性最佳实践


不要使用自动播放 

自动播放的使用产生了两个几乎矛盾的问题:屏幕动画倾向于分散用户的注意力并使眼睛远离更重要的内容; 同时,由于用户经常将动画与广告相关联,因此他们将忽略自动播放的网站轮播图。

因此,自动播放是一个不错的选择,这种情况很少见。 如果内容很重要,则不使用自动播放功能可以最大程度地提高其曝光率; 如果网站轮播图的内容不重要,则使用自动播放会减损更重要的内容。 此外,自动播放转盘可能难以阅读(也很烦人)。 人们以不同的速度阅读,因此很少有网站轮播图在“正确”的时间为不同的用户持续转换。


理想情况下,幻灯片导航应由用户通过导航控件控制。 如果必须使用自动播放,则应在用户悬停时禁用自动播放。 此外,幻灯片转换率应考虑到幻灯片内容-幻灯片包含的文字越多,则在屏幕上显示的时间就越长。


将文字和图片分开

网站轮播图文本内容通常被“烘焙”到相应的图像文件中,而不是使用HTML标记单独显示。 这种方法不利于可访问性,本地化和压缩率。 它还鼓励采用一种万能的方法来进行资产创建。 但是,相同的图像和文本格式很少能在台式机和移动格式中以相同的方式读取。

简洁 

您只有一秒钟的时间来吸引用户的注意。 简短的即时复制会增加您传达信息的几率。

产品最佳实践 

在无法使用额外的垂直空间来显示其他内容的情况下,网站轮播图效果很好。 产品页面上的网站轮播图通常是此用例的一个很好的例子。

但是,旋转木马并不总是有效地使用。

  • 网站轮播图很容易 ,尤其是当它们包含促销或自动前进时 误认为 被用户      广告 。 用户倾向于忽略广告,这种现象被称为 横幅盲 。      

  • 网站轮播图通常用于安抚多个部门,并避免就业务优先级做出决策。      结果,旋转木马很容易变成无效内容的垃圾场。

测试你的假设 

网站轮播图,尤其是首页上的网站轮播图对业务的影响,应该进行评估和测试。 网站轮播图点击率可以帮助您确定网站轮播图及其内容是否有效。

相关 

当网站轮播图包含有趣且相关的内容且呈现清晰的上下文时,其效果最佳。 如果内容不会吸引用户到网站轮播图之外,则将其放置在网站轮播图中不会使其性能更好。 如果必须使用网站轮播图,请确定内容的优先级,并确保每个幻灯片都具有足够的相关性,以使用户可以单击以转到下一张幻灯片。

 


2小时内报价 3天完成方案设计 7-10天内制定全年推广计划

华南地区出现问题,24小时内上门处理!

全国免费服务热线

189-2522-6043

提交需求免费获取网站SEO139项诊断方案