Day 18: SEO Basics For Business Sites

Today I implemented a comprehensive SEO system for the Shika Digital site. The goal was to create a reusable, testable solution that handles all the essential SEO requirements for a business website.

What Was Built

1. SEO Utility Functions (src/utils/seo.ts)

Created a centralized SEO utility module that generates:

  • Basic meta tags: title, description, canonical URL, robots directives
  • Open Graph tags: Complete OG implementation for social sharing
  • Twitter Card tags: Optimized for Twitter sharing
  • Structured data (JSON-LD): Multiple schema types including:
    • Organization schema
    • WebSite schema with search action
    • WebPage schema
    • Service schema (for the homepage)
    • Person schema (for the about page)

Key features:

  • Automatic site name appending to titles
  • Canonical URL generation from paths
  • OG image URL handling (supports relative and absolute URLs)
  • Configurable robots directives (noindex/nofollow)
  • Article type support with published/modified times

2. SEOHead Component (src/components/SEOHead.astro)

A reusable Astro component that consumes the SEO utilities and outputs all meta tags, Open Graph tags, Twitter Cards, and structured data. The component accepts:

  • config: SEO configuration object
  • includeOrganization: Toggle for Organization schema (default: true)
  • includeWebSite: Toggle for WebSite schema (default: true)
  • additionalSchemas: Array of custom JSON-LD schemas

3. Layout Integration

Integrated SEOHead into BaseLayout.astro so all pages automatically get proper SEO. Pages can customize SEO by passing props to the layout:

<BaseLayout
  title="Page Title"
  description="Page description"
  canonical="/custom-path"
  image="/images/custom-og.jpg"
  type="article"
  additionalSchemas={[customSchema]}
>

4. Page-Specific Implementations

  • Homepage: Uses Service schema to describe the business
  • About page: Uses Person schema for founder information
  • All pages automatically get Organization and WebSite schemas

5. Comprehensive Testing

Created three test suites:

  • Unit tests (seo.test.ts): Test individual utility functions
  • Component tests (SEOHead.test.ts): Validate meta tag generation
  • Property-based tests (seo.property.test.ts): Ensure consistency across edge cases

The property-based tests verify:

  • Canonical URL generation consistency
  • OG image URL handling
  • Required meta tag presence
  • Title formatting rules
  • Robots meta tag behavior
  • Image dimension validity

Key Implementation Details

Canonical URLs

The system automatically generates canonical URLs from page paths, removing trailing slashes and ensuring consistent formatting.

Open Graph Images

Default OG image is set, but pages can override with custom images. The utility handles both relative paths (prepends site URL) and absolute URLs.

Structured Data

Multiple schema types are generated to help search engines understand:

  • The business (Organization)
  • The website structure (WebSite with search action)
  • Individual pages (WebPage)
  • Services offered (Service)
  • Key people (Person)

Robots Meta

Explicit robots directives are always included (index/noindex, follow/nofollow), giving full control over search engine crawling.

Benefits

  1. Reusable: One component handles all SEO needs across the site
  2. Testable: Comprehensive test coverage ensures reliability
  3. Flexible: Easy to customize per page while maintaining defaults
  4. Complete: Covers all major SEO requirements (meta tags, OG, Twitter, structured data)
  5. Maintainable: Centralized utilities make updates easy

This implementation provides a solid SEO foundation that can scale as the site grows, with proper structured data to help search engines understand the business and its content.

P.S. I got a very busy day today so the information added has not been fully checked. Will need to revisit them tomorrow.