How I Built a Fast Local Business Website with HTML5 & JSON-LD Schema (Case Study)

Hi developers! 👋

I run a local service business in Bangladesh called [City Mistri], specializing in Aluminum and Glass solutions. Instead of using heavy CMS like WordPress, I decided to build my website using Pure HTML5 & CSS3.

Here is how I optimized it for Local SEO in 2026 using Schema Markup.

🚀 The Goal

I wanted a site that loads instantly on mobile networks (3G/4G) and ranks high for keywords like "Folding Door Price".

🛠️ The Tech Stack

• Frontend: HTML5, CSS3 (Grid & Flexbox)
• SEO: JSON-LD Schema (Product & LocalBusiness)
• Hosting: GitHub Pages / Custom Domain

💡 The "Secret" Weapon: JSON-LD Schema

Google needs to understand that I am selling a Service, not just a blog post. I switched from Product schema to Service schema for better accuracy.

Here is the snippet I used for my Aluminum Folding Door Page:

json
<script type="application/ld+json">
{
  "@context": "[https://schema.org](https://schema.org)",
  "@type": "Service",
  "name": "Aluminum Folding Door Installation",
  "provider": {
    "@type": "LocalBusiness",
    "name": "City Mistri"
  },
  "areaServed": "Dhaka",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Folding Door Price List 2026",
    "itemListElement": [
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Max Aluminum Folding Door"
        },
        "price": "1700",
        "priceCurrency": "BDT"
      }
    ]
  }
}
📱 Mobile Responsiveness
Since most of my customers are on mobile, I used a Card-based layout for my price tables instead of standard HTML tables.

CSS
@media(max-width: 768px) {
  .price-table tr {
      display: block;
      width: 90%;
      margin: 0 auto 20px auto;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }
}
🏁 The Result
The site scores 100/100 on PageSpeed Insights and is already getting indexed for long-tail keywords.

Check out the live project here: City Mistri - Folding Door Price

Let me know if you have any tips on how to improve the footer design!

Happy Coding! 💻

Comments

[Martijn Assie]

Nice case study. I like the decision to skip a heavy CMS and focus on speed and clarity instead. Using Service schema instead of Product makes a lot of sense for a local business, and the mobile-first thinking shows. Hitting 100 on PageSpeed with plain HTML and CSS is no joke. Solid, practical work.