Tìm kiếm

HTML/CSS | Tìm hiểu về các thẻ meta

Học HTML, CSS từ Zero Tới Hero

Trong bài học này chúng ta sẽ tìm hiểu về các thẻ meta được đề cập trong ví dụ dưới đây (phần nằm trong thẻ <head>).

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tiêu đề trang web</title>
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

Qua bài học trước, chúng ta đã được học về thành phần thẻ <head> là nơi chứa các thẻ meta. ✨ Thẻ meta được dùng để bổ sung thông tin cho trang web, các thông tin này thường được sử dụng bởi: trình duyệt, công cụ tìm kiếm (như Google Search) và các trình thu thập dữ liệu của mạng xã hội (như Facebook).

Thẻ meta

Thẻ <meta> được sử dụng để cung cấp thêm thông tin và dữ liệu cho trang web.

Thẻ meta là một trong số thẻ tự đóng (self-closing tag), cách viết của nó chỉ đơn giản như ví dụ sau:

<meta />

Khi sử dụng thẻ <meta> chúng ta cần khai báo thêm thuộc tính để việc sử dụng thẻ này trở nên có ý nghĩa.

Một số trường hợp sử dụng thẻ meta phổ biến:

  • Chỉ định bảng mã ký tự cho trang web
  • Cung cấp mô tả trang web cho công cụ tìm kiếm
  • Chỉ định cách hiển thị trang web trên nhiều thiết bị (PC, tablet, mobile)
  • Cung cấp thông tin của trang web cho trình thu thập dữ liệu của mạng xã hội (như Facebook)

#Thẻ meta charset

Đây là thẻ cần được khai báo tại vị trí đầu tiên trong thẻ <head>:

<head>
    <meta charset="UTF-8" />
    ...
</head>

Thẻ meta với charset="UTF-8" có tác dụng hỗ trợ hiển thị các ký tự nằm ngoài khoảng từ A - Z. Ví dụ: tiếng Việt có dấu, tiếng Trung, tiếng Nhật, tiếng Ả Rập, …

Nếu bạn không khai báo meta charset tại vị trí đầu tiên trong thẻ <head> thì trong một số trường hợp nội dung trang web chứa ký tự phức tạp, trình duyệt sẽ cố gắng đoán bảng mã ký tự và có thể gây ra lỗi hiển thị không mong muốn.

Điều trên ngày nay khó xảy ra. Các trang web ngày nay hầu hết được triển khai trên các máy chủ web có hỗ trợ UTF-8. Vì vậy, khai báo <meta charset="UTF-8" /> là không cần thiết trong trường hợp này.

Tuy nhiên, không vì lý do trên mà chúng ta không sử dụng thẻ meta charset. Thực tế, vẫn có những máy chủ không mặc định hỗ trợ charset. Để đảm bảo tính thống nhất về bảng mã ký tự cho trang web của bạn, mặc định chúng ta luôn sử dụng thẻ meta charset nhé.

Thẻ meta title

Tuy thẻ này không có từ meta nhưng vẫn nằm trong nhóm thẻ meta. Đây là thẻ chứa tiêu đề của trang web, tiêu đề này được sử dụng trong một số trường hợp:

  • Hiển thị tiêu đề trang web trên thanh tab của trình duyệt
  • Hiển thị tiêu đề trong kết quả của công cụ tìm kiếm (ví dụ: Google Search)

Ví dụ sử dụng thẻ meta <title>:

<title>Winxvideo AI 2.1: Phần mềm AI đa năng để download, cải thiện chất lượng video và hình ảnh</title>

Tiêu đề hiển thị trên thanh tab trình duyệt:

Tiêu đề hiển thị trong kết quả tìm kiếm:

Luôn sử dụng thẻ meta <title>, đây được coi là điều tất yếu để cung cấp thông tin của trang web cho người sử dụng.

Thẻ meta viewport

✨ Để tối ưu hóa việc hiển thị giao diện web trên nhiều thiết bị có kích cỡ màn hình khác nhau (như PC, tablet, mobile) bạn sẽ cần sử dụng thẻ meta viewport.

Ví dụ sử dụng thẻ meta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

✨ Nếu trang web của bạn không có thẻ meta viewport thì khi mở trên thiết bị di động nội dung sẽ bị thu nhỏ, bạn phải phóng to để dễ dàng đọc được. Các trang web được xây dựng vào khoảng những năm 2010 thường gặp vấn đề này.

Sau đó, trào lưu thiết kế web đáp ứng (hay: responsive web design) xuất hiện. Tới ngày nay, hầu hết mọi trang web đều được tối ưu hiển thị trên nhiều thiết bị, bao gồm cả mobile. Đương nhiên, các trang web được tối ưu cho đa thiết bị đều sử dụng thẻ meta viewport.

Ví dụ:

Trên thiết bị di động, trang web bị thiếu meta viewport chữ bị thu nhỏ, phải phóng to mới dễ dàng đọc được:

Phần khoanh đỏ là một đoạn văn bản, chữ tại đây quá nhỏ để có thể dễ dàng đọc được trên thiết bị di động, nơi có kích thước màn hình nhỏ hơn nhiều so với máy tính.

Quét mã QR trên điện thoại để truy cập (trang thiếu meta viewport):

Trong khi, vẫn là trang web đó nhưng trong code có sử dụng thẻ meta viewport:

Phần nội dung chữ tại đây đã dễ dàng để đọc hơn nhiều so với khi chưa sử dụng thẻ meta viewport.

Quét mã QR trên điện thoại để truy cập (trang có meta viewport):

Trong thẻ meta viewport, giá trị width=device-width nhằm yêu cầu trình duyệt đặt chiều rộng của trang web bằng chiều rộng của thiết bị (PC, tablet, mobile). Giá trị initial-scale=1.0 nhằm giữ đúng kích thước/tỉ lệ mặc định của trang web.

Thẻ meta Open Graph

Đây là các thẻ meta được trình thu thập nội dung của Facebook sử dụng, nhằm lấy thông tin của trang web phục vụ việc hiển thị khi trang web được chia sẻ trên mạng xã hội này.

<meta
  property="og:url"
  content="https://fullstack.edu.vn/blog/tong-hop-cac-san-pham-cua-hoc-vien-tai-f8.html"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Tổng hợp các sản phẩm của học viên tại F8 | by Sơn Đặng | F8" />
<meta
  property="og:description"
  content="Bài viết này nhằm tổng hợp lại các dự án mà học viên F8 đã hoàn thành và chia sẻ trên nhóm Học lập trình web F8. Các dự án dưới..."
/>
<meta
  property="og:image"
  content="https://files.fullstack.edu.vn/f8-prod/blog_posts/65/6139fe28a9844.png"
/>

Khi chia sẻ trang web trên mạng xã hội Facebook:

Tất nhiên, đây mới chỉ là phần giới thiệu để các bạn nắm được ý nghĩa của các thẻ meta thường được sử dụng. Để có thể triển khai được một trang web lên mạng Internet và có thể chia sẻ trang web đó lên Facebook các bạn sẽ cần hoàn thành khóa học này.

Tóm tắt

  • Thẻ meta được sử dụng để cung cấp thêm thông tin và dữ liệu cho trang web. Các thẻ meta thường được sử dụng bởi trình duyệt, các công cụ tìm kiếm và trình thu thập dữ liệu của các mạng xã hội.
  • Thẻ meta là một trong số thẻ tự đóng (self-closing tag), nhờ vậy không cần thêm thẻ đóng khi sử dụng thẻ meta.
  • Thẻ meta charset nhằm chỉ định bảng mã ký tự cho trang web (ví dụ: <meta charset="UTF-8" />). UTF-8 hỗ trợ hiển thị các ký tự ngoài khoảng A - Z. Luôn nhớ đặt thẻ meta charset tại vị trí đầu tiên trong thẻ <head>.
  • Thẻ meta <title> cung cấp tiêu đề trang web hiển thị trên tab trình duyệt, hiển thị trong kết quả tìm kiếm (ví dụ: Google Search).
  • Thẻ meta viewport để hỗ trợ trang web hiển thị trên các thiết bị có kích cỡ màn hình khác nhau (PC, tablet, mobile). Nếu thiếu thẻ meta viewport, khi truy cập trên thiết bị di động, nội dung có thể bị thu nhỏ và cần phải phóng to để dễ dàng đọc được.
  • Thẻ meta Open Graph cung cấp thông tin cho trình thu thập dữ liệu của Facebook, hỗ trợ hiển thị thông tin trang web khi được chia sẻ trên mạng xã hội này.
Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn