import Head from 'next/head'; import PropTypes from 'prop-types'; const MetaWrapper = (props) => { const { title, description, type, imageUrl, contentUrl, faviconUrl, keywords, publishedAt, children, authorName, } = props; const siteName = "Your_site_name" const appThemeColor = '#4c6796'; const twitterAcountName = "@your_account" return ( <Head> <title>{title}</title> <link rel="shortcut icon" href={faviconUrl} type="image/x-icon" /> <meta name="title" content={title} /> <meta name="description" content={description} /> <meta name="keywords" content={keywords} /> <meta name="image" content={imageUrl} /> <link rel="canonical" href={contentUrl} /> <meta name="theme-color" content={appThemeColor} /> <meta name="robots" content="follow, index" /> <meta property="og:type" content={type} /> <meta property="og:site_name" content={siteName} /> <meta property="og:url" content={contentUrl} /> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:image" content={imageUrl} /> <meta name="twitter:title" content={title} /> <meta name="twitter:description" content={description} /> <meta name="twitter:image" content={imageUrl} /> <meta name="twitter:site" content={twitterAcountName} /> <meta name="twitter:url" content={contentUrl} /> <meta name="twitter:card" content="summary_large_image" /> {type === 'article' && ( <> <meta name="author" content={authorName} /> <meta property="article:author" content={authorName} /> </> )} {type === 'article' && publishedAt && ( <meta property="article:published_time" content={publishedAt} /> )} {children} </Head> ); }; MetaWrapper.defaultProps = { children: null, publishedAt: null, authorName: null, }; MetaWrapper.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, keywords: PropTypes.string.isRequired, type: PropTypes.string.isRequired, publishedAt: PropTypes.string, imageUrl: PropTypes.string.isRequired, contentUrl: PropTypes.string.isRequired, faviconUrl: PropTypes.string.isRequired, authorName: PropTypes.string, children: PropTypes.node, }; export default MetaWrapper;