If you still have a separate mobile ecommerce site, meaning that you have different URLs for mobile and desktop, your search engine optimization requires extra effort.
Thanks to Google’s mobile-first index — which ranks your desktop and mobile sites based on signals from your mobile site — implementing special annotation metadata and redirects is more important than ever.
Ecommerce site owners tend to dismiss mobile shopping, as there are typically fewer conversions on smartphones. But mobile shopping is on the rise. During November and December last year, shoppers on mobile devices accounted for 60 percent of the traffic and 40 percent of the sales online, according to Adobe’s holiday 2018 study.
If … you have different URLs for mobile and desktop, your search engine optimization requires extra effort.
Thus optimizing a site for mobile search should be a priority. Search remains a gateway for shoppers. When they need to fit finding gift ideas and making purchases into their busy lives, they probably Google it on their phones.
Those shoppers won’t find your site when they’re desperate to make a quick gift decision if it isn’t optimized for mobile search.
Responsive sites are, for the most part, already suitable for mobile search, presuming they use the meta viewport tag and pass Google’s mobile-friendly test. But when your mobile URLs are different, follow these steps.
Annotation Metadata
Annotations are a single line of code that’s inserted, in this case, in both mobile and desktop pages. They help search engines understand the relationship between the two pages of similar content.
If the URL for the desktop page is https://www.example.com/product-page-42/, you would include a link alternate tag that points to the same page on the mobile version, such as this:
<link rel="alternate" href="https://m.example.com/product-page-42/">
On that mobile page with the URL https://m.example.com/product-page-42/, you’d include a link canonical tag that points to the same page on the desktop version of the site, as in:
<link rel="canonical" href="https://www.example.com/product-page-42/">
Use the annotations to refer to the pages that are the most similar. In this case, the desktop /product-page-42/ is paired with the mobile /product-page-42/ because the content is the same. You wouldn’t use annotation metadata to establish a relationship between the mobile /product-page-42/ and the desktop home page, for example.
You can also implement annotations in your XML sitemap, but this isn’t seen in practice as often and can be difficult to test and troubleshoot.
Automatic Redirection
Automatic redirection is more complicated. You want your server to detect the shopper’s user agent requesting the page — such as a Chrome desktop browser or a mobile Safari browser — and serve the correct mobile or desktop version when he enters your site. This is an “HTTP redirect.” Redirects can also be done in JavaScript for this purpose, but they are slower than HTTP redirects and, thus, should be a secondary option.
In this way, shoppers using a smartphone would be redirected to the mobile version of the site, even if they type or click a desktop URL.
Redirects that work in one direction only, typically from desktop to mobile, are “unidirectional redirects.” “Bidirectional redirects” are better, however, as they ensure that shoppers on a desktop computer who request a mobile URL are redirected to the desktop version.
Always redirect to the relevant page for that device type. If a mobile shopper enters on the desktop page at http://www.example.com/product-page-42/, redirect him to the mobile version of that same page at http://m.example.com/product-page-42/, not the home page.
In the footer, include HTML links between the different versions of the same page, as well. These links enable shoppers to choose the version of the site — desktop or mobile. Occasionally it’s helpful to use the desktop version of a site from a mobile device for additional functionality or content.
For that reason, it’s important to redirect based on device type on the entry page only. After the first page, if a visitor chooses a type that does not match her device, your site needs to honor that desire.
For more, see the “Separate URLs” article on Google’s developers’ site.