What is wrong with my hreflang tags?

Question

I have recently added German language support to my website and now I want to show German version of my website in search results to German speaking visitors, and English version to all other visitors. I've added this link tags to my default page (https://example.com/):

Desktop

<link rel="canonical" href="https://example.com/">
<link rel="alternate" media="only screen and (max-width:651px)" href="https://m.example.com/">
<link rel="alternate" href="https://example.com/" hreflang="x-default">
<link rel="alternate" href="https://example.com/?hl=de" hreflang="de">

Mobile

<link rel="canonical" href="https://example.com/">
<link rel="alternate" href="https://m.example.com/" hreflang="x-default">
<link rel="alternate" href="https://m.example.com/?hl=de" hreflang="de">

And this hreflang tags for German version (https://example.com/?hl=de):

Desktop

<link rel="canonical" href="https://example.com/">
<link rel="alternate" media="only screen and (max-width:651px)" href="https://m.example.com/?hl=de">
<link rel="alternate" href="https://example.com/" hreflang="x-default">
<link rel="alternate" href="https://example.com/?hl=de" hreflang="de">

Mobile

<link rel="canonical" href="https://example.com/">
<link rel="alternate" href="https://m.example.com/" hreflang="x-default">
<link rel="alternate" href="https://m.example.com/?hl=de" hreflang="de">

But I have a problem. When I search for Youtube on Google, it returns only German version of Youtube (https://www.youtube.com/?gl=DE&hl=de). But when I search for my website, Google shows English version of my website as default and German version as a snippet. What is wrong with my code?

Answer 1

According to the Google recommendations Duplicate content:

Use top-level domains: To help us serve the most appropriate version of a document, use top-level domains whenever possible to handle country-specific content. We're more likely to know that http://www.example.de contains Germany-focused content, for instance, than http://www.example.com/de or http://de.example.com.

According to the Google recommendations Separate URLs:

On the desktop page (http://www.example.com/page-1), add: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1"> and on the mobile page (http://m.example.com/page-1), the required annotation should be: <link rel="canonical" href="http://www.example.com/page-1">

So you need to remove from your Desktips this meta link <link rel="canonical" href="https://example.com/"> .

Answer 2

You implemented incorrect canonical URL.

If you have a single page accessible by multiple URLs, or different pages with similar content (for example, a page with both a mobile and a desktop version), you should explicitly tell Google which URL is authoritative (canonical) for that page.

You have different sites for desktop and mobile, and two languages english and german. They are serving different contents, you should update the canonical URL correspondingly.

Desktop

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

Mobile

<link rel="canonical" href="https://m.example.com/">

Desktop German

<link rel="canonical" href="https://example.com/?hl=de">

Mobile German

<link rel="canonical" href="https://m.example.com/?hl=de">