[Html] 關於<meta>的大小事

本文網址: https://mike.coderbridge.io/2023/12/28/about-html-meta/

由於之前吃了meta一虧(網站method的http都變成https!?)，這次就研究了一下，並且把常用到的東西整理下來，如下。

1. Charset - 字符編碼聲明:

用於指定網頁的字符編碼。

<meta charset="UTF-8">

2. Content-Type - 內容類型:

用於指定 HTML 文檔的 MIME 類型和字符編碼。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

3. Viewport - 視口:

用於控制視口的大小和比例，非常重要的標籤，用於響應式設計。

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

4. Description - 描述:

用於描述網頁的內容，對搜索引擎優化（SEO）有重要作用。

<meta name="description" content="頁面描述">

5. Keywords - 關鍵詞:

指定網頁的關鍵詞，以逗號分隔。

<meta name="keywords" content="HTML, CSS, JavaScript">

6. Author - 作者:

用於指定網頁的字符編碼。

<meta name="author" content="作者名">

7. Refresh - 刷新:

指定頁面自動刷新的時間間隔（秒）。

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

8. Cache-Control - 緩存控制:

控制頁面的緩存策略。其中，public 及 private 還可以設定 max-age=... 來指定快取多久後會過期；例如 Cache-Control: private max-age=2592000，描述的是此資源僅可以被本地快取，有效期限是 30 天（60 x 60 x 24 x 30 = 2592000）

// public：公開的資源，可以被所有節點暫存
<meta http-equiv="Cache-Control" content="public">

// private：私有的資源，只被允許儲存成使用者的本地快取
<meta http-equiv="Cache-Control" content="private">

// no-cache：本地暫存，但使用前會先詢問過期沒
<meta http-equiv="Cache-Control" content="no-cache">

// no-store：不開快取
<meta http-equiv="Cache-Control" content="no-store">

9. Content-Security-Policy - 內容安全策略:

在HTML中使用 http-equiv="Content-Security-Policy"（CSP）時，可以通過設定不同的content值來控制頁面的安全策略。
CSP的內容相當多，可以查看更詳細全面的資料。

// default-src: 定義加載各種資源的默認策略。
// 例: default-src 'self'; 只允許加載來自同一來源的資源。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

// 自動將HTTP請求升級為HTTPS。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests;">

10. X-UA-Compatible - 瀏覽器兼容性:

指定 Internet Explorer 使用最新的引擎渲染頁面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

11. Robots - 機器人指令:

指示搜索引擎爬蟲應該如何索引頁面和跟蹤鏈接。

<meta name="robots" content="index,follow">

12. Theme-Color - 主題顏色 (常用於移動設備瀏覽器):

指定瀏覽器工具欄的顏色。

<meta name="theme-color" content="#ff5733">

13. Apple Mobile Web App Capable - 蘋果移動網絡應用能力:

指定網站是否運行為蘋果設備的 Web App。

<meta name="apple-mobile-web-app-capable" content="yes">

參考:

1. https://ithelp.ithome.com.tw/articles/10226607