Walidoux/next-app-boilerplate
Walidoux/next-app-boilerplate
Template
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

refactor(next/head): improve SEO

Browse Source
This commit is contained in:
Walid 2023-02-10 12:42:05 +01:00
parent 7c3e436d85
commit d10a35d1d2
Signed by: Walidoux
GPG Key ID: CCF21881FE8BEBAF
1 changed files with 37 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/NextHead.tsx
View File

@ -1,74 +1,62 @@
import Head from 'next/head' import Head from 'next/head'
import { projectConfig } from 'utils/config' import { SEODefaultValues } from 'types/config'
import { SEOConfig } from 'utils/config'
interface HeadProps {
title?: string
}
const NextHead: React.FC<HeadProps> = (props) => {
const { title = projectConfig.shortName } = props
const NextHead: React.FC<SEODefaultValues> = ({
shortName = SEOConfig.shortName,
longName = SEOConfig.longName,
color = SEOConfig.color,
defaultLocale = SEOConfig.defaultLocale,
description = SEOConfig.description,
icons = SEOConfig.icons,
url = SEOConfig.url
}) => {
return ( return (
<Head> <Head>
<title>{title}</title> <title>{shortName}</title>
<link <link rel='shortcut icon' href={icons?.default} type='image/x-icon' />
rel='shortcut icon' <link rel='apple-touch-icon' sizes='180x180' href={icons?.apple} />
href={projectConfig.icons.default} <link rel='icon' type='image/png' sizes='16x16' href={icons?.['16_16']} />
type='image/x-icon' <link rel='icon' type='image/png' sizes='32x32' href={icons?.['32_32']} />
/>
<link
rel='apple-touch-icon'
sizes='180x180'
href={projectConfig.icons.apple}
/>
<link
rel='icon'
type='image/png'
sizes='16x16'
href={projectConfig.icons['16_16']}
/>
<link
rel='icon'
type='image/png'
sizes='32x32'
href={projectConfig.icons['32_32']}
/>
{/* Default meta tags */} {/* Default meta tags */}
<meta charSet='UTF-8' />
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='description' content={projectConfig.description} /> <meta name='description' content={description} />
<meta name='language' content={projectConfig.defaultLocale} /> <meta name='language' content={defaultLocale} />
<meta name='theme-color' content={projectConfig.color} /> <meta name='theme-color' content={color} />
<meta name='copyright' content={projectConfig.shortName} /> <meta name='copyright' content={shortName} />
<meta name='author' content={projectConfig.shortName} /> <meta name='author' content={shortName} />
<meta name='publisher' content={projectConfig.shortName} /> <meta name='publisher' content={shortName} />
<meta name='robots' content='index, follow' /> <meta name='robots' content='index, follow' />
<meta name='rating' content='general' /> <meta name='rating' content='general' />
<meta name='distribution' content='global' /> <meta name='distribution' content='global' />
<meta name='msapplication-TileColor' content={projectConfig.color} /> <meta name='msapplication-TileColor' content={color} />
{/* Open graph MT */} {/* Open graph MT */}
<meta property='og:title' content={projectConfig.shortName} /> <meta property='og:title' content={shortName} />
<meta property='og:type' content='website' /> <meta property='og:type' content='website' />
<meta property='og:url' content={projectConfig.url} /> <meta property='og:url' content={url} />
<meta property='og:image' content={projectConfig.icons.image} /> <meta property='og:image' content={icons?.image} />
<meta property='og:description' content={projectConfig.description} /> <meta property='og:description' content={description} />
<meta <meta
property='og:locale' property='og:locale'
content={`${ content={SEOConfig.defaultLocale?.concat(
projectConfig.defaultLocale '_',
}_${projectConfig.defaultLocale.toUpperCase()}`} SEOConfig.defaultLocale.toUpperCase()
)}
/> />
<meta property='og:site_name' content={projectConfig.longName} /> <meta property='og:site_name' content={longName} />
{/* Twitter card Metadata */} {/* Twitter card Metadata */}
<meta name='twitter:card' content='summary' /> <meta name='twitter:card' content='summary' />
<meta name='twitter:description' content={projectConfig.description} /> <meta name='twitter:description' content={description} />
<meta name='twitter:title' content={projectConfig.longName} /> <meta name='twitter:title' content={longName} />
<meta name='twitter:image:src' content={projectConfig.icons.image} /> <meta name='twitter:image:src' content={icons?.image} />
</Head> </Head>
) )
} }