SEO hands-on tutorial: from zero to your first runnable project
Step-by-step walkthrough of SEO with copy-paste commands, directory layout, and a first runnable artifact.
Quick answer
How do I keep canonical and sitemap hostnames consistent?
Both must read site.origin (the Astro site config). Hardcoded hostnames break the moment you change domain or run a Preview, and the page gets flagged as duplicate content.
Machine-readable page data: /data/seo-tutorial.json
In-depth analysis
SEO is fundamentally about making canonical signals (canonical link, sitemap, structured data) clear and traceable so search engines never classify your pages as duplicates. Going from zero to a first runnable project is about locking in the smallest end-to-end loop before you scale.
# public/robots.txt
User-agent: *
Allow: /
Disallow: /links/
Disallow: /api/
Sitemap: https://aicode8.com/sitemap-index.xmlSEO Hands-on Tutorial · Key takeaways
- Project initialized with the official scaffold
- Dependencies pinned to a single pnpm lockfile
- Local dev server starts and first paint is reachable
- First runnable commit pushed
FAQ & pitfalls
How do I fix mass-generated long-tail pages being flagged as duplicates?
Every page needs a unique canonical, an independent title, and differentiated body content. Pages that only swap keywords with identical structure need real differences added or search engines will fold them.
Explore the hub
See all 5 guides in Hands-onSame category as this article, sorted across the codebase.
Astro best practices: engineering conventions for production
Field-tested Astro practices from production, avoiding the common anti-patterns.
Astro deployment guide: zero-ops edge publishing with Cloudflare Pages
Git-driven Astro deployment in practice: commit to build, atomic publish to every edge node.
Astro performance tuning: push first paint and edge response to the limit
Around Astro's real bottlenecks, an actionable LCP / INP / CLS checklist.
Astro hands-on tutorial: from zero to your first runnable project
Step-by-step walkthrough of Astro with copy-paste commands, directory layout, and a first runnable artifact.
Share & save
What readers are asking
Questions that keep coming back in reader feedback, already answered.
- 01
How do the canonical and sitemap domains stay in sync?
Both must read site.origin (the Astro site setting). A hardcoded domain breaks everywhere the moment you change domains or use a Preview URL, and the pages get treated as duplicates.
See the full guide → - 02
How do I stop generated pages being flagged as duplicate content?
Every page needs a unique canonical, its own title, and genuinely differentiated body copy. Pages that only swap a keyword while keeping an identical structure must gain real differences, or search engines fold them together.
See the full guide → - 03
Why is my Astro component's interactivity not working?
Components ship as zero-JS HTML by default, so an interactive one needs a client:* directive (client:load, client:visible, …). Without it the script is never bundled into the page.
See the full guide →