Next.js应用中Imply脚本标签引发AMP错误如何修复？

标签位置违规 #

• <p>标签出现在文档<head>标签外部，该标签仅允许作为<head>的直接子元素。

无效属性错误 #

错误内容：
存在无效属性：data-amp-bind

修复方案：
仅使用AMP官方组件允许的属性；若需使用自定义属性，必须符合AMP组件文档中规定的合法范围。

JavaScript使用违规 #

错误内容：
页面中使用了AMP不允许的自定义JavaScript代码

涉事代码示例 #

export const AmpImplyTracking = () => {
const url = 'ua.google.com';
const encodedUrlUA = encodeURIComponent(url);

    return (
        <script id="amp-access" type="application/json" 
            dangerouslySetInnerHTML={
                { __html: `
                    {
                        "authorization" : "https://${encodedUrlUA}/api/resolve/genfpamp?channel=2&source=5&fpid=READER_ID&requrl=SOURCE_URL&reqref=DOCUMENT_REFERRER&host=indianexpress.com",
                        "noPingback": true,
                        "authorizationFallbackResponse": {
                                "error": true
                        },
                        "namespace": "usercapturing"
                    }
                `}
            }
        />
    )
}

内容的提问来源于stack exchange，提问作者Hemant Singh Rajput