Skip to content

Instantly share code, notes, and snippets.

@Showrin

Showrin/MetaWrapper.jsx

Last active April 19, 2023 05:17
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Showrin/179e195fa2de2a12b9c74093a2dee999 to your computer and use it in GitHub Desktop.
Save Showrin/179e195fa2de2a12b9c74093a2dee999 to your computer and use it in GitHub Desktop.
Download ZIP
A component that implements basic SEO to any NextJS app
Raw
MetaWrapper.jsx
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment