Trying to enable Google AMP with Nextjs but getting parent tag of tag error

Viewed 88

I'm trying to implement google AMP to the project but I keep getting error messages related to tags errors, I'm using Next.js for frontend and Laravel for backend

This is my code in Next.js

export const config = { amp: true }

const useStyles = makeStyles(() => ({
container: {
    maxWidth: 1120,
    margin: '0 auto',
    padding: '0 4vw'
},
content: {
    margin: '0 auto'
},
postFeatureImage: {
    '&>img': {
        margin: '0 0 3vw',
        width: '100%',
        objectFit: 'contain',
        overflow: 'hidden',
        height: '100%'
    }
},


postFullContent: {
    maxwidth: 720,
    margin: '0 auto',
    background: '#fff',
    fontFamily: "'tahoma'",
},
contentTitle: {
    margin: '0 0 0.8em'
    /* font-size: 5rem; */
},

contentBody: {
    display: 'flex',
    flexDirection: 'column',
    fontFamily: `var(--font-serif)`,
    '&> .kg-card.kg-image-card': {
        // width: '100%',
        justifyContent: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '&>img': {
            maxWidth: '80%'
        }
    },
}
  }))


const Blog = ({ data }) => {  
if (router.isFallback) {
    return <div>Loading...</div>
}
const post = data && data.posts[0]
return (
    <headers>

        <SEO
            title={post.meta_title}
            image={post.feature_image}
            url={`https://automart.ph/blog/${post.slug}`}
            description={post.meta_description}
        />
        <div className={classes.container}>
            <article className={classes.content}>
                {post.feature_image ?
                    <figure className={classes.postFeatureImage}>
                        <img className={classes.featureImage} src={post.feature_image} alt={post.title} />
                    </figure> : null}
                <section className={classes.postFullContent}>
                    <h1 className={classes.contentTitle}>{post.title}</h1>

                    {/* The main post content */}
                    <section
                        className={classes.contentBody + ' load-external-scripts'}
                        dangerouslySetInnerHTML={{ __html: post.html }}
                    />
                </section>
            </article>
        </div>
        
    </headers>
)
 }

 export default Blog

But I'm getting these errors in the console:

enter image description here

How can I solve this? P.S I don't have these tags mentioned in the error in the code above.

0 Answers
Related