Why this became its own focus area

This site itself is the clearest example β€” building it surfaced real problems most tutorials skip. A canonical tag left pointing at an old GitHub Pages URL quietly told Google to ignore the real domain. A sitemap referencing pages that didn't exist yet actively hurt indexing rather than helping it.

Clean code and SEO end up being the same discipline in practice: both reward being precise about what actually exists versus what you assume exists.

Specificity, the part that bites quietly

A plain class loses to a pseudo-class selector like :nth-child() every time β€” even inside a later media query. This exact bug showed up while building this site's own timeline layout. Toggle between the two tabs to see it.

Mobile override that silently does nothing
.timeline-item:nth-child(2n+1) { text-align: right; } @media (max-width: 768px) { .timeline-item { text-align: left; /* never wins */ } }

A plain class (0,1,0 specificity) can never beat a pseudo-class selector (0,2,0), regardless of source order or which one is inside a media query.

Matching specificity instead
@media (max-width: 768px) { .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { text-align: left; } }

Same specificity, later in the cascade β€” this wins cleanly, no !important needed.

Common mistakes, made and fixed

πŸ”—

Stale canonical tags

Canonical and Open Graph URLs copied from an earlier GitHub Pages deployment, never updated after moving to a custom domain.

πŸ—ΊοΈ

Sitemap ahead of content

Submitting a sitemap listing pages that were still in progress, rather than only what was actually deployed.

πŸ–ΌοΈ

Relative social preview images

og:image with a relative path silently fails on most platforms β€” link previews need the full https:// URL.

Clean code habits I actually enforce

Reusable component classes. Cards, buttons, and grids share a small set of base classes across the whole site, so a palette or spacing change propagates from one place instead of forty.

Performance as a default. Lazy-loading below-the-fold images, avoiding layout-shifting fonts, and keeping scroll-driven effects throttled with requestAnimationFrame instead of firing on every scroll event.

Need a site that's actually indexable?

Get In Touch