# 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 `

` tag. * **Server-Side Rendering:** The `

` 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 `

` (e.g., `

Title

`) 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 `` 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 `` tag must match the page language (e.g., `lang="de"` for German pages).