图片 SEO 实战｜香港网站如何优化图片、ALT 文字、速度与搜索曝光

01 / SEO

照片已经存在，但 Google 未必找得到。

一张好照片可以做很多事：展示上环店铺门面的颜色，证明产品拿在手里是什么样子，也可以在读者读到段落前先让学生看到相机应该怎样摆。不过，网上有不少漂亮图片其实披着隐形斗篷——藏在 CSS background 里，文件名是一串相机编号，没有 ALT，上传后足足 6MB，页面还要等到天荒地老才稳定。

这就是图片 SEO的核心。你要帮搜索系统和真人回答四个普通问题：这是什么？和这一页有关吗？能不能快点看到？我有没有权使用？漏掉一个，对上传的人来说照片仍然漂亮，但搜索世界没那么多感情。

Google 的图片 SEO 指南提到，系统会从图片所在页面提取信息，包括周围文字、图片说明、标题 和 ALT，也建议使用标准 HTML 图片元素、支持的格式和 图片网站地图。重点很清楚：是 上下文 和 可访问性，不是往关键词上撒金粉。

“照片是页面意义的一部分，不是文章写完以后才贴上去的贴纸。” — 图片 SEO 实用原则

02 / SEO

Google 看得到什么，看不到什么？

先讲最基本的实现。Google 当前文档说明，搜索爬虫 可以从 <img> 的 src 属性找到图片，包括放在 <picture> 里的 img。至于 CSS 背景图片，Google 搜索 不会以同样的方式把它当作 图片内容 去 编入索引。所以，产品照片如果是重要证据，不要只把唯一一张图藏在 装饰用样式表 里。

<!-- 容易被 crawl 的内容图片 -->
<img src="tai-o-seafood-market.jpg"
     alt="香港大澳街市的新鲜海鲜摊位"
     width="1600" height="1067">

<!-- 背景图；不要用它承载唯一重要图片 -->
<div class="hero" style="background-image:url(hero.jpg)"></div>

图片网站地图 文档说，图片网站地图 可以帮 Google 发现原本可能找不到的图片，尤其是先通过 JavaScript 调用的图片。不过它是 发现工具，不是排名按钮。如果图片被 权限阻挡、藏在登录后面，或者所属页面薄到只有几行字，网站地图 也不会突然变魔法。

还有一个很容易漏掉的细节：图片和页面要讲同一个故事。文件叫 `best-hong-kong-coffee.jpg`，旁边段落却在讲镜头焦距，这不是聪明，是混乱。搜索系统正在拼一张一致的页面图像，而你的文件名在旁边讲另一套。就有点尴尬。

03 / SEO

文件名、格式、容量：三角关系要平衡

文件名很小，但不是完全没用。`IMG_4821.JPG`几乎没有告诉 搜索爬虫 任何东西；`north-point-chun-yeung-street-photographer.jpg`至少说了主题、地点和页面关系。保持可读，用连字符，不要把同一个关键词重复十次；旧 URL 如果已经有 反向链接 或 图片流量，更别随便改完就不管。

Google 在图片最佳做法中列出 BMP、GIF、JPEG、PNG、WebP、SVG 和 AVIF 等支持格式。实际指令很朴素：扩展名要对应文件类型，画质要够用。太小太糊不是 SEO 胜利；太大太漂亮也不是 UX 胜利。

之前
IMG_4821.JPG

之后
hong-kong-night-photography-workshop.webp

第二个名字有描述性，但不需要把“图片 SEO”重复三次。
让文件名歇一口气。

04 / SEO

ALT 不是关键词垃圾桶

ALT 有两份工作，互有关联但不完全相同：无障碍 和 图片理解。Google 称 ALT 是提供图片 图片资料 最重要的 属性，也强调它对 读屏软件 用户和低带宽读者有用。优先顺序很清楚：先写得像人话，再想搜索。

空白格是有意的。装饰图一般应该使用空白 ALT——alt=——避免 辅助技术 强迫人听一段其实没有帮助的描述。最好不要完全漏掉 属性；空白 ALT 表示你是刻意保持安静。

<!-- 有信息的图片 -->
<img src="north-point-noodle-shop.jpg"
     alt="北角一间茶餐厅内，小桌上放着两碗云吞面">

<!-- 装饰图 -->
<img src="paper-grain.svg" alt="">

图片说明 又是另一回事。ALT 是贴在 图片 元素 上的短描述；图片说明 是读者看得到的 编辑 上下文。如果照片里有值得注意的细节——湿地、取景角度、旧店招牌——可以放进 图片说明 或附近段落。不要让 ALT 一个人扛整篇文章，它会累的。

复杂图表、地图和 图表，短 ALT 可以讲清楚对象和结论，页面则用普通文字提供数据或完整解释。读屏软件 用户不应该靠几粒 像素 猜趋势；搜索引擎也不应该是唯一服务对象。

05 / SEO

速度：不要等图片到了才搬好家具

最快的图片，往往是不需要发送的那张。之后才是按设备真实需要输出的版本。web.dev 自适应 图片 指南提到，网站通常会准备几个图片尺寸，让 浏览器 自己选择；手机访客不应该因为 CMS 只有一个文件，就被送上一张 2400px 桌面版 图。

如果比例已知，就加 width 和 height，或者用 CSS 预留比例，避免图片到达时整页跳位。Chrome 关于 LCP 的文档说明，LCP 是最大可见内容元素完成 呈现 的时间；图片主导的页面，首屏主图 很多时候就是要先理解的那一个。

<img src="hong-kong-market-960.webp"
     srcset="hong-kong-market-480.webp 480w,
             hong-kong-market-960.webp 960w,
             hong-kong-market-1600.webp 1600w"
     sizes="(max-width: 760px) 100vw, 760px"
     alt="香港一条挂满彩色遮棚的繁忙街市通道"
     width="1600" height="1067"
     loading="lazy" decoding="async">

‘Lazy’这个词要加一个 warning label。web.dev 浏览器 延迟加载 文档建议延迟加载 首屏以外 图片，但首屏、尤其是 LCP 图片应该早一点可用。如果 CMS 把所有图片一刀切 延迟加载，它需要有人好好谈谈。

06 / SEO

香港三语言网站的图片 SEO 难题

一张照片不会说粤语、英语或普通话，但周围页面会。换一个词，意思可能就不同。‘茶店’未必等于「茶记」；‘街市’可能准确，却未必抓到「街市」背后的本地搜索意图。如果页面是写给香港人看的，ALT 和 图片说明 要写到香港读者真的明白，不是逐字翻译到像酒店 宣传册。

三个语言版本要保留重要视觉信息，但不必逐字一样。Google 的 手机版 指引要求 手机版 和 桌面版 版本有相若的图片质量及 图片资料；同一个原则也适用于语言版本。每一页有自己的 canonical 和 语言版本关系，图片如果是同一张，可以保持同一个稳定 URL。

做本地生意时，只在真实看得到或页面确实需要时加地点：比如照片是皇后大道中门面，页面也有资料，写「皇后大道中门面」就有帮助。不要把每个 ALT 都逼去旺角、铜锣湾、荃湾旅游。面包店的照片不会因为一句 ALT 塞入三个地区就突然更 本地。

文件名可以统一用英文，或者用团队长期管理得了的拼音／音译。读者看得到的 ALT 和 图片说明，比一场没完没了的 文件名 争论重要得多。选一套 编辑人员 真正会遵守的 命名规则，然后记录下来。

07 / SEO

电商、作品集、本地店铺：整理正确的证据

产品 图片集、摄影师作品集、餐厅地点页，本来就用不同方式使用图片。图片 SEO 不是把一个 模板 硬套到所有页面，而是让证据符合目的。产品图要清楚、稳定、一致；作品集要交代作品、创作者、项目 和授权；本地店铺应该展示真实地点和有用的到访资料，不要让 素材图 演戏。

文章方面，Google Article 结构化数据 文档说 标记 可以帮助 Google 理解文章、图片、日期和标题；产品方面，商家信息 文档说明 Product／Offer 标记 可能让页面符合包括 Google 图片 在内的 产品体验；本地业务可以参考LocalBusiness 结构化数据。不过符合资格不等于一定出现，页面仍然要值得被看见。

版权值得单独讲，因为不少人收到 下架邮件 才想起。Google 图片 图片资料 文档指出，如果希望符合 可授权标记 资格，图片 结构化数据 要有 license 属性；网页使用权声明 可以解释图片如何使用。但这不代表你可以从工作坊页面复制照片到自己的站点，只是说明在有权使用时怎样表达 使用权 资料。

IPTC 图片资料、创作者 署名 和 使用权 页面 对日常管理有用，但不等于 授权，更不是排名魔法。可以把它们看成照片的 passport 和文件——流转时很重要，但不是整段旅程。

08 / SEO

30 分钟图片 SEO 检查：实际做法

1. 选页面先看主要 落地页、产品页、作品页，以及已经有 图片曝光 的页面。最有价值的几张还没处理之前，不用急着 检查 废 缩略图。
2. 列出图片 URL记录当前 URL、文件名、格式、容量、像素 尺寸、ALT、图片说明、所属页面，以及是在首屏上面还是下面。
3. 检查 crawlability用 私人浏览器 打开图片 URL，看 HTML 有没有 img src，检查 robots 规则，确认页面不是要登录或 点击 后才出现图片。
4. 检查意思问自己：文件名、ALT、图片说明、附近文字和实际画面是不是在讲同一件事？有一样不同，就先改最误导的那个。
5. 检查 传送测手机和 桌面版 尺寸、版面移动、LCP、延迟加载、缓存标头，以及 浏览器 是否下载了远大于 显示位置 的文件。
6. 检查权利记录来源、摄影师、授权 或 使用权限。如果你说不清楚为什么有权发布，先暂停，真的。
7. 记录 基准用 Search Console、分析工具 和 速度测试 记录 图片 点击／曝光、页面 转化、图片 字节 和 实际性能。

在Search Console 性能 报告里，可以用 搜索类型 筛选器 查看 网页、图片、视频 或 新闻。Search Console 说明页也说明可以按 搜索查询、页面、国家／地区、设备 和 搜索外观 分组。这样你问的就不再是「SEO 有没有上升？」而是「香港手机用户在图片搜索里看到哪些产品页？有没有 查询？」——好得多。

指定页面时使用网址检查，速度问题则配合 Lighthouse／PageSpeed 和 浏览器 DevTools。实验室分数 不是整个世界；实际使用数据 可能完全是另一个故事，尤其是一个在繁忙 MTR 月台、只有一格信号的香港用户。不是开玩笑，那种环境才是实际网络。

09 / SEO

90 天计划：不用马上大装修网站

不用因为一张产品图有 4.8MB 就马上换掉整个 网站。从最痛的地方下手。一家香港小企业有五十张服务页，可能从一份可重复使用的 上传 检查清单 中获益，比一场第二周就停摆的 媒体库迁移 更多。我看过这套戏，中段很长。

10 / SEO

FAQ：图片 SEO 经常被问的问题

图片 SEO 会保证 Google 图片 排名吗？

不会。Google 图片指南讲的是帮助发现和理解图片的最佳实践，不是保证位置。结果会受到相关性、质量、竞争、搜索查询 上下文 和你无法控制的系统影响。有人保证第一格，通常是在用一茶匙确定性卖你一桶幻想。

每一个 ALT 都要有「图片 SEO」吗？

不需要。页面真的在讲图片 SEO 时，才在 标题、heading 或正文自然提到关键词。ALT 应该描述图片和用途。「图片 SEO 图片 SEO 香港 图片 SEO」对 读屏软件 用户没有帮助，看上去也很用力。

香港 SEO 一定要用中文文件名吗？

不一定。统一使用英文或拼音都可以，前提是团队能够长期管理。自然的繁中／英文 ALT、准确页面内容、本地 上下文 和稳定技术 传送，比文件名争论重要得多。选择一套 编辑人员 真正会遵守的 命名规则。

WebP 一定比 JPEG 好吗？

没有一个格式能赢过所有图片、浏览器、编辑流程 和画质要求。要测试真实输出。太糊、没有 备用版本，或者容量仍然大于需要，都不是胜利，只是 扩展名 更新了。

可以每张图都 延迟加载 吗？

可以加 属性，但不要一刀切。web.dev 建议 首屏以外 图片才 延迟加载，首屏／LCP 图片应该早点可用。主图 延迟加载，通常只是让读者更晚看到他们来看的画面。

EXIF 和相机设置会直接提高排名吗？

有用的 创作者 和 使用权 图片资料 可以保留，方便工作流程，但不要把策略押在 EXIF 上。搜索系统需要可 抓取 文件和有意义的页面 上下文；图片资料 救不了被 block 的图片、空洞页面，也救不了一张你没有权发布的照片。

一篇 blog 应该放多少张图？

解释需要多少就放多少。实战指南可能需要四张强而有用的图；产品页可能需要几个角度；短公告一张就够。数 meaning，不要数装饰。六张一样的 素材图，只是一个 idea 戴了六顶帽子。

今天第一件应该修什么？

用手机打开最重要的一页，找到最大的图片。检查 URL、容量、尺寸、ALT、加载 模式、图片说明 和 来源使用权；再检查 HTML 是否真正使用 img 元素。十分钟通常比再读一小时 SEO 讨论串 有用。

“让图片容易被找到、容易理解、容易加载，而且难以被误解。” — 实用图片 SEO 简报

其实就是这样。不是微型 技巧，不是在文件名里撒一撮关键词，也不是 插件仪表板 变绿但页面仍然慢得像等电梯。把照片当 内容，把页面当 上下文，把读者当真人，搜索系统很多时候会感觉到。