Website bán hàng mới cho Hoà Phát Smart.

Website hiện tại đã có nền tảng đúng (WordPress + WooCommerce + Rank Math), nhưng đang trình bày 78 sản phẩm như một danh mục hàng hoá thông thường. Trong khi đó, phần lớn giá trị của Hoà Phát nằm ở dịch vụ may đo, khảo sát và thi công tại chỗ — những thứ giao diện cũ chưa kể được.

5 việc phải làm cùng lúc với giao diện

1. Thêm H1 và cấu trúc heading cho trang chủ, danh mục, sản phẩm — hiện trang chủ không có H1.
2. Tái cấu trúc 15 trang quận thành landing page có nội dung riêng, thay vì 15 archive chứa 16–36 sản phẩm trùng nhau.
3. Tạo luồng báo giá cho 34/78 sản phẩm “Giá liên hệ”: form + ảnh + số đo + Zalo + SLA 2 giờ.
4. Thống nhất NAP (một hotline chính, một địa chỉ chuẩn) và bật LocalBusiness schema.
5. Đo lường ngay từ ngày đầu: GA4 events, Search Console, Google Business Profile, Meta Pixel có consent.

KPI 90 ngày đề xuất

Lưu ý: các mục tiêu tương đối chỉ có nghĩa sau khi có baseline. Tuần 0 dành 2 ngày để gắn tracking và đo hiện trạng trước khi launch.

Số liệu lấy trực tiếp từ website đang chạy ngày 18.10.2026. Mục đích là phân biệt “vấn đề giao diện” với “vấn đề dữ liệu/cấu trúc” — vì đổi giao diện mà giữ nguyên dữ liệu thì không giải quyết được gì.

Dữ liệu nền

10 vấn đề ưu tiên

Quick wins 2 tuần đầu

Một website bán hàng có 3 lớp mục tiêu: kinh doanh, marketing và kỹ thuật. Nếu chỉ đo “lượng truy cập” thì không biết giao diện mới có hiệu quả hay không.

Ba lớp mục tiêu

KPI theo giai đoạn

Sản phẩm của Hoà Phát không phải “một tấm bạt”. Khách mua một giải pháp che cho đúng vị trí, đúng khổ, được đo và lắp bởi người chịu trách nhiệm. Giao diện phải bán được niềm tin đó.

4 nhóm khách chính

Hành trình 5 bước

Cấu trúc mới tách rõ 3 loại nội dung: sản phẩm (mua/báo giá), công trình (bằng chứng) và khu vực (local SEO). Đây là thay đổi quan trọng nhất về SEO, còn giao diện chỉ là lớp trình bày.

Sitemap đề xuất

Trang chủ
├── Sản phẩm
│   ├── Bạt che nắng mưa
│   │   ├── Bạt xếp lớp
│   │   ├── Mái hiên di động
│   │   ├── Bạt cuốn
│   │   ├── Bạt che bể bơi
│   │   └── Bạt che quán cafe
│   ├── Cửa chống muỗi & rèm tổ ong
│   ├── Giàn phơi thông minh
│   ├── Lưới an toàn
│   └── Sản phẩm khác
├── Công trình (case study)
├── Dịch vụ thi công
│   ├── Quy trình & bảo hành
│   └── 15 trang khu vực (landing page)
├── Bảng giá
├── Cẩm nang (blog)
├── Về Hoà Phát (xưởng, đội ngũ, E-E-A-T)
├── Liên hệ
└── Chính sách (bảo hành, vận chuyển, thanh toán, đổi trả, bảo mật)

Quy ước URL

Tái cấu trúc 15 trang quận

Hiện tại mỗi quận là một product_cat chứa 16–36 sản phẩm gần như giống nhau. Cách làm này tạo ra 15 trang mỏng, trùng lặp và dễ bị xem là doorway page. Hướng mới:

• Chuyển thành landing page (Page hoặc CPT khu_vuc) với nội dung riêng 800–1.200 từ.
• Mỗi trang có: H1 riêng, đặc điểm khu vực, 3–5 công trình thật, dịch vụ phù hợp, khoảng giá, quy trình, FAQ 5 câu, bản đồ, NAP, review thật.
• Không gán toàn bộ 78 sản phẩm vào mọi quận. Dùng block “sản phẩm phù hợp” chọn tay 6–8 sản phẩm.
• Internal link: khu vực → 2–3 sản phẩm chính; sản phẩm → 1–2 khu vực tiêu biểu; không spam link chéo.
• Nếu đổi URL: 301 từ category cũ sang page mới; cập nhật sitemap; theo dõi 404 trong 30 ngày.
• Nếu muốn giữ 15 URL cũ: giữ slug, thay toàn bộ nội dung archive bằng landing page; canonical self.

Quy tắc internal link

• Mỗi trang sản phẩm có 3–5 link nội bộ: danh mục cha, 2 sản phẩm liên quan, 1 công trình, 1 bài cẩm nang.
• Mỗi bài cẩm nang link về 2–3 sản phẩm và 1 trang khu vực; anchor mô tả, không nhồi exact match.
• Footer chỉ giữ 4 nhóm chính + 5–7 khu vực tiêu biểu, không list toàn bộ 15 khu vực.
• Breadcrumb hiển thị và có BreadcrumbList schema trên mọi trang.

Cả 3 phương án dùng chung dữ liệu sản phẩm, ảnh công trình và hotline thật. Khác nhau ở thứ tự ưu tiên: thương hiệu, chuyển đổi hay tốc độ liên hệ. Xem trực tiếp tại mockups/index.html.

Một hệ thống tối giản nhưng đủ để đội dev dựng 12 template mà không phải hỏi lại từng màn hình. Token và component lấy theo PA2, có biến thể cho PA1/PA3.

Ngôn ngữ thương hiệu

Màu sắc

Typography

• Be Vietnam Pro cho toàn bộ nội dung và heading (hỗ trợ tiếng Việt đầy đủ, 5 weight).
• Lora chỉ dùng cho câu chuyện thương hiệu/quote nếu chọn hybrid PA1; không dùng cho UI.
• Scale: 12 / 14 / 16 / 18 / 24 / 32 / 44 / 56 px; line-height 1.5 body, 1.05–1.12 heading.
• Heading mobile dùng clamp(), không nhỏ hơn 28px cho H2 và 32px cho H1.
• Không dùng quá 2 font family; không dùng font-weight 300 cho nội dung dài trên mobile.

Spacing, grid, breakpoint

Component inventory

Header (sticky, mega menu, search), hero (3 biến thể), category card, product card, price row, quote form, calculator, comparison table, timeline, FAQ accordion, review card, project gallery, sticky mobile bar, modal, toast, breadcrumb, pagination, filter chips, variation swatches, gallery lightbox, trust badges, Zalo float, back-to-top.

State & accessibility

• Mọi component có: default, hover, focus-visible, active, disabled, loading, error, empty.
• WCAG 2.2 AA: contrast ≥ 4.5:1 cho chữ thường; touch target ≥ 44×44px; không dùng màu làm tín hiệu duy nhất.
• Form: label luôn hiển thị, lỗi cụ thể cạnh field, không chỉ toast; hỗ trợ bàn phím và screen reader.
• Tôn trọng prefers-reduced-motion; không parallax trên mobile; animation 180–280ms.
• Skip link, focus ring rõ, alt text mô tả công trình (không nhồi từ khoá).

Design tokens (rút gọn)

:root {
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --color-ink: #0A1B2B;
  --color-brand: #0B2A4A;
  --color-accent: #F26522;
  --color-bg: #F4F7FA;
  --color-surface: #FFFFFF;
  --color-muted: #5C6C7C;
  --color-line: #DCE5EE;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-1: 0 10px 30px -24px rgba(10,27,43,.35);
  --shadow-2: 0 30px 70px -40px rgba(10,27,43,.45);
  --container: 1280px;
  --gutter: 24px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;
}

12 template đủ cho một kênh bán hàng hoàn chỉnh. Cột “mục tiêu” là điều kiện để duyệt design: nếu một section không phục vụ mục tiêu, cắt bỏ.

Trang sản phẩm — anatomy

1. Breadcrumb + H1 (tên sản phẩm, không thêm từ khoá nhồi).
2. Gallery 4–6 ảnh (ảnh công trình thật + ảnh chi tiết phụ kiện), có lightbox và alt mô tả.
3. Khối giá/CTA: giá niêm yết hoặc “Giá liên hệ”; đơn vị (cái/m²/bộ); nút “Thêm vào giỏ” hoặc “Nhận báo giá”; Zalo; hotline; cam kết khảo sát 0đ.
4. Biến thể (nếu có): kích thước, màu, vật liệu; giá cập nhật theo biến thể; cảnh báo “chưa chọn đủ”.
5. Thông số dạng bảng: kết cấu, vật liệu, bảo hành, khu vực, thời gian thi công (nếu chắc chắn).
6. Mô tả có cấu trúc: vấn đề → giải pháp → vật liệu → phù hợp với ai → lưu ý.
7. Công trình thực tế dùng sản phẩm này (2–3 ảnh).
8. Review thật + ảnh; chưa có thì hiển thị CTA “Đánh giá sau khi lắp”.
9. FAQ 4–6 câu; schema FAQPage.
10. Sản phẩm liên quan 4 item; sticky bar mobile với giá + gọi + Zalo.

Trang khu vực — template nội dung

Checkout — 3 bước

Bước 1: thông tin nhận hàng + chọn “cần lắp đặt” (tự tính phí theo khu vực). Bước 2: phương thức thanh toán (COD, chuyển khoản, VNPay, MoMo) + yêu cầu hoá đơn VAT. Bước 3: xác nhận + hẹn khảo sát/lắp đặt. Với hàng may đo, checkout chuyển thành “đặt cọc & hẹn khảo sát”, không thu full.

Không cần biến website thành một sàn thương mại điện tử phức tạp. Cần đủ để bán hàng có sẵn, nhận yêu cầu may đo và giữ khách quay lại.

4 mô hình sản phẩm

Luồng báo giá (quote flow)

1. Khách gửi form/Zalo: tên, SĐT, khu vực, hạng mục, kích thước ước lượng, ảnh (tối đa 5).
2. Hệ thống gửi email/Zalo cho người phụ trách + auto-reply cho khách (“đã nhận, gọi lại trong 2 giờ”).
3. Kỹ thuật gọi lại, xác nhận nhu cầu, hẹn khảo sát; ghi chú vào CRM.
4. Khảo sát → báo giá PDF/Zalo có khổ, vật tư, phụ kiện, thời gian, bảo hành.
5. Chốt → cọc (30–50% với may đo) → sản xuất → lắp → nghiệm thu → kích hoạt bảo hành → xin review.

Thanh toán & vận chuyển

Tính năng hỗ trợ chuyển đổi

Analytics events

Rank Math đã có sẵn trên site; vấn đề không phải cài thêm plugin mà là cấu hình đúng và tạo nội dung đủ sâu. Chiến lược 2026: technical sạch, entity rõ, nội dung trả lời câu hỏi, local nhất quán và schema đầy đủ.

Technical checklist

Title & meta formula

Dùng biến Rank Math: %title%, %category%, %sitename%, %sep%, %excerpt%. Không nhồi từ khoá; mỗi title chỉ một ý chính.

Schema cần bật

Local SEO

• NAP: chốt 1 hotline (đề xuất 0971 916 788) và 1 địa chỉ đầy đủ; cập nhật đồng bộ website, GBP, Facebook, Zalo, các directory.
• Google Business Profile: đúng ngành (HomeAndConstructionBusiness / Awning), dịch vụ, khu vực, giờ, ảnh công trình, bài đăng hàng tuần, Q&A, review.
• Review: xin review sau nghiệm thu bằng link ngắn; trả lời mọi review; không mua review.
• Landing page: 15 trang quận có nội dung riêng, map, công trình, FAQ; internal link về hub sản phẩm.
• Citation: danh bạ ngành, hội nhóm xây dựng, trang vàng; giữ NAP giống nhau.

AEO — tối ưu cho AI Overview & tìm kiếm hội thoại

• Mỗi trang trả lời câu hỏi chính trong 40–60 từ đầu tiên (answer-first), sau đó mới giải thích.
• Dùng bảng so sánh, định nghĩa, “giá bao nhiêu”, “loại nào tốt”, “có bền không”, “thi công bao lâu”.
• FAQ thật, heading dạng câu hỏi, cập nhật ngày, tác giả có chuyên môn.
• Tránh nội dung mỏng/trùng; mỗi trang có mục đích riêng và dữ liệu riêng.
• Cân nhắc llms.txt và trang “Về chúng tôi” đầy đủ để AI hiểu entity.

Kênh & hành động

Kế hoạch nội dung 90 ngày

Tổng ~44 nội dung trong 90 ngày. Nếu nguồn lực hạn chế, ưu tiên 15 trang khu vực + 10 case study + 8 bài chọn loại/giá.

Migration & 301

1. Crawl toàn bộ URL hiện tại (Screaming Frog) + export GSC 16 tháng.
2. Lập bảng mapping: URL cũ → URL mới, giữ slug khi có thể.
3. 301 từng URL, không redirect hàng loạt về trang chủ.
4. Cập nhật internal link, sitemap, canonical, OG image.
5. Gửi sitemap mới, theo dõi 404/soft 404 trong 30 ngày.
6. Giữ title/meta/H1 cũ nếu URL giữ nguyên, chỉ cải thiện dần.

Giao diện mới phải nhanh hơn, không chỉ đẹp hơn. Với đặc thù ảnh công trình nhiều, hiệu năng là phần khó nhất — cần ngân sách ngay từ đầu.

Chọn hướng triển khai theme

Plugin stack đề xuất

Ngân sách hiệu năng

Hạ tầng & vận hành

• PHP 8.3+, MySQL 8, Redis object cache, HTTP/3, CDN (Cloudflare/LiteSpeed).
• Staging riêng; deploy qua Git hoặc plugin migration có kiểm soát.
• Backup hằng ngày (giữ 30 ngày), backup trước mỗi lần update.
• 2FA cho admin, least privilege, WAF, giới hạn login, cập nhật plugin hàng tuần.
• Uptime monitoring + cảnh báo; log 404/500; kiểm tra Core Web Vitals hằng tháng.

Giả định nội dung và ảnh được cung cấp đúng hạn. Nếu ảnh/nội dung chậm, tuần 3–4 sẽ trượt; đây là rủi ro lớn nhất của dự án.

Ước lượng nguồn lực

Tổng ~70–95 person-days. Con số thay đổi theo số template và mức độ tùy biến; chưa gồm chi phí hosting, plugin trả phí, quảng cáo.

RACI rút gọn

Checklist dùng để “pass/fail” trước khi bấm launch. Mỗi mục có người chịu trách nhiệm và bằng chứng (ảnh, link, báo cáo).

Ngày launch

1. Backup full + export database; chụp ảnh site cũ.
2. Đóng băng nội dung 24h trước; chạy crawl cuối.
3. Chuyển DNS/duplicate lên production; bật SSL, cache, CDN.
4. Kiểm tra 20 URL quan trọng + form + thanh toán + 301.
5. Gửi sitemap GSC, yêu cầu index các URL chính.
6. Theo dõi 404, 500, tốc độ, đơn hàng, form trong 72h.
7. Thông báo nội bộ, cập nhật GBP, Zalo, Facebook.

30 ngày sau launch

• Tuần 1: sửa lỗi phát sinh, kiểm tra index, đọc GA4.
• Tuần 2: tối ưu trang có traffic cao nhưng CVR thấp; bổ sung FAQ.
• Tuần 3: thu thập review, cập nhật ảnh công trình, viết 4 bài mới.
• Tuần 4: báo cáo KPI, điều chỉnh kế hoạch quý tiếp theo.

Những rủi ro dưới đây đã từng làm chậm các dự án tương tự. Xác định trước để không phải xử lý giữa đường.

10 câu hỏi cần trả lời trước khi build

1. Khách mục tiêu ưu tiên: nhà ở, quán cafe hay trường học? Tỷ trọng doanh thu hiện tại?
2. Hotline/địa chỉ nào là chuẩn để thống nhất NAP?
3. Giữ 15 trang quận hay gộp thành 5–7 cụm?
4. Có thể công bố “giá từ” cho 34 sản phẩm “Giá liên hệ” không? Nếu không, dùng dự toán khoảng giá?
5. Ai phụ trách ảnh, nội dung, trả lời Zalo trong 2 giờ?
6. Có xuất hoá đơn VAT không? Quy trình hiện tại?
7. Bật thanh toán online nào (VNPay, MoMo, cả hai)?
8. Ngân sách và deadline mong muốn?
9. Được dùng ảnh/địa chỉ khách hàng không? Cần xin phép thế nào?
10. KPI ưu tiên 90 ngày: leads, đơn hàng hay nhận diện?

A1. Schema LocalBusiness mẫu

{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "@id": "https://batchenang24h.com/#business",
  "name": "Hoà Phát Smart Việt Nam – Bạt Che Nắng 24h",
  "url": "https://batchenang24h.com",
  "telephone": "+84971916788",
  "image": "https://batchenang24h.com/logo.jpg",
  "priceRange": "180.000₫ - 11.280.000₫",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "56 Đại Linh, P. Đại Mỗ",
    "addressLocality": "Nam Từ Liêm",
    "addressRegion": "Hà Nội",
    "addressCountry": "VN"
  },
  "areaServed": { "@type": "City", "name": "Hà Nội" },
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "07:30", "closes": "19:00"
  },
  "sameAs": ["https://zalo.me/0375687123"]
}

A2. Product schema có giá

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Bạt che nắng tự cuốn màu trắng HM0053",
  "image": ["https://.../hm0053.jpg"],
  "description": "Bạt tự cuốn màu trắng cho ban công, cửa sổ.",
  "sku": "HM0053",
  "brand": { "@type": "Brand", "name": "Hoà Phát Smart" },
  "offers": {
    "@type": "Offer",
    "url": "https://batchenang24h.com/san-pham/...",
    "priceCurrency": "VND",
    "price": "180000",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}

A3. Bảng mapping 301 (mẫu)

A4. GA4 events tối thiểu

A5. Checklist ảnh

• Tối thiểu 20 ảnh công trình: 5 nhà phố, 5 quán cafe, 5 bể bơi/sân vườn, 5 trường học/lưới an toàn.
• Mỗi công trình: 1 ảnh toàn cảnh, 1 ảnh chi tiết phụ kiện, 1 ảnh trước/sau nếu có.
• Kích thước tối thiểu 1600px cạnh dài; định dạng gốc + WebP/AVIF; không chèn chữ/logo lên ảnh.
• Alt mô tả: “Mái xếp xanh che sân quán cafe tại Cầu Giấy” — không nhồi từ khoá.
• Có giấy phép/cho phép của khách nếu ảnh có địa chỉ/nhận diện.

A6. Rank Math — cấu hình nhanh