Bài 17: Tối ưu Web tĩnh & SEO cơ bản (chuẩn Blogspot)
🎯 Mục tiêu
- Hiểu SEO là gì và vì sao web tĩnh vẫn cần SEO
- Biết các thẻ SEO quan trọng trong HTML
- Biết tối ưu tốc độ tải trang (CSS/JS/ảnh)
- Áp dụng chuẩn SEO phù hợp với Blogspot
- Biết kiểm tra nhanh SEO & performance
📘 SEO cơ bản cho Web tĩnh
SEO (Search Engine Optimization) là tối ưu để Google hiểu và xếp hạng trang của bạn tốt hơn.
1) Các thẻ SEO quan trọng
<title>– Tiêu đề trang (rất quan trọng)<meta name="description"><h1>– chỉ nên có 1<h2> → <h3>– cấu trúc nội dungaltcho ảnh
<title>Khóa học Web tĩnh HTML CSS JavaScript</title>
<meta name="description" content="Học HTML CSS JavaScript cơ bản, chuẩn Blogspot">
2) Cấu trúc heading đúng
<h1>Bài 17: SEO cho Web tĩnh</h1>
<h2>SEO là gì</h2>
<h3>On-page SEO</h3>
⚡ Tối ưu tốc độ tải trang
1) CSS & JS
- Viết CSS gọn gàng, không trùng lặp
- JS đặt cuối trang (trước
</body>) - Tránh tạo quá nhiều DOM không cần thiết
2) Ảnh (rất hay bị lỗi)
- Dùng ảnh đúng kích thước
- Luôn có
alt - Không nhúng ảnh quá nặng (>300KB)
<img src="banner.jpg"
alt="Khóa học Web tĩnh HTML CSS JS"
width="800"
height="400"
loading="lazy">
3) Lazy loading
Thuộc tính loading="lazy" giúp ảnh/video chỉ tải khi người dùng cuộn tới.
💻 Code mẫu (Trang bài học chuẩn SEO + tối ưu)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bài 17 – SEO cho Web tĩnh | Khóa học HTML CSS JS</title>
<meta name="description"
content="Học cách tối ưu SEO và tốc độ cho web tĩnh HTML CSS JavaScript, chuẩn Blogspot">
<style>
body{
font-family: Arial;
margin:0;
background:#f7f8fa;
line-height:1.7;
color:#111;
}
.wrap{
max-width:900px;
margin:20px auto;
background:#fff;
border:1px solid #e5e5e5;
border-radius:16px;
padding:18px;
}
h1,h2,h3{ line-height:1.4; }
img{
max-width:100%;
border-radius:12px;
border:1px solid #e5e5e5;
}
.note{
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:12px;
padding:10px 12px;
margin:12px 0;
}
</style>
</head>
<body>
<article class="wrap">
<h1>Bài 17: Tối ưu SEO cho Web tĩnh</h1>
<p>
Đây là ví dụ một trang bài học được viết theo chuẩn SEO,
phù hợp để đăng trên Blogspot.
</p>
<h2>1. SEO On-page</h2>
<p>
On-page SEO là tối ưu ngay trong nội dung HTML.
</p>
<h3>Thẻ tiêu đề và mô tả</h3>
<p>
Google đọc thẻ <code>title</code> và <code>description</code> đầu tiên.
</p>
<h2>2. Tối ưu hình ảnh</h2>
<img src="https://via.placeholder.com/800x400"
alt="Ví dụ tối ưu ảnh SEO"
loading="lazy">
<div class="note">
Ảnh có alt + lazy loading giúp SEO và tốc độ tốt hơn.
</div>
<h2>3. Trải nghiệm người dùng</h2>
<p>
Trang tải nhanh, chữ dễ đọc, mobile-friendly → Google đánh giá cao.
</p>
</article>
<script>
// JS tối thiểu – không ảnh hưởng SEO
console.log("SEO page loaded");
</script>
</body>
</html>
👉 Đây là mẫu trang bài học chuẩn SEO bạn có thể dùng cho các bài sau.
🔍 Công cụ kiểm tra (miễn phí)
- Google PageSpeed Insights
- Lighthouse (Chrome DevTools)
- Search Google:
site:tenblog.blogspot.com
✍️ Bài tập
- Thêm
meta descriptioncho Bài 1 → Bài 5. - Kiểm tra 1 trang bằng PageSpeed Insights.
- Đổi lại tiêu đề (
<title>) cho hấp dẫn hơn. - (Nâng cao) Tạo sitemap.xml cho Blogspot.
🎉 Hoàn thành
Sau Bài 17, bạn đã có:
- Kiến thức HTML/CSS/JS cơ bản → nâng cao
- Nhiều mini project thực tế
- Website web tĩnh hoàn chỉnh, nhúng Blogspot
- Nền tảng để tiếp tục học Front-end nâng cao
📌 Danh sách bình luận