meta的內容有兩種:name和http-equiv。

name的功用是用來描述網頁,當搜尋引擎派出蜘蛛在爬時,都會優先讀取你meta name的資訊,最常看到的是利用name的設定來做SEO!

用來說明你的編輯器

<meta name="generator" content="FrontPage= =" />

讓搜尋引擎查詢的關鍵字

<meta name="keywords" content="佛祖球球,沙拉麵的田園生活" />

讓搜尋引擎查詢的主要內容

<meta name="description" content="這是發心得文的地方" />

讓搜尋引擎查詢的作者名稱

<meta name="author" content="球球" />

對於搜尋引擎搜尋的權限設定:

  • all:檔案和網頁上的連結可以被搜尋
  • none:檔案和網頁上的連結不可以被搜尋
  • index:只有檔案可以被搜尋
  • follow:只有網頁上的連結可以被搜尋
  • noindex:網頁上的連結可以被搜尋,檔案不行
  • nofollow:檔案可以被搜尋,網頁上的連結不行
<meta name="robots" content="all|none|index|noindex|follow|nofollow" />

在手持裝置上,640*800的網頁在320*400的畫面上顯示,如果要一次將整個網頁全景顯示出來,網頁長寬一定會縮小一半,這時候viewport=0.5;
反之,320*400的網頁要在640*800的畫面上顯示全螢幕,網頁長寬會被放大一倍,這時候viewport=2;
可以透過viewport來設定這方面的問題:

  • width:viewport寬度,設定與裝置螢幕同寬
  • initial-scale:預設以多少倍的viewport來顯示
  • maximum-scale:定義頁面縮放的最高倍率
  • user-scalable:只有0與1兩個值,定義是否讓使用者自己調整viewport倍率
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

http-equiv的功能是用來定義HTTP Header的資訊

定義編碼

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- 也可以寫成 -->
<meta charset="UTF-8" />

定義預設的樣式表

<meta http-equiv="default-style" content="text/css" />

設定網頁幾秒後重新整理

<meta http-equiv="refresh" content="300" />
Categories: WebDesign