chore: improve metatadata

Author: LGLabGreg

apps/docs/src/app/demo/page.tsx

@@ -1,6 +1,14 @@
+import type { Metadata } from 'next'
+
 import { Demo } from '@/components/demo/demo'
 import { PageHeading } from '@/components/page-heading'
 
+export const metadata: Metadata = {
+  title: 'Demo',
+  description:
+    'Try the interactive React QR Code demo to experiment with customization options and see how the library works in real time.',
+}
+
 export default function Page() {
   return (
     <>

apps/docs/src/app/examples/basic/page.tsx

@@ -1,12 +1,20 @@
+import type { Metadata } from 'next'
+
 import { Demo, codeBlock } from '@/components/demos/demo-basic'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Basic Example',
+  description:
+    'See a basic example of using the @lglab/react-qr-code library to render a customizable QR code in a React application.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Basic' />
+      <PageHeading heading='Basic example' />
       <TypographyP>
         The @lglab/react-qr-code library makes it easy to generate customizable QR codes
         in your React applications. Here&apos;s a simple example to get you started.

apps/docs/src/app/installation/page.tsx

@@ -1,7 +1,15 @@
+import type { Metadata } from 'next'
+
 import { CodeBlock } from '@/components/code-block'
 import { PageHeading } from '@/components/page-heading'
 import { TypographyBold, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Installation',
+  description:
+    'Install the @lglab/react-qr-code library using your preferred JavaScript package manager, including pnpm, npm, yarn, or bun.',
+}
+
 export default function Page() {
   return (
     <>

apps/docs/src/app/layout.tsx

@@ -20,9 +20,37 @@ const mono = Source_Code_Pro({
 })
 
 export const metadata: Metadata = {
-  title: 'React QR Code - Customizable QR Code Generator for React',
+  metadataBase: new URL('https://reactqrcode.com'),
+  title: {
+    default: 'React QR Code – Customizable QR Code Generator for React',
+    template: '%s – React QR Code',
+  },
   description:
-    'React QR Code is a highly customizable and lightweight QR code generator for React applications. Easily style QR codes with unique finder patterns, rounded corners, and customizable colors. Explore the documentation and live demo to get started quickly!',
+    'React QR Code is a highly customizable and lightweight QR code generator for React applications. Easily style QR codes with unique finder patterns, rounded corners, and customizable colors.',
+  keywords: [
+    'React QR Code',
+    'QR code generator',
+    'React QR library',
+    'SVG QR code',
+    'customizable QR codes',
+  ],
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    type: 'website',
+    url: 'https://reactqrcode.com',
+    title: 'React QR Code – Customizable QR Code Generator for React',
+    description:
+      'Generate highly customizable, high-performance QR codes in React using SVG, gradients, and finder pattern controls.',
+    siteName: 'React QR Code',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'React QR Code – Customizable QR Code Generator for React',
+    description:
+      'Lightweight, customizable QR code generator for React with SVG rendering and fine-grained styling.',
+  },
   verification: {
     google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
   },

apps/docs/src/app/llms-txt/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from 'next'
+
 import { PageHeading } from '@/components/page-heading'
 import {
   TypographyBold,
@@ -7,6 +9,12 @@ import {
   TypographyP,
 } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'llms.txt',
+  description:
+    'Learn how the llms.txt and llms-full.txt files describe the @lglab/react-qr-code library for AI coding assistants such as Cursor.',
+}
+
 export default function Page() {
   return (
     <>
@@ -26,7 +34,7 @@ export default function Page() {
         tools to provide accurate code suggestions and documentation.
       </TypographyP>
 
-      <TypographyH2>Available Routes</TypographyH2>
+      <TypographyH2>Available routes</TypographyH2>
       <TypographyP>
         We provide two distinct files to cater to different levels of detail:
       </TypographyP>

apps/docs/src/app/quick-start/page.tsx

@@ -1,7 +1,15 @@
+import type { Metadata } from 'next'
+
 import { CodeEditor } from '@/components/code-editor'
 import { PageHeading } from '@/components/page-heading'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Quick Start',
+  description:
+    'Follow this quick start guide to render your first QR code in React using the @lglab/react-qr-code component.',
+}
+
 const codeBlock = `
 import { ReactQRCode } from '@lglab/react-qr-code'
 

apps/docs/src/app/react-qr-code-props/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import type { Prop } from '@/types/props'
@@ -6,6 +7,12 @@ import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyBold, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'ReactQRCode Props',
+  description:
+    'Full API reference for the ReactQRCode component in the @lglab/react-qr-code library, including all props and configuration options.',
+}
+
 const props: Prop[] = [
   {
     name: 'value',

apps/docs/src/app/robots.ts

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://reactqrcode.com/sitemap.xml',
+  }
+}