Merge pull request #108 from FilOzone/bp/add-structured-data

[UXIT-3655] Add structured data and SEO improvements

Author: mirhamasala

package-lock.json

@@ -49,6 +49,7 @@
     "abitype": "^1.2.0",
     "frontmatter-markdown-loader": "^3.7.0",
     "postcss": "^8.5.6",
+    "schema-dts": "^1.1.5",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

package.json

@@ -13,8 +13,9 @@ import { Faq } from '@/components/Faq'
 import { Navigation } from '@/components/Navigation/Navigation'
 import { Phase } from '@/components/Phase'
 import { SimpleCardWithImage } from '@/components/SimpleCardWithImage'
+import { StructuredDataScript } from '@/components/StructuredDataScript'
 
-import { FOC_URLS } from '@/constants/site-metadata'
+import { FOC_URLS, SEO } from '@/constants/site-metadata'
 import CometVideoPoster from '@/public/assets/comet-video-poster.webp'
 
 import { buildPhases } from './data/build-phases'
@@ -24,10 +25,12 @@ import { faqs } from './data/faqs'
 import { filecoinOnchainCloudProducts } from './data/filecoin-onchain-cloud-products'
 import { focFeatures } from './data/foc-features'
 import { runningOnFilecoinOnchainCloud } from './data/running-on-filecoin-onchain-cloud'
+import { generateStructuredData } from './utils/generateStructuredData'
 
 export default function Homepage() {
   return (
     <>
+      <StructuredDataScript structuredData={generateStructuredData(SEO)} />
       <div className="isolate relative">
         <BackgroundVideo
           videoPath="/comet-video.mp4"

src/app/(homepage)/page.tsx

@@ -0,0 +1,17 @@
+import type { WebPageGraph } from '@/components/StructuredDataScript'
+
+import { PATHS, type StaticPath } from '@/constants/paths'
+import type { StructuredDataParams } from '@/types/structured-data-params'
+import { generatePageStructuredData } from '@/utils/generate-page-structured-data'
+
+export function generateStructuredData(
+  seo: StructuredDataParams,
+): WebPageGraph {
+  return generatePageStructuredData({
+    title: seo.title,
+    description: seo.description,
+    path: PATHS.HOMEPAGE.path as StaticPath,
+    pageType: 'WebPage',
+    imageUrl: '/assets/comet-video-poster.webp',
+  })
+}

src/app/(homepage)/utils/generateStructuredData.ts

@@ -3,18 +3,24 @@ import { MarkdownPage } from '@filecoin-foundation/ui-filecoin/Markdown/Markdown
 import { PageSection } from '@filecoin-foundation/ui-filecoin/PageSection'
 
 import { Navigation } from '@/components/Navigation/Navigation'
+import { StructuredDataScript } from '@/components/StructuredDataScript'
 
 import { PATHS } from '@/constants/paths'
 import { createMetadata } from '@/utils/create-metadata'
 
 import { PRIVACY_POLICY_SEO } from './constants/seo'
 import privacyPolicyMarkdown from './privacy-policy.md'
+import { generateStructuredData } from './utils/generateStructuredData'
 
 const { body } = privacyPolicyMarkdown
 
 export default function PrivacyPolicy() {
   return (
     <>
+      <StructuredDataScript
+        structuredData={generateStructuredData(PRIVACY_POLICY_SEO)}
+      />
+
       <Navigation backgroundVariant="light" />
       <PageSection backgroundVariant="light" paddingVariant="compact">
         <MarkdownPage>

src/app/privacy-policy/page.tsx

@@ -0,0 +1,16 @@
+import type { WebPageGraph } from '@/components/StructuredDataScript'
+
+import { PATHS, type StaticPath } from '@/constants/paths'
+import type { StructuredDataParams } from '@/types/structured-data-params'
+import { generatePageStructuredData } from '@/utils/generate-page-structured-data'
+
+export function generateStructuredData(
+  seo: StructuredDataParams,
+): WebPageGraph {
+  return generatePageStructuredData({
+    title: seo.title,
+    description: seo.description,
+    path: PATHS.PRIVACY_POLICY.path as StaticPath,
+    pageType: 'WebPage',
+  })
+}

src/app/privacy-policy/utils/generateStructuredData.ts

@@ -1,11 +1,21 @@
+import { StructuredDataScript } from '@/components/StructuredDataScript'
+
 import { PATHS } from '@/constants/paths'
 import { createMetadata } from '@/utils/create-metadata'
 
 import { ServiceProvidersClient } from './components/ServiceProvidersClient'
 import { SERVICE_PROVIDERS_SEO } from './constants/seo'
+import { generateStructuredData } from './utils/generateStructuredData'
 
 export default function ServiceProviders() {
-  return <ServiceProvidersClient />
+  return (
+    <>
+      <StructuredDataScript
+        structuredData={generateStructuredData(SERVICE_PROVIDERS_SEO)}
+      />
+      <ServiceProvidersClient />
+    </>
+  )
 }
 
 export const metadata = createMetadata({

src/app/service-providers/page.tsx

@@ -0,0 +1,16 @@
+import type { WebPageGraph } from '@/components/StructuredDataScript'
+
+import { PATHS, type StaticPath } from '@/constants/paths'
+import type { StructuredDataParams } from '@/types/structured-data-params'
+import { generatePageStructuredData } from '@/utils/generate-page-structured-data'
+
+export function generateStructuredData(
+  seo: StructuredDataParams,
+): WebPageGraph {
+  return generatePageStructuredData({
+    title: seo.title,
+    description: seo.description,
+    path: PATHS.SERVICE_PROVIDERS.path as StaticPath,
+    pageType: 'CollectionPage',
+  })
+}

src/app/service-providers/utils/generateStructuredData.ts

@@ -3,18 +3,24 @@ import { MarkdownPage } from '@filecoin-foundation/ui-filecoin/Markdown/Markdown
 import { PageSection } from '@filecoin-foundation/ui-filecoin/PageSection'
 
 import { Navigation } from '@/components/Navigation/Navigation'
+import { StructuredDataScript } from '@/components/StructuredDataScript'
 
 import { PATHS } from '@/constants/paths'
 import { createMetadata } from '@/utils/create-metadata'
 
 import { TERMS_OF_USE_SEO } from './constants/seo'
 import termsOfUseMarkdown from './terms-of-use.md'
+import { generateStructuredData } from './utils/generateStructuredData'
 
 const { body } = termsOfUseMarkdown
 
 export default function TermsOfUse() {
   return (
     <>
+      <StructuredDataScript
+        structuredData={generateStructuredData(TERMS_OF_USE_SEO)}
+      />
+
       <Navigation backgroundVariant="light" />
       <PageSection backgroundVariant="light" paddingVariant="compact">
         <MarkdownPage>

src/app/terms-of-use/page.tsx

@@ -0,0 +1,16 @@
+import type { WebPageGraph } from '@/components/StructuredDataScript'
+
+import { PATHS, type StaticPath } from '@/constants/paths'
+import type { StructuredDataParams } from '@/types/structured-data-params'
+import { generatePageStructuredData } from '@/utils/generate-page-structured-data'
+
+export function generateStructuredData(
+  seo: StructuredDataParams,
+): WebPageGraph {
+  return generatePageStructuredData({
+    title: seo.title,
+    description: seo.description,
+    path: PATHS.TERMS_OF_USE.path as StaticPath,
+    pageType: 'WebPage',
+  })
+}