Yoast SEO产品Schema图片问题解决:URL直接显示
2025-01-14 02:03:24
解决 Yoast SEO 产品 Schema 图片问题
在优化电商网站的搜索引擎表现时,结构化数据(Schema)至关重要。Yoast SEO 插件在 WooCommerce 环境中,可以自动生成产品 Schema,但有时会出现图片数据格式不符合期望的情况,导致谷歌搜索结果 Snippet 无法正确展示产品图片。本文将分析常见原因,并提供多种解决方案。
问题:图片 Schema 结构不符合要求
在 Yoast SEO 与 WooCommerce 配合使用时,产品图片 Schema 通常以 {"@id":"https://domain/#primaryimage"}
这样的格式出现,而非直接的图片 URL 链接,例如"image": "https://dapamoga.by/wp-content/uploads/book.png"
。这种格式的 @id
通常指向网页内定义的一个图片元素,在某些场景下可能导致搜索引擎抓取困难,无法在 Snippet 中正确显示图片。问题核心是插件在生成 Schema 数据时,图片的处理方式与所需格式不一致。
原因分析:Yoast SEO 默认图片 Schema 生成机制
Yoast SEO 生成产品 Schema 的机制中,会将图片的 URL 转换为一个带有 @id
的结构。这样做可能考虑到了一些兼容性或特定用途,但在某些情况下确实不如直接使用 URL 直观有效。特别是对于变体产品(variations),其图片结构更复杂,问题更易出现。
以下是分析的核心代码块:
Yoast SEO 的默认代码片段 (摘录):
if ( isset( $variant_schema['image'] ) ) {
$this->variation_images[] = [ '@id' => $variant_schema['image']['@id'] ];
}
这个代码片段提取 variant_schema
中的 image
,然后只将该 image
中的 @id
部分保留,形成一个新的 ['@id' => ...]
结构,而不是直接使用图片 URL。
问题所在:
当用户希望直接输出图片 URL时,就需要调整该段代码的逻辑。因为Yoast SEO 输出结构化数据的默认配置和逻辑,并不能满足用户的定制化要求。
解决方案 1: 修改主题 functions.php
文件
通过主题的 functions.php
文件挂载钩子修改 Schema 输出是一种安全且常用的方式。我们利用 wpseo_schema_product_output
过滤器可以调整 Schema 中的图片部分, 从而直接使用图片URL而不是 {@id:"xxx"}
这种格式。
步骤:
- 打开您 WordPress 主题的
functions.php
文件。 - 添加以下代码,进行数据调整。
代码示例:
function custom_product_schema_image( $data ) {
if ( isset( $data['image'] ) && is_array( $data['image'] ) && isset( $data['image']['@id'] ) ) {
// Extract URL based on '@id', this part assumes some consistency in @id value structure
// You will have to verify this on a specific scenario.
$url = str_replace( "#primaryimage","", $data['image']['@id']);
if (filter_var($url, FILTER_VALIDATE_URL))
$data['image'] = $url;
}
//處理有hasVariant 的情況
if( isset($data['hasVariant']) && is_array($data['hasVariant']) ){
foreach ($data['hasVariant'] as &$variant) {
if ( isset( $variant['image'] ) && is_array( $variant['image'] ) && isset( $variant['image']['@id'] ) ) {
// Extract URL based on '@id', this part assumes some consistency in @id value structure
$url = str_replace( "#primaryimage","", $variant['image']['@id']);
if (filter_var($url, FILTER_VALIDATE_URL))
$variant['image'] = $url;
}
}
}
return $data;
}
add_filter( 'wpseo_schema_product_output', 'custom_product_schema_image', 10, 1 );
代码说明:
此函数通过wpseo_schema_product_output
过滤器修改产品的schema。
* if
条件用于判断 schema 数据里是否存在 'image'
字段,并检查它是否为对象类型且包含 '@id'
。
* 如果符合条件,则从中提取出图片的url地址, 并替换原先包含@id
的image
。此处做简单字符串替换,实际操作可能需要根据你网站上的@id
实际生成规律做相应调整。
* 接下来逻辑用于处理存在产品变体的hasVariant
的schema。它遍历所有产品变体,重复与上面步骤类似的替换图片url操作。
* 替换操作完成后,将新的 $data
数据返回。
- 保存文件。
注意:
* 这种修改方案是修改全局配置,如果只有特定产品或特定情景有特殊要求,则需要结合其它钩子来实现更精确的调整。
* 务必备份主题,并注意使用代码编辑器的语法检查功能,避免代码错误。
解决方案 2: 修改插件源代码(不推荐)
虽然直接修改插件源代码可能立即生效,但强烈不建议 这么做,原因在于插件更新后,修改会丢失,而且还会导致日后维护困难。如若真有需要进行该方式调整,也请确保提前备份插件文件。
修改步骤(仅供参考,不推荐):
- 找到
wp-content/plugins/wordpress-seo/src/integrations/schema/product.php
文件。(注意:此路径可能因版本而异) - 搜索
protected function filter_variations
函数。 - 修改相关代码片段如下:
修改后代码:
if ( isset( $variant_schema['image'] ) ) {
$this->variation_images[] = $variant_schema['image']; //直接将URL存入
}
将$this->variation_images[] = [ '@id' => $variant_schema['image']['@id'] ];
改为$this->variation_images[] = $variant_schema['image'];
- 保存修改后的
product.php
文件。
务必进行充分测试,确认修改无误。
注意: 该方式在插件更新后失效。
总结
以上介绍了两种方法,帮助大家调整 Yoast SEO 插件输出的 Schema 图片格式,将带有 @id
的图片结构替换成直接的 URL,解决谷歌 Snippet 中不显示产品图片的问题。请根据您的实际情况选择合适的解决方案。
修改代码后请使用 Google 的结构化数据测试工具进行验证。建议在测试环境进行调试,确定功能正常再部署到生产环境。
通过以上操作,有望实现预期的 Schema 输出格式,进而提升网站在搜索引擎中的展示效果。