1

I realize there are many similar questions, but I think this consolidates multiple points of confusion. This question follows from the great advice given here. I have a site that has a separate mobile and desktop version, and each version has a separate English and Polish version. So for example

  • English Desktop ~ http://www.example.com/index.html
  • English Mobile ~ http://www.example.com/m/index.html
  • Polish Desktop ~ http://www.example.com/pl/index.html
  • Polish Mobile ~ http://www.example.com/m/pl/index.html

I now know that each should have their own sitemaps, and each sitemap should link to the alternate pages. But have I done this correctly - and if I also want to use link annotation on each html page, then have I done that correctly, examples of my sitemaps structure, truncated to landing page only, for example's sake.

Desktop English Site:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
  <loc>http://www.example.com/</loc>
  <xhtml:link rel="alternate" hreflang="pl" href="http://www.example.com/pl/"/>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/"/>
  <xhtml:link rel="alternate" hreflang="en" media="only screen and (max-width: 640px)" href="http://www.example.com/m/"/>
  <xhtml:link rel="alternate" hreflang="pl" media="only screen and (max-width: 640px)" href="http://www.example.com/m/pl/"/>
</url>

Desktop Polish Site:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
  <loc>http://www.example.com/pl/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/"/>
  <xhtml:link rel="alternate" hreflang="pl" href="http://www.example.com/pl/"/>
  <xhtml:link rel="alternate" hreflang="en" media="only screen and (max-width: 640px)" href="http://www.example.com/m/"/>
  <xhtml:link rel="alternate" hreflang="pl" media="only screen and (max-width: 640px)" href="http://www.example.com/m/pl/"/>
</url> 

Mobile English Site:

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
  <loc>http://www.example.com/m/</loc>
  <mobile:mobile/>
  <xhtml:link rel="alternate" hreflang="pl" media="only screen and (max-width: 640px)" href="http://www.example.com/m/pl/"/>
  <xhtml:link rel="alternate" hreflang="en" media="only screen and (max-width: 640px)" href="http://www.example.com/m/"/>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/"/>
  <xhtml:link rel="alternate" hreflang="pl" href="http://www.example.com/pl/"/>
</url>

Mobile Polish Subsite:

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
  <loc>http://www.example.com/m/pl/</loc>
  <mobile:mobile/>
  <xhtml:link rel="alternate" hreflang="en" media="only screen and (max-width: 640px)" href="http:/www.domain.com/m/"/>
  <xhtml:link rel="alternate" hreflang="pl" media="only screen and (max-width: 640px)" href="http://www.example.com/m/pl/"/>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/"/>
  <xhtml:link rel="alternate" hreflang="pl" href="http://www.example.com/pl/"/>
</url>

And then the following link structure on each page:

On all English Desktop pages:

<link rel="alternate" hreflang="pl" href="http://www.example.com/pl/[corresponding page name].html" />
<link rel="alternate" media="only screen and (max-width: 640px)"  href="http://www.example.com/m/[corresponding page name].html" />

On all Polish Desktop pages:

<link rel="alternate" hreflang="en" href="http://www.example.com/[corresponding page name].html" />
<link rel="alternate" media="only screen and (max-width: 640px)"  href="http://www.example.com/m/pl/[corresponding page name].html" />

On all English Mobile pages:

<link rel="canonical href="http://www.example.com/[corresponding desktop page].html" />
<link rel="alternate" hreflang="pl" media="only screen and (max-width: 640px)" href="http://www.example.com/m/pl/[corresponding page name].html" />
<link rel="alternate" href="http://www.example.com/[corresponding desktop page].html" />

On all Polish Mobile pages:

<link rel="canonical href="http://www.example.com/pl/[corresponding desktop page].html" />
<link rel="alternate" hreflang="en" media="only screen and (max-width: 640px)" href="http://www.example.com/m/[corresponding page name].html" />
<link rel="alternate" href="http://www.example.com/pl/[corresponding desktop page].html" />

Have I missed anything, or misunderstood? It seems a bit weird that I should have the canonical link pointing back to the corresponding desktop page and also an alternate link pointing to the same page. Also, should I include an alternate link in each mobile page to the desktop page in the alternative language, and an alternate link in each desktop page to the alternative language mobile site. Confusing? Yes! Any advice welcome!

  • Critical Strike on TEXT. – Simon Hayter Nov 2 '15 at 15:37
  • huh? What does that mean? :-) – asimovwasright Nov 2 '15 at 16:18
  • It means, people may get half way and not bother reading the rest, its a lot to look at. Let me minimise it for you. – Simon Hayter Nov 2 '15 at 16:58
  • There you go, reduced from 202 lines to just over 80. – Simon Hayter Nov 2 '15 at 17:11
  • By the way, you had some typos http://example.com/m/ (missing www.) and www.example missing .com, I'm assuming the live files are correct and this was a renaming of the domain and then copying and pasting at fault. – Simon Hayter Nov 2 '15 at 17:16
2
+50

The solution you're looking for is actually a lot less painstaking than your example makes it seem. I'll start from the top and work my way down with explanations. For sake of ease, I'm going to assume the website is constructed from static files hosted on a remote fileserver.

Point #1 - Structure: I would strongly encourage a bit of restructuring. Create two separate directories within the root, one for English pages and the other for Polish pages. The structure should follow this general form: http://www.example.com/en/ and http://www.example.com/pl/. If you look at major brands like Nike, e-commerce platforms like Etsy or organizations like Mozilla, they structure their websites in a similar fashion, which is either by country, language or a combination of both. Depending on your industry and/or products/services, this setup could have a number of benefits down the road if you expand your website and want to encompass more languages. Food for thought.

Point #2 - Mobile: Within each respective language's directory, create another directory for mobile pages. The structure should follow this general form: http://www.example.com/en/m/ and http://www.example.com/pl/m/. This establishes a clearer hierarchy: Language -> Device Type.

Point #3 - XML Sitemaps: I fundamentally disagree with this answer. Four XML sitemaps are not better than one because separation of concerns doesn't really apply here. A sitemap is just that, a map of the whole website. Yes, it's cumbersome. And I'm not saying there aren't legitimate cases when having multiple sitemaps makes logical sense but that's usually when you're dealing with several subdomains, which you're not, so I just don't see the justification for it here. There's a reason why you can specify language annotations and mobile annotations in an XML sitemap, so save yourself the trouble and put everything in one neat, organized and well-formed XML document. This is what it would look like with annotations for both language and mobile.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">

<url>
    <loc>http://www.example.com/en/index.html</loc>
    <xhtml:link
           rel="alternate"
           media="only screen and (max-width: 640px)"
           href="http://www.example.com/en/m/index.html" />
    <xhtml:link
           rel="alternate"
           hreflang="pl"
           href="http://www.example.com/pl/index.html" />
    <xhtml:link
           rel="alternate"
           hreflang="en"
           href="http://www.example.com/en/index.html" />
</url>
<url>
    <loc>http://www.example.com/pl/index.html</loc>
    <xhtml:link
           rel="alternate"
           media="only screen and (max-width: 640px)"
           href="http://www.example.com/pl/m/index.html" />
    <xhtml:link
           rel="alternate"
           hreflang="en"
           href="http://www.example.com/en/index.html" />
    <xhtml:link
           rel="alternate"
           hreflang="pl"
           href="http://www.example.com/pl/index.html" />
</url>
</urlset>

Important Notes:

  1. You only need to add desktop URLs to <loc> tags. Mobile is taken care of by default when you add the <link rel="canonical"> tag to the mobile page. However, if you believe you're going to add more languages down the road, then perhaps you should add both desktop and mobile URLs to the sitemap. This is obviously at your discretion.
  2. Each mobile page only needs one <link rel="canonical"> tag that points to the respective desktop page.
  3. Each mobile page only needs one <link rel="alternate"> tag that points to the respective language version (for mobile, of course). Again, if you decide to add more languages down the road, consider adding this in the sitemap instead.
  4. Add the link to your XML sitemap in Google Search Console.
  5. Add the link to your XML sitemap to your robots.txt file, for fun.

Conclusion

There's a lot to think about here. As I mentioned before, I would strongly encourage restructuring to reflect the proposed setup. It may create extra short-term work for you but there are long-term advantages. I also encourage you to seriously consider my points on the XML sitemap because that can be a pain if done incorrectly or ineffectively. As with most things, it's better to do it right the first time and save yourself the headache down the road.

  • Thanks for that answer! Restructuring is probably mot going to happen, since the sites share resources using relative paths, so it would take an age to rewrite all src and href attributes :-( In my defense, it was originally a single language site... Can you tell me if not changing the structure will affect SEO? I don't think any other languages will be added in the future. – asimovwasright Nov 8 '15 at 9:06
  • As with most things SEO, there's no empirical, "100% guaranteed" way to know for certain beforehand. The vast majority of SEO is applied via heuristics, so you could be completely fine and have the greatest indexing rate on the Internet, or Googlebot could fumble hard on your website and misinterpret something, causing serious indexing issues. My gut feeling is that you'd likely be fine but as someone who is constantly accounting for edge cases, I offer best practices as strong suggestions because I've seen how devastating simple missteps can be and how long recovery can take. – nburr Nov 8 '15 at 15:59
  • 1
    Agreed. After I wrote my last comment, I thought about the fact that other people might look at the site structure when considering me for a project, so I spent the day reconstructing per your advice. Worth while, I'm sure! Thank you! – asimovwasright Nov 8 '15 at 16:06
  • after more research I have decided to use sitemap only since google strongly advises not to use multiple methods. In that case, should I include mobile urls as <loc> tags in sitemap, and should they still have canonical links to their respective desktop pages in their html? – asimovwasright Nov 11 '15 at 12:46
  • Good catch. In hindsight, I should've made that my primary suggestion and not secondary. Yes, you would include mobile URLs as <loc> tags in the sitemap and yes, there still needs to be a <link rel="canonical"> on the mobile page. So, in essence, you're following the same pattern as before when it was only desktop URLs but now, in the mobile <url> tags, you're just omitting the first <xhtml:link...>, which is the one that's specifying the mobile equivalent. That's already taken care of, everything else will remain the same. – nburr Nov 11 '15 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.