feat: SEO updates

.github/workflows/indexnow.yml

@@ -0,0 +1,32 @@
+name: Notify IndexNow
+
+on:
+  deployment_status:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.deployment.environment || 'Production' }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  submit:
+    if: >-
+      github.event_name == 'workflow_dispatch' ||
+      (github.event.deployment_status.state == 'success' &&
+      github.event.deployment.environment == 'Production')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.19
+      - name: Submit canonical sitemap URLs
+        env:
+          INDEXNOW_KEY: ${{ secrets.INDEXNOW_KEY }}
+          INDEXNOW_SITE_URL: https://limeplay.winoffrg.dev
+        run: bun apps/www/scripts/submit-indexnow.ts

apps/www/app/(home)/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next"
+
 import { FeatureTrailSection } from "@/components/feature-trail-section"
 import { FeatureGrid } from "@/components/features"
 import { Hero } from "@/components/hero"
@@ -6,6 +8,12 @@ import { AudioPlayerHover } from "@/components/players/audio-player/hover-player
 import { VideoPlayerContainer } from "@/components/players/video-player/player-container"
 import { ScrollIndicator } from "@/components/scroll-indicator"
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "/",
+  },
+}
+
 export default function Home() {
   return (
     <>

apps/www/app/blocks/[[...slug]]/page.tsx

@@ -8,6 +8,7 @@ import { BlockPageShell } from "@/components/blocks/block-page-shell"
 import { getBlockShowcase } from "@/components/blocks/block-showcase"
 import { BlockInfoPane } from "@/components/blocks/info-pane"
 import { getMDXComponents } from "@/components/mdx-components"
+import { PageJsonLd } from "@/components/page-json-ld"
 import { blocksSource } from "@/lib/blocks-source"
 
 export const revalidate = false
@@ -28,6 +29,9 @@ export default async function BlockPage(props: BlockPageProps) {
   }
 
   const showcase = getBlockShowcase(page.data.preview)
+  const description =
+    page.data.description ??
+    `Install and customize the ${page.data.title} block for Limeplay.`
 
   const MDXContent = page.data.body
   const PreviewComponent = showcase.component
@@ -65,6 +69,17 @@ export default async function BlockPage(props: BlockPageProps) {
       tree={blocksSource.getPageTree()}
     >
       <main className="relative min-h-svh overflow-x-hidden bg-background">
+        {/* TODO: Point this breadcrumb to /blocks once the blocks index page exists. */}
+        <PageJsonLd
+          breadcrumbs={[
+            { name: "Home", path: "/" },
+            { name: "Blocks", path: "/blocks/video-player" },
+            { name: page.data.title, path: page.url },
+          ]}
+          description={description}
+          path={page.url}
+          title={`${page.data.title} Block`}
+        />
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -96,9 +111,25 @@ export async function generateMetadata(
 
   if (!page) notFound()
 
+  const description =
+    page.data.description ??
+    `Install and customize the ${page.data.title} block for Limeplay.`
+
   return {
-    description: page.data.description,
+    alternates: {
+      canonical: page.url,
+    },
+    description,
+    openGraph: {
+      description,
+      title: `${page.data.title} Block`,
+      url: page.url,
+    },
     title: `${page.data.title} Block`,
+    twitter: {
+      description,
+      title: `${page.data.title} Block`,
+    },
   }
 }
 

apps/www/app/docs/[[...slug]]/page.tsx

@@ -11,6 +11,7 @@ import { notFound } from "next/navigation"
 
 import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions"
 import { getMDXComponents } from "@/components/mdx-components"
+import { PageJsonLd } from "@/components/page-json-ld"
 import { getPageImage, source } from "@/lib/source"
 
 export async function generateMetadata(props: {
@@ -20,12 +21,28 @@ export async function generateMetadata(props: {
   const page = source.getPage(params.slug)
   if (!page) notFound()
 
+  const canonicalPath = getCanonicalPath(page.slugs, page.url)
+  const description = getPageDescription(page.data.title, page.data.description)
+  const imageUrl = getPageImage(page).url
+
   return {
-    description: page.data.description,
+    alternates: {
+      canonical: canonicalPath,
+    },
+    description,
     openGraph: {
-      images: getPageImage(page).url,
+      description,
+      images: imageUrl,
+      title: page.data.title,
+      type: "article",
+      url: canonicalPath,
     },
     title: page.data.title,
+    twitter: {
+      description,
+      images: imageUrl,
+      title: page.data.title,
+    },
   }
 }
 
@@ -41,16 +58,40 @@ export default async function Page(props: {
   if (!page) notFound()
 
   const MDXContent = page.data.body
+  const canonicalPath = getCanonicalPath(page.slugs, page.url)
+  const markdownUrl = `/llms.mdx/${page.slugs.join("/")}.mdx`
+  const description = getPageDescription(page.data.title, page.data.description)
+  const parentBreadcrumbs = page.slugs.slice(0, -1).map((slug, slugIndex) => ({
+    name: slug
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" "),
+    path: `/docs/${page.slugs.slice(0, slugIndex + 1).join("/")}`,
+  }))
+  const breadcrumbs = [
+    { name: "Home", path: "/" },
+    ...(page.url === "/docs/quick-start"
+      ? []
+      : [{ name: "Documentation", path: "/docs/quick-start" }]),
+    ...parentBreadcrumbs,
+    { name: page.data.title, path: canonicalPath },
+  ]
 
   return (
     <DocsPage full={page.data.full} toc={page.data.toc}>
+      <PageJsonLd
+        breadcrumbs={breadcrumbs}
+        description={description}
+        path={canonicalPath}
+        title={page.data.title}
+      />
       <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsDescription>{description}</DocsDescription>
       <div className="flex flex-row flex-wrap items-center gap-2 pb-6">
-        <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
+        <LLMCopyButton markdownUrl={markdownUrl} />
         <ViewOptions
           githubUrl={`https://github.com/winoffrg/limeplay/blob/main/apps/www/content/docs/${page.path}`}
-          markdownUrl={`${page.url}.mdx`}
+          markdownUrl={markdownUrl}
         />
       </div>
       <DocsBody>
@@ -63,3 +104,18 @@ export default async function Page(props: {
     </DocsPage>
   )
 }
+
+function getCanonicalPath(slugs: string[], pageUrl: string) {
+  if (slugs[0] === "blocks") {
+    return `/blocks/${slugs.slice(1).join("/")}`
+  }
+
+  return pageUrl
+}
+
+function getPageDescription(title: string, description?: string) {
+  return (
+    description ??
+    `Learn how ${title} works in Limeplay's React media player component system.`
+  )
+}

apps/www/app/indexnow-key.txt/route.ts

@@ -0,0 +1,23 @@
+export const dynamic = "force-static"
+export const revalidate = false
+
+export function GET() {
+  const key = process.env.INDEXNOW_KEY
+
+  if (!key) {
+    return new Response("IndexNow is not configured.\n", {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "X-Robots-Tag": "noindex, nofollow, nosnippet",
+      },
+      status: 404,
+    })
+  }
+
+  return new Response(`${key}\n`, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "X-Robots-Tag": "noindex, nofollow, nosnippet",
+    },
+  })
+}

apps/www/app/layout.tsx

@@ -9,12 +9,18 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Inter } from "next/font/google"
 
 import { JsonLd } from "@/components/json-ld"
-import { PRODUCT_DESCRIPTION, PRODUCT_NAME } from "@/lib/constants"
+import {
+  PRODUCT_DESCRIPTION,
+  PRODUCT_NAME,
+  PRODUCT_TITLE,
+  SITE_URL,
+} from "@/lib/constants"
 
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-sans",
 })
+const bingSiteVerification = process.env.BING_SITE_VERIFICATION
 
 export const metadata: Metadata = {
   authors: [
@@ -24,22 +30,8 @@ export const metadata: Metadata = {
     },
   ],
   description: PRODUCT_DESCRIPTION,
-  keywords: [
-    "video player",
-    "video components",
-    "open source",
-    "limeplay",
-    "shaka player",
-    "React",
-    "TypeScript",
-    "Next.js",
-    "React",
-    "tailwind",
-    "media",
-    "ui",
-    "shadcn",
-  ],
   manifest: `/site.webmanifest`,
+  metadataBase: new URL(SITE_URL),
   openGraph: {
     description: PRODUCT_DESCRIPTION,
     images: [
@@ -52,20 +44,38 @@ export const metadata: Metadata = {
     ],
     locale: "en_US",
     siteName: PRODUCT_NAME,
-    title: PRODUCT_NAME,
+    title: `${PRODUCT_TITLE} | ${PRODUCT_NAME}`,
     type: "website",
+    url: SITE_URL,
+  },
+  robots: {
+    follow: true,
+    googleBot: {
+      follow: true,
+      index: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+    index: true,
   },
-  robots: "index, follow",
   title: {
-    default: PRODUCT_NAME,
+    default: `${PRODUCT_TITLE} | ${PRODUCT_NAME}`,
     template: `%s | ${PRODUCT_NAME}`,
   },
   twitter: {
     card: "summary_large_image",
     creator: "@winoffrg",
     description: PRODUCT_DESCRIPTION,
     images: [`/opengraph-image.png`],
-    title: PRODUCT_NAME,
+    title: `${PRODUCT_TITLE} | ${PRODUCT_NAME}`,
+  },
+  verification: {
+    other: bingSiteVerification
+      ? {
+          "msvalidate.01": bingSiteVerification,
+        }
+      : undefined,
   },
 }
 

apps/www/app/llms-full.txt/route.ts

@@ -1,11 +1,9 @@
-import { getLLMText } from "@/lib/get-llm-text"
-import { source } from "@/lib/source"
+import { buildLLMsText, LLM_RESPONSE_HEADERS } from "@/lib/llms"
 
 export const revalidate = false
 
 export async function GET() {
-  const scan = source.getPages().map(getLLMText)
-  const scanned = await Promise.all(scan)
-
-  return new Response(scanned.join("\n\n"))
+  return new Response(buildLLMsText({ includeAllDocs: true }), {
+    headers: LLM_RESPONSE_HEADERS,
+  })
 }

apps/www/app/llms.mdx/[...slug]/route.ts

@@ -33,7 +33,8 @@ export async function GET(
 
   return new NextResponse(await getLLMText(page), {
     headers: {
-      "Content-Type": "text/markdown",
+      "Content-Type": "text/markdown; charset=utf-8",
+      "X-Robots-Tag": "noindex, follow",
     },
   })
 }

apps/www/app/llms.txt/route.ts

@@ -1,23 +1,9 @@
-import { source } from "@/lib/source"
+import { buildLLMsText, LLM_RESPONSE_HEADERS } from "@/lib/llms"
 
 export const revalidate = false
 
 export async function GET() {
-  const scanned: string[] = []
-  scanned.push("# Docs")
-  const map = new Map<string, string[]>()
-
-  for (const page of source.getPages()) {
-    const dir = page.slugs[0]
-    const list = map.get(dir) ?? []
-    list.push(`- [${page.data.title}](${page.url}): ${page.data.description}`)
-    map.set(dir, list)
-  }
-
-  for (const [key, value] of map) {
-    scanned.push(`## ${key}`)
-    scanned.push(value.join("\n"))
-  }
-
-  return new Response(scanned.join("\n\n"))
+  return new Response(buildLLMsText(), {
+    headers: LLM_RESPONSE_HEADERS,
+  })
 }