Trang chủ / Code / 5 thứ hay ho bạn có thể làm với thẻ meta của HTML
thẻ meta html

5 thứ hay ho bạn có thể làm với thẻ meta của HTML

Trong HTML, thẻ meta được sử dụng để lưu trữ các mẫu thông tin trên một trang web. Mục đích của nó là để các trình duyệt và các bộ máy tìm kiếm search engine có thể hiểu website hơn

thẻ meta tag trong html

Là một lập trình viên ( web developer), chắc các bạn thường sử dụng các thẻ meta để cài đặt tiêu đề, miêu tả, thông tin tác giả cho website. Tuy nhiên, có rất nhiều các loại thẻ meta và chức năng của chúng cũng rất đa dạng. Do vậy trong bài viết này, mình muốn giới thiệu với các bạn 5 việc mà bạn có thể làm với thẻ meta để tối ưu website tốt hơn, có thể sẽ có những thứ mà bạn chưa từng nghe thấy bao giờ

Sử dụng thẻ Meta để kiểm soát Cache của trình duyệt

Khi bạn ghé thăm một trang web, trình duyệt sẽ lưu nội dung trang web vào bộ nhớ đệm (cache) của trình duyệt để giúp trang web tải nhanh hơn ở lần truy cập sau. Có được điều này là do trình duyệt tải dữ liệu từ trong cache ra chứ không phảo lấy từ máy chủ của bạn. Việc này đôi lúc có thể gây bất tiện cho bạn, nhất là khi bạn vừa thực hiện các thay đổi với website nhưng khi truy cập trình duyệt lại không hiển thị. Để cản trở việc trình duyệt lưu cache, bạn có thể sử dụng thẻ meta sau:

<meta http-equiv="Cache-Control" content="no-store" />

Thẻ này có thể đọc được bởi các trình duyệt Firefox, Google Chrome, Internet Explorer. Thậm chí đối với trình duyệt IE, bạn có thể kiểm soát hay tắt cache trình duyệt một cách nâng cao hơn

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

Còn nếu bạn vẫn muốn bật cache trình duyệt, bạn có thể thêm thời gian hết hạn cho nó, tức là sau một khoảng thời gian định sẵn, trình duyệt sẽ tự động xoá cache và lấy nội dung mới từ server về.

<meta http-equiv="expires" content="Fri, 13 Aug 2015 1:00:00 GMT+7" />

Đoạn mã trên nghĩa là dữ liệu cache sẽ bị hết hiệu lực sau thời gian cụ thể mà chúng ta đặt, ở đây là nó sẽ hết hiệu lực vào 1:00:00 ngày 13 tháng 8,  2015.. Bạn cũng có thể chèn duy nhất số 0 vào trong thuộc tính content. khi đó, trình duyệt sẽ kiểm tra website mỗi khi người dùng truy cập để xem có nội dung mới không và nó sẽ load về.

Sử dụng thẻ Meta để lưu Cookies

Tương tự như cache, cookies cũng là một mẫu dữ liệu nhỏ được lưu trữ bởi trình duyệt khi người dùng truy cập một trang web nào đó. Các website có thể sử dụng lại cookies để thực hiện một chức năng nào đó. Ví dụ, khi chúng ta đăng nhập Facebook thì trình duyệt sẽ lưu dữ liệu tên người dùng và mật khẩu trong cookies, lần sau chúng ta truy cập Facebook sẽ không phải đăng nhập lại nữa trừ khi chúng ta xoá cookies đi. Hoặc khi bạn mua sắm online, bạn thêm một sản phẩm nào đó vào giỏ hàng nhưng vẫn chưa quyết định mua hàng, trình duyệt sẽ lưu trữ những thông tin này, thậm chí vài ngày sau bạn truy cập lại nó vẫn nhớ và hiển thị trong giỏ hàng của bạn.

Để cài đặt cookies sử dụng thẻ meta, bạn có thể dùng đoạn code sau:

<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE">

trong đó:

  • name=data là tên của cookies mà xác định loại giá trị sẽ lưu trữ trong đó
  • path là đường dẫn
  • expired thời hạn mà cookies sẽ bị xoá khỏi trình duyệt, nếu bạn để trống cookies sẽ bị xoá tự động mỗi khi tắt trình duyệt

Ví dụ nếu bạn muốn cài cookies hết hạn vào 18 tháng 8 2015

<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 18-Aug-2015 00:00:00 GMT+7">

Sử dụng thẻ Meta để tự động làm mới trang web

Bạn có thể thiết lập trình duyệt sẽ tự động tải lại trang web sau một thơi gian nhất đinh, 5s chẳng hạn

<meta http-equiv="refresh" content="5">

Khi đó, cứ sau mỗi 5s trình duyệt sẽ tự động tải lại website mà người đang truy cập, nếu bạn tinh ý thì bạn cũng thấy, bài viết mà bạn đang đọc cũng tự động tải lại sau 2s

Sử dụng thẻ Meta để huyển hướng trang web

Bạn cũng có thể sử dụng thuộc tính refresh trong thẻ meta bên trên để chuyển hướng trang web mà người dùng đang truy cập tới một trang web khác

Đoạn mã sau sẽ buộc trình trình duyệt chuyển hướng tới trang https://www.latena.vn sau 5s

<meta http-equiv="refresh" content="5; url=https://www.latena.vn/">

Để chuyển hướng một trang web này sang một trang web khác ngay lập tức mà không cần phải chờ đợi, bạn chỉ việc sửa số 5 thành số 0

Sử dụng thẻ Meta để tạo hiệu ứng chuyển động cho trang web

Bạn cũng có thể cài đặt hiệu ứng chuyển tiếp cho trang web của bạn bằng cách sử dụng thẻ meta giống như trong PowerPoint. Cú pháp củ thẻ meta như sau:

<meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-enter" content="blendTrans(duration=sec)" />

Lưu ý rằng nó chỉ hoạt động trên Internet Explorer vì thuộc tính page-enter và page-exit là thông số kỹ thuật độc quyền trong thẻ meta của Microsoft. Bạn có thể thiết lập thời gian cho các hiệu ứng chạy bằng thuộc tính duration . Đối với thuộc tính transition, các bạn cần thay thế num bằng con số từ 1 -23 tương ứng các loại hiệu ứng khác nhau được cung cấp bởi Microsoft.

Hi vọng sau bài viết này, các bạn đã biết thêm được nhiều công dụng của thẻ meta hơn để từ đó áp dụng vào các website của mình :D

Chúc các bạn thành công!

Nếu bạn thấy có ích, hãy subcribe blog của tôi để nhận thêm nhiều tút hay qua email nữa nhé!