tknuth
/
hotschpotsh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hotschpotsh/seo_rules.md

3.1 KiB
Raw Blame History

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