網(wǎng)站優(yōu)化之SEO開發(fā)標準
時間：2023-05-27 21:54:01 | 來源：網(wǎng)站運營
時間：2023-05-27 21:54:01 來源：網(wǎng)站運營
網(wǎng)站優(yōu)化之SEO開發(fā)標準：
轉(zhuǎn)載請聯(lián)系我，站內(nèi)信，微信shadowpress，都可以談！SEO對于一個獨立站，類似于鋼結(jié)構(gòu)對于建筑的作用。
不緊包含前期的基礎(chǔ)優(yōu)化，也包含中后期的站外外鏈建設(shè)和內(nèi)容營銷。
今天來講下SEO的開發(fā)標準，希望能對網(wǎng)站的建設(shè)者有些許幫助。
1. 開發(fā)標準
1.1.
W3C標準1.1.1.
什么是W3C標準作為網(wǎng)站技術(shù)開發(fā)人員而言，往往是站在自己的開發(fā)角度來實施網(wǎng)站布署(讀取數(shù)據(jù)及開發(fā)的方便性等等)，而不是站在網(wǎng)站訪問者與搜索引擎角度。因此大部分的網(wǎng)站在瀏覽方面不夠直觀或是方便，特別是現(xiàn)在w3c的規(guī)范，更是在大部分的網(wǎng)站開發(fā)人員腦里一片空白。何況百度 、google、msn、yahoo等專業(yè)搜索引擎更有自己的搜索規(guī)則及判斷網(wǎng)頁等級技術(shù)，所以網(wǎng)站要優(yōu)化，優(yōu)化的目的只有一個：符合標準，符合蜘蛛爬行的標準，更重要的是符合網(wǎng)站訪問者瀏覽的方便及易用性。要知道W3C標準，有必要先弄清楚什么是W3C？W3C其實就是World Wide Web Consortium，全球萬維網(wǎng)聯(lián)盟的簡稱。W3C的主要職責就是確定未來萬維網(wǎng)的發(fā)展方向，并且制定相關(guān)的推薦 （recommendation, 由于W3C是一個民間組織，沒有約束性，因此只提供建議）。HTML4.01規(guī)范建議(HTML4.01 Specification Recommendation)就是由W3C所制定的。它還負責制定XML，MathML等其他網(wǎng)絡(luò)語言規(guī)范。
1.1.2.
如何符合w3c規(guī)范？確保所有的標簽都使用小寫字母確保所有的屬性值都放在引號里確保所有成對標簽出現(xiàn)的順序、不成對的標簽都用/>結(jié)束, ”/”和”>”之間不要有空格
1.1.3.
使用正確的文檔類型文檔類型聲明位于HTML文檔的第一行：<!DOCTYPE html>如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：<!doctype html>
1.1.4.
聲明你的編碼語言直接在DOCTYPE聲明后面添加如下代碼：<meta charset="utf-8"><title>
1.1.5.
聲明你的網(wǎng)站語言直接在DOCTYPE聲明后面添加如下代碼：<html>其中en要使用多語言，如fr、es等
1.1.6.
使用小寫元素名 HTML5 元素名可以使用大寫和小寫字母。推薦使用小寫字母：混合了大小寫的風格是非常糟糕的。不推薦:<SECTION> <p>這是一個段落。</p></SECTION>非常糟糕:<Section> <p>這是一個段落。</p></SECTION>推薦:<section> <p>這是一個段落。</p></section>
1.1.7.
關(guān)閉所有 HTML 元素在 HTML5 中, 可能沒有關(guān)閉所有元素 (例如 <p> 元素)時，網(wǎng)頁也顯示正常，但我們建議每個元素都要添加關(guān)閉標簽。不推薦:<section>
<p>這是一個段落。
</section> 推薦:
<section>
<p>這是一個段落。</p>
</section>
1.1.8.
使用小寫屬性名HTML5 屬性名允許使用大寫和小寫字母。但我們推薦統(tǒng)一使用小寫字母屬性名:不推薦：
<div>
推薦：
<div>
1.1.9.
屬性值HTML5 屬性值不用引號時，網(wǎng)頁顯示可能也正常，但屬性值我們統(tǒng)一使用引號:
如果屬性值含有空格需要使用引號。
混合風格不推薦的，建議統(tǒng)一風格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格，沒有使用引號，所以不能起作用:
<table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
1.1.10.
圖片屬性圖片，特別是主要的banner一定要添加alt屬性，title屬性可選：蜘蛛不認識圖片上的內(nèi)容，只能通過alt屬性來判斷，alt屬性值應(yīng)該是圖片的的含義，如果沒有這個數(shù)據(jù)，應(yīng)該寫網(wǎng)站的名稱
<img src="domain/banner.jpg" alt="rosegal-Thanksgiving Sale">
<img src="domain/banner.jpg" alt="rosegal">
1.1.11.
空格和等號等號前后使用空格時，網(wǎng)頁顯示可能也正常
<link rel = "stylesheet" href = "styles.css">
但我們推薦不要空格:
<link rel="stylesheet" href="styles.css">
1.1.12.
空行和縮進不要無緣無故添加空行。
為每個邏輯功能塊添加空行，這樣更易于閱讀。
縮進使用兩個空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>W3Cschool教程</h1>
<h2>HTML</h2>
<p>這是一行文案的文字</p>
<p>這是一行文案的文字</p>
</body>
推薦:
<body>
<h1>W3Cschool教程</h1>
<h2></h2>
<p>這是一行文案的文字。這是一行文案的文字</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
</table>
列表實例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
1.1.13.
HTML 注釋注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進兩個空格，更易于閱讀。注釋最好使用smarty或php的注釋或者英文注釋，不要使html注釋中出現(xiàn)中文。
1.1.14.
樣式表樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加一個空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時才使用引號。
右括號放在新的一行。
1.1.15.
在 HTML 中載入 JavaScript使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js"></script>
1.1.16.
避免空的src和href空屬性對爬蟲不友好 ，盡量避免。 留意具有這兩個屬性的標簽如link，script，img，iframe等
1.1.17.
使用合理的html5語義化標簽遵守W3C語義化規(guī)范，則避免單一的重復div/span等標簽，例如我們要做一個導航
<!-- 不建議 -->
<div>
<span>NEW</span>
<span>CHRISTEMAS</span>
<span>PLUS SIZE</span>
</div>
<!-- 建議 -->
<ul>
<li>NEW</li>
<li>CHRISTEMAS</li>
<li>PLUS SIZE</li>
</ul>
h1正文標題要使用h1標簽，且每個頁面只能出現(xiàn)一次h1標簽，副標題要使用h2?？梢允褂肅SS樣式進行顯式風格的設(shè)置。切記：不重要的地方不要隨便使用h1標簽。
強調(diào)網(wǎng)頁中的重要內(nèi)容應(yīng)該使用strong標簽，避免使用b標簽（對搜索引擎不友好），原則是使用新的html標簽替換舊的標簽，樣式要使用css替代。
1.2. DOM結(jié)構(gòu)優(yōu)化
1.2.1. 網(wǎng)站結(jié)構(gòu)布局優(yōu)化減少DOM元素數(shù)量，DOM嵌套不超過4層，盡量精簡（圖標、按鈕等使用偽類元素可以有效的減少標簽嵌套），提倡扁平化結(jié)構(gòu)<!-- 不建議 -->
<div>
<span>
<img src="...">
</span>
</div>
<!-- 建議 -->
<div>
<img src="..."></div>
1.2.2. 統(tǒng)計網(wǎng)頁元素數(shù)量想知道你的網(wǎng)頁中有多少元素，通過在瀏覽器中的一條簡單命令就可以算出document.getElementsByTagName('*').length這有利于我們多關(guān)注元素數(shù)量
1.2.3. 圖標型元素盡量使用button
或者a
元素，且標簽內(nèi)不能為空很多前端人員在加圖標、按鈕的時候，直接使用一個空的標簽，只是為了放一個圖標，這完全可以寫的更語義化一些，例如添加一個facebook圖標<!-- 不建議 -->
<a href="javascript:;"><i></i></a>
<!-- 建議，使用font-size使文字不可見，使用after或者before偽類添加圖標 -->
<button>facebook</button>
<a href="javascript:;">facebook</a>
1.2.4. 最大限度減少DOM訪問緩存已經(jīng)訪問過的有關(guān)元素
線下更新完節(jié)點之后再將它們添加到文檔樹中
避免使用JS來修改頁面布局
1.2.5. 顯示完整的文案如果文字長度過長，可以用樣式截取，設(shè)置高度，超出的部分隱藏即可。這樣做的好處是讓文字完整呈現(xiàn)給搜索引擎，同時在表現(xiàn)上也保證了美觀。
1.2.6. Iframe盡少使用iframe框架，搜索引擎不會抓取iframe里面的內(nèi)容，重要的內(nèi)容不要放在iframe里
1.2.7 brbr標簽不能用于布局（如隔開一個元素），這應(yīng)該使用樣式去替代
1.2.8 a標簽如果是確定不需要seo的標簽，盡量給a標簽加上rel="nofollow"，告訴機器(爬蟲)無需追蹤目標頁，減少垃圾鏈接對搜索引擎的影響；另外a標簽中的href屬性，在可能的情況下盡量使用絕對地址
1.3 前端頁面性能
1.1.1.
為什么要關(guān)注頁面性能網(wǎng)頁性能的直接表現(xiàn)就是打開速度，響應(yīng)速度慢的，自然影響打開網(wǎng)站的速度。另外響應(yīng)速度慢的，還會影響蜘蛛爬行的速度，蜘蛛提交訪問請求，如果響應(yīng)慢，爬行就會慢。從對網(wǎng)站的數(shù)據(jù)監(jiān)控來看，蜘蛛在一個網(wǎng)站的總停留時間是相對穩(wěn)定的，提升權(quán)重后才會增加總停留時間?？偟膩碚f，前端頁面的性能最主要是減少資源大小、減少HTTP請求數(shù)量以及適當?shù)漠惒郊虞d。
1.1.2.
資源壓縮所有輸出的CSS/JS/圖片必須經(jīng)過壓縮，這可以在不降低網(wǎng)頁體驗的情況，提升頁面的打開速度，降低服務(wù)器壓力?？紤]到添加壓縮資源這一步驟會增加開發(fā)的工作量，盡量考慮使用gulp等自動化工具提升效率。圖片壓縮，可以參考壓縮工具tinypng、ImageOptimCSS壓縮，可以參考壓縮工具clean-cssJS壓縮，可以參考壓縮工具 uglifyJS
1.3.3. dns預解析頁面head標簽內(nèi)，需要加上dns預解析，例如
<link rel="dns-prefetch" href="//login.rosegal.com">
<link rel="dns-prefetch" href="//css.rglcdn.com">
1.3.4. html順序前端在使用CSS布局中，要考慮重要內(nèi)容優(yōu)先加載，將重要html代碼放在最前面，利用CSS的各種布局特性，將重要的內(nèi)容盡量靠前
1.3.5. 異步加載所有用戶操作（點擊、異步操作、滾動）才顯示出來的內(nèi)容，應(yīng)該用戶操作的時候再加載，以節(jié)省頁面首次加載的時間，如懶加載、彈窗、第三方客服代碼
1.3.6. Cookie減少Cookie的大小，Cookie在每次刷新頁面都會與服務(wù)器交互；不需要向服務(wù)器的數(shù)據(jù)，應(yīng)該使用本地儲存localStorage來實現(xiàn)需求
1.3.7. 資源合并盡量使用各種方法合理的減少HTTP請求數(shù)量，合并公用的靜態(tài)文件。如 css sprite雪碧圖、JS/CSS公用文件的合并
1.3.8. 資源加載位置JS代碼放在文檔的底部，CSS代碼放在文檔的頭部，避免加載時頁面閃爍、避免JS的加載阻塞頁面的顯示
1.3.9. AJAX優(yōu)先使用GET來完成AJAX請求，當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。在url小于2K時使用GET獲取數(shù)據(jù)時更加有意義。
1.3.10. 圖片大小聲明廣告圖片元素圖片大小聲明：如果圖片大小不做定義的話，頁面需要重新渲染，就會影響到速度例如：<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
1.3.11. 懶加載商品詳情、首頁大banner，默認第一張圖片是直出（圖片地址寫在src屬性上），其它圖片全部懶加載
1.3.12. 縮放圖片盡量不要用HTML縮放圖片，不要因為在HTML中可以設(shè)置寬高而使用本不需要的大圖。如果需要<img width="100" height="100" src="mycat.jpg" alt="My Cat" />圖片本身（mycat.jpg）應(yīng)該是100x100px的，而不是去縮小500x500px的圖片，如果沒有對應(yīng)尺寸的圖片，應(yīng)該使用最接近的尺寸
1.3.13. 關(guān)注頁面性能參數(shù)經(jīng)常關(guān)注頁面的性能需要關(guān)注到以下參數(shù)是否過多或者增長多快：頁面html標簽總大小(kb)頁面首屏請求數(shù)總大小(kb)DOMContentLoaded時間(ms)window Load時間(ms)包括以上參數(shù)但不是全部，根據(jù)業(yè)務(wù)場景選擇側(cè)重點。
1.4 開發(fā)常規(guī)標準
1.4.1 站內(nèi)地圖（1）分類頁規(guī)則
l 分類頁sitemap鏈接命名http://www.example.com/sitemap/category-sitemap.xml
l url只放置首頁以及分類頁的鏈接
l lastmod為更新時間
l changefreq設(shè)置為hourly
l priority首頁設(shè)置為0.6，分類頁設(shè)置為0.7
l href為對應(yīng)的M版鏈接
l M版的urlset中去掉xmlns:xhtml="
http://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="
http://m.rosegal.com" />
l 設(shè)置定時任務(wù)每日更新
l 分類頁URL必須是200返回狀態(tài)碼，當URL請求變成404錯誤時則自動每日更新過濾掉
樣例：
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="
http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="
http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com</loc> <lastmod>2001-01-01</lastmod> <changefreq>hourly</changefreq> <priority>0.6</priority> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com" /> </url> <url> <loc>http://www.example.com/category-url</loc> <lastmod>2001-01-01</lastmod> <changefreq>hourly</changefreq> <priority>0.7</priority> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/category-url" /> </url> </urlset>
1.4.2. 搜索頁規(guī)則 l（響應(yīng)式可以去掉這一條）
l 搜索頁sitemap鏈接命名規(guī)則如下，每個xml 放1W個鏈接：
http://www.example.com/sitemap/keywords-關(guān)鍵詞所屬分類-分類ID-01-sitemap.xml
http://www.example.com/sitemap/keywords-關(guān)鍵詞所屬分類-分類ID-02-sitemap.xml
...
http://www.example.com/sitemap/keywords-關(guān)鍵詞所屬分類-分類ID-99-sitemap.xml
l url只放置搜索頁的鏈接
l lastmod為更新時間
l changefreq設(shè)置為hourly
l priority設(shè)置為0.7
l href為對應(yīng)的M版鏈接
l M版的urlset中去掉xmlns:xhtml="
http://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" />設(shè)置定時任務(wù)每日更新
l 搜索頁URL必須是200返回狀態(tài)碼，當URL請求變成404錯誤時則自動每日更新過濾掉
樣例：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="
http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="
http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/keywords</loc>
<lastmod>2001-01-01</lastmod>
<changefreq>hourly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" />
</url>
</urlset>
1.4.3. 產(chǎn)品頁
l 產(chǎn)品頁sitemap鏈接命名規(guī)則如下，每個xml 放5K個鏈接：
http://www.example.com/sitemap/products-關(guān)鍵詞所屬分類-分類ID-01-sitemap.xml
http://www.example.com/sitemap/products-關(guān)鍵詞所屬分類-分類ID-02-sitemap.xml
...
http://www.example.com/sitemap/products-關(guān)鍵詞所屬分類-分類ID-99-sitemap.xml
l url只放置產(chǎn)品頁的鏈接
l lastmod為更新時間
l changefreq設(shè)置為hourly
l priority設(shè)置為0.8
l href為對應(yīng)的M版鏈接
l M版的urlset中去掉xmlns:xhtml="
http://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/products" /> l（響應(yīng)式可以去掉這一條）
l 設(shè)置定時任務(wù)每日更新
l 產(chǎn)品頁URL必須是200返回狀態(tài)碼，當URL請求變成404錯誤時則自動每日更新過濾掉
樣例：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="
http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="
http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/product</loc>
<lastmod>2001-01-01</lastmod>
<changefreq>hourly</changefreq>
<priority>0.8</priority>
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/product" />
</url>
</urlset>
1.4.5. 關(guān)鍵詞頁
l 搜索頁導航型sitemap鏈接命名：
http://www.example.com/sitemap/keywords-頂級分類-sitemap.xml
l loc放置該頂級分類下各個子分類的搜索頁sitemap鏈接
l lastmod為更新時間
l 設(shè)置定時任務(wù)每日更新
l M版的urlset中去掉xmlns:xhtml="
http://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" /> l（響應(yīng)式可以去掉這一條）
l 設(shè)置定時任務(wù)每日更新
l 關(guān)鍵詞頁URL必須是200返回狀態(tài)碼，當URL請求變成404錯誤時則自動每日更新過濾掉
樣例：
<sitemapindex xmlns="
http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>
http://www.example.com/sitemap/keywords-關(guān)鍵詞所屬分類-分類ID-01-sitemap.xml
</loc>
<lastmod>2001-01-01</lastmod>
</sitemap>
<sitemap>
<loc>
http://www.example.com/sitemap/keywords-關(guān)鍵詞所屬分類-分類ID-02-sitemap.xml
</loc>
<lastmod>2001-01-01</lastmod>
</sitemap>
</sitemapindex>
1.4.6. robots.txtl 網(wǎng)站未開放前，不能讓任何搜索引擎收錄頁面
robots.txt文件內(nèi)容為：
User-Agent: *
Disallow: /
l 網(wǎng)站開放后，根據(jù)seo部門的規(guī)則添加具體內(nèi)容
1.4.7. 站內(nèi)鏈接請求碼l 正常頁面，返回200
l 跳轉(zhuǎn)頁面，永久性跳轉(zhuǎn)返回301，短暫性跳轉(zhuǎn)返回302
l 錯誤頁面，返回404
l 服務(wù)器錯誤，返回500
l 短暫性不可訪問，返回503
l 屏蔽訪問，返回403
1.4.8. 針對重復內(nèi)容Canonical標簽優(yōu)化將屬性為 rel="canonical" 的 <link> 元素添加到這些網(wǎng)頁的 <head> 部分：
href屬性應(yīng)該是當前頁面的url(可訪問的)
<link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" />
避免錯誤：使用絕對路徑，而非包含 rel="canonical" 鏈接元素的相對路徑。
建議使用的結(jié)構(gòu)：https://www.example.com/dresses/green/greendresss.html
不建議使用的結(jié)構(gòu)：/dresses/green/greendress.html。
1.5 響應(yīng)式設(shè)計
說明隨著移動互聯(lián)網(wǎng)技術(shù)的發(fā)展，響應(yīng)式設(shè)計也日漸成為主流，并且它的好處也日益呈現(xiàn)在廣大開發(fā)者們面前，那么它對SEO又有哪些影響呢？
采用響應(yīng)式設(shè)計的網(wǎng)站，有以下優(yōu)勢：1.主要是了提升用戶體驗2. SEO策略一致性（無網(wǎng)頁版本區(qū)分）3. 避免重復內(nèi)容4. 網(wǎng)頁原有鏈接得以保留5. 搜索引擎青睞但是我們需要按照響應(yīng)式設(shè)計的規(guī)范和標準來開發(fā)網(wǎng)站才能有這些優(yōu)勢，下面列舉一些常見的響應(yīng)式設(shè)計設(shè)計的規(guī)范。
內(nèi)容寬度不能超過屏幕顯示范圍1、不要讓用戶必須橫向滾動網(wǎng)頁或縮小顯示比例才能看到相應(yīng)內(nèi)容。2、對網(wǎng)頁元素使用相對寬度值, 以百分比形式設(shè)置網(wǎng)頁元素 CSS值，將有助于網(wǎng)頁在各種尺寸的設(shè)備上正確呈現(xiàn)。3、使用自適應(yīng)設(shè)計，在所有設(shè)備上正常顯示內(nèi)容。1.設(shè)置視口 TL;DR 使用元視口代碼控制瀏覽器視口的寬度和縮放比例。
添加 width=device-width 以便與屏幕寬度（以設(shè)備無關(guān)像素為單位）進行匹配。
添加 initial-scale=1 以便將 CSS 像素與設(shè)備無關(guān)像素的比例設(shè)為 1:1。
確保在不停用用戶縮放功能的情況下，您的網(wǎng)頁也可以訪問。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. 調(diào)整內(nèi)容大小，使其適合視口TL;DR
請勿使用較大的固定寬度元素。
在任何視口寬度下，內(nèi)容均應(yīng)正常顯示。
使用 CSS 媒體查詢?yōu)椴煌叽绲钠聊粦?yīng)用不同樣式。
2. 將 CSS 媒體查詢用于自適應(yīng)設(shè)計TL;DR
媒體查詢可用于根據(jù)設(shè)備特點應(yīng)用樣式。
優(yōu)先使用 min-width（而非 min-device-width），以確保實現(xiàn)最寬闊的視覺體驗。
為元素使用相對尺寸，以免破壞版式完整性。
3. 根據(jù)視口大小應(yīng)用媒體查詢
@media (query) {
/* CSS Rules used when query matches */
}
min-device-width 注意事項：盡管開發(fā)者也可以根據(jù) *-device-width 創(chuàng)建查詢，但是我們強烈建議不要這么做。
4. 使用相對單位
Not recommended — fixed width
div.fullWidth {
width: 320px;
margin-left: auto;
margin-right: auto;
}
Recommended — responsive width
div.fullWidth {
width: 100%;
}
5. 如何選擇斷點TL;DR根據(jù)內(nèi)容創(chuàng)建斷點，絕對不要根據(jù)具體設(shè)備、產(chǎn)品或品牌來創(chuàng)建。
從針對最小的移動設(shè)備進行設(shè)計入手，然后隨著屏幕類型不斷增加而逐漸改善體驗。
使每行的文字最多為 70 或 80 個字符左右。
6. 優(yōu)化文本，提高可讀性理想欄目的每一行應(yīng)該包含 70 到 80 個字符（大約 8 到 10 個英文單詞），因此，每次文本塊寬度超過 10 個單詞時，就應(yīng)考慮添加斷點。
7. 絕不能完全隱藏內(nèi)容參考文檔：
https://goo.gl/yU21b3文字不能設(shè)置的太小，避免導致影響閱讀1、設(shè)置清晰易讀的字體大小，按PageSpeed Insights規(guī)定要求大小和間距定義。
2、更正排版縮放比例，以便字體可以按相互之間的關(guān)系更改大小。請確保您的視口允許字體大小在所有設(shè)備上正常調(diào)整。
3、使用自適應(yīng)設(shè)計，在所有設(shè)備上正常顯示內(nèi)容。使用16 CSS像素的基準字體大小。根據(jù)要使用的字體的屬性按需調(diào)整字體大小。
使用相對于基準字體的字體大小定義排版比例。(rem)
每行文字的字符之間需要留出一定的垂直空間，而且還可能需要根據(jù)每種字體進行不同的調(diào)整。我們通常建議您使用瀏覽器默認的行高1.2em。
限制所用字體的數(shù)量以及排版比例：過多字體和字體大小會導致網(wǎng)頁布局雜亂且過于復雜。
參考文檔：
https://goo.gl/25FkAR問題：未設(shè)置視口值解決：1、鏈接和按鈕應(yīng)保持適當?shù)某叽绾烷g距，以便用戶無需縮放即可使用這些元素。
2、優(yōu)化您網(wǎng)頁的版式，調(diào)整您網(wǎng)頁的版式，使鏈接和按鈕相隔足夠的距離。設(shè)置視口TL;DR
使用元視口代碼控制瀏覽器視口的寬度和縮放比例。
添加 width=device-width 以便與屏幕寬度（以設(shè)備無關(guān)像素為單位）進行匹配。
添加 initial-scale=1 以便將 CSS 像素與設(shè)備無關(guān)像素的比例設(shè)為 1:1。
確保在不停用用戶縮放功能的情況下，您的網(wǎng)頁也可以訪問。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
參考文檔：
https://goo.gl/yU21b3可點擊元素之間的距離不能設(shè)置的太近1、調(diào)整鏈接和按鈕應(yīng)保持適當?shù)某叽绾烷g距，以便用戶無需縮放即可使用這些元素。
2、調(diào)整優(yōu)化網(wǎng)頁的版式，使鏈接和按鈕相隔足夠的距離。
3、使用自適應(yīng)設(shè)計，在所有設(shè)備上正常顯示內(nèi)容。確保網(wǎng)站上最重要的點按目標（用戶最常用的目標）足夠大，即高/寬至少要達到48 CSS像素（如果您已正確配置您的視口），以便用戶輕松點按。
參考文檔：
https://goo.gl/A643Zq2. 檢測工具
說明：符合 W3C 標準及 SEO 優(yōu)化，我們在遵守本手冊規(guī)范的基本之上，上線的網(wǎng)站都要使用以下工具來檢查代碼，雖說優(yōu)化沒有100分，但我們要盡量符合要求。
html規(guī)范驗證：使用
https://validator.w3.org/CSS驗證：使用
http://jigsaw.w3.org/css-validator/圖片壓縮驗證：使用
https://tinypng.com/網(wǎng)頁速度驗證：使用
https://tools.pingdom.com/使用
https://developers.google.com/speed/pagespeed/insights/使用
http://yslow.org/
在線咨詢