# SEO Rules & Guidelines

These rules must be followed for all future development to ensure high SEO scores and avoid regression.

## 1. Content & Structure

### Heading Hierarchy (H1-H6)
*   **One H1 Per Page:** Every accessible page MUST have exactly one `<h1>` tag.
*   **Server-Side Rendering:** The `<h1>` tag MUST be present in the initial HTML payload (Server Component). if the visual design uses a Client Component for the Hero, place a visually hidden `<h1>` (e.g., `<h1 className="sr-only">Title</h1>`) in the Server Component.
*   **Logical Order:** Do not skip heading levels (e.g., H1 -> H3).

### Content Visibility
*   **SSR First:** Search engines prefer content rendered on the server. Avoid relying solely on `useEffect` or client-side data fetching for critical content (Titles, Descriptions, H1s, introductory text).
*   **Minimum Word Count:** Aim for at least 300-500 words of indexable content on key landing pages. If the visual design is minimal, include semantic content in `sr-only` or visible sections.

### Metadata
*   **Titles:**
    *   Unique for every page.
    *   Length: 30-60 characters.
    *   Format: `Primary Keyword - Secondary Info | Brand Name`.
*   **Meta Descriptions:**
    *   Unique for every page.
    *   Length: 110-160 characters.
    *   Must contain the primary keyword.
    *   Must contain a call-to-action (e.g., "Create now", "Learn more").
*   **Canonical Tags:** Ensure every page has a self-referencing canonical tag to prevent duplicate content issues.

## 2. Technical Implementation

### Redirects
*   **Permanent vs. Temporary:** Use `301` (Permanent) redirects for content that has moved forever (e.g., legacy blog posts). Use `307` only for temporary situations (e.g., maintenance, auth redirects).
*   **Avoid Chains:** Redirect directly to the final destination (A -> B, not A -> B -> C).

### Links
*   **Descriptive Anchor Text:** Never use "click here" or raw URLs. Use descriptive text (e.g., "Read our Privacy Policy").
*   **Broken Links:** Regularly check for 404s.

### Indexing
*   **Public vs. Private:**
    *   Public pages (Marketing, Blog, Pricing) MUST allow indexing (`index: true`).
    *   Private pages (Dashboard, Settings) MUST be `noindex`.
*   **Robots.txt:** Ensure critical JS/CSS assets are not blocked.

## 3. Performance & Media

### Images
*   **Format:** Use Next.js `<Image>` component which automatically serves WebP/AVIF.
*   **Size:**
    *   Hero images: < 200KB.
    *   Blog images: < 100KB (unless full width).
    *   Absolute Max: 500KB.
*   **Alt Text:** Every image MUST have descriptive `alt` text. Decorative images should have `alt=""` or `aria-hidden="true"`.

### Core Web Vitals
*   **LCP (Largest Contentful Paint):** Ensure the main image/text loads in < 2.5s.
*   **CLS (Cumulative Layout Shift):** Always specify `width` and `height` for images/videos to prevent layout jumps.

## 4. Internationalization (i18n)

*   **Hreflang:** Ensure every translated page has correct `hreflang` tags pointing to its counterparts.
*   **Language Attribute:** The `<html>` tag must match the page language (e.g., `lang="de"` for German pages).
