Merge pull request #461 from LGLabGreg/chore/seo

LGLabGreg · web-flow · commit c6b6633d9b17 · 2026-02-28T09:53:23.000Z
Chore/seo
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -32,25 +32,25 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-config-next": "16.1.6",
-    "lucide-react": "^0.564.0",
+    "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.1",
+    "react-hook-form": "^7.71.2",
     "react-icons": "^5.5.0",
-    "tailwind-merge": "^3.4.1",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4.2.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3"
   }
 }
diff --git a/apps/docs/src/app/data-modules-settings/page.tsx b/apps/docs/src/app/data-modules-settings/page.tsx
@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { Bold, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'DataModulesSettings',
+  description:
+    'Configuration options for DataModulesSettings in @lglab/react-qr-code, used to control QR code data module color, shape, and random sizing.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',
diff --git a/apps/docs/src/app/demo/page.tsx b/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 (
     <>
diff --git a/apps/docs/src/app/examples/background/page.tsx b/apps/docs/src/app/examples/background/page.tsx
@@ -1,3 +1,5 @@
+import type { Metadata } from 'next'
+
 import {
   DemoGradient,
   DemoSolid,
@@ -8,6 +10,12 @@ import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyH3, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Background Example',
+  description:
+    'Example showing how to customize QR code backgrounds in @lglab/react-qr-code using solid colors and gradients.',
+}
+
 export default function Page() {
   return (
     <>
diff --git a/apps/docs/src/app/examples/basic/page.tsx b/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.
diff --git a/apps/docs/src/app/examples/data-modules/page.tsx b/apps/docs/src/app/examples/data-modules/page.tsx
@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/data-modules'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Data Modules Example',
+  description:
+    'Example demonstrating how to customize QR code data modules in @lglab/react-qr-code, including shape, color, and random sizing.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Data modules example' />
       <TypographyP>
         The data modules in a QR code are the small squares that encode the actual
         information. With @lglab/react-qr-code, you can customize their shape and color,
diff --git a/apps/docs/src/app/examples/download/page.tsx b/apps/docs/src/app/examples/download/page.tsx
@@ -1,8 +1,16 @@
+import type { Metadata } from 'next'
+
 import { DemoDownload, codeBlock } from '@/components/demos/demo-download'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Download Example',
+  description:
+    'Example demonstrating how to use the download API in @lglab/react-qr-code to export QR codes as SVG, PNG, or JPEG files.',
+}
+
 export default function Page() {
   return (
     <>
diff --git a/apps/docs/src/app/examples/finder-patterns/page.tsx b/apps/docs/src/app/examples/finder-patterns/page.tsx
@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/finder-patterns'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Finder Patterns Example',
+  description:
+    'Example showing how to customize QR code finder patterns in @lglab/react-qr-code, including inner and outer styles.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Finder patterns example' />
       <TypographyP>
         The finder patterns are the three prominent squares located at the corners of a QR
         code, essential for orientation during scanning. With @lglab/react-qr-code, you
diff --git a/apps/docs/src/app/examples/image/page.tsx b/apps/docs/src/app/examples/image/page.tsx
@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/image'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Image Example',
+  description:
+    'Example showing how to embed images or logos inside QR codes using the ImageSettings options in @lglab/react-qr-code.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Image example' />
       <TypographyP>
         The @lglab/react-qr-code library allows you to embed images or logos within your
         QR codes, enhancing branding and visual appeal. This guide details the
diff --git a/apps/docs/src/app/finder-pattern-inner-settings/page.tsx b/apps/docs/src/app/finder-pattern-inner-settings/page.tsx
@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'FinderPatternInnerSettings',
+  description:
+    'Configuration options for FinderPatternInnerSettings in @lglab/react-qr-code, used to style the inner part of QR code finder patterns.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',
diff --git a/apps/docs/src/app/finder-pattern-outer-settings/page.tsx b/apps/docs/src/app/finder-pattern-outer-settings/page.tsx
@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'FinderPatternOuterSettings',
+  description:
+    'Configuration options for FinderPatternOuterSettings in @lglab/react-qr-code, used to style the outer part of QR code finder patterns.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',
diff --git a/apps/docs/src/app/gradient-settings/page.tsx b/apps/docs/src/app/gradient-settings/page.tsx
@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyH2, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'GradientSettings',
+  description:
+    'Configuration options for GradientSettings in @lglab/react-qr-code, including gradient type, stops, and rotation for QR code data or backgrounds.',
+}
+
 const props: Prop[] = [
   {
     name: 'type',
diff --git a/apps/docs/src/app/image-settings/page.tsx b/apps/docs/src/app/image-settings/page.tsx
@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'ImageSettings',
+  description:
+    'Configuration options for ImageSettings in @lglab/react-qr-code, allowing you to embed and position images or logos inside QR codes.',
+}
+
 const props: Prop[] = [
   {
     name: 'src',
diff --git a/apps/docs/src/app/installation/page.tsx b/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 (
     <>
diff --git a/apps/docs/src/app/layout.tsx b/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,
   },
diff --git a/apps/docs/src/app/llms-txt/page.tsx b/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>
diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
@@ -1,4 +1,5 @@
 import { Code, Layers, Sparkles, Zap } from 'lucide-react'
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Hero } from '@/components/hero'
@@ -11,6 +12,12 @@ import {
 } from '@/components/ui/card'
 import { TypographyBold } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Overview',
+  description:
+    'Overview of the React QR Code library, including key features, performance characteristics, and links to installation, demo, and documentation.',
+}
+
 export default function Page() {
   const features = [
     {
diff --git a/apps/docs/src/app/quick-start/page.tsx b/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'
 
diff --git a/apps/docs/src/app/react-qr-code-props/page.tsx b/apps/docs/src/app/react-qr-code-props/page.tsx
diff --git a/apps/docs/src/app/ref-api/page.tsx b/apps/docs/src/app/ref-api/page.tsx
diff --git a/apps/docs/src/app/robots.ts b/apps/docs/src/app/robots.ts
diff --git a/package.json b/package.json
diff --git a/packages/react-qr-code/package.json b/packages/react-qr-code/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
