产品主图如果只放在CSS背景里，Google图片搜索就缺少受支持的图片入口。Google明确说明不索引CSS图片；想让产品照片参与图片搜索，应使用img，或在picture里保留img后备。渐变、纹理等装饰背景可以继续保留。
最容易误判的地方是：图片确实下载了，网页也显示得很好。浏览器负责把页面画出来，图片搜索还要识别“这是一张什么图片、属于哪页内容”。两件事不能用同一张Network截图证明。
先检查主图到底写在哪里
打开产品公开页，右键主图，选择“检查”。在Elements（元素）面板里往上看，找到真正承载这张图的元素。以下两种实现，肉眼看起来可以完全一样：
<!-- 背景：图由CSS画在盒子里 -->
<div class="product-hero"
style="background-image:url('/images/cup.webp')"></div>
<!-- 内容图：HTML给出图片地址 -->
<img src="/images/cup.webp"
alt="蓝色保温杯的杯身和杯盖" width="1200" height="900">
第一种选中的是div或容器，Styles里能找到background-image；第二种能直接看到img及src。遇到picture，继续展开，检查里面有没有img和有效src，不只看source上的srcset。
下面用同一张教学杯子图演示这两种实现。左边和右边都会显示图片，右边额外具备明确的HTML图片元素。这个演示解释嵌入方式，不能当作Google已经收录某张图的证据。
Elementor用户也可以按这个原则检查：选中容器后设置的Background通常是背景；独立Image组件通常会输出img。先查实际公开页面，别只凭编辑器组件名称下结论。第三方组件可能另有实现。
如果主图已经是img，就不需要为了这篇教程重新做一次。可以继续查图片访问、正文说明和压缩尺寸，具体见WordPress图片优化。
把背景主图改成内容图片，布局仍然可以保留
以一张1200×900的杯子图为例。产品页希望桌面上整齐排版，手机上能看全杯盖和杯底。可以把图片放进原来的容器，保留容器的宽度与留白，再给图片自己的显示规则：
<div class="product-hero">
<img class="product-photo" src="/images/cup.webp"
alt="蓝色保温杯的杯身和杯盖"
width="1200" height="900">
</div>
.product-photo {
display: block;
width: 100%;
height: auto;
}
这组代码保留原图比例，不会主动裁掉主体。width和height写图片原始尺寸比例，CSS控制它在页面上的实际宽度。代码里的地址是教学路径，实施时要换成媒体库里真实、可公开访问的图片地址。
如果设计需要固定高度，可设置height和object-fit。cover会填满框，可能裁边；contain会保留整张图，可能留白。它们改变显示方式，不改变img这一内容入口。
下面的对照使用同一张图、同一个框：cover裁掉上下部分，contain保留完整杯子。产品主图要展示外形时，完整通常比铺满更有用；装饰性横幅可以接受适当裁切。
在Elementor里，先复制待改页面作测试，把容器背景图换成Image组件，再核桌面和手机的宽度、高度、对象适配。确认新图正确后移除旧背景，避免同一张主图重复下载、重复显示。若图片上叠了产品标题，保留真正的文字标题，别把标题烘焙进照片。
需要为手机单独换构图时可以使用picture，但仍要有img后备。不要同时塞入几张隐藏主图来“增加收录机会”；图片应服务访客实际看到的产品内容。
Google能读取后，图片还需要讲清楚什么
先确保图片URL稳定。未登录打开图片地址，应能看到正确图像，而不是登录页、过期签名或防盗链提示。正文图片与特色图若来自不同CDN，要分别核查；更换域名或文件路径的处理见产品图片CDN网址迁移。
然后看图片旁边有没有足够的产品上下文。一张杯子照片紧接型号、容量和杯盖说明，比孤零零放在页面顶部更容易让人理解。alt可以描述图中有用的信息，但不能补上照片看不出的保温时长、材质认证或销量。
例如，“蓝色保温杯的杯身和杯盖”是对画面的描述；“最佳保温杯厂家超低价外贸爆款”只是关键词。若同页已经有清楚的产品名，alt可以补充这个角度展示的细节，不必机械重复标题。
图片还应与承载它的产品页面一起工作。目录里的图片点进详情页，详情页的细节图用于说明结构，这两种链接任务不同。不要为了图片搜索把所有图片都链接到原文件，让访客离开商品信息。
改完怎样验收，什么时候停止继续改
用未登录窗口重新打开产品页，按下面的次序检查一次即可：
- 元素面板里找到实际img，核src、alt和picture后备；确认旧背景已移除。
- 在Network中查看图片请求，核返回的是正确文件，桌面和手机都能加载。
- 用手机宽度看主体，检查杯盖、杯底、图注和附近购买入口有没有被裁掉或盖住。
- 如需确认Google当前能否渲染网页，用GSC网址检查的实时测试查看相关HTML与截图。它检查网页可见性，不是图片索引结果。
把结果记成一句具体记录：“这张主图已改为img，公开文件可访问，手机主体完整；图片搜索是否收录继续观察。”这样能明确技术工作何时完成，不会把等待索引的时间都误认为改图失败。
Google是否索引、选择和展示图片仍取决于其他条件。完成受支持的嵌入后，不需要每天换文件名或反复生成近似照片。官方原则可对照Google图片SEO最佳实践，后续页面内容规划见Google SEO学习路径。
常见问题
背景图加一段alt文字可以吗？
CSS的background-image没有img的alt属性。若图片承担产品信息，应改为内容图片并写合适的alt；纯装饰背景通常不需要给读者补一段重复说明。
img由JavaScript生成也一定不行吗？
不能这样判断。JavaScript生成的img涉及渲染和出现时机，CSS背景涉及嵌入类型。先检查Google可获得的渲染HTML有没有正确img，再处理渲染问题，不把两种原因混在一起。
每张图都需要单独提交给Google吗？
先让公开网页和图片可被发现、访问，必要时通过图片站点地图补充信息。提交不能保证收录；本篇主图改法完成后，优先补清楚产品内容和发现路径。