Skip to content

Commit 86d16c0

Browse files
andostronautandostronaut
committed
feat: move seo metadata to be in head for next page router
1 parent eb8251b commit 86d16c0

File tree

4 files changed

+124
-101
lines changed

4 files changed

+124
-101
lines changed

‎src/components/common/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { DATA } from '@/data'
1212

1313
export const Footer = () => {
1414
return (
15-
<footer id='footer' className='bg-card border-t border-secondary w-full'>
15+
<footer id='footer' className='bg-card border-t border-secondary w-full flex justify-center'>
1616
<div className='container py-24 sm:py-32 p-10 w-full place-items-stretch'>
1717
<div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 z-50'>
1818
<div className='col-span-full xl:col-span-2'>

‎src/data/index.ts‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,108 @@
11
export const DATA = {
2-
name: "Kinotio Docs",
3-
url: "https://docs.kinotio.io",
2+
name: 'Kinotio Docs',
3+
url: 'https://docs.kinotio.io',
44
description:
5-
"This platform is dedicated to providing detailed documentation about our products, offering users and developers the necessary insights and guidance to effectively engage with and contribute to our ecosystem.",
5+
'This platform is dedicated to providing detailed documentation about our products, offering users and developers the necessary insights and guidance to effectively engage with and contribute to our ecosystem.',
66
social_url: {
7-
github: "https://github.com/kinotio",
8-
discord: "https://discord.gg/cskvbKQA",
9-
linkedin: "https://linkedin.com/company/kinotio",
10-
x: "https://x.com/kinotiodotio",
7+
github: 'https://github.com/kinotio',
8+
discord: 'https://discord.gg/cskvbKQA',
9+
linkedin: 'https://linkedin.com/company/kinotio',
10+
x: 'https://x.com/kinotiodotio'
1111
},
12-
repo: "https://github.com/kinotio/docs",
13-
doc_repo: "https://github.com/kinotio/docs/tree/main",
14-
keywords: ["Open Source", "Documentation", "API", "Guides", "Tutorials"],
12+
repo: 'https://github.com/kinotio/docs',
13+
doc_repo: 'https://github.com/kinotio/docs/tree/main',
14+
keywords: ['Open Source', 'Documentation', 'API', 'Guides', 'Tutorials'],
1515
color: {
1616
gradient: {
17-
from: "#6048e7",
18-
to: "#56d49e",
17+
from: '#6048e7',
18+
to: '#56d49e'
1919
},
2020
base: {
21-
dark: "#000000",
22-
light: "#ffffff",
23-
},
21+
dark: '#000000',
22+
light: '#ffffff'
23+
}
2424
},
2525
navbar: [
2626
{
27-
href: "docs",
28-
name: "Docs",
29-
},
27+
href: 'docs',
28+
name: 'Docs'
29+
}
3030
],
3131
footer: {
3232
contact: [
3333
{
34-
icon: "Mail",
35-
href: "mailto:contact@kinotio.io",
36-
label: "contact@kinotio.io",
37-
},
34+
icon: 'Mail',
35+
href: 'mailto:contact@kinotio.io',
36+
label: 'contact@kinotio.io'
37+
}
3838
],
3939
help: [
4040
{
41-
href: "#faq",
42-
name: "FAQ",
43-
},
41+
href: '#faq',
42+
name: 'FAQ'
43+
}
4444
],
4545
socials: [
4646
{
47-
icon: "Github",
48-
href: "https://github.com/kinotio",
49-
name: "github",
47+
icon: 'Github',
48+
href: 'https://github.com/kinotio',
49+
name: 'github'
5050
},
5151
{
52-
icon: "X",
53-
href: "https://x.com/kinotiodotio",
54-
label: "X",
52+
icon: 'X',
53+
href: 'https://x.com/kinotiodotio',
54+
label: 'X'
5555
},
5656
{
57-
icon: "Linkedin",
58-
href: "https://linkedin.com/company/kinotio",
59-
label: "LinkedIn",
57+
icon: 'Linkedin',
58+
href: 'https://linkedin.com/company/kinotio',
59+
label: 'LinkedIn'
6060
},
6161
{
62-
icon: "MessageCircle",
63-
href: "https://discord.gg/cskvbKQA",
64-
label: "Discord",
65-
},
66-
],
62+
icon: 'MessageCircle',
63+
href: 'https://discord.gg/cskvbKQA',
64+
label: 'Discord'
65+
}
66+
]
6767
},
6868
trustedBy: [
6969
{
70-
icon: "Crown",
71-
name: "Your company",
70+
icon: 'Crown',
71+
name: 'Your company'
7272
},
7373
{
74-
icon: "Crown",
75-
name: "Your company",
74+
icon: 'Crown',
75+
name: 'Your company'
7676
},
7777
{
78-
icon: "Crown",
79-
name: "Your company",
78+
icon: 'Crown',
79+
name: 'Your company'
8080
},
8181
{
82-
icon: "Crown",
83-
name: "Your company",
84-
},
82+
icon: 'Crown',
83+
name: 'Your company'
84+
}
8585
],
8686
faq: [
8787
{
88-
question: "What is this documentation site for?",
88+
question: 'What is this documentation site for?',
8989
answer:
90-
"This site provides comprehensive documentation for Kinotio products, offering insights and guidance for users and developers to effectively engage with and contribute to our ecosystem.",
90+
'This site provides comprehensive documentation for Kinotio products, offering insights and guidance for users and developers to effectively engage with and contribute to our ecosystem.'
9191
},
9292
{
93-
question: "How can I contribute to the documentation?",
93+
question: 'How can I contribute to the documentation?',
9494
answer:
95-
"You can contribute by visiting our GitHub repository, where you can submit issues or pull requests with your suggested changes or additions.",
95+
'You can contribute by visiting our GitHub repository, where you can submit issues or pull requests with your suggested changes or additions.'
9696
},
9797
{
98-
question: "Where can I find the API documentation?",
98+
question: 'Where can I find the API documentation?',
9999
answer:
100-
"The API documentation is available under the 'Docs' section of this site. You can navigate to it using the top navigation bar.",
100+
"The API documentation is available under the 'Docs' section of this site. You can navigate to it using the top navigation bar."
101101
},
102102
{
103-
question: "How often is the documentation updated?",
103+
question: 'How often is the documentation updated?',
104104
answer:
105-
"The documentation is regularly updated to reflect the latest changes and improvements in our products. Check the 'Changelog' section for recent updates.",
106-
},
107-
],
108-
};
105+
"The documentation is regularly updated to reflect the latest changes and improvements in our products. Check the 'Changelog' section for recent updates."
106+
}
107+
]
108+
}

‎src/pages/_document.tsx‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,4 @@
11
import { Html, Head, Main, NextScript } from 'next/document'
2-
import type { Metadata } from 'next'
3-
4-
import { DATA } from '@/data'
5-
6-
export const metadata: Metadata = {
7-
metadataBase: new URL(DATA.url),
8-
title: {
9-
default: DATA.name,
10-
template: `%s - ${DATA.name}`
11-
},
12-
description: DATA.description,
13-
keywords: DATA.keywords,
14-
openGraph: {
15-
title: `${DATA.name}`,
16-
description: DATA.description,
17-
url: DATA.url,
18-
siteName: `${DATA.name}`,
19-
locale: 'en_US',
20-
type: 'website'
21-
},
22-
robots: {
23-
index: true,
24-
follow: true,
25-
googleBot: {
26-
'index': true,
27-
'follow': true,
28-
'max-video-preview': -1,
29-
'max-image-preview': 'large',
30-
'max-snippet': -1
31-
}
32-
},
33-
twitter: {
34-
title: `${DATA.name}`,
35-
card: 'summary_large_image'
36-
},
37-
verification: {
38-
google: '',
39-
yandex: ''
40-
}
41-
}
422

433
export default function Document() {
444
return (

‎src/pages/index.tsx‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,79 @@
11
import { Inter } from 'next/font/google'
2-
const inter = Inter({ subsets: ['latin'] })
2+
3+
import Head from 'next/head'
34

45
import { ThemeProvider } from '@/components/theme-provider'
56

67
import { Header } from '@/components/common/header'
78
import { Footer } from '@/components/common/footer'
89
import { Hero } from '@/components/sections/hero'
910

11+
import { DATA } from '@/data'
12+
13+
const inter = Inter({ subsets: ['latin'] })
14+
15+
export const metadata = {
16+
metadataBase: new URL(DATA.url),
17+
title: {
18+
default: DATA.name,
19+
template: `%s - ${DATA.name}`
20+
},
21+
description: DATA.description,
22+
keywords: DATA.keywords,
23+
openGraph: {
24+
title: `${DATA.name}`,
25+
description: DATA.description,
26+
url: DATA.url,
27+
siteName: `${DATA.name}`,
28+
locale: 'en_US',
29+
type: 'website'
30+
},
31+
robots: {
32+
index: true,
33+
follow: true,
34+
googleBot: {
35+
'index': true,
36+
'follow': true,
37+
'max-video-preview': -1,
38+
'max-image-preview': 'large',
39+
'max-snippet': -1
40+
}
41+
},
42+
twitter: {
43+
title: `${DATA.name}`,
44+
card: 'summary_large_image'
45+
},
46+
verification: {
47+
google: '',
48+
yandex: ''
49+
}
50+
}
51+
1052
export default function Home() {
1153
return (
1254
<ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
1355
<div className={inter.className}>
56+
<Head>
57+
<title>{metadata.title.default}</title>
58+
<meta name='description' content={metadata.description} />
59+
<meta name='keywords' content={metadata.keywords.join(', ')} />
60+
<meta property='og:title' content={metadata.openGraph.title} />
61+
<meta property='og:description' content={metadata.openGraph.description} />
62+
<meta property='og:url' content={metadata.openGraph.url} />
63+
<meta property='og:site_name' content={metadata.openGraph.siteName} />
64+
<meta property='og:locale' content={metadata.openGraph.locale} />
65+
<meta property='og:type' content={metadata.openGraph.type} />
66+
<meta name='robots' content='index, follow' />
67+
<meta
68+
name='googlebot'
69+
content='index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1'
70+
/>
71+
<meta name='twitter:title' content={metadata.twitter.title} />
72+
<meta name='twitter:card' content={metadata.twitter.card} />
73+
<meta name='google-site-verification' content={metadata.verification.google} />
74+
<meta name='yandex-verification' content={metadata.verification.yandex} />
75+
</Head>
76+
1477
<Header />
1578
<Hero />
1679
<Footer />

0 commit comments

Comments
 (0)