返回

Yoast SEO产品Schema图片问题解决:URL直接显示

php

解决 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"} 这种格式。

步骤:

  1. 打开您 WordPress 主题的 functions.php 文件。
  2. 添加以下代码,进行数据调整。

代码示例:

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地址, 并替换原先包含@idimage。此处做简单字符串替换,实际操作可能需要根据你网站上的@id实际生成规律做相应调整。
* 接下来逻辑用于处理存在产品变体的hasVariant的schema。它遍历所有产品变体,重复与上面步骤类似的替换图片url操作。
* 替换操作完成后,将新的 $data 数据返回。

  1. 保存文件。

注意:
* 这种修改方案是修改全局配置,如果只有特定产品或特定情景有特殊要求,则需要结合其它钩子来实现更精确的调整。
* 务必备份主题,并注意使用代码编辑器的语法检查功能,避免代码错误。

解决方案 2: 修改插件源代码(不推荐)

虽然直接修改插件源代码可能立即生效,但强烈不建议 这么做,原因在于插件更新后,修改会丢失,而且还会导致日后维护困难。如若真有需要进行该方式调整,也请确保提前备份插件文件。

修改步骤(仅供参考,不推荐):

  1. 找到 wp-content/plugins/wordpress-seo/src/integrations/schema/product.php 文件。(注意:此路径可能因版本而异)
  2. 搜索protected function filter_variations 函数。
  3. 修改相关代码片段如下:

修改后代码:

    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'];

  1. 保存修改后的 product.php 文件。
    务必进行充分测试,确认修改无误。
    注意: 该方式在插件更新后失效。

总结

以上介绍了两种方法,帮助大家调整 Yoast SEO 插件输出的 Schema 图片格式,将带有 @id 的图片结构替换成直接的 URL,解决谷歌 Snippet 中不显示产品图片的问题。请根据您的实际情况选择合适的解决方案。
修改代码后请使用 Google 的结构化数据测试工具进行验证。建议在测试环境进行调试,确定功能正常再部署到生产环境。

通过以上操作,有望实现预期的 Schema 输出格式,进而提升网站在搜索引擎中的展示效果。