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

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

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

决定你网站的url结构

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

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

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

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

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

<title>...</title>

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

<title>...</title>

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

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

HTTP/1.1 200 OK

Content-Type: text/html

Vary: User-Agent

Content-Length: 5710

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

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