Meijo University Athletics Association Soccer Club Website
- TypeScript
- Next.js
- Tailwind CSS
- Cloudflare Workers
- microCMS
The official website for the Meijo University Athletics Association Soccer Club, a university soccer club based in the Tokai region. This project involved a full redesign and rebuild from scratch.
Background
The club had an existing site, but it offered little control over markup, performance, or content structure. Several issues were making it harder to maintain and harder for visitors to find.
Key problems with the old site:
- No semantic HTML — missing
<header>,<main>, and<nav>elements, making it difficult for crawlers and assistive technologies to parse the page structure - Unoptimized images — photos uploaded at full resolution with no compression or modern format support, leading to slow load times
- Missing metadata — no per-page
<title>, no Open Graph tags, no structured data; social shares and search results appeared bare or broken - No canonical URLs — content duplicated across category and archive pages without canonicalization, diluting search equity
- Poor mobile experience — the layout broke on smaller screens, with touch targets that were difficult to interact with
Tech stack
The new site is built with Next.js and TypeScript, deployed on Cloudflare Workers via the @cloudflare/next-on-pages adapter. Styles are written in Tailwind CSS.
Cloudflare Workers was chosen for its global edge network — pages are served from the datacenter closest to the visitor, minimizing time to first byte. The free tier is generous enough to run a club site with no infrastructure cost.
SEO
Every page now includes:
- A unique, descriptive
<title>and<meta name="description"> - Open Graph and Twitter Card metadata for rich social previews
- JSON-LD structured data (
SportsTeam,Eventfor match schedules) - Canonical URLs to prevent duplicate content issues
- Proper heading hierarchy (
h1→h2→h3) and semantic landmark elements
Images are served in WebP format with explicit width and height attributes, preventing layout shift and improving CLS scores.
Site structure
The site is organized around three main areas:
- Team — roster, coaching staff, and club history
- News — match results, schedules, and announcements
- Recruitment — information for prospective members
Content is managed through microCMS, a Japanese headless CMS with a clean, form-based editor. Because updates require no code or technical knowledge, any club member can publish match results, edit schedules, or update the roster directly from a browser — without involving a developer.