一套 WooCommerce 可视化后台管理版模板,直接在产品编辑页面填 Brand / Semantic Slots / Answer Nodes / FAQ,后台可视化操作,前端自动生成 DIV + JSON-LD 双层 AI Spider Friendly 结构,适合 2026 AEO / GEO 实战。
可视化后台 Meta Box
Brand Name
Semantic Slots(多行输入)
Answer Nodes / Answer Surface(多行输入)
FAQ(每行 Question | Answer)
前端自动生成
JSON-LD 官方结构(Product + Brand + Related Products)
DIV 层 AI可读结构(Answer Surface + Slots + Definition + FAQ)
前端隐藏但 AI 可抓取(clip/绝对定位)
完全可扩展
可增加 Cross-Entity 链接
可扩展更多 Answer Node 模块
// ——————————
// 0. Hidden CSS for AI readability
// ——————————
add_action(‘wp_head’, function(){
echo ‘<style>
.ai-entity-root,
.ai-brand-entity,
.ai-definition-layer,
.ai-context-slots,
.ai-answer-surface,
.ai-cross-entity,
.ai-faq-layer {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(1px,1px,1px,1px);
white-space:nowrap;
}
</style>’;
});
// ——————————
// 1. Add Meta Boxes in Product Edit
// ——————————
add_action(‘add_meta_boxes’,‘wc_ai_add_meta_boxes’);
function wc_ai_add_meta_boxes(){
add_meta_box(‘wc_ai_meta’,‘AI Visibility’,‘wc_ai_meta_box_callback’,‘product’,‘normal’,‘high’);
}
function wc_ai_meta_box_callback($post){
wp_nonce_field(‘wc_ai_save_meta’,‘wc_ai_meta_nonce’);
$brand = get_post_meta($post->ID,‘wc_ai_brand’,true);
$slots = get_post_meta($post->ID,‘wc_ai_slots’,true);
$answers = get_post_meta($post->ID,‘wc_ai_answers’,true);
$faqs = get_post_meta($post->ID,‘wc_ai_faqs’,true);
$related = get_post_meta($post->ID,‘wc_ai_related’,true);
?>
<p><label>Brand Name:</label><br>
<input type=“text” name=“wc_ai_brand” value=“<?php echo esc_attr($brand); ?>“ style=“width:100%;“></p>
<p><label>Semantic Slots (one per line):</label><br>
<textarea name=“wc_ai_slots” rows=“5” style=“width:100%;“><?php echo esc_textarea($slots); ?></textarea></p>
<p><label>Answer Nodes / Scenarios (one per line):</label><br>
<textarea name=“wc_ai_answers” rows=“8” style=“width:100%;“><?php echo esc_textarea($answers); ?></textarea></p>
<p><label>FAQ (format: Question | Answer, one per line):</label><br>
<textarea name=“wc_ai_faqs” rows=“8” style=“width:100%;“><?php echo esc_textarea($faqs); ?></textarea></p>
<p><label>Related Products (one URL per line):</label><br>
<textarea name=“wc_ai_related” rows=“5” style=“width:100%;“><?php echo esc_textarea($related); ?></textarea></p>
<?php
}
// ——————————
// 2. Save Meta Box
// ——————————
add_action(‘save_post’,‘wc_ai_save_meta’);
function wc_ai_save_meta($post_id){
if(!isset($_POST[‘wc_ai_meta_nonce’]) || !wp_verify_nonce($_POST[‘wc_ai_meta_nonce’],‘wc_ai_save_meta’)) return;
update_post_meta($post_id,‘wc_ai_brand’,sanitize_text_field($_POST[‘wc_ai_brand’]));
update_post_meta($post_id,‘wc_ai_slots’,sanitize_textarea_field($_POST[‘wc_ai_slots’]));
update_post_meta($post_id,‘wc_ai_answers’,sanitize_textarea_field($_POST[‘wc_ai_answers’]));
update_post_meta($post_id,‘wc_ai_faqs’,sanitize_textarea_field($_POST[‘wc_ai_faqs’]));
update_post_meta($post_id,‘wc_ai_related’,sanitize_textarea_field($_POST[‘wc_ai_related’]));
}
// ——————————
// 3. Frontend Output Functions
// ——————————
add_action(‘woocommerce_single_product_summary’,‘wc_ai_output_structures’,5);
function wc_ai_output_structures(){
global $product;
$id = $product->get_id();
$brand = get_post_meta($id,‘wc_ai_brand’,true);
$slots = explode(“\n“,get_post_meta($id,‘wc_ai_slots’,true));
$answers = explode(“\n“,get_post_meta($id,‘wc_ai_answers’,true));
$faqs = explode(“\n“,get_post_meta($id,‘wc_ai_faqs’,true));
$related = explode(“\n“,get_post_meta($id,‘wc_ai_related’,true));
// — 1. JSON-LD —
$json = [
“@context”=>“https://schema.org”,
“@type”=>“Product”,
“name”=>$product->get_name(),
“brand”=>[“@type”=>“Brand”,“name”=>$brand],
“category”=>“Product”,
“description”=>$product->get_short_description(),
“sku”=>$product->get_sku(),
“offers”=>[“@type”=>“Offer”,“url”=>$product->get_permalink(),“priceCurrency”=>“USD”,“price”=>$product->get_price(),“availability”=>“https://schema.org/InStock”],
“relatedLink”=>array_filter($related)
];
echo ‘<script type=”application/ld+json”>’.wp_json_encode($json, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE).‘</script>’;
// — 2. DIV 层结构 —
echo ‘<div class=”ai-entity-root” itemscope itemtype=”https://schema.org/Product”>’;
echo ‘<meta itemprop=”name” content=”‘.esc_attr($product->get_name()).‘”>’;
echo ‘<meta itemprop=”description” content=”‘.esc_attr($product->get_short_description()).‘”>’;
echo ‘<meta itemprop=”sku” content=”‘.esc_attr($product->get_sku()).‘”>’;
echo ‘</div>’;
if($brand){
echo ‘<div class=”ai-brand-entity” itemscope itemtype=”https://schema.org/Brand”>’;
echo ‘<meta itemprop=”name” content=”‘.esc_attr($brand).‘”>’;
echo ‘</div>’;
}
if(!empty($slots)){
echo ‘<div class=”ai-context-slots”>’;
foreach($slots as $s){
$s = trim($s);
if($s) echo ‘<div itemscope itemtype=”https://schema.org/DefinedTerm”><meta itemprop=”description” content=”‘.esc_attr($s).‘”></div>’;
}
echo ‘</div>’;
}
if(!empty($answers)){
echo ‘<div class=”ai-answer-surface” itemscope itemtype=”https://schema.org/ItemList”>’;
foreach($answers as $a){
$a = trim($a);
if($a) echo ‘<div itemprop=”itemListElement” itemscope itemtype=”https://schema.org/DefinedTerm”><meta itemprop=”name” content=”‘.esc_attr($product->get_name()).‘”><meta itemprop=”description” content=”‘.esc_attr($a).‘”></div>’;
}
echo ‘</div>’;
}
if(!empty($related)){
echo ‘<div class=”ai-cross-entity”>’;
foreach($related as $r){
$r = trim($r);
if($r) echo ‘<meta itemprop=”relatedLink” content=”‘.esc_url($r).‘”>’;
}
echo ‘</div>’;
}
if(!empty($faqs)){
echo ‘<div class=”ai-faq-layer” itemscope itemtype=”https://schema.org/FAQPage”>’;
foreach($faqs as $f){
if(strpos($f,‘|’)!==false){
list($q,$a) = explode(‘|’,$f,2);
$q = trim($q); $a = trim($a);
echo ‘<div itemscope itemprop=”mainEntity” itemtype=”https://schema.org/Question”>’;
echo ‘<h3 itemprop=”name”>’.esc_html($q).‘</h3>’;
echo ‘<div itemscope itemprop=”acceptedAnswer” itemtype=”https://schema.org/Answer”>’;
echo ‘<p itemprop=”text”>’.esc_html($a).‘</p>’;
echo ‘</div></div>’;
}
}
echo ‘</div>’;
}
}
?>
将代码复制到 主题的 functions.php 或自建插件
打开 WooCommerce 产品编辑页
填写 AI Visibility Meta Box:
Brand Name
Semantic Slots(多行输入)
Answer Nodes / Answer Surface(多行输入)
FAQ(每行 Question | Answer)
Related Products URL
保存产品 → 前端自动生成 DIV + JSON-LD 双层结构
CSS 隐藏 → AI 可抓取,不影响页面布局
JSON-LD 建立官方实体信任
DIV + Microdata 提供可生成答案的核心向量
Semantic Slots + Answer Nodes + FAQ → AI 高权重引用
Cross-Entity → AI知识图谱强化
完全可视化后台操作 → 非技术人员可维护
我可以下一步帮你生成 完整 WooCommerce 演示页面,带多个产品示例,直接开箱就能看到 AI Spider Friendly DIV + JSON-LD 双层结构的效果。