[Basics of a Mobile Website for SMBs] 4: How to Set Up Redirects and Canonicals

TL;DR

For a two-site mobile setup, connect every matching desktop and m-dot page with bi-directional alternate and canonical annotations, then redirect visitors to the mobile version of the content they requested. A single-site setup that varies content by device should send an HTTP Vary header based on user-agent. Correct configuration also helps Google perform skip redirects, so read on for practical ways to prevent faulty routing.

Transcript

JUAN FELIPE RINCON: Hello. Good afternoon. My name is Juan Felipe Rincon. I'm with the Google Search Quality Team out of Dublin. And welcome to the fourth installment of how to optimize your mobile website, particularly targeted at those of you who work in or around small or medium businesses. Over the series of the last four presentations, we've w... Read More

Key Insights

• Google does not prefer one-site or two-site setups for mobile content as long as pages are accessible to Googlebot.
• Bi-directional annotations are necessary for pages with mobile and desktop versions to specify alternate and canonical pages.
• For single-site setups using user-agent detection, it's crucial to include the vary header in HTTP to inform Googlebot of content variations.
• Redirects should lead users to the mobile version of the same content, not just the homepage, to avoid poor user experience.
• Faulty redirects can lead to warnings in search results, which can deter users from clicking on links.
• Providing users the option to switch between mobile and desktop versions can enhance user experience when redirects are not perfect.
• Proper canonicalization and redirects allow Google to perform skip redirects, improving load times and reducing server traffic.
• Webmaster Tools can help identify and debug redirect issues, ensuring that users reach the correct pages.

Questions & Answers

Q: How should redirects and canonicals be configured for a two-site mobile setup?

Add bi-directional annotations to every pair of equivalent desktop and mobile pages. The desktop page should identify the mobile page as an alternate, while the mobile page should identify the desktop page as canonical; redirects should send users to the matching mobile content.

Q: What are bi-directional annotations for desktop and m-dot pages?

They are HTML header tags that connect equivalent desktop and mobile pages in both directions. The desktop page points to its alternate mobile version, and the corresponding m-dot page points back to the desktop page as canonical.

Q: Where must alternate and canonical annotations be added?

Add them to every corresponding pair of pages, not only the homepages. For example, example.com/products and m.example.com/products should contain annotations connecting those two matching pages.

Q: What screen width does the example alternate annotation target?

The example identifies an alternate page intended for a screen with a maximum width of 640 pixels. That annotation on the desktop page points to the corresponding location on m.example.com.

Q: What HTTP header should a single-site mobile setup use?

A site that serves different HTML after detecting the browser should include the HTTP Vary header and specify user-agent. This tells Googlebot that fetching the same page with different user-agents may return different HTTP content.

Q: Does Google prefer a one-site or two-site mobile setup?

Google does not prefer one approach as long as Googlebot can access the pages and assets required to render them. However, separate mobile and desktop sites require additional attention and work to ensure users reach the correct pages.

Q: What is a faulty mobile redirect?

A faulty redirect sends a visitor somewhere other than the mobile version of the content they requested, such as sending every desktop URL to the mobile homepage. These redirects can produce a poor user experience and may trigger warnings in search results.

Q: What should a site serve when a page has no mobile version?

Serve the desktop version of the requested content instead of returning an error page. The site should also offer a way to switch between mobile and desktop versions so users can reach the version they prefer.

Summary & Key Takeaways

• Google does not have a preference for one-site or two-site setups for mobile content, but proper configuration is crucial. Bi-directional annotations link mobile and desktop pages, while the vary header informs Googlebot about content variations based on user-agent. Faulty redirects can lead to warnings in search results, making it essential to ensure users are directed to the correct page.

• Redirects should always lead to the mobile version of the intended content to provide a good user experience. If a mobile version is unavailable, serve the desktop version instead of an error page. Offering users the option to switch between mobile and desktop versions can improve user satisfaction, especially if redirects are not perfectly configured.

• Properly configured redirects and canonical tags allow Google to perform skip redirects, reducing load times and server traffic. Webmaster Tools can help identify redirect issues, ensuring users reach the correct pages. Providing a seamless experience on mobile can significantly impact user engagement and search engine rankings.