|
你的網(wǎng)站在搜索引擎中表現(xiàn)怎樣很大程度上依賴于你的你的網(wǎng)站對于不同設(shè)備上的設(shè)計。
下面介紹了怎樣基于URL構(gòu)造來優(yōu)化你的網(wǎng)站對于搜索引擎的支持。
- 決定你網(wǎng)頁的URL構(gòu)造 Determine the URL structure of your webpage
- 響應(yīng)式布局是極度推薦的 Responsive design is most recommended
- 使用
rel='canonical' 和 rel='alternate'對網(wǎng)站的桌面端和手機端進行不同的設(shè)計
使用Vary HTTP 頭部對于一個單一的url來提供對于桌面端和手機端動態(tài)的不同html內(nèi)容
決定你網(wǎng)站的url結(jié)構(gòu)
下面常見的三種網(wǎng)站url結(jié)構(gòu)：
- 響應(yīng)式布局頁面： 提供相同的HTML和一個URL地址，在css中進行設(shè)備詢問來決定頁面在客戶端應(yīng)該怎樣渲染
ex) Desktop and Mobile: http://www./
- 分開的手機端地址: 根據(jù)user-agent將用戶重定向到一個不同的url
ex) Desktop: http://www./ Mobile: http://m./
- 動態(tài)提供: 在一個url上根據(jù)user-agent的不同提供不同的html
- ex) Desktop and Mobile: http://www./
推薦響應(yīng)式頁面布局
響應(yīng)式布局的好處：
- 讓用戶更容易獲取你的頁面以及分享你的頁面
- 不需要根據(jù)用戶代理user-agent來重定向，所以，運行更快
- 對網(wǎng)站和網(wǎng)絡(luò)爬蟲而言維護消費更低
學(xué)習(xí)怎樣使用響應(yīng)式布局請點擊這里： Responsive Layouts
提供分開的url時使用 link[rel=canonical] 和 link[rel=alternate]
同一個頁面在桌面版和手機版中使用不同的URL，將導(dǎo)致用戶和搜索引擎困惑，因為提供的是相同頁面內(nèi)容，但是url完全不同，所以你需要暗示：
- 這兩個url的內(nèi)容是相同的
- 哪一個是手機版本的url
- 哪一個是桌面版本的url
上面的信息可以更好的幫助搜索引擎工作，并且確保用戶尋找他們想在特定設(shè)備上使用時應(yīng)該用哪種形式的url。
對桌面版本使用 link[rel=alternate]
media屬性將幫助搜索引擎了解頁面是特定于小屏幕的。
<title>...</title>
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m./">
對手機版本使用 link[rel=canonical]
<title>...</title>
<link rel="canonical" href="http://www./">
Use Vary HTTP header
為了表明url是基于user-agent而產(chǎn)生不同的html內(nèi)容的，我們需要在HTTP頭部提供Vary: User-Agent。
http://www./ HTTP Header
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
提供了Vary:User-Agent頭部之后，搜索引擎和代理商知道了被傳輸?shù)膬?nèi)容是由用戶代理決定的。
著允許了搜搜索引分開對待桌面版本和手機版本，讓代理商優(yōu)雅地存儲這些內(nèi)容。
了解更多： Building Smartphone-Optimized Websites.
原文 ： https://developers.google.com/web/fundamentals/discovery-and-monetization/search-optimization/url-structure?hl=en
|
