Relevant source files

The following files were used as context for generating this wiki page: - [app/sitemap.ts](https://github.com/grapevinetravel/grapevine_website/blob/main/app/sitemap.ts) - [app/robots.ts](https://github.com/grapevinetravel/grapevine_website/blob/main/app/robots.ts) - [lib/seo.ts](https://github.com/grapevinetravel/grapevine_website/blob/main/lib/seo.ts) - [components/json-ld.tsx](https://github.com/grapevinetravel/grapevine_website/blob/main/components/json-ld.tsx) - [app/layout.tsx](https://github.com/grapevinetravel/grapevine_website/blob/main/app/layout.tsx) - [app/about/page.tsx](https://github.com/grapevinetravel/grapevine_website/blob/main/app/about/page.tsx) - [app/product/page.tsx](https://github.com/grapevinetravel/grapevine_website/blob/main/app/product/page.tsx) - [app/page.tsx](https://github.com/grapevinetravel/grapevine_website/blob/main/app/page.tsx)

# SEO Strategy The Grapevine website employs a comprehensive SEO strategy leveraging Next.js features for metadata management, structured data (JSON-LD) for rich search results, and automated generation of `sitemap.xml` and `robots.txt` files. The core of this strategy is a centralized configuration file, `lib/seo.ts`, which provides site-wide constants and schema generation functions, ensuring consistency and maintainability. This approach combines global defaults with page-specific overrides, allowing for fine-grained control over how each page is presented to search engines. The use of various `schema.org` types, such as `Organization`, `WebPage`, `Service`, and `BreadcrumbList`, enhances the semantic understanding of the site's content for crawlers. ## Core Components The SEO strategy is built upon several key files and components that work together to manage and render SEO-related data. ```mermaid graph TD subgraph Configuration A[lib/seo.ts: siteConfig] --> B; A --> C; end subgraph Metadata Generation B[app/layout.tsx: Root Metadata] --> D[Page Component]; D -- Overrides --> E[Final Page Metadata]; end subgraph Structured Data C[lib/seo.ts: Schema Generators] --> F[Page Component]; F -- Calls --> C; F --> G[components/json-ld.tsx]; G -- Renders --> H[JSON-LD Script]; end subgraph Crawler Directives I[app/sitemap.ts] --> J[sitemap.xml]; K[app/robots.ts] --> L[robots.txt]; L -- Points to --> J; end E --> M[Rendered HTML ]; H --> M; ``` This diagram illustrates the flow of SEO data, from the central `siteConfig` to the final rendered HTML head, including metadata, JSON-LD, and crawler directives. *Sources: [lib/seo.ts](), [app/layout.tsx](), [components/json-ld.tsx](), [app/sitemap.ts](), [app/robots.ts]()* ## Global SEO Configuration A central `siteConfig` object in `lib/seo.ts` stores all global SEO-related constants. This object serves as a single source of truth for the site's name, description, URL, social media handles, and default keywords. *Sources: [lib/seo.ts:1-21]()* | Property | Type | Description | |---------------|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `name` | `string` | The site name, "Grapevine". | | `description` | `string` | The default site description for metadata. | | `url` | `string` | The base URL of the application, sourced from `NEXT_PUBLIC_APP_URL` environment variable. | | `ogImage` | `string` | Path to the default Open Graph image. | | `xHandle` | `string` | The site's X (formerly Twitter) handle. | | `linkedInUrl` | `string` | The full URL to the company's LinkedIn page. | | `locale` | `string` | The site's locale, set to "en_GB". | | `keywords` | `string[]` | An array of default keywords for the site. | ## Metadata Management The application uses Next.js's file-based metadata API. A root `metadata` object is defined in the `app/layout.tsx` file, and individual pages can export their own `metadata` objects to override or extend these defaults. ### Root Layout Metadata The `app/layout.tsx` file establishes the default metadata for the entire site. This includes title templating, default descriptions, Open Graph and Twitter card settings, and global robot directives. Key properties defined in the root layout's `metadata` object: | Property | Value/Configuration - `title.template` | `Grapevine - %s` - `openGraph` | Defines default OG tags for social sharing, including `type`, `locale`, `url`, `title`, `description`, and `images`. - `twitter` | Defines default Twitter card settings, including `card`, `title`, `description`, `images`, and `creator`. - `robots` | Sets global crawling rules, allowing indexing and following by default, with specific rules for Googlebot. - `alternates` | Sets the site-wide canonical URL to the root path. - *Sources: [app/layout.tsx:90-141]()* ### Page-Specific Metadata Each page component (e.g., in `app/about/page.tsx`) exports a `metadata` object to provide context-specific information. This overrides the defaults from the root layout. A common practice is to set a unique `title`, `description`, and a canonical URL for each page. ```typescript // app/about/page.tsx import { Metadata } from "next"; // ... export const metadata: Metadata = { title: "About", description: "Meet the team behind Grapevine - the AI-native assistant that keeps business travellers compliant, supported, and in-policy. Learn about our mission to transform corporate travel.", alternates: { canonical: "/about", } }; ``` This example from the "About" page demonstrates how a specific title, description, and canonical URL are set, providing more relevant information to search engines for that particular page. *Sources: [app/about/page.tsx:5-12](), [app/product/page.tsx:5-15](), [app/tmcs/page.tsx:5-16]()* ## Structured Data (JSON-LD) The application heavily utilizes JSON-LD to provide structured data to search engines. This is managed through a reusable `` component and a suite of schema generation functions. ### `` Component The `` component, located at `components/json-ld.tsx`, is a simple client component that takes a data object and renders it inside a ` ``` *Sources: [app/about/page.tsx:14-19](), [lib/seo.ts:92-116, 140-152](), [app/layout.tsx:146-150](), [components/json-ld.tsx]()* ### Supported Schema Types The `lib/seo.ts` file defines interfaces and generator functions for several schema types. ```mermaid classDiagram direction TD class OrganizationSchema { +@context: "https://schema.org" +@type: "Organization" +name: string +url: string +logo: string +description: string +sameAs: string[] +contactPoint: object } class WebPageSchema { +@context: "https://schema.org" +@type: "WebPage" +name: string +description: string +url: string +isPartOf: object } class BreadcrumbSchema { +@context: "https://schema.org" +@type: "BreadcrumbList" +itemListElement: object[] } class SoftwareApplicationSchema { +@context: "https://schema.org" +@type: "SoftwareApplication" +name: string +description: string +applicationCategory: string +operatingSystem: string } class ServiceSchema { +@context: "https://schema.org" +@type: "Service" +name: string +description: string +url: string +provider: object +serviceType: string } OrganizationSchema --|> WebSite WebPageSchema --|> WebSite ServiceSchema --|> Organization ``` This diagram shows the structure of the main schema interfaces defined for use in JSON-LD. *Sources: [lib/seo.ts:23-90, 185-207]()* - **`OrganizationSchema`**: Represents the Grapevine organization. It's generated by `generateOrganizationSchema()` and included in the root layout, making it present on all pages. *Sources: [lib/seo.ts:92-116](), [app/layout.tsx:146-150]()* - **`WebSiteSchema`**: Represents the website itself. It's generated by `generateWebSiteSchema()` and used on the homepage. *Sources: [lib/seo.ts:175-183](), [app/page.tsx:16, 21]()* - **`WebPageSchema`**: A generic schema for a standard web page, generated by `generateWebPageSchema()`. *Sources: [lib/seo.ts:118-132]()* - **`BreadcrumbSchema`**: For generating breadcrumb navigation data, created by `generateBreadcrumbSchema()`. This is used on nested pages like `/about`, `/product`, etc. *Sources: [lib/seo.ts:140-152](), [app/about/page.tsx:18-21]()* - **`ServiceSchema`**: Describes the services offered, such as "Grapevine for TMCs". Generated by `generateServiceSchema()`. *Sources: [lib/seo.ts:185-207](), [app/tmcs/page.tsx:19-25]()* - **`SoftwareApplicationSchema`**: Describes the Grapevine product as a software application. Generated by `generateSoftwareSchema()`. *Sources: [lib/seo.ts:134-148](), [app/product/page.tsx:18-21]()* - **`ContactPageSchema` & `AboutPageSchema`**: Specialized page schemas for the contact and about pages, respectively. *Sources: [lib/seo.ts:209-247]()* ## Search Engine Directives The application provides clear instructions for search engine crawlers through `robots.txt` and `sitemap.xml`. ### Sitemap The `app/sitemap.ts` file programmatically generates the `sitemap.xml`. It defines a list of routes with their respective `changeFrequency` and `priority`, helping search engines understand the structure and importance of pages. The `siteConfig.url` is prepended to each route to form the absolute URL. *Sources: [app/sitemap.ts]()* | URL | `changeFrequency` | `priority` | |-------------------|-------------------|------------| | `/` | `weekly` | 1.0 | | `/about` | `monthly` | 0.8 | | `/product` | `weekly` | 0.9 | | `/tmcs` | `weekly` | 0.9 | | `/corporate` | `weekly` | 0.9 | | `/resources` | `weekly` | 0.7 | | `/contact` | `monthly` | 0.8 | | `/policy/privacy` | `yearly` | 0.3 | | `/policy/cookies` | `yearly` | 0.3 | | `/policy/terms` | `yearly` | 0.3 | ### robots.txt The `app/robots.ts` file generates the `robots.txt` file. The configuration is straightforward: it allows all user agents (`*`) to crawl the entire site (`/`) and provides a link to the `sitemap.xml`. ```typescript // app/robots.ts import { MetadataRoute } from "next"; import { siteConfig } from "@/lib/seo"; export default function robots(): MetadataRoute.Robots { return { rules: [ { userAgent: "*", allow: "/" }, ], sitemap: `${siteConfig.url}/sitemap.xml`, }; } ``` *Sources: [app/robots.ts]()* ## Summary The SEO strategy for the Grapevine website is robust and well-structured. By centralizing configuration in `lib/seo.ts`, using Next.js's metadata API for default and page-specific tags, and extensively implementing structured data via JSON-LD, the site is well-optimized for search engines. The automated generation of `sitemap.xml` and `robots.txt` further ensures that crawlers can efficiently discover and index the site's content.