meta標籤的使用

標籤：刪除   base   net   百度   name   版本   縮放   alternate   format   

SEO（白帽）

• 網站標題、關鍵字、描述
• 網站內容最佳化
• Robot.txt檔案
• 網站地圖
• 增加外鏈應用

前端SEO

• 網站結構布局最佳化
  • 結構布局最佳化：用扁平化結構（階層超過三層小蜘蛛就不願意爬了）
    • 控制首頁連結數量（中小網站100以內，頁面導航、底部導航、錨文字連結等）
    • 扁平化的目錄層次（小蜘蛛跳轉3次可以到達網站內任何一個內頁，網站的設計首頁、欄目、內容頁，不要用縱線性結構）
  • 導航seo最佳化（頭部、底部、內容部分，主導航、副導航、分類導航，盡量用文字，麵包屑導航，在每個網站上留下麵包屑，使使用者可以瞭解網站組織形式，放於本文的左上方）
    • 內容頁面的布局細節
      左面本文，右面熱門文章、相關文章，下面是著作權資訊及連結，欄目排布：首頁123456789下拉選擇最贊
    • 網站的載入速度會影響小蜘蛛的爬行，頁面最好不要超過100k
• 網頁代碼最佳化
• <img>標籤應使用alt說明
• <br>一般用作文章內容的換行
• <a>加上title屬性（rel="nofollow",否則小蜘蛛就爬走了）
• <strong><em>與<b><i>標籤
• 重要內容html代碼放在最前面
• 重要內容不要用js輸出
• 盡量少使用iframe架構
• 謹慎使用display：none；（小蜘蛛讀取不到）
• 精簡代碼

1、name之viewport

<meta name="viewport" content="">
說明：螢幕的縮放

2、name之format-detection忽略電話號碼和郵箱

<meta name="format-detection" content="telephone=no">
說明：忽略頁面中的數字識別為電話號碼
<meta name="format-detection" content="email=no"/>

說明：忽略頁面中的郵箱格式為郵箱

3、name之設定作者姓名及連絡方式說明： 設定作者姓名及連絡方式

<meta name="author" contect="name, [email protected]" />

4、其他

<!-- 優先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 頁面描述 -->
    <meta name="description" content="不超過150個字元"/>

<!-- 頁面關鍵詞 -->
    <meta name="keywords" content=""/>

<!-- 搜尋引擎抓取 -->
    <meta name="robots" content="index,follow"/>

<!-- 啟用360瀏覽器的極速模式(webkit) -->
    <meta name="renderer" content="webkit">

<!-- 避免IE使用相容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 不讓百度轉碼 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">

<!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->

    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ強制全屏 -->

    <meta name="x5-fullscreen" content="true">
    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">

　 <!-- 添加 RSS 訂閱 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 添加 favicon icon -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

二、ios系統的meta/link設定：1、 開啟對web app程式的支援<meta name="apple-mobile-web-app-capable" content="yes">
說明：
    網站 開啟對web app程式的支援，其實意思就是 刪除預設的蘋果工具列和功能表列，開啟全螢幕顯示
2、  改變頂部狀態條的顏色；<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明：
    在 web app 應用下狀態條（螢幕頂部條）的顏色；
    預設值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

meta標籤的使用