The Vibe Playground.

The Trap: Leaving hardcoded mock URLs like `https://example.com` in site layouts, canonical links, configuration objects, or sitemaps.

The Fix: Derive the production URL dynamically from environment variables or a single configuration file.

// src/consts.ts
export const SITE_URL = import.meta.env.PROD 
  ? 'https://vibecodeguru.com' 
  : 'http://localhost:4321';

The Trap: AI models default to wrapping layouts in generic, nested `

The Trap: Canonical tags identify the master copy of a page. Writing relative paths (e.g., ``) is invalid for search index engines.

The Fix: Canonical URLs must be fully qualified absolute domains.

<!-- Incorrect -->
<link rel="canonical" href="/blog" />

<!-- Correct -->
<link rel="canonical" href="https://vibecodeguru.com/blog" />

The Trap: Omitting `alt`, `width`, or `height` attributes on images, leading to cumulative layout shifts (CLS) and accessibility flags.

The Fix: Always declare width/height explicitly, and provide a descriptive alt tag. In Astro, use the native <Image /> component.

import { Image } from 'astro:assets';
import mascot from '../assets/mascot.png';

<Image 
  src={mascot} 
  alt="Claymation description of the guru mascot" 
  width={400} 
  height={400} 
/>

The Trap: Adding `client:load` or `client:only` directives in Astro for purely static content (e.g. headers, text arrays). This ships unnecessary Javascript to clients.

The Fix: Render components server-side (static) by default, and hydrate only interactive components (like calculators or checklists).

<!-- Static by default -->
<SidebarMenu />

<!-- Hydrated only if interactive -->
<SearchInput client:visible />

The Trap: Supplying invalid JSON-LD schema blocks (trailing commas, missing fields) or ignoring standard metadata fields like `author` and `datePublished`.

The Fix: Carefully format JSON-LD and include all required structured schema attributes for rich search previews.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "Title of Post",
    "datePublished": "2026-06-17T00:00:00Z",
    "author": {
      "@type": "Person",
      "name": "Guru"
    }
  }
</script>