记一次网站视频索引处理过程
前年建设产品详情页时,调研过市面上常见的布局:
- 将产品相册第一滑换为视频
- 单独放置一个播放按钮,点击后弹出视频播放
最后两种都没选择,用了种同时展示视频和相册的布局,如图:
彼时我只是觉得应将最吸睛直观的信息放在前边,只在排列顺序上稍花心思,没想到暗合要求。
后台 Google Search Console 有了 Video Pages 报告,发来提示 Video indexing issues found on your sites 一直没空看,今天看看。
首先,大部分的视频是被索引了的:
没被索引的视频页面有两种:
视频未处理 和 没有缩略图
根据 https://support.google.com/webmasters/answer/9495631#troubleshooting
视频未来处理 的意思是谷歌发现了至少一个但决定不索引视频,这是句废话,还是没有告诉我为什么。
由于所有的产品详情页都采用了相同的布局,玩下找不同,找出索引和未索引页面的区别大概就是原因,经过 Inspect 后发现:
- 一些页面有 2 个视频,可能让谷歌犯了选择困难症
- 索引的页面的视频详情里都有 Video content URL, Thumbnail URL, Video placement 三项,没索引的缺 Thumbnail URL
- 客户没有给视频设置过缩略图,谷歌将紧跟其后的相册第一张图当作了视频缩略图
- 没有缩略图的视频大部分都是竖屏拍摄的
依此给了客户2个建议:
- 拍摄宽屏尺寸比列的视频,如:16:9
- 给视频添加缩略图,如 WordPress 的 video tag 应该这么加 https://wordpress.org/documentation/article/video-shortcode/ 或者插入视频后点小铅笔 ✏ 选择 Poster (海报)
为什么不建议客户别放多个视频是因为我觉得谷歌没法判断突出视频时会把第一个视频当做重点,而第一个视频下边紧跟的是第二个视频,不是相册图,所以它没找到缩略图,在有缩略图时应该还是可以被索引的,希望客户能做个实验验证这点。
下图为一个包含多个 Youtube 视频页面的搜索结果页:
谷歌选择的第一个视频
在阅读文档时,发现一些有意思的要求,比如:
- 视频应高于 140 像素而低于 1080 像素。(土豆:对呀!有些视频太高了,一屏都看不全,此时在 Windows 下我会按 Ctrl 加鼠标滚轮来缩小页面)
- 视频宽度应至少为页面宽度的三分之一
- 不使用太透明的缩略图。
此外,根据 https://developers.google.com/search/docs/appearance/video,若想视频被索引,不要对视频使用需要互动才加载类型的懒加载。
呃。。。
为了满足广大用户对 Google Pagespeed 得分的执念,优化插件们顺意而为,几乎都采用了这种懒加载。
其实根据 Harry Roberts 对 LCP 的测试 https://csswizardry.com/2022/03/optimising-largest-contentful-paint/,有海报的视频加载还挺快的。
如果你的视频放的到处都是,已经不好找到和添加 Poster 了,或者优化时 WordPress 自带的播放器显示不正常了,尝试在优化插件中排除以下资源:
/wp-includes/js/mediaelement/wp-mediaelement.min.css
/wp-includes/js/mediaelement/(.*).js