HTML Meta
Trong hướng dẫn này, bạn sẽ học cách sử dụng thẻ meta để cung cấp siêu dữ liệu về một trang web.
Xác định siêu dữ liệu
Các thẻ <meta> thường được sử dụng để cung cấp siêu dữ liệu có cấu trúc như từ khóa , mô tả , tên tác giả , mã hóa ký tự và các siêu dữ liệu khác của tài liệu. Bất kỳ số lượng thẻ meta nào cũng có thể được đặt bên trong phần đầu của tài liệu HTML hoặc XHTML.
Siêu dữ liệu sẽ không được hiển thị trên trang web, nhưng sẽ có thể phân tích cú pháp bằng máy và có thể được sử dụng bởi các trình duyệt, công cụ tìm kiếm như Google hoặc các dịch vụ web khác.
Phần sau đây mô tả việc sử dụng thẻ meta cho các mục đích khác nhau.
Khai báo mã hóa ký tự trong HTML
Thẻ meta thường được sử dụng để khai báo mã hóa ký tự bên trong tài liệu HTML.
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Để đặt mã hóa ký tự bên trong tài liệu CSS, quy tắc @charsetđược sử dụng.
Lưu ý: UTF-8 là kiểu mã hóa ký tự rất linh hoạt và được khuyến khích lựa chọn. Tuy nhiên, nếu điều này không được chỉ định, thì mã hóa mặc định của nền tảng sẽ được sử dụng.
Xác định tác giả của một tài liệu
Bạn cũng có thể sử dụng thẻ meta để xác định rõ ràng ai là tác giả hoặc người tạo ra trang web.
Tác giả có thể là một cá nhân, toàn thể công ty hoặc một bên thứ ba.
Thí dụ
<head>
<title>Defining Document's Author</title>
<meta name="author" content="Alexander Howick">
</head>Lưu ý: Thuộc tính name của thẻ meta xác định tên của một phần siêu dữ liệu cấp tài liệu, trong khi thuộc tính content cung cấp giá trị tương ứng. Giá trị thuộc tính content có thể chứa văn bản và thực thể, nhưng nó có thể không chứa thẻ HTML.
Từ khoá và Mô tả cho Công cụ Tìm kiếm
Một số công cụ tìm kiếm sử dụng siêu dữ liệu, đặc biệt là từ khóa và mô tả để lập chỉ mục các trang web; tuy nhiên điều này có thể không nhất thiết phải đúng. Các từ khóa tăng thêm sức nặng cho các từ khóa và mô tả của tài liệu cung cấp một bản tóm tắt ngắn về trang. Đây là một ví dụ:
Thí dụ
<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more...">
</head>Mẹo: Các công cụ tìm kiếm thường sẽ sử dụng mô tả meta của một trang để tạo tóm tắt ngắn cho trang khi nó xuất hiện trong kết quả tìm kiếm. Xem hướng dẫn về mô tả meta .
Định cấu hình Viewport cho thiết bị di động
Bạn có thể sử dụng thẻ meta viewport để hiển thị các trang web một cách chính xác trên thiết bị di động.
Không có thẻ meta viewport, các trình duyệt trên thiết bị di động hiển thị các trang web ở độ rộng màn hình máy tính để bàn điển hình, sau đó thu nhỏ lại để vừa với màn hình di động. Do đó, nó yêu cầu chụm và-thu-phóng để xem trang web đúng cách trên thiết bị di động, điều này rất bất tiện.
Thẻ meta viewport cho phép bạn đặt kích thước khung nhìn và giới hạn tỷ lệ tốt nhất để xem các trang web trên thiết bị di động. Định nghĩa thẻ meta viewport điển hình sẽ như sau:
Thí dụ
<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Cặp khóa-giá trị width=device-width bên trong contentthuộc tính đặt chiều rộng của chế độ xem bằng với chiều rộng màn hình của thiết bị, trong khi cặp initial-scale=1 này đặt tỷ lệ ban đầu hoặc mức thu phóng thành 100% khi trang được tải lần đầu tiên bởi trình duyệt.
Mẹo: Luôn sử dụng thẻ <meta> viewport trong các trang web của bạn. Nó sẽ làm cho trang web của bạn thân thiện với người dùng và dễ truy cập hơn trên các thiết bị di động như điện thoại di động và máy tính bảng.