WordPress新手入门：百度显示缩略图全攻略，解决网站太丑不够用

你是不是也遇到过这样的问题：建了一个WordPress网站，结果在百度搜索结果里只显示了标题和描述，连一张缩略图都没有？看起来太丑，不够专业，用户点击率低，流量就上不去。作为新手入门，这种问题真的让人头疼。别急，本文手把手教你搞定【WordPress百度显示缩略图】，让你的网站看起来更专业、更吸引人。

需求分析：为什么百度要显示缩略图？

百度作为中国最大的搜索引擎，对用户体验非常重视。显示缩略图可以让用户更直观地看到网页内容，提高点击率。而WordPress默认并不会自动向百度提交缩略图，需要我们自己配置。

缩略图对SEO的影响

百度搜索引擎会根据网页内容自动抓取图片作为缩略图展示。如果网站内容没有明确的图片标签或者没有使用Open Graph协议，百度就无法正确识别并显示缩略图。这对SEO优化是一个不小的打击，尤其是对于新手来说，网站看起来“不专业”会直接影响流量和用户体验。

常见误区

很多新手认为只要安装了一个漂亮的WordPress主题，网站就自然会被百度显示缩略图。但实际上，主题好看只是第一步，真正影响缩略图显示的是网站的代码配置、图片标签是否规范、是否使用了Open Graph协议等。

环境准备：你需要哪些工具和资源

在开始配置之前，你需要准备好以下几样东西：

1. 一个已部署好的WordPress网站

无论是本地开发环境还是已经上线的服务器，确保网站已经可以正常访问。

2. 一个可靠的图片存储方式

确保网站内所有图片都保存在合理的路径下，推荐使用WordPress媒体库上传图片，避免使用外链图片。

3. 一个支持Open Graph协议的插件（推荐）

虽然可以通过手动修改代码来实现，但使用插件能大幅简化操作，推荐使用 Yoast SEO 或 All in One SEO，这些插件都支持自定义Open Graph标签。

4. 一台可以访问百度站长平台的电脑

百度站长平台是向百度提交站点信息、设置缩略图规则的重要工具。

核心步骤：如何让WordPress网站在百度显示缩略图

第一步：使用Yoast SEO插件设置Open Graph标签

Yoast SEO 是 WordPress 最流行的SEO插件之一，支持自定义Open Graph协议。以下是具体操作步骤：

1. 安装并激活Yoast SEO插件

登录WordPress后台 → 插件 → 添加新插件 → 搜索“Yoast SEO” → 安装并激活。

2. 配置Open Graph标签

进入 SEO → 通用设置 页面。
找到社交选项卡。
勾选 在文章和页面中使用Open Graph标签。
确保 Facebook App ID 和 Twitter Site 设置正确，即使你不使用Facebook，Open Graph协议仍然需要这些字段。

注意： 如果你没用Facebook账号，可以随便填写一个数字或者留空，但建议填写，否则可能出现错误。

3. 设置默认图片

在 SEO → 通用设置 → 社交 页面，找到 Open Graph图片默认 选项。
点击上传图片，选择你希望作为网站默认缩略图的图片（推荐使用正方形图片，尺寸建议 1200x630px）。

小贴士： 图片必须为jpg、jpeg或png格式，并且不超过3MB，否则百度可能无法正常识别。

第二步：手动添加图片标签到文章和页面中

如果你不想使用插件，也可以手动在文章中添加图片标签，确保每篇文章都有一个主图。

示例代码（使用WordPress的the_post_thumbnail函数）：

<?php if (has_post_thumbnail()) : ?><div class="post-thumbnail"><?php the_post_thumbnail('large'); ?></div>
<?php endif; ?>

说明： has_post_thumbnail() 检查当前文章是否有缩略图，the_post_thumbnail('large') 输出文章的缩略图，'large' 表示使用大尺寸图片。你也可以使用 'medium'、'thumbnail' 等尺寸。

如果你使用的是自定义模板，可以这样写：

<img src="<?php echo get_template_directory_uri(); ?>/images/default-thumbnail.jpg" alt="文章缩略图" />

说明： get_template_directory_uri() 获取当前主题的目录路径，你可以在主题的 images 文件夹中存放默认图片。

第三步：使用Open Graph协议规范编写图片标签

如果你希望更精确地控制缩略图的显示，可以手动在文章头部（<head>标签中）添加Open Graph标签。

示例代码：

<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:type" content="article" />

说明：

og:title：文章标题
og:description：文章摘要
og:image：缩略图的URL（通过 wp_get_attachment_url() 获取）
og:url：文章链接
og:type：文章类型（可选，常见有 article、website 等）

MDN Web Docs 提示： Open Graph 协议基于 HTML5 的 <meta> 标签定义，具体规范可以参考 MDN Web Docs。

代码/配置示例：实战演示如何配置缩略图

示例1：使用Yoast SEO插件设置默认缩略图

登录WordPress后台 → SEO → 通用设置 → 社交
勾选“在文章和页面中使用Open Graph标签”
点击“上传图片”，选择你希望作为默认缩略图的图片
保存更改

示例2：在文章中添加图片标签（PHP代码）

如果你使用的是自定义主题，可以在 single.php 或 page.php 中添加以下代码：

<?php if (has_post_thumbnail()) : ?><div class="post-thumbnail"><img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" /></div>
<?php else : ?><div class="post-thumbnail"><img src="<?php echo get_template_directory_uri(); ?>/images/default-thumbnail.jpg" alt="默认缩略图" /></div>
<?php endif; ?>

说明： 这段代码会优先显示文章的缩略图，如果没有设置缩略图，则显示默认缩略图。

示例3：在页面头部添加Open Graph标签（HTML代码）

如果你手动配置Open Graph标签，可以在 header.php 文件中添加以下代码：

<!-- Open Graph Protocol -->
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:type" content="article" />