Hero 区域怎么优化

分享一个最近在工作中碰到的问题。

张三对自己网站页面上的 Hero 内容区特别在意，想在这个访客第一眼能看到的地方着重展示他们工厂的信息图片，以便向网站的访客说明他们的生产实力很强。

第一版本网站建设的时候，先是用了背景视频的自动播放。

上传了一段五分多钟的视频，虽然这段视频做了压缩处理，也做了 CDN 处理，但网站的整体速度依旧特别特别慢。

即便后面也尝试了 GIF 的方案，但加载方面的效果依旧不理想。

没办法后面只能是换成轮播图方案了，用了页面编辑器的轮播图组件，并为此特意精加工了几张效果非常棒的图片。

做完这些，网站在桌面端的显示效果已经非常不错了，于是不出意外的新问题又出现了。

因为网站使用的是 Elementor 编辑器，使用的也是编辑器提供的轮播图组件。

但是这个轮播图组件在使用的时候有个小问题，即移动端显示时会导致图片展示不完整，这又让张三非常恼火了。

毕竟人家看中的就是这个 Hero 区域的信息传达，根本接受不了这种折中方案。

继续一番折腾，在自己的网站上安装了一个新的轮播图组件，使用第三方的方案。

这个方案的优点就是，图片能在左右屏幕尺寸上完整显示，区别就是在手机这样的小屏幕上，由于整体缩放的缘故，图片看起来都非常小。

且这个组件没办法在图片之上，新增一层文案（从技术 SEO 的角度出发就是没有 H1 标签）。

所以目前来看，这种方案似乎是解决了图片展示的问题，但这种方案有一个非常明显的弊端，就是整个页面没有 H1 标签。

如果你的网站纯粹是投放为主，不在意自然流量的话，这种没有 H1 标签的做法肯定是没什么问题。

但是如果后续还是想继续在自然流量上发力，最好还是按照官方的操作指南，将 H1 标题与页面的描述完善起来。

两种思路：

一、继续目前的技术方案，在 Hero 区域下方新增一个网站页面标题与描述的区块，将自己网站的说明信息放在这里。

二、更换网站的轮播图组件，使其在图片轮播且多尺寸屏幕完整显示的前提下，支持悬浮文字功能。

这种的插件肯定是有，桌面端的轮播图与移动端的轮播图分别上传即可。

不管怎样吧，我们在做显示效果的同时，最好兼顾下基础的技术 SEO 设置。