在Twig/Timber中输出ACF原始值到WordPress页面header实现SEO需求

DevOps 小满

2026-10-2

问题根因

你错误地将<head>标签写在了{% block content %}内部：通常base.twig模板的content块是定义在<body>标签内的页面正文区域，嵌套的<head>标签会被浏览器自动识别为非法结构，内部内容会被直接渲染到页面正文
你没有将SEO字段值包裹在合法的<meta>标签中，直接裸输出纯文本，也没有使用合适的转义过滤器保证HTML安全
如果你ACF字段的默认值里写了Twig模板语法（比如{{ post.tool_brand }}这类变量），ACF本身不会自动解析这些模板变量，需要额外处理

修复步骤

1. 调整基础模板结构

首先修改你的base.twig，在原有<head>标签内预留SEO自定义块，不要在子模板的content块里重复写<head>标签：

<!-- base.twig 原有<head>部分示例 -->
<head>
    <meta charset="{{ site.charset }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ wp_title }}</title>
    <!-- 新增SEO专属块 -->
    {% block seo_meta %}{% endblock %}
    {{ function('wp_head') }}
</head>
<body>
    <!-- content块原本就在body内部，不要在这里加head相关内容 -->
    {% block content %}{% endblock %}
    {{ function('wp_footer') }}
</body>

2. 重写子模板的SEO块

修改你的当前子模板，单独重写seo_meta块注入自定义SEO内容，不要在content块处理head相关逻辑：

{% extends "base.twig" %}

{# 单独处理SEO内容，输出到head标签内 #}
{% block seo_meta %}
    {{ parent() }}
    {% if post.meta_description %}
    <meta name="description" content="{{ post.meta_description|e('html_attr') }}">
    {% endif %}
    {# 其他SEO字段比如OG标签、关键词都可以在这里添加 #}
{% endblock %}

{# content块只保留页面正文内容 #}
{% block content %}
    <div class="container my-4">
        <!-- 页面正文代码 -->
    </div>
{% endblock %}

3. 解析ACF字段内的Twig模板变量

如果你的ACF字段默认值里写了{{ post.tool_brand }}这类Twig语法，需要在主题functions.php中添加逻辑解析模板变量：

// 将以下代码添加到主题functions.php中
add_filter('timber_context', function ($context) {
    // 替换为你实际的自定义文章类型别名，如果是普通文章就改成post
    if (is_singular('tool')) {
        $post = $context['post'];
        $raw_desc = get_field('meta_description', $post->ID);
        // 解析字段内的Twig变量
        $context['parsed_meta_desc'] = Timber::compile_string($raw_desc, ['post' => $post]);
    }
    return $context;
});

之后在Twig模板中就可以直接使用解析后的变量：

<meta name="description" content="{{ parsed_meta_desc|e('html_attr') }}">

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