网站桌面端和手机端不同url的设置

你的网站在搜索引擎中表现怎样很大程度上依赖于你的你的网站对于不同设备上的设计。

下面介绍了怎样基于URL构造来优化你的网站对于搜索引擎的支持。

• 决定你网页的URL构造 Determine the URL structure of your webpage
• 响应式布局是极度推荐的 Responsive design is most recommended
• 使用 rel='canonical' 和 rel='alternate'对网站的桌面端和手机端进行不同的设计 
• 使用Vary HTTP 头部对于一个单一的url来提供对于桌面端和手机端动态的不同html内容

决定你网站的url结构

下面常见的三种网站url结构：

1. 响应式布局页面： 提供相同的HTML和一个URL地址，在css中进行设备询问来决定页面在客户端应该怎样渲染
   ex) Desktop and Mobile: http://www.example.com/
2. 分开的手机端地址: 根据user-agent将用户重定向到一个不同的url
   ex) Desktop: http://www.example.com/ Mobile: http://m.example.com/
3. 动态提供: 在一个url上根据user-agent的不同提供不同的html
4. ex) Desktop and Mobile: http://www.example.com/

推荐响应式页面布局

响应式布局的好处：

• 让用户更容易获取你的页面以及分享你的页面
• 不需要根据用户代理user-agent来重定向，所以，运行更快
• 对网站和网络爬虫而言维护消费更低

学习怎样使用响应式布局请点击这里： Responsive Layouts

提供分开的url时使用 link[rel=canonical] 和 link[rel=alternate]

同一个页面在桌面版和手机版中使用不同的URL，将导致用户和搜索引擎困惑，因为提供的是相同页面内容，但是url完全不同，所以你需要暗示：

• 这两个url的内容是相同的
• 哪一个是手机版本的url
• 哪一个是桌面版本的url

上面的信息可以更好的帮助搜索引擎工作，并且确保用户寻找他们想在特定设备上使用时应该用哪种形式的url。

对桌面版本使用 link[rel=alternate]

media属性将帮助搜索引擎了解页面是特定于小屏幕的。

<title>...</title>
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">

对手机版本使用 link[rel=canonical]

<title>...</title>
<link rel="canonical" href="http://www.example.com/">

Use Vary HTTP header

为了表明url是基于user-agent而产生不同的html内容的，我们需要在HTTP头部提供Vary: User-Agent。

http://www.example.com/ HTTP Header

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710

提供了Vary:User-Agent头部之后，搜索引擎和代理商知道了被传输的内容是由用户代理决定的。

着允许了搜搜索引分开对待桌面版本和手机版本，让代理商优雅地存储这些内容。

了解更多： Building Smartphone-Optimized Websites.

原文 ： https://developers.google.com/web/fundamentals/discovery-and-monetization/search-optimization/url-structure?hl=en