如何编写有助于 SEO 和可访问性的图片文件名

图片文件名很重要，但没有人们说的那么重要

图片文件名属于那些容易被过度确信的网页细节。有些团队完全忽视它们，直接发布 IMG_7421.jpg。另一些团队则把每张产品照片都变成一篇迷你关键词作文。

有用的中间地带很简单：编写能够清楚描述图片、帮助人们管理素材，并为搜索引擎提供一点额外上下文的文件名。不要指望文件名拯救薄弱的内容、缺失的替代文本、加载缓慢的图片，或令人困惑的页面。

Google 明确建议为图片使用简短、描述性的文件名。这是很好的建议。但它也是有限的建议。文件名只是众多上下文线索之一：周围文本、页面标题、结构化数据、图注、替代文本、链接、图片质量，以及图片是否真的对页面有用。

可访问性也是类似的。好的文件名不能替代替代文本。但当某些环节出错时，它可以减少伤害，也能让编辑、开发者，以及下载、保存或分享文件的用户更轻松。

简短规则

使用能回答这个问题的文件名：

如果某人只看到文件名，是否能大致知道图片里有什么？

好的示例：

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

较差示例：

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

目标不是诗意。目标是有用的具体性。

好的图片文件名对 SEO 有什么作用

好的文件名有助于搜索引擎理解图片，尤其是在图片搜索场景中。它可以强化页面主题和视觉内容的主体。

但与基础项相比，它是一个较弱的信号：

• 图片出现在相关页面上。
• 周围文案解释或支持这张图片。
• 需要时，图片有合适的替代文本。
• 图片可以被抓取和索引。
• 文件没有不必要地过大。
• 页面能够可靠加载。

如果你正在为自然搜索修复图片，请从页面相关性和有用性开始。然后清理文件名。再根据需要查看压缩、格式、尺寸、懒加载和结构化数据。如果你的命名清理变成了更广泛的图片性能优化，我们的 2026 年图片格式指南 会是有用的配套阅读。

好的图片文件名对可访问性有什么作用

严格来说，文件名并不是图片的主要可访问性机制。替代文本才是。

如果图片传达信息，alt 属性应提供文本替代。如果图片是装饰性的，alt 属性通常应为空：alt=""。如果图片是链接或按钮，替代文本应描述操作或目标，而不只是描述像素内容。

我们在 2026 年图片替代文本实用指南 中对此做了详细说明，值得把替代文本作为一项独立的编辑任务来处理。

那么，为什么还要关心文件名的可访问性？

因为文件名经常出现在体验的边缘位置：

• 某些辅助技术/浏览器组合可能会在缺少替代文本时暴露文件名。
• 下载后的图片在网页之外也需要易懂的名称。
• 当名称具有描述性时，CMS 媒体库更容易审计。
• 文件命名清楚时，编辑更不容易附加错误的图片。
• 损坏图片和调试视图更容易理解。

文件名不会让不可访问的图片变得可访问。但糟糕的文件名会让失败情况更令人困惑。

一种实用的命名约定

使用这个默认模式：

subject-detail-context.ext

示例：

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

对于产品，稍微更结构化的版本通常更好：

brand-product-model-color-view.ext

示例：

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

对于编辑类图片：

topic-specific-scene.ext

示例：

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

对于 UI 截图：

feature-state-device.ext

示例：

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

这不是为了建立僵硬的分类法。它是为了消除歧义。

使用连字符、小写和普通词语

对于公开的网页资源，优先使用：

• 小写字母
• 单词之间使用连字符
• 不使用空格
• 不使用下划线
• 除连字符外不使用标点
• 除非系统要求，否则不使用特殊字符

好的示例：

blue-cotton-shirt-front.jpg

避免：

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

连字符更易阅读、更易复制，并且在 URL 中被广泛理解为单词分隔符。小写也能避免本地开发、Linux 服务器、CDNs 和对象存储之间令人烦恼的大小写敏感问题。

文件名要短，但不要含糊

文件名应足够长，能够描述图片；也应足够短，保持可读。

一个有用的范围通常是扩展名前 3 到 8 个单词。

太含糊：

shoes.jpg

更好：

red-running-shoes-side-view.jpg

太多：

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

更好：

red-marathon-running-shoes-side-view.jpg

如果这个短语听起来像一个绝望营销人员写下的搜索查询，它可能就太长了。

不要在图片文件名中堆砌关键词

在文件名中堆砌关键词，通常说明页面本身没有完成它该做的事。

糟糕示例：

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

这对用户没有帮助。对编辑没有帮助。也不是严肃的可访问性实践。它还会让你的网站看起来质量更低。

使用图片中所展示事物的自然名称。如果某个关键词因为准确描述了图片而适合使用，就使用它。如果不适合，就不要放进去。

例如，如果图片是一张黑色皮沙发的照片，black-leather-sofa-three-seat.jpg 没问题。best-modern-luxury-living-room-furniture-online.jpg 不是文件名；它是一声求救。

让文件名与实际图片匹配

这听起来显而易见，但图片库会漂移。一个叫 homepage-hero-new.jpg 的文件，最终可能展示的是另一个产品、另一个人，或完全不同的活动。

这会造成两个问题。

第一，搜索引擎和用户会收到不一致的信号。第二，团队会停止信任媒体库。

如果图片的含义发生变化，请在发布前重命名。如果你的 CMS 或 CDN 让重命名变得困难，可以考虑在内部使用稳定的素材 ID，同时在可能的情况下仍生成描述性的公开文件名。

一个好的内部工作流可能是：

1. 上传原始素材。
2. 如果涉及隐私，去除不必要的元数据。
3. 重命名网站上使用的派生文件。
4. 以正确的尺寸和格式导出。
5. 在 CMS 中添加替代文本和图注。

如果照片来自用户、员工或现场团队，请记住文件名只是隐私暴露面之一。EXIF 数据可能包含时间戳、相机详情和位置信息。在发布敏感图片前，请参阅我们的指南：如何在在线分享照片前去除 EXIF 元数据。

将文件名与替代文本分开

一个常见错误是为文件名和替代文本使用同一个短语。

有时这是可以接受的。但很多时候这只是偷懒。

文件名：

red-running-shoes-side-view.jpg

产品页面上的好替代文本：

Red running shoe shown from the side, with a white foam sole and black laces.

颜色选择缩略图上的好替代文本：

Red

如果图片是装饰性的，好替代文本：

alt=""

文件名用于识别素材。替代文本在上下文中服务用户。它们是相关的工作，但不是相同的工作。

为不同类型的网站命名图片

Ecommerce

包含产品类型、重要变体和视角。

示例：

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

避免添加价格、促销或临时活动语言。这些变化太频繁。

博客和编辑类网站

描述场景或概念，而不是文章标题。

好的示例：

designer-reviewing-mobile-layout.jpg

不太有用：

ultimate-guide-to-mobile-ux.jpg

图片可能会被复用、裁剪或分发。基于场景的名称更经得起时间变化。

SaaS 和文档

按功能、状态和平台为截图命名。

示例：

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

这会让文档更新轻松得多。

本地商家

当服务、对象或位置确实可见且相关时，可以使用它们。

示例：

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

如果图片并不支持，就不要给每个文件都添加城市名。一张扳手照片并不能有意义地称为 wrench-london.jpg。

图片尺寸和版本怎么办？

除非系统需要，否则避免把尺寸放进主要描述名称中。

更好的素材系列：

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

如果你的构建系统会自动生成响应式变体，就让它追加宽度或哈希。不要手动维护几十个文件名，除非你喜欢未来考古。

内容哈希对缓存很有用：

red-running-shoes-side-view.a8f31c.webp

描述性部分仍然存在。哈希服务于机器。

发布前快速检查清单

发布图片前，请问：

• 文件名是否用普通语言描述了图片？
• 它是否为小写并使用连字符分隔？
• 它是否没有关键词堆砌？
• 它是否避免了 new、final 或 v2 这类临时词？
• 替代文本在页面上下文中是否合理？
• 文件格式和大小是否合适？
• 必要时是否已移除敏感元数据？

如果这些问题你都能回答“是”，文件名大概率已经足够好。不要花 20 分钟给一个装饰性分隔线命名。但请花 20 秒阻止 DSC0038.jpg 变成一个永久公开 URL。

<!-- tool-cta:start -->

💡 试试这个: 使用 Case Converter 批量将文件名规范化为 lowercase-kebab-case，让你的图片名称在整个项目中保持一致。

<!-- tool-cta:end -->

安静的收益：更好的团队协作

图片文件名的 SEO 价值是有限的。它的运营价值更大。

好的文件名让媒体库可搜索。它们减少重复上传。它们帮助设计师、开发者、营销人员和支持团队无需打开六个预览，就能谈论同一个素材。它们让审计更快。

这才是标准化图片命名的真正理由。清晰性让搜索引擎受益，也让人受益。而工作通常最先在人这里出问题。