meta標籤的使用

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；（小蜘蛛讀取不到）
• 精簡代碼

一、name之viewport

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

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

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

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

三、name之設置做者姓名及聯繫方式

說明： 設置做者姓名及聯繫方式

<meta name="author" contect="name, xxx@163.com" />

四、其餘

<!-- 優先使用 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"/>

2、ios系統的meta/link設置：

一、開啓對web app程序的支持

<meta name="apple-mobile-web-app-capable" content="yes">
說明：
    網站 開啓對web app程序的支持，其實意思就是 刪除默認的蘋果工具欄和菜單欄，開啓全屏顯示

二、 改變頂部狀態條的顏色；

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 說明：     在 web app 應用下狀態條（屏幕頂部條）的顏色；     默認值爲 default（白色），能夠定爲 black（黑色）和 black-translucent（灰色半透明）；