SEO Strategy

Relevant source files

The following files were used as context for generating this wiki page:

• app/sitemap.ts
• app/robots.ts
• lib/seo.ts
• components/json-ld.tsx
• app/layout.tsx
• app/about/page.tsx
• app/product/page.tsx
• app/page.tsx

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.

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.

// 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 <JsonLd> component and a suite of schema generation functions.

<JsonLd> Component

The <JsonLd> component, located at components/json-ld.tsx, is a simple client component that takes a data object and renders it inside a <script> tag with the type application/ld+json. This script is injected into the <head> of the document.

Sources: components/json-ld.tsx

Schema Generation and Implementation

The lib/seo.ts file contains functions to generate various schema.org objects. These functions are called within page components, and the resulting schema object is passed to the <JsonLd> component.

The following diagram shows the sequence of generating and rendering JSON-LD for the "About" page.

Supported Schema Types

The lib/seo.ts file defines interfaces and generator functions for several schema types.

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.

// 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.