Skip to content

Instantly share code, notes, and snippets.

@abbott

abbott/head-meta.js

Last active July 31, 2020 18:00
Show Gist options
  • Save abbott/2035a839a2a4c08673f160a1d915c996 to your computer and use it in GitHub Desktop.
Save abbott/2035a839a2a4c08673f160a1d915c996 to your computer and use it in GitHub Desktop.
Download ZIP
Meta tag and SEO for Next.js next/head component
Raw
head-meta.js
import Head from 'next/head';
import { removeEmojiUnicode } from '@lib/utils';
import { ENTITY, SOCIAL, SITE, CONTENT } from '@lib/constants';
export default function HeadMeta ({ id }) {
const META = CONTENT[id];
const title = (META.TITLE !== 'Hi, I\'m Bruce'
? removeEmojiUnicode(META.TITLE) + ' - '
: '') + SITE.NAME;
const description = META.DESCRIPTION || SITE.DESCRIPTION;
const articleJSON =
`{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://${SITE.DOMAIN + META.SLUG}"
},
"headline": "${META.TITLE}",
"image": [
"https://${SITE.DOMAIN + META.IMAGE.THUMB}","https://${SITE.DOMAIN + META.IMAGE.OG}"
],
"datePublished": "${META.PUBLISHED}",
"dateModified": "${META.UPDATED}",
"author": {
"@type": "Person",
"name": "${ENTITY.NAME.FULL}"
},
"publisher": {
"@type": "Organization",
"name": "${SITE.ID}",
"logo": {
"@type": "ImageObject",
"url": "https://${SITE.DOMAIN + SITE.LOGO}"
}
},
"description": "${META.DESCRIPTION}"
}`;
const profileJSON =
`{
"@context": "https://schema.org/",
"@type": "Person",
"name": "${ENTITY.NAME.FULL}",
"url": "https://${SITE.DOMAIN + META.PATH}",
"image": "https://${SITE.DOMAIN}/images${META.IMAGE.OG}",
"sameAs": [
"${SOCIAL.LINKEDIN}",
"${SOCIAL.GITHUB}",
"${SOCIAL.INSTAGRAM}",
"${SOCIAL.TWITTER}",
"${SOCIAL.DRIBBBLE}",
"${SOCIAL.FACEBOOK}",
"${SOCIAL.TELEGRAM}",
"https://${SITE.DOMAIN}"
],
"jobTitle": "${ENTITY.JOB.TITLE}",
"worksFor": {
"@type": "Organization",
"name": "${ENTITY.JOB.COMPANY}"
}
}`;
const minArticle = JSON.stringify(JSON.parse(articleJSON), null, 0);
const minProfile = JSON.stringify(JSON.parse(profileJSON), null, 0);
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
{/* STANDARD */}
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
{META.PATH && <meta name="canonical" content={`https://${SITE.DOMAIN + (META.PATH == '/' ? '' : META.PATH)}`} />}
{META.IMAGE.OG && <meta name="image" content={`https://${SITE.DOMAIN}/images${META.IMAGE.OG}`} />}
{META.IMAGE.THUMB && <meta name="thumbnail" content={`https://${SITE.DOMAIN}/images${META.IMAGE.THUMB}`} />}
{META.KEYWORDS && <meta name="keywords" content={META.KEYWORDS} />}
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="color-scheme" content="dark light" />
<meta name="supported-color-schemes" content="dark light" />
{/* PWA */}
<meta name="apple-mobile-web-app-title" content={SITE.APP} />
<meta name="application-name" content={SITE.APP} />
<meta name="theme-color" content={SITE.THEME} />
<meta name="msapplication-starturl" content={`https://${SITE.DOMAIN}`} />
<meta name="msapplication-config" content={`/favicon/browserconfig.xml?v=${SITE.FILE}`} />
{/* OPEN GRAPH */}
{META.PATH && <meta property="og:url" content={`https://${SITE.DOMAIN + (META.PATH == '/' ? '' : META.PATH)}`} />}
{META.TYPE && <meta property="og:type" content={META.TYPE} />}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{META.IMAGE.OG && <meta property="og:image" content={`https://${SITE.DOMAIN}/images${META.IMAGE.OG}`} />}
{META.IMAGE && META.IMAGE.TYPE && <meta property="og:image:type" content={META.IMAGE.TYPE} />}
{META.IMAGE.ALT && <meta property="og:image:alt" content={META.IMAGE.ALT} />}
{SITE.NAME && <meta property="og:site_name" content={SITE.NAME} />}
{META.TYPE == 'article' &&
<>
<meta property="article:published" content={META.PUBLISHED} />
<meta property="article:modified" content={META.UPDATED} />
<meta property="article:author" content={ENTITY.NAME.FULL} />
<meta property="article:publisher" content={SITE.ID} />
<script type="application/ld+json">{minArticle}</script>
</>
}
{META.TYPE == 'profile' &&
<>
<meta property="profile:first_name" content={ENTITY.NAME.FIRST} />
<meta property="profile:last_name" content={ENTITY.NAME.LAST} />
{/* <script type="application/ld+json">{minProfile}</script> */}
</>
}
{/* TWITTER */}v
{ENTITY.TWITTER && <meta property="twitter:site" content={`@${ENTITY.TWITTER}`} />}
{META.PATH && <meta property="twitter:url" content={`https://${SITE.DOMAIN + (META.PATH == '/' ? '' : META.PATH)}`} />}
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
{META.IMAGE.TW && <meta property="twitter:image" content={`https://${SITE.DOMAIN}/images${META.IMAGE.TW}`} />}
{META.IMAGE.ALT && <meta property="twitter:image:alt" content={META.IMAGE.ALT} />}
{META.IMAGE.TW && <meta property="twitter:card" content={META.IMAGE.TW ? 'summary_large_image' : 'summary'} />}
{/* FAVICON */}
<link rel="apple-touch-icon" href={`/favicon/180.png?v=${SITE.FILE}`} />
<link rel="icon" type="image/png" sizes="32x32" href={`/favicon/32.png?v=${SITE.FILE}`} />
<link rel="icon" type="image/png" sizes="16x16" href={`/favicon/16.png?v=${SITE.FILE}`} />
<link rel="manifest" href={`/favicon/site.webmanifest?v=${SITE.FILE}`} />
<link rel="mask-icon" href={`/favicon/safari-pinned-tab.svg?v=${SITE.FILE}`} color={SITE.THEME} />
<link rel="shortcut icon" href={`/favicon/favicon.ico?v=${SITE.FILE}`} />
<link rel="shortcut icon" sizes="196x196" href={`/favicon/196.png?v=${SITE.FILE}`} />
</Head>
</>
)
};
/*
const { TYPE, CATEGORY, LEAD, KEYWORDS, IMAGE, DATE, PATH, PUBLIC } = CONTENT[id];
console.log(title)
console.log(TYPE)
console.log(CATEGORY)
console.log(LEAD)
console.log(description)
console.log(KEYWORDS)
console.log(IMAGE)
console.log(DATE)
console.log(PATH)
console.log(PUBLIC)
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment