seo(jsonld): VideoGallery + WebPage for video pages

app/[locale]/videos/[slug]/page-jsonld.tsx

@@ -1,3 +1,5 @@
+import { getTranslations } from "next-intl/server"
+
 import type { VideoFrontmatter } from "@/lib/interfaces"
 
 import PageJsonLD from "@/components/PageJsonLD"
@@ -6,9 +8,10 @@ import { stripMarkdown } from "@/lib/utils/md"
 import { toIsoDuration } from "@/lib/utils/time"
 import { normalizeUrlForJsonLd } from "@/lib/utils/url"
 import { getDefaultThumbnailUrl } from "@/lib/utils/videos"
-import { ORGANIZATION } from "@/lib/jsonld/constants"
 
-export default function VideoPageJsonLD({
+import { BASE_GRAPH_NODES, REFERENCE } from "@/lib/jsonld/constants"
+
+export default async function VideoPageJsonLD({
   locale,
   slug,
   frontmatter,
@@ -20,37 +23,85 @@ export default function VideoPageJsonLD({
   transcript: string | null
 }) {
   const url = normalizeUrlForJsonLd(locale, `/videos/${slug}/`)
+  const videoGalleryUrl = normalizeUrlForJsonLd(locale, "/videos/")
 
-  const jsonLd: Record<string, unknown> = {
-    "@context": "https://schema.org",
-    "@type": "VideoObject",
-    "@id": `${url}#video`,
-    name: frontmatter.title,
-    description: frontmatter.description,
-    uploadDate: `${frontmatter.uploadDate}T00:00:00+00:00`,
-    duration: toIsoDuration(frontmatter.duration),
-    thumbnailUrl:
-      frontmatter.customThumbnailUrl ||
-      getDefaultThumbnailUrl(frontmatter.youtubeId),
-    embedUrl: `https://www.youtube.com/embed/${frontmatter.youtubeId}`,
-    contentUrl: `https://www.youtube.com/watch?v=${frontmatter.youtubeId}`,
-    educationalLevel: frontmatter.educationLevel,
-    inLanguage: frontmatter.lang,
-    creator: {
-      "@type": "Person",
-      name: frontmatter.author,
-    },
-    publisher: ORGANIZATION.ETHEREUM_FOUNDATION,
-    isAccessibleForFree: true,
-    isFamilyFriendly: true,
-  }
+  const t = await getTranslations("page-videos")
+
+  const videoObjectId = { "@id": `${url}#video` }
 
-  // Add transcript as plain text if available
-  if (transcript) {
-    // Escape < and / to prevent script injection (XSS protection)
-    jsonLd.transcript = stripMarkdown(transcript, true)
-      .replace(/</g, "\\u003c")
-      .replace(/\//g, "\\u002f")
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      ...BASE_GRAPH_NODES,
+      // Type-assertion node for "isPartOf" references
+      { "@type": "VideoGallery", "@id": videoGalleryUrl },
+      {
+        "@type": "WebPage",
+        "@id": url,
+        name: frontmatter.title,
+        description: frontmatter.description,
+        url: url,
+        inLanguage: locale,
+        author: [REFERENCE.ETHEREUM_COMMUNITY],
+        isPartOf: REFERENCE.ETHEREUM_ORG_WEBSITE,
+        breadcrumb: {
+          "@type": "BreadcrumbList",
+          itemListElement: [
+            {
+              "@type": "ListItem",
+              position: 1,
+              name: "Home",
+              item: normalizeUrlForJsonLd(locale, "/"),
+            },
+            {
+              "@type": "ListItem",
+              position: 2,
+              name: t("page-videos-hero-title"),
+              item: videoGalleryUrl,
+            },
+            {
+              "@type": "ListItem",
+              position: 3,
+              name: frontmatter.breadcrumb || frontmatter.title,
+              item: url,
+            },
+          ],
+        },
+        publisher: REFERENCE.ETHEREUM_FOUNDATION,
+        reviewedBy: REFERENCE.ETHEREUM_FOUNDATION,
+        mainEntity: videoObjectId,
+      },
+      {
+        "@type": "VideoObject",
+        ...videoObjectId,
+        name: frontmatter.title,
+        description: frontmatter.description,
+        uploadDate: `${frontmatter.uploadDate}T00:00:00+00:00`,
+        duration: toIsoDuration(frontmatter.duration),
+        isPartOf: { "@id": videoGalleryUrl },
+        thumbnailUrl:
+          frontmatter.customThumbnailUrl ||
+          getDefaultThumbnailUrl(frontmatter.youtubeId),
+        embedUrl: `https://www.youtube.com/embed/${frontmatter.youtubeId}`,
+        contentUrl: `https://www.youtube.com/watch?v=${frontmatter.youtubeId}`,
+        educationalLevel: frontmatter.educationLevel,
+        inLanguage: frontmatter.lang,
+        creator: {
+          "@type": "Person",
+          name: frontmatter.author,
+        },
+        publisher: REFERENCE.ETHEREUM_FOUNDATION,
+        isAccessibleForFree: true,
+        isFamilyFriendly: true,
+        // Add transcript as plain text if available
+        transcript: transcript
+          ? stripMarkdown(transcript, true)
+              // Escape < and / to prevent script injection (XSS protection)
+              .replace(/</g, "\\u003c")
+              .replace(/\//g, "\\u002f")
+          : undefined,
+      },
+    ],
   }
 
   return <PageJsonLD structuredData={jsonLd} />

app/[locale]/videos/page-jsonld.tsx

@@ -4,9 +4,10 @@ import type { VideoCardData } from "@/lib/types"
 
 import PageJsonLD from "@/components/PageJsonLD"
 
-import { BASE_GRAPH_NODES, REFERENCE } from "@/lib/jsonld/constants"
 import { normalizeUrlForJsonLd } from "@/lib/utils/url"
 
+import { BASE_GRAPH_NODES, REFERENCE } from "@/lib/jsonld/constants"
+
 export default async function VideosPageJsonLD({
   locale,
   videos,
@@ -23,7 +24,7 @@ export default async function VideosPageJsonLD({
     "@graph": [
       ...BASE_GRAPH_NODES,
       {
-        "@type": "CollectionPage",
+        "@type": "VideoGallery",
         "@id": url,
         name: t("page-videos-meta-title"),
         description: t("page-videos-meta-description"),
@@ -66,7 +67,6 @@ export default async function VideosPageJsonLD({
                 ? -1
                 : 0
           )
-          .slice(0, 10)
           .map((video, index) => ({
             "@type": "ListItem",
             position: index + 1,