Bài này sẽ hướng dẫn bạn thêm favicon, meta SEO cơ bản, và ảnh chia sẻ (Open Graph) vào blog HTML/CSS thuần.
1. Favicon – biểu tượng nhỏ bên tab trình duyệt
Tạo 1 ảnh vuông, tối thiểu 64x64px, định dạng PNG hoặc ICO.
Đặt vào thư mục /img hoặc gốc, ví dụ: favicon.png
<link rel="icon" href="img/favicon.png" type="image/png">Lưu ý: favicon sẽ tự cache, nên đôi khi sửa xong cần Ctrl + F5 hoặc đổi tên file để thấy hiệu lực.
2. Thêm meta SEO cơ bản
Chèn các thẻ meta này vào trong phần <head> của mỗi trang:
<meta name="description" content="Blog cá nhân chia sẻ về lập trình, HTML, CSS, tối ưu web và nhiều thứ khác.">
<meta name="robots" content="index, follow">
<meta name="author" content="Tên của bạn hoặc tên blog">
Gợi ý: mỗi bài nên có description riêng, viết ngắn gọn, chứa keyword chính.
3. Ảnh chia sẻ social (Open Graph & Twitter Card)
Để khi ai đó chia sẻ bài viết của bạn lên Facebook, Zalo, Twitter… thì có ảnh đại diện đẹp, tiêu đề rõ ràng.
<meta property="og:title" content="Tựa đề bài viết">
<meta property="og:description" content="Tóm tắt nội dung ngắn gọn">
<meta property="og:image" content="https://yourdomain.com/img/share.jpg">
<meta property="og:url" content="https://yourdomain.com/bai-viet.html">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tựa đề bài viết">
<meta name="twitter:description" content="Mô tả nội dung">
<meta name="twitter:image" content="https://yourdomain.com/img/share.jpg">
Lưu ý:
- Ảnh nên có kích thước 1200x630px
- Dùng ảnh JPG nhẹ, tối ưu, không cần quá to
- Dùng đường dẫn tuyệt đối (full URL)
4. Xác minh Facebook & Google (tuỳ chọn)
Thêm thẻ xác minh nếu bạn muốn quản lý site trong Facebook hoặc Google Search Console:
<meta name="google-site-verification" content="...">
<meta name="facebook-domain-verification" content="...">
5. Gợi ý tự động hóa
- Dùng include nếu dùng template engine như Eleventy / Hugo
- Hoặc tạo
template.htmlrồi copy chỉnh sửa từng bài - Viết script nhỏ tự build meta từ JSON (nâng cao)
Chúc bạn tối ưu blog gọn gàng, chuẩn SEO, hiển thị đẹp trên mạng xã hội – chỉ với HTML/CSS thuần túy. Blog tĩnh không có nghĩa là “thiếu chuyên nghiệp”, mà chỉ là bạn kiểm soát mọi thứ theo cách của riêng mình.
Bình luận