update

Author: aelmanaa

src/components/CCIP/Chain/Chain.astro

@@ -98,6 +98,7 @@ const chainStructuredData = generateChainStructuredData(
     image: chainMetadata.image,
     excerpt: chainMetadata.excerpt,
   }}
+  suppressDefaultStructuredData={true}
 >
   <ChainHero
     chains={networks}

src/components/CCIP/Landing/ccip-landing.astro

@@ -63,6 +63,7 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
     description: `Explore CCIP Directory for ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}: configuration data for supported blockchains and tokens, cross-chain lanes, contract addresses, rate limits, and operational status on ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}.`,
     image: "/files/ccip-directory.jpg",
   }}
+  suppressDefaultStructuredData={true}
 >
   <Hero chains={networks} tokens={allTokens} environment={environment} client:load lanes={searchLanes} />
   <section class="layout">

src/components/CCIP/Token/Token.astro

@@ -110,6 +110,7 @@ const tokenStructuredData = generateTokenStructuredData(token, environment, chai
     image: tokenMetadata.image,
     excerpt: tokenMetadata.excerpt,
   }}
+  suppressDefaultStructuredData={true}
 >
   <ChainHero
     chains={networks}

src/components/HeadSEO.astro

@@ -1,6 +1,8 @@
 ---
 import { Metadata, QuickstartsFrontmatter } from "src/content.config.ts"
 import { SITE, OPEN_GRAPH, PAGE } from "../config"
+import { getOgType } from "~/utils/seo/og"
+import { resolveCanonical, getMimeFromUrlPath, toAbsoluteUrl } from "~/utils/seo/url"
 import { detectApiReference } from "@components/VersionSelector/utils/versions"
 import { extractVersionInfo } from "@components/VersionSelector/utils/extractVersionInfo"
 import VersionSelectorHead from "@components/VersionSelector/base/VersionSelectorHead.astro"
@@ -13,9 +15,11 @@ export interface Props {
   quickstartFrontmatter?: QuickstartsFrontmatter
   pageTitle?: string // Add page title from frontmatter
   howToSteps?: { name: string; slug: string }[]
+  suppressDefaultStructuredData?: boolean
 }
 
-const { metadata, canonicalURL, quickstartFrontmatter, pageTitle, howToSteps } = Astro.props
+const { metadata, canonicalURL, quickstartFrontmatter, pageTitle, howToSteps, suppressDefaultStructuredData } =
+  Astro.props
 const contentTitle = pageTitle ?? metadata?.title ?? PAGE.titleFallback
 const formattedContentTitle = `${contentTitle} | ${SITE.title}`
 const description = metadata?.description ?? SITE.description
@@ -26,14 +30,10 @@ var canonicalImageSrc = OPEN_GRAPH.image.src
 let ogImageType = "image/png"
 let ogImageAlt = OPEN_GRAPH.image.alt
 if (metadata?.image) {
-  const imageUrl = new URL(metadata.image, Astro.site).toString()
+  const imageUrl = toAbsoluteUrl(metadata.image, Astro.site)
   canonicalImageSrc = imageUrl
-  // Infer from URL pathname only (ignore query/hash) to avoid network requests
-  const pathname = new URL(imageUrl).pathname.toLowerCase()
-  if (pathname.endsWith(".jpg") || pathname.endsWith(".jpeg")) ogImageType = "image/jpeg"
-  else if (pathname.endsWith(".png")) ogImageType = "image/png"
-  else if (pathname.endsWith(".webp")) ogImageType = "image/webp"
-  else if (pathname.endsWith(".gif")) ogImageType = "image/gif"
+  const pathname = new URL(imageUrl).pathname
+  ogImageType = getMimeFromUrlPath(pathname) || ogImageType
 }
 
 // Prefer a context-specific image alt when possible
@@ -54,60 +54,38 @@ if (isApiReference && product && isVersioned) {
 }
 
 // Generate structured data
-const canonicalURLObj = typeof canonicalURL === "string" ? new URL(canonicalURL) : canonicalURL
+const canonicalURLObj: URL = typeof canonicalURL === "string" ? new URL(canonicalURL) : (canonicalURL as URL)
 
 // Canonical override support (non-versioned pages only)
-const resolvedCanonicalHref = (() => {
-  const candidate = metadata?.canonical
-  if (!candidate) return canonicalURL
-  try {
-    // If candidate is absolute, use it; otherwise resolve against site
-    const url = new URL(candidate, Astro.site)
-    return url.toString()
-  } catch {
-    return canonicalURL
-  }
-})()
+const resolvedCanonicalHref = resolveCanonical(metadata?.canonical, Astro.site, canonicalURLObj)
 
 // Contextual Open Graph type
-const ogType = (() => {
-  const websiteExact = new Set([
-    "/",
-    "/ccip",
-    "/data-feeds",
-    "/vrf",
-    "/chainlink-functions",
-    "/chainlink-automation",
-    "/chainlink-local",
-    "/resources",
-  ])
-  const isWebsite = websiteExact.has(currentPage) || currentPage.startsWith("/ccip/directory")
-  return isWebsite ? "website" : "article"
-})()
+const ogType = getOgType(currentPage)
 
 // Use quickstart frontmatter if available, otherwise use regular metadata
 // Suppress default structured data for CCIP directory pages (handled by page-level generators)
-const structuredDataObjects = isCcipDirectoryPath
-  ? []
-  : quickstartFrontmatter
-    ? generateStructuredData(
-        quickstartFrontmatter,
-        contentTitle,
-        canonicalURLObj,
-        currentPage,
-        undefined,
-        undefined,
-        howToSteps
-      )
-    : generateStructuredData(
-        metadata,
-        contentTitle,
-        canonicalURLObj,
-        currentPage,
-        metadata?.estimatedTime,
-        versionInfo,
-        howToSteps
-      )
+const structuredDataObjects =
+  suppressDefaultStructuredData || isCcipDirectoryPath
+    ? []
+    : quickstartFrontmatter
+      ? generateStructuredData(
+          quickstartFrontmatter,
+          contentTitle,
+          canonicalURLObj,
+          currentPage,
+          undefined,
+          undefined,
+          howToSteps
+        )
+      : generateStructuredData(
+          metadata,
+          contentTitle,
+          canonicalURLObj,
+          currentPage,
+          metadata?.estimatedTime,
+          versionInfo,
+          howToSteps
+        )
 ---
 
 <!-- Page Metadata -->{/* Conditional canonical: Let VersionSelectorHead handle it for versioned pages */}

src/layouts/BaseLayout.astro

@@ -15,8 +15,10 @@ interface Props {
   pageTitle?: string
   howToSteps?: { name: string; slug: string }[]
   structuredData?: object | object[]
+  suppressDefaultStructuredData?: boolean
 }
-const { title, metadata, quickstartFrontmatter, pageTitle, howToSteps, structuredData } = Astro.props
+const { title, metadata, quickstartFrontmatter, pageTitle, howToSteps, structuredData, suppressDefaultStructuredData } =
+  Astro.props
 const canonicalURLStr = new URL(Astro.url.pathname, Astro.site).href.replace(/\/+$/, "")
 const canonicalURL = new URL(canonicalURLStr)
 ---
@@ -30,6 +32,7 @@ const canonicalURL = new URL(canonicalURLStr)
       quickstartFrontmatter={quickstartFrontmatter}
       {pageTitle}
       howToSteps={howToSteps}
+      suppressDefaultStructuredData={suppressDefaultStructuredData}
     />
     {structuredData && <StructuredData data={structuredData} />}
     <style>

src/layouts/CcipDirectoryLayout.astro

@@ -17,8 +17,17 @@ interface Props {
   structuredData?: object | object[]
   pageTitleOverride?: string
   metadataOverride?: Metadata
+  suppressDefaultStructuredData?: boolean
 }
-const { frontmatter, headings, environment, structuredData, pageTitleOverride, metadataOverride } = Astro.props
+const {
+  frontmatter,
+  headings,
+  environment,
+  structuredData,
+  pageTitleOverride,
+  metadataOverride,
+  suppressDefaultStructuredData,
+} = Astro.props
 
 const titleHeading: MarkdownHeading = {
   text: frontmatter.title,
@@ -45,6 +54,7 @@ const layoutMetadata: Metadata | undefined = metadataOverride ?? frontmatter.met
   metadata={layoutMetadata}
   pageTitle={effectiveTitle}
   structuredData={structuredData}
+  suppressDefaultStructuredData={suppressDefaultStructuredData}
 >
   <Drawer client:only="react" />
   <StickyHeader client:media="(max-width: 50em)" {initialHeadings} />

src/utils/seo/og.ts

@@ -0,0 +1,21 @@
+/**
+ * Determine Open Graph type for a given pathname.
+ * - Returns "website" for home and product landing pages
+ * - Returns "article" for everything else
+ *
+ * Keep this list in sync when adding new product roots.
+ */
+export function getOgType(pathname: string): "website" | "article" {
+  const websiteExact = new Set<string>([
+    "/",
+    "/ccip",
+    "/data-feeds",
+    "/vrf",
+    "/chainlink-functions",
+    "/chainlink-automation",
+    "/chainlink-local",
+    "/resources",
+  ])
+  if (websiteExact.has(pathname) || pathname.startsWith("/ccip/directory")) return "website"
+  return "article"
+}

src/utils/seo/url.ts

@@ -0,0 +1,58 @@
+/**
+ * Convert a path or URL string to an absolute URL string.
+ * - If already absolute (http/https), returns as-is
+ * - If relative and a site URL is provided, resolves against it
+ * - If site is missing, returns the original string
+ *
+ * @param pathOrUrl Relative path (e.g. "/images/og.png") or absolute URL
+ * @param site The site base URL (Astro.site) – may be undefined in some contexts
+ * @returns Absolute URL string when resolvable; otherwise the input
+ */
+export function toAbsoluteUrl(pathOrUrl: string, site: URL | undefined): string {
+  try {
+    if (/^https?:\/\//i.test(pathOrUrl)) return pathOrUrl
+    if (site) return new URL(pathOrUrl, site).toString()
+    return pathOrUrl
+  } catch {
+    return pathOrUrl
+  }
+}
+
+/**
+ * Resolve a canonical URL override.
+ * - If candidate is provided, resolves it against the site
+ * - Falls back to the provided default URL when invalid or missing
+ *
+ * @param candidate Optional canonical override from frontmatter
+ * @param site Site base URL (Astro.site) – may be undefined in some contexts
+ * @param defaultUrl The default canonical (already absolute URL/string)
+ * @returns A valid absolute canonical URL or the default URL
+ */
+export function resolveCanonical(
+  candidate: string | undefined,
+  site: URL | undefined,
+  defaultUrl: URL | string
+): string | URL {
+  if (!candidate) return defaultUrl
+  try {
+    return new URL(candidate, site).toString()
+  } catch {
+    return defaultUrl
+  }
+}
+
+/**
+ * Infer an image MIME type from a URL pathname (query/hash ignored).
+ * Supports: .jpg/.jpeg, .png, .webp, .gif
+ *
+ * @param pathname URL pathname (e.g. "/images/og.png")
+ * @returns MIME type string like "image/png" or undefined when unknown
+ */
+export function getMimeFromUrlPath(pathname: string): string | undefined {
+  const lower = pathname.toLowerCase()
+  if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) return "image/jpeg"
+  if (lower.endsWith(".png")) return "image/png"
+  if (lower.endsWith(".webp")) return "image/webp"
+  if (lower.endsWith(".gif")) return "image/gif"
+  return undefined
+}