Lazy loaded image
Google 搜索结果(SERP)右侧显示图片技巧
Words 1702Read Time 5 min
2025-12-2
2025-12-2
type
status
date
slug
summary
tags
category
icon
password
😀
这里写文章的前言: 分析这张图,是在Google的搜索结果中的,第一个结果右侧是没有图片显示的,而第二个结果右侧有图片显示,我们怎么可以让我们网站的搜索结果可以显示图片呢
notion image
在 Google 搜索结果(SERP)右侧显示图片(通常称为缩略图Rich Snippet Image),并不是在后台点击一个简单的开关就能实现的,而是需要通过SEO 优化技术配置来向 Google 发出强烈的信号,告诉它这张图片是该页面的核心内容。
以下是实现这一效果的核心方法,按重要性排序:

1. 实施结构化数据 (Schema Markup) —— 最有效的方法

这是最直接告诉 Google “这张图片代表这个页面”的方式。您需要在页面代码中添加 JSON-LD 格式的结构化数据。
  • 这是什么: 一段搜索引擎能读懂的代码。
  • 怎么做: 针对您的页面类型(文章、产品、软件应用等),添加相应的 Schema。
如果您的页面是文章或通用页面,建议使用 ArticleWebPage 类型,并明确指定 image 属性。
代码示例 (添加到 <head> 部分):
 

2. 使用 <meta> 标签指定缩略图

Google 同时也支持一种更简单的 Meta 标签来指定缩略图。
  • Thumbnail Meta Tag: 直接告诉 Google 缩略图在哪里。HTML
    • <meta name="thumbnail" content="https://yourwebsite.com/path/to/image.jpg" />
  • Open Graph 标签 (og:image): 虽然这是给社交媒体(如 Facebook, Twitter)用的,但 Google 经常会将其作为备选方案读取。HTML
    • <meta property="og:image" content="https://yourwebsite.com/path/to/image.jpg" />

3. 图片本身的优化 (SEO 基础)

即使加了代码,如果图片质量不达标,Google 也不会抓取。
  • 图片位置: 图片应尽量放在页面内容的顶部(首屏可见区域)。
  • 相关性: 图片必须与页面内容高度相关。
  • Alt 文本: 必须给图片添加 alt 属性,准确描述图片内容。HTML
    • <img src="image.jpg" alt="描述图片内容的关键词" />
  • 清晰度与尺寸: 图片不能太小或太模糊。推荐长宽比为 4:316:9,且宽度至少在 1200px 以上(用于高清显示),文件格式推荐 JPG 或 WebP。

4. 检查 robots.txt 设置

确保您的 robots.txt 文件没有禁止 Googlebot 抓取您的图片目录(/images/)。如果 Google 无法访问图片文件,它自然无法在搜索结果中显示。

关于您截图中的那个图标

注意看您截图中右下角的图片(那个山和太阳的图标),那其实是一个通用的占位符图标。这通常意味着:
  1. 该网站向 Google 发出了“我有图片”的信号(可能有结构化数据)。
  1. 但是具体的图片链接可能失效了,或者 Google 认为图片质量不够高,所以显示了一个默认的类别图标。
  1. 或者,这是某个特定的行业(如工具类网站),Google 自动分配了一个类型图标。
您的目标应该是显示您网站真实的截图或 Logo,而不是那个通用图标。

总结与建议步骤

  1. 首选: 在页面 HTML 中添加 JSON-LD Schema Markup
  1. 必做: 确保页面头部有 <meta property="og:image" ...> 标签。
  1. 验证: 上线后,使用 Google 富媒体搜索结果测试工具 (Rich Results Test) 来测试您的页面,看 Google 是否能成功抓取到图片。
 
生成的一份适合网站 页面类型的 Schema 代码模板。

方案一:针对在线工具/软件页面(最推荐)

如果您的页面是一个在线功能(如图片转换、PDF处理、计算器等),使用 SoftwareApplicationWebApplication 类型是最精准的,这能让 Google 明确知道这是一个“产品/工具”,并抓取其中的图片作为预览。 注意:image 数组中建议提供 16:9, 4:3, 和 1:1 三种比例的图片,Google 会自动选择最适合的一个显示。

方案二:针对普通内容/文章页面(通用型)

如果您的页面主要是文字介绍、教程或普通网页,使用 WebPageArticle 是最稳妥的选择。

如何使用这些代码?

  1. 修改内容:将代码中 您的... 相关的中文替换为您网站的真实信息,特别是 图片链接 (URL) 必须是真实可访问的。
  1. 放置位置:将修改后的代码段直接复制,粘贴到您网页 HTML 的 <head> 标签内部,或者 <body> 的最下方。
  1. 验证:代码上线后,务必使用 Google 富媒体搜索结果测试 输入您的网址进行测试。如果看到“检测到结构化数据”且包含图片字段,就说明配置成功了。
关键提示: 为了提高成功率,请确保您填入的图片 URL 是一张高质量、清晰的图片(建议宽度 >1200px),不要使用网站的小 Logo 作为 image 属性,那样通常不会被 Google 选作搜索结果右侧的大图。
 
 

🤗 总结归纳

总结文章的内容

📎 参考文章

  • 一些引用
  • 引用文章
 
💡
有关Notion安装或者使用上的问题,欢迎您在底部评论区留言,一起交流~
上一篇
新开一篇文章记录第一个工具站的思考和执行
下一篇
内容驱动增长的绝佳参考(Content-Led Growth)