> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuvrajverma.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SEO Configuration

> Configure all SEO settings, meta tags, Open Graph, and page-specific optimization

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration File:** `config/seo.ts`</Callout>

## Overview

The SEO configuration controls all search engine optimization across your website:

* Global SEO settings (site URL, name, default images)
* Page-specific meta tags and descriptions
* Game-specific SEO for individual game pages
* Open Graph for social media sharing
* Twitter Cards configuration
* Robots and indexing settings
* Verification codes for search consoles

Configuration file: `config/seo.ts`

## Quick Start

<Steps>
  <Step title="Set global settings">
    Open `config/seo.ts` and update:

    ```typescript theme={null}
    export const seoConfig = {
      siteUrl: "https://yourdomain.com",
      siteName: "YourBrand",
      homeTitle: "YourBrand - Game Server Hosting",
      twitterHandle: "yourbrand",
      defaultOgImage: "/og-default.jpg",
    };
    ```
  </Step>

  <Step title="Configure page SEO">
    Update titles and descriptions for each page
  </Step>

  <Step title="Test with meta tag preview">
    Visit [https://metatags.io](https://metatags.io) to preview how pages look on social media
  </Step>
</Steps>

***

## Global SEO Settings

```typescript theme={null}
export const seoConfig = {
  siteUrl: "https://latch.gg",          // No trailing slash
  siteName: "Latch",
  homeTitle: "Latch - Premium Game Server Hosting",
  titleSeparator: " | ",                // "Page Title | Site Name"
  locale: "en_US",
  twitterHandle: "latchgg",             // Without @
  defaultOgImage: "/og-default.jpg",    // 1200x630px recommended
  
  robots: {
    index: true,                         // Allow indexing
    follow: true,                        // Follow links
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large" as const,
      "max-snippet": -1,
    },
  },
  
  verification: {
    google: "",                          // Google Search Console code
    bing: "",                            // Bing Webmaster code
    yandex: "",                          // Yandex Webmaster code
  },
};
```

### Key Fields

* **siteUrl**: Your website's base URL (used for canonical URLs)
* **defaultOgImage**: Fallback image for social sharing (1200x630px)
* **titleSeparator**: How to separate page title from site name
* **robots**: Control search engine crawling behavior
* **verification**: Add verification codes from search console tools

***

## Page-Specific SEO

Define SEO for each page:

```typescript theme={null}
export const pageSeo: Record<string, { 
  title: string; 
  description: string; 
  keywords: string;
  ogImage?: string;
  path?: string;
}> = {
  home: {
    title: "Game Server Hosting",
    description: "Lightning-fast game server hosting with instant deployment, DDoS protection, and 24/7 support. Start your Minecraft, FiveM, or Rust server in minutes.",
    keywords: "game server hosting, minecraft hosting, fivem hosting",
    ogImage: "/og-home.jpg",
    path: "/",
  },
  
  about: {
    title: "About Us",
    description: "Learn about our mission, values, and the passionate team behind the future of game server hosting.",
    keywords: "about us, our story, game hosting company",
    path: "/about",
  },
  
  // Add more pages...
};
```

### SEO Best Practices

**Title** (50-60 characters ideal):

* Include main keyword near the start
* Make it compelling and clickable
* Don't stuff with keywords

**Description** (150-160 characters ideal):

* Write for humans, not robots
* Include a call-to-action
* Mention key benefits or features

**Keywords**:

* Comma-separated phrases
* Less important for modern SEO
* Focus on natural content instead

***

## Game-Specific SEO

Customize SEO for individual game pages:

```typescript theme={null}
export const gameSeo: Record<string, { 
  title?: string; 
  description?: string; 
  keywords?: string;
  ogImage?: string;
}> = {
  minecraft: {
    title: "Minecraft Server Hosting",
    description: "Premium Minecraft hosting with mod support, instant setup, and DDoS protection. Create your Minecraft server in seconds.",
    keywords: "minecraft server hosting, minecraft hosting, java minecraft",
    ogImage: "/og-minecraft.jpg",
  },
  
  fivem: {
    title: "FiveM Server Hosting",
    description: "High-performance FiveM hosting with OneSync support, custom resources, and instant deployment.",
    keywords: "fivem server hosting, fivem hosting, gta v server",
    ogImage: "/og-fivem.jpg",
  },
};
```

If a game isn't listed, it uses the game config's name and description automatically.

***

## Open Graph Images

Social media preview images should be:

* **Size**: 1200x630 pixels
* **Format**: JPG or PNG
* **Location**: `/public/` folder
* **Content**: Logo, tagline, and relevant imagery
* **Text**: Large and readable (minimum 20% of image)

Place images in `/public/`:

```
/public/og-default.jpg       (default for all pages)
/public/og-home.jpg          (homepage specific)
/public/og-minecraft.jpg     (Minecraft page)
/public/og-fivem.jpg         (FiveM page)
```

***

## Helper Functions

The config includes helper functions (you don't need to edit these):

```typescript theme={null}
// Generate canonical URL
getCanonicalUrl(path: string)

// Generate Next.js metadata for pages
generatePageMeta(page: keyof typeof pageSeo)

// Generate Next.js metadata for game pages
generateGameMeta(gameSlug: string, gameName: string, gameDescription: string)
```

These are used automatically by Next.js pages.

***

## Complete Example

```typescript theme={null}
export const seoConfig = {
  siteUrl: "https://yourgaming.com",
  siteName: "YourGaming",
  homeTitle: "YourGaming - Game Server Hosting",
  titleSeparator: " | ",
  locale: "en_US",
  twitterHandle: "yourgaming",
  defaultOgImage: "/og-default.jpg",
  
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large" as const,
      "max-snippet": -1,
    },
  },
  
  verification: {
    google: "your-google-code",
    bing: "",
    yandex: "",
  },
};

export const pageSeo = {
  home: {
    title: "Game Server Hosting",
    description: "Professional game hosting with 24/7 support",
    keywords: "game hosting, minecraft, fivem, rust",
    ogImage: "/og-home.jpg",
    path: "/",
  },
};
```

***

## Best Practices

### General SEO

1. **Unique titles/descriptions** - Every page should be different
2. **Include keywords naturally** - Don't force them
3. **Write for humans first** - Make it compelling
4. **Keep it concise** - Respect character limits
5. **Update regularly** - Refresh content as offerings change

### Open Graph

1. **Create custom images** - Generic images get ignored
2. **Test before deploying** - Use metatags.io preview
3. **Include branding** - Logo should be visible
4. **Optimize file size** - Compress images (\<500KB)

### Technical

1. **Use HTTPS siteUrl** - Required for canonical URLs
2. **Set correct locale** - en\_US, en\_GB, etc.
3. **Add verification codes** - Once verified in search consoles
4. **Monitor robots.txt** - Ensure it doesn't block important pages

***

## Troubleshooting

### Social media not showing custom image

1. Clear social media cache:
   * Facebook: [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)
   * Twitter: [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)
2. Verify image is exactly 1200x630px
3. Check image URL starts with `https://`
4. Ensure image is in `/public/` folder

### Page not indexed by Google

1. Check `robots.index` is true
2. Submit sitemap to Google Search Console
3. Verify robots.txt doesn't block page
4. Check for noindex meta tag on page

### Wrong title showing

Title format: `pageTitle | siteName`

If seeing wrong title, check:

1. `pageSeo` has correct title for the page
2. `titleSeparator` is set correctly
3. Browser cache (hard refresh: Ctrl+Shift+R)

### Description too long

Keep descriptions under 160 characters. Check length:

```javascript theme={null}
"Your description here".length
```

***