如何清理 Shopify Rich Text 中杂乱的商品描述 HTML

先看结论

清理 Shopify 商品描述 HTML = 保留有用的商品内容结构 + 移除复制带入的样式和活动内容 + 检查主题中保存后的页面效果。

供应商文案常带有固定宽度、内联字体、任意 CSS 类、追踪属性，以及层层嵌套的 div 或 span。这些代码可能和 Shopify 主题冲突，导致商品描述出现奇怪的间距、颜色或溢出。Shopify 提醒，复制内容可能带入多余 HTML 并造成店铺显示错误；它的富文本编辑器指南介绍了如何打开 HTML 视图来检查和编辑标记。

Shopify 商品描述 HTML 清洗器会依据一组精简的允许列表重新构造粘贴内容，移除展示样式属性及活动或依赖主题的元素，同时保留常见文字结构、安全链接和图片。它不会替你发布到店铺、上传图片，也不能保证所有自定义主题都按预期显示。

商品描述中的“干净 HTML”应该是什么样

干净不等于删掉所有标签，让顾客看到一整堵纯文本。实用的商品描述可能需要段落、小标题、项目列表、重点强调、规格表格，以及尺寸或护理信息链接。清理的目标是使用语义清楚、便于阅读的结构，同时去掉从其他网站复制来的样式。

例如，下面的源码把视觉样式混进了商品文案，后续很难维护：

<div style="width:980px;font-family:Arial;color:#333" class="supplier-copy">
  <span style="font-size:28px">Everyday Canvas Tote</span>
  <p style="margin:24px 0;color:#777">Reinforced handles and a cotton lining.</p>
</div>

清理后可以使用真正的标题和段落，让主题负责字体与间距：

<h2>Everyday Canvas Tote</h2>
<p>Reinforced handles and a cotton lining.</p>

商品模板通常已经把商品标题作为页面主 H1。清洗器会将粘贴内容中的 H1 转为 H2，避免描述区出现另一个主要标题。保存前后都要检查标题层级，确认它和主题的商品标题及描述区其他章节衔接合理。

Shopify HTML 清洗器会保留和移除什么

工具会保留段落、换行、H2 至 H6 标题、有序和无序列表、列表项、强调、引用、分隔线、基础表格、链接和图片。它会展开 div、span 和 font 等常见布局标签：文字和支持的子元素仍按阅读顺序保留，外层样式则被移除。

工具不会猜测供应商 CSS 中哪些样式安全，而是移除 style、class、id、data-*、事件处理器和其他未允许的属性。脚本、内嵌文档、表单、交互控件、SVG、媒体播放器等活动内容或依赖主题的元素会连同内部内容一起移除。未知的静态包装标签会展开，HTML 注释会删除。链接只保留安全的 HTTP、HTTPS、mailto、tel 或普通相对地址。图片必须有安全的 HTTP 或 HTTPS 地址，之后才可能保留；alt 文本和合理的宽高值也会保留。

这个允许列表是有意保持克制的。它不会保留内联颜色、自定义按钮、视频嵌入、响应式 srcset、任意 data 属性或供应商网页布局。如果描述需要交互式尺码表或丰富的视觉模块，应改用 Shopify 主题区块、metafield、应用区块或其他受支持的内容功能，不要把复制来的小组件塞进描述 HTML。

实际清理步骤

1. 先保存源码副本。 复制现有商品描述 HTML，或在测试目录中复制商品。若表格、链接或图片需要换一种实现，可以回滚。
2. 将源码粘贴到清洗器。 左侧输入可放供应商、文档或旧店铺页面中的 HTML。工具会显示字符数和 UTF-8 字节数，并在浏览器中处理。
3. 查看清理统计。 检查移除了多少属性、元素，展开了多少标签。数量大不一定有问题，但如果源码含表格、媒体或你想保留的结构，应进一步确认。
4. 逐段阅读结果。 确认标题对应正确章节、列表顺序合理、文字没有丢失、链接目标正确。清洗器无法核实商品参数或营销说法。
5. 将清理结果粘贴回 Shopify。 在商品描述编辑器中打开 HTML 视图，替换原始标记并保存。Shopify 后台界面名称可能变化，请找到当前商品描述对应的 HTML 或代码控制项。
6. 预览保存后的商品页。 在桌面和手机上检查表格、列表、换行、图片加载、alt 文本和间距。最终渲染由 Shopify 编辑器和主题决定，保存时标记也可能被规范化。
7. 另外编辑文案。 供应商描述可能含未经证实的卖点、错误参数、重复内容，或不符合品牌语气。HTML 清理解决的是格式，不会自动验证事实或改写原创文案。

将清理后的商品描述 HTML 输出作为处理起点，不要未经检查就批量发布。尤其是目录使用自定义描述样式或应用生成区块时，应先测试一个有代表性的商品。

链接和图片需要单独检查

清理图片标签并不会把图片移动到 Shopify Files。已有 URL 可能是临时链接、供应商热链，被部分访客屏蔽，或日后失效。请将批准使用的商品图上传到 Shopify 或稳定的图片托管服务，更新 URL，并确认图片有用、裁切正确且 alt 文本准确。

清洗器会移除 srcset、style、class 和对齐方式等属性。即使图片本身保留，响应式行为和视觉尺寸也可能改变。请在小屏上检查宽表格和图片；如果溢出，可以用主题组件或更简单的内容重建，而不是把复制的固定宽度样式加回来。

检查链接目标和描述链接的文字也很重要。清洗器允许部分安全协议，但链接语法合法并不代表目标有效或内容可信。移除追踪网址和不应出现在商品页上的供应商内部链接。

安全性和 Shopify 兼容边界

清洗器使用分离的浏览器 DOM 解析源码，再依照明确的允许列表创建新的输出元素；它不会将粘贴的 HTML 作为实时页面内容挂载。工具会移除已知活动内容，但任何清洗器都无法保证与所有 Shopify 主题、应用、浏览器和未来编辑器行为兼容。请把结果视为格式整理辅助，并在保存后测试。

工具不会连接 Shopify 或保存你粘贴的文字，不过仍应避免在当前浏览器会话中粘贴客户数据、供应商保密条款或不应公开的信息。字符和字节统计仅供参考，不会强制执行每个 Shopify 字段或 API 的限制。通过应用或接口维护描述时，请核实对应系统自己的校验规则。

常见清理错误

• 删除所有标签，导致标题、列表和表格结构消失。
• 保留了复制来的 h1，与商品页主标题重复。
• 以为去除样式后，所有 Shopify 主题都会自动显示正确。
• 忘记外部图片 URL 并不会被清洗器上传或托管。
• 没检查护理或尺码信息是否依赖某个链接，就直接删掉链接。
• 为了恢复供应商页面外观，又把不安全嵌入或脚本放回去。
• 清理了 HTML，却没有核实供应商商品描述中的说法。
• 没先测试一个商品，就把结果批量套用到全目录。

常见问题

为什么复制到 Shopify 的 HTML 显示错乱？

复制内容可能带有内联样式、固定宽度、嵌套包装标签和编辑器专用标记，与店铺主题冲突。Shopify 建议在富文本编辑器的 HTML 视图中检查多余标记。

清洗器会保留 Shopify 商品图片吗？

只有带可接受 HTTP 或 HTTPS src 的图片才会保留，也可能保留 alt 文本和合理宽高。工具不会上传或托管图片，因此应确认原地址有效，或替换成稳定的 Shopify 图片 URL。

清洗后的 HTML 可以直接粘贴到 Shopify 吗？

可以尝试粘贴到商品描述的 HTML 视图，保存后预览页面。建议先测试一个商品，因为编辑器和主题可能会规范化标记或以不同方式渲染。

清洗器会保留视频或自定义按钮吗？

不会。它会移除嵌入媒体和未支持的交互元素。需要交互内容时，应使用 Shopify 主题区块、应用区块或其他受支持功能。