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:
How can I solve this? P.S I don't have these tags mentioned in the error in the code above.
