add: structured data for profile pages to improve visibility

frontend/src/app/members/[memberKey]/layout.tsx

@@ -1,8 +1,10 @@
 import { Metadata } from 'next'
 import React from 'react'
 import { apolloClient } from 'server/apolloClient'
-import { GET_USER_METADATA } from 'server/queries/userQueries'
+import { GET_USER_METADATA, GET_USER_DATA } from 'server/queries/userQueries'
 import { generateSeoMetadata } from 'utils/metaconfig'
+import { generateProfilePageStructuredData } from 'utils/structuredData'
+import StructuredDataScript from 'components/StructuredDataScript'
 
 export async function generateMetadata({
   params,
@@ -29,6 +31,40 @@ export async function generateMetadata({
     : null
 }
 
-export default function UserDetailsLayout({ children }: { children: React.ReactNode }) {
-  return children
+export default async function UserDetailsLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{ memberKey: string }>
+}) {
+  const { memberKey } = await params
+
+  try {
+    const { data } = await apolloClient.query({
+      query: GET_USER_DATA,
+      variables: {
+        key: memberKey,
+      },
+    })
+
+    const user = data?.user
+
+    if (!user) {
+      return children
+    }
+
+    if (user && user.login) {
+      const structuredData = generateProfilePageStructuredData(user)
+
+      return (
+        <>
+          <StructuredDataScript data={structuredData} />
+          {children}
+        </>
+      )
+    }
+  } catch {
+    return children
+  }
 }

frontend/src/components/StructuredDataScript.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ProfilePageStructuredData } from 'types/profilePageStructuredData'
+
+interface StructuredDataScriptProps {
+  data: ProfilePageStructuredData
+}
+
+// dangerouslySetInnerHTML injects the JSON data as a script tag.
+const StructuredDataScript: React.FC<StructuredDataScriptProps> = ({ data }) => {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data, null, 2), // include everything with 2 spaces indentation
+      }}
+    />
+  )
+}
+
+export default StructuredDataScript

frontend/src/types/profilePageStructuredData.ts

@@ -0,0 +1,35 @@
+export interface ProfilePageStructuredData {
+  '@context': string
+  '@type': string
+  mainEntity: {
+    '@type': string
+    name: string
+    description?: string
+    image?: string
+    url?: string
+    sameAs?: string[]
+    worksFor?: {
+      '@type': string
+      name: string
+    }
+    address?: {
+      '@type': string
+      addressLocality: string
+    }
+    knowsAbout?: string[]
+    hasOccupation?: {
+      '@type': string
+      name: string
+    }
+    memberOf?: {
+      '@type': string
+      name: string
+      url: string
+    }
+  }
+  interactionStatistic?: Array<{
+    '@type': string
+    interactionType: string
+    userInteractionCount: number
+  }>
+}

frontend/src/utils/structuredData.ts

@@ -0,0 +1,74 @@
+import { ProfilePageStructuredData } from 'types/profilePageStructuredData'
+import type { UserDetails } from 'types/user'
+
+/**
+ * JSON-LD structure data for ProfilePage
+ * https://developers.google.com/search/docs/appearance/structured-data/profile-page
+ *
+ * - @context: "https://schema.org"
+ * - @type: "ProfilePage"
+ * - mainEntity: A Person or Organization (using type Person for OWASP community members)
+ *
+ */
+export function generateProfilePageStructuredData(
+  user: UserDetails,
+  baseUrl = 'https://nest.owasp.org'
+): ProfilePageStructuredData {
+  const profileUrl = `${baseUrl}/members/${user.login}`
+
+  const structuredData: ProfilePageStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'ProfilePage',
+    mainEntity: {
+      '@type': 'Person',
+      name: user.name || user.login,
+      description: user.bio,
+      image: user.avatarUrl,
+      url: profileUrl,
+      sameAs: [user.url], // GitHub profile URL
+      memberOf: {
+        '@type': 'Organization',
+        name: 'OWASP',
+        url: 'https://owasp.org',
+      },
+    },
+  }
+
+  if (user.company) {
+    structuredData.mainEntity.worksFor = {
+      '@type': 'Organization',
+      name: user.company,
+    }
+  }
+
+  if (user.location) {
+    structuredData.mainEntity.address = {
+      '@type': 'PostalAddress',
+      addressLocality: user.location,
+    }
+  }
+
+  structuredData.mainEntity.knowsAbout = [
+    'Application Security',
+    'OWASP',
+    'Cybersecurity',
+    'Software Security',
+  ]
+
+  structuredData.mainEntity.hasOccupation = {
+    '@type': 'Occupation',
+    name: 'OWASP Community Member',
+  }
+
+  if (user.followersCount > 0) {
+    structuredData.interactionStatistic = [
+      {
+        '@type': 'InteractionCounter',
+        interactionType: 'https://schema.org/FollowAction',
+        userInteractionCount: user.followersCount,
+      },
+    ]
+  }
+
+  return structuredData
+}