HTML cho SEO & metadata

Suốt khoá, mèo con tập trung vào body - phần người ta THẤY. Bài này quay sang phần head: nơi khai báo metadata (thông tin về trang) cho máy đọc, nhưng không hiện ra thành nội dung. Đây chính là chỗ ta giúp Google và mạng xã hội hiểu trang.

Tin vui: SEO (Search Engine Optimization - tối ưu cho công cụ tìm kiếm) nghe ghê gớm nhưng phần lớn chỉ là HTML tử tế. Không có mánh bí mật nào; có cấu trúc tốt và vài thẻ khai báo đúng là đã đi được rất xa.

• ▸head chứa metadata cho MÁY (tìm kiếm, mạng xã hội), không hiện thành nội dung.
• ▸SEO phần lớn là HTML tử tế, không phải mánh khoé.
• ▸Bài này gom mọi thứ đã học lại dưới góc nhìn "giúp máy hiểu trang".

Hai thẻ quan trọng nhất cho tìm kiếm. <title> là tiêu đề trang: hiện trên tab trình duyệt, và làm dòng tiêu đề trên kết quả Google. meta description là đoạn mô tả ngắn hiện ngay dưới đó. Đây là "bộ mặt" của trang khi ai đó tìm thấy nó.

<title>Khoá HTML cho người mới - Mèo Ham Học</title>
<meta
  name="description"
  content="Học HTML từ đầu: thẻ, semantic, cấu trúc trang. Cấu trúc đúng trước, đẹp sau."
/>

• ▸title: tiêu đề trang, hiện trên tab và là dòng tiêu đề trên kết quả Google.
• ▸meta description: đoạn mô tả dưới tiêu đề trên kết quả tìm kiếm (~100-160 ký tự).
• ▸Viết đúng nội dung, đủ hấp dẫn để người ta muốn bấm - đừng nhồi từ khoá.

Có hai dòng meta gần như trang nào cũng nên có. charset (đã gặp ở bài 1) cho biết bảng mã ký tự - utf-8 để hiện đúng dấu tiếng Việt. viewport bảo trình duyệt điện thoại hiển thị trang theo đúng bề rộng màn hình, thay vì thu nhỏ cả trang desktop lại bé tí.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Khi mèo con dán link một trang lên Facebook hay Zalo, nó hiện ra một thẻ preview đẹp: ảnh lớn, tiêu đề, mô tả. Thẻ đó dựng từ một nhóm meta gọi là Open Graph (tiền tố og:).

<meta property="og:title" content="Khoá HTML cho người mới" />
<meta property="og:description" content="Học HTML từ đầu, dễ cho người mới." />
<meta property="og:image" content="https://meohamhoc.vn/og/html.png" />

Điều quan trọng nhất: mấy thẻ meta ở trên chỉ là phần dễ thấy. Nền móng thật của SEO chính là những gì mèo con đã học suốt khoá, trước hết là chọn đúng thẻ semantic và dựng cấu trúc trang chuẩn:

• ▸Thẻ semantic (bài 5): Google hiểu đâu là nội dung chính, đâu là phụ.
• ▸Heading outline (bài 2, 6): một h1 rõ ràng, dàn ý h2/h3 mạch lạc.
• ▸alt cho ảnh (bài 3): Google hiểu ảnh nói về gì.
• ▸Nội dung thật, đúng người đọc: thứ không thẻ meta nào thay được.

Còn một bậc cao hơn là structured data (dữ liệu có cấu trúc, thường viết dạng JSON-LD): khai báo rõ ràng "đây là một khoá học", "đây là công thức nấu ăn"… để Google hiển thị kết quả giàu thông tin hơn. Mèo con chỉ cần biết nó tồn tại ở giai đoạn này; đi sâu là chuyện về sau.