布局 webkit ron form 導航 strong status 忽略 否則

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標簽的使用