Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 44a6c98

Browse files
committed
docs: update schema markup
1 parent 1969a64 commit 44a6c98

File tree

2 files changed

+121
-21
lines changed

2 files changed

+121
-21
lines changed

‎packages/docs/src/components/Seo.tsx

Lines changed: 119 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ interface SEOProps {
88
name?: string
99
image?: string
1010
article?: string
11+
pro?: boolean
1112
}
1213

13-
const SEO = ({ title, description, name, image, article }: SEOProps) => {
14+
const SEO = ({ title, description, name, image, article, pro }: SEOProps) => {
1415
const { pathname } = useLocation()
1516
const { site } = useStaticQuery(query)
1617

@@ -35,6 +36,122 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
3536

3637
const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
3738

39+
const humanize = (text: string): string => {
40+
return text
41+
.split('-')
42+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
43+
.join(' ')
44+
}
45+
46+
const breadcrumbList = (startIndex = 1) => {
47+
return seo.url
48+
.replace('docs//', 'docs/')
49+
.replace(siteUrl, '')
50+
.split('/')
51+
.filter(Boolean)
52+
.map((item, index) => ({
53+
'@type': 'ListItem',
54+
position: index + startIndex,
55+
name: humanize(item),
56+
item: `${siteUrl}${item}`,
57+
}))
58+
}
59+
60+
const getDynamicDescription = (pathname: string, name?: string): string => {
61+
if (pathname.includes('/components/') && pathname.includes('api')) {
62+
return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.`
63+
}
64+
65+
if (pathname.includes('/components/') && pathname.includes('bootstrap')) {
66+
return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.`
67+
}
68+
69+
if (pathname.includes('/components/') && pathname.includes('styling')) {
70+
return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.`
71+
}
72+
73+
if (pathname.includes('/components/')) {
74+
return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.`
75+
}
76+
77+
if (pathname.includes('/customize/')) {
78+
return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.`
79+
}
80+
81+
if (pathname.includes('/forms/')) {
82+
return `Complete guide to CoreUI React ${name} components and implementation.`
83+
}
84+
85+
if (pathname.includes('/layouts/')) {
86+
return `Complete guide to CoreUI React ${name} implementation.`
87+
}
88+
89+
if (pathname.includes('/templates/')) {
90+
return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.'
91+
}
92+
93+
if (pathname.includes('/migration/')) {
94+
return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.'
95+
}
96+
97+
return 'Complete guide to CoreUI for React.js components and implementation.'
98+
}
99+
100+
const schema = [
101+
{
102+
'@context': 'https://schema.org',
103+
'@type': 'BreadcrumbList',
104+
itemListElement: [
105+
{
106+
'@type': 'ListItem',
107+
position: 1,
108+
name: 'CoreUI',
109+
item: 'https://coreui.io',
110+
},
111+
{
112+
'@type': 'ListItem',
113+
position: 2,
114+
name: 'React',
115+
item: 'https://coreui.io/react/',
116+
},
117+
{
118+
'@type': 'ListItem',
119+
position: 3,
120+
name: 'Documentation',
121+
item: siteUrl,
122+
},
123+
...breadcrumbList(4),
124+
],
125+
},
126+
{
127+
'@context': 'https://schema.org',
128+
'@type': 'TechArticle',
129+
headline: `${seo.title} documentation`,
130+
description: getDynamicDescription(seo.url, name,),
131+
author: {
132+
'@type': 'Organization',
133+
name: 'CoreUI Team',
134+
sameAs: 'https://github.com/coreui/',
135+
},
136+
publisher: {
137+
'@type': 'Organization',
138+
name: 'CoreUI',
139+
logo: {
140+
'@type': 'ImageObject',
141+
url: 'https://coreui.io/images/brand/coreui-logo.svg',
142+
},
143+
},
144+
datePublished: '2021年01月13日',
145+
dateModified: new Date().toISOString().split('T')[0],
146+
mainEntityOfPage: {
147+
'@type': 'WebPage',
148+
'@id': seo.url.replace('docs//', 'docs/'),
149+
},
150+
version: pro ? '5.17.1' : '5.7.1',
151+
proficiencyLevel: 'Beginner',
152+
},
153+
]
154+
38155
return (
39156
<>
40157
<title>{formattedTitle}</title>
@@ -50,25 +167,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
50167
{seo.title && <meta name="twitter:title" content={seo.title} />}
51168
{seo.description && <meta name="twitter:description" content={seo.description} />}
52169
{seo.image && <meta name="twitter:image" content={seo.image} />}
53-
{seo.name && (
54-
<script type="application/ld+json">
55-
{`{
56-
"@context": "https://schema.org",
57-
"@type": "BreadcrumbList",
58-
"itemListElement": [{
59-
"@type": "ListItem",
60-
"position": 1,
61-
"name": "React",
62-
"item": "${siteUrl}"
63-
},{
64-
"@type": "ListItem",
65-
"position": 2,
66-
"name": "${seo.name}",
67-
"item": "${seo.url.replace('docs//', 'docs/')}"
68-
}]
69-
}`}
70-
</script>
71-
)}
170+
{seo.name && <script type="application/ld+json">{JSON.stringify(schema)}</script>}
72171
</>
73172
)
74173
}

‎packages/docs/src/templates/MdxLayout.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
9898
const title = frontmatter?.title || ''
9999
const description = frontmatter?.description || ''
100100
const name = frontmatter?.name || ''
101+
const pro = frontmatter?.pro_component || false
101102

102103
return (
103104
<>
104105
<html lang="en" />
105-
<Seo title={title} description={description} name={name} />
106+
<Seo title={title} description={description} name={name} pro={pro}/>
106107
</>
107108
)
108109
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /