62 lines
3.1 KiB
Markdown
62 lines
3.1 KiB
Markdown
# 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).
|