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

fix: resolve bad SEO

Browse Source
This commit is contained in:
Walid 2022-05-16 13:25:22 +01:00
parent ede9e5e085
commit a84e546978
No known key found for this signature in database
GPG Key ID: 7DF9215FC4E48853
3 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/Head/NextHead.tsx
View File

@ -1,29 +0,0 @@
import Head from 'next/head'
import { projectConfig } from 'utils/config'
interface HeadProps {
longName?: string
shortName?: string
}
const NextHead: React.FC<HeadProps> = (props) => {
const {
longName = projectConfig.longName,
shortName = projectConfig.shortName
} = props
return (
<Head>
<title>
{props.longName == null
? longName
: props.shortName == null && shortName}
</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
)
}
export default NextHead

26
components/Head/CommonHead.tsx → components/NextHead.tsx
View File

@ -1,12 +1,20 @@
// eslint-disable-next-line @next/next/no-document-import-in-page import Head from 'next/head'
import { Head } from 'next/document' import useTranslation from 'next-translate/useTranslation'
import { projectConfig } from 'utils/config' import { projectConfig } from 'utils/config'
export const CommonHead = (): JSX.Element => { interface HeadProps {
title?: string
}
const NextHead: React.FC<HeadProps> = (props) => {
const { title = projectConfig.shortName } = props
const { lang } = useTranslation()
return ( return (
<Head> <Head>
{/* Link Tags */} <title>{title}</title>
<link <link
rel='shortcut icon' rel='shortcut icon'
@ -33,8 +41,9 @@ export const CommonHead = (): JSX.Element => {
{/* Default meta tags */} {/* Default meta tags */}
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='description' content={projectConfig.description} /> <meta name='description' content={projectConfig.description} />
<meta name='Language' content='en' /> <meta name='language' content={lang} />
<meta name='theme-color' content={projectConfig.color} /> <meta name='theme-color' content={projectConfig.color} />
<meta name='copyright' content={projectConfig.shortName} /> <meta name='copyright' content={projectConfig.shortName} />
<meta name='author' content={projectConfig.shortName} /> <meta name='author' content={projectConfig.shortName} />
@ -51,7 +60,10 @@ export const CommonHead = (): JSX.Element => {
<meta property='og:url' content={projectConfig.url} /> <meta property='og:url' content={projectConfig.url} />
<meta property='og:image' content={projectConfig.icons.image} /> <meta property='og:image' content={projectConfig.icons.image} />
<meta property='og:description' content={projectConfig.description} /> <meta property='og:description' content={projectConfig.description} />
<meta property='og:locale' content='en_US' /> <meta
property='og:locale'
content={`${lang as string}_${lang.toUpperCase() as string}`}
/>
<meta property='og:site_name' content={projectConfig.longName} /> <meta property='og:site_name' content={projectConfig.longName} />
{/* Twitter card Metadata */} {/* Twitter card Metadata */}
@ -62,3 +74,5 @@ export const CommonHead = (): JSX.Element => {
</Head> </Head>
) )
} }
export default NextHead

6
pages/_document.tsx
View File

@ -1,12 +1,10 @@
import Document, { Html, Main, NextScript } from 'next/document' import Document, { Head, Html, Main, NextScript } from 'next/document'
import { CommonHead } from 'components/Head/CommonHead'
class MyDocument extends Document { class MyDocument extends Document {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<Html lang='en'> <Html lang='en'>
<CommonHead /> <Head />
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />