Role: Web Developer & SEO Specialist

Tech Stack: Vanilla JS, HTML5, CSS3, Google Analytics 4 (gtag.js), Schema.org (JSON-LD), Netlify, Porkbun DNS

Live Site:https://meridiandentalmesquite.com

TIMELINE

July 2026 - Present

PLATFORM

Any

MY ROLE

Web Developer & SEO Specialist

Introduction

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Project Purpose & Role:

Meridian Dental is a performance-focused local web application designed to demonstrate an end-to-end local SEO, technical metadata, and conversion tracking framework for healthcare service providers. As the sole developer and SEO strategist on this project, I architected the lightweight front-end code, established an explicit Google Analytics 4 event pipeline, and validated structured Schema.org data to ensure maximum search visibility and measurable patient acquisition.

</aside>

Executive Summary & Problem Statement

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Local businesses often rely on heavy, bloated CMS templates (like stock WordPress builds) that suffer from poor page performance, inaccurate tracking, and weak local search visibility.

Meridian Dental, a mock dental practice located in Mesquite, TX, needed a modern digital foundation designed to:

1. Maximize local search indexing and rich snippet visibility on Google.
2. Track high-value user conversions (appointment requests and phone calls) without relying on fragile auto-event listeners.
3. Maintain lightning-fast mobile performance with $0.00 infrastructure overhead via static deployment. </aside>

Technical Architecture & Implementation

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Performance-First Frontend Development • Zero-Framework Architecture: Built using clean, semantic HTML5 and modular JavaScript (main.js) to eliminate render-blocking dependencies. • Sticky Navigation & UX: Engineered a custom smooth-scrolling system accounting for an 80px header offset, paired with an accessible mobile hamburger drawer.

</aside>

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Custom GA4 Measurement Pipeline (gtag.js) Instead of relying on GA4's default Enhanced Measurement—which frequently records unvalidated form clicks—I built explicit custom event listeners to ensure data integrity: • Primary Lead Conversions (generate_lead): Fires only after strict client-side validation on the appointment form, passing key metadata like estimated lead value ($250.00) and location tags. • Direct Call Tracking: Attached direct click events to tel: links to capture mobile phone interactions as primary conversion metrics. • Content Engagement (select_content): Captured FAQ accordion toggles using standard GA4 content dimensions to analyze top patient concerns (pricing, emergency care, insurance). • Granular Scroll Depth (scroll_depth): Implemented custom JavaScript scroll thresholds (25%, 50%, 75%, 90%) to measure content engagement without waiting for GA4's default 90% trigger.

</aside>

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Local SEO & Structured Data (JSON-LD) To secure rich search visibility and map pack alignment, I implemented a custom Schema.org @type: "Dentist" payload: • Geographic & Service Taxonomy: Encoded precise geo-coordinates (latitude: 32.7712, longitude: -96.6120), operating hours, and area service radiuses (Mesquite, Garland, Dallas). • Canonical Validation: Verified against both Google Rich Results Test and Schema.org Validator with 100% zero errors/warnings. • OpenGraph Social Infrastructure: Designed and deployed customized 1200 x 630 social preview graphics (og-preview.jpg) paired with strict absolute URLs for social platforms.

</aside>

Results & Performance Milestones

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

Key Takeaways

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

• Business-First Engineering: My focus isn't just on making a site look good; it's on capturing quantifiable revenue opportunities through proper conversion tracking.
• Scalable Measurement: Built a tracking pipeline that seamlessly bridges direct gtag.js execution and Google Tag Manager (dataLayer) architectures.
• SEO Precision: Understood the strict distinction between Google's indexing parser and Schema.org's standard dictionary to ensure complete search compliance. </aside>

Next Steps