如何用OpenAI生成内容更新WordPress中Yoast SEO的元描述

问题背景 #

我开发了一款调用OpenAI生成产品描述等数据的WordPress插件，目前无法将生成的元描述整合到Yoast SEO插件中。现有JS代码能在控制台输出生成的元描述，但无法同步到Yoast的对应字段，需要正确的选择器或实现方法。

现有尝试代码 #

// Send the cURL request for generating meta description
var metaDescRequest = new XMLHttpRequest();
metaDescRequest.open('POST', apiLink, true);
for (var header in headers) {
    metaDescRequest.setRequestHeader(header, headers[header]);
}
metaDescRequest.onreadystatechange = function() {
    if (metaDescRequest.readyState === 4 && metaDescRequest.status === 200) {
        var metaDesc = JSON.parse(metaDescRequest.responseText).choices[0].text;
        console.log(metaDesc);
        jQuery('#yoast-meta-description').val(metaDesc); // Update the Yoast SEO plugin meta description field with the generated meta description
    }
};
metaDescRequest.send(metaDescRequestData);

解决方案 #

方法1：适配新版Yoast的DOM选择器（兼容旧版） #

Yoast SEO更新后，元描述输入框的DOM结构已变化，旧选择器#yoast-meta-description不再生效。可通过以下步骤定位正确元素：

1. 打开WordPress文章编辑页，右键检查元描述输入框
2. 找到实际元素的ID或属性，新版Yoast的元描述框通常为textarea#yoast-seo-meta-description-editor，或带有aria-label="Meta description"属性

修改DOM操作代码，同时触发change事件（Yoast依赖该事件同步内部状态）：

// 替换原jQuery('#yoast-meta-description').val(metaDesc); 为以下代码
var metaDescField = jQuery('textarea#yoast-seo-meta-description-editor');
if (metaDescField.length) {
    metaDescField.val(metaDesc).trigger('change');
}

方法2：使用Yoast SEO官方JS API（推荐） #

Yoast提供了官方JS API操作SEO数据，兼容性更强，不受DOM结构变化影响：

1. 确保代码在Yoast初始化完成后执行，可通过监听yoast-seo-ready事件或延迟重试实现
2. 使用YoastSEO.app.setData()更新元描述，再调用refresh()触发SEO分析刷新

修改后的完整回调代码：

metaDescRequest.onreadystatechange = function() {
    if (metaDescRequest.readyState === 4 && metaDescRequest.status === 200) {
        var metaDesc = JSON.parse(metaDescRequest.responseText).choices[0].text;
        console.log(metaDesc);

        // 确保Yoast SEO加载完成后执行更新
        function updateYoastMetaDesc() {
            if (typeof YoastSEO !== 'undefined' && YoastSEO.app) {
                // 设置元描述
                YoastSEO.app.setData('metadesc', metaDesc);
                // 触发SEO分析刷新
                YoastSEO.app.refresh();
            } else {
                // 延迟100ms重试
                setTimeout(updateYoastMetaDesc, 100);
            }
        }

        updateYoastMetaDesc();
    }
};

注意事项 #

• WordPress后台默认已加载jQuery，无需额外引入
• 新版Yoast依赖React渲染，直接操作DOM可能导致内部状态不同步，优先使用官方API

内容的提问来源于stack exchange，提问作者Mohammad Saeed