Determine URL structure of your webpage
Responsive Web Design
serves the same HTML for one URL and uses CS media quries to determine how the content is rendered on the client side.
Desktop and Mobile: http://www.example.com/
Separate mobile site
redirects users to a different URL depending on the user-agent
Desktop: http://www.example.com/
Mobile: http://m.example.com/
Dynamic serving
serves different HTML for one URL depending on the user-agent
Desktop and Mobile: http://www.example.com/
The best approach we recommend is to use responsive web design
Using link[rel=canonical] and link[rel=alternate] when serving from separate URLs
Serving similar contents on a desktop version and a mobile version at different URLs may cause confusion for both users and sertch engines because it's not obvious for viewers that they are intended to be identical. You should indicate:
- Contents of those 2 URLs are identical
- Which is mobile version
- Which is desktop version
This information can help search engines better index content and ensure users find what they're looking for in a format that works for their device.
Use link[rel=alternate] for desktop version
On desktop page, indicate that there's a mobile version on a different URL by adding link tag with rel="alternate" pointing to mobile version URL with href. By adding media attribute with value of "only screen and (max-width: 640px)" will help search engines understand that this is explicitly targeting small screens.
<title>...</title>
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">
Use link[rel=canonical] for mobile version
On mobile specific pages, indicate that there's a desktop version at a different URL by adding link tag with rel="canonical" pointing to desktop version URL with href.
<title>...</title>
<link rel="canonical" href="http://www.example.com/">
Use Vary HTTP header for device oriented serving site
By letting search engines know that the content varies depending on user agent, they can optimize search results for the user agent that is sending queries.
Use Vary HTTP header
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710