Facebook像素img置于head引发W3C验证错误的最优方案咨询

W3C验证报错的核心原因是HTML规范不允许在<head>标签内放置包含<img>这类可渲染元素的<noscript>标签，<head>区域仅支持元数据类元素（meta/title/script/link等），Facebook官方给出的默认嵌入写法本身不符合HTML规范，才会触发校验失败。

以下方案均不需要手动拆分两处存放代码，修改时仅需调整一次配置即可：

方案1：通过WordPress钩子托管输出（推荐，无需修改主题模板） #

将FB像素ID统一存为变量，借助WordPress原生钩子自动把对应代码输出到正确位置，仅需在主题functions.php中添加一次代码，后续修改像素ID仅需改动一处：

// 定义FB像素ID，后续修改仅改此处即可
define('FB_PIXEL_ID', '你的像素ID');

// 输出script部分到head
add_action('wp_head', function() {
    ?>
    <script>
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '<?php echo FB_PIXEL_ID; ?>');
        fbq('track', 'PageView');
    </script>
    <?php
});

// 输出noscript部分到body开头
add_action('wp_body_open', function() {
    ?>
    <noscript>
        <img height="1" width="1" src="https://www.facebook.com/tr?id=<?php echo FB_PIXEL_ID; ?>&ev=PageView&noscript=1"/>
    </noscript>
    <?php
});

方案2：使用跟踪代码管理插件 #

市面上的WP站点统计/跟踪代码管理插件都已经适配了FB像素的规范输出逻辑，你只需要在插件后台填写一次FB像素ID，插件会自动把script部分输出到<head>、<noscript>部分输出到<body>，完全不需要手动处理代码拆分，后续修改ID仅需在插件后台改一次即可。

方案3：模板内全局变量统一管理 #

如果你偏好直接修改主题模板，可以在<head>区域定义统一的像素ID变量，<body>区域的<noscript>直接引用该变量：

• 在<head>的FB像素代码前添加定义：<?php $fb_pixel_id = '你的像素ID'; ?>
• <script>部分的init参数、<body>内<noscript>的图片链接ID参数，都统一引用$fb_pixel_id变量
• 后续修改仅需改动$fb_pixel_id一处即可，不会出现漏改问题

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