Angular 7 SSR use navigator to define parameters

Question

I have an angular 7 universal app in two languages, Spanish and English. I want to display the site in the user's configured language. In order to achieve that I have the following setup.

First my app.component.html which only has a router-outlet like this:

<router-outlet></router-outlet>

in my app-routing.module.ts I have the following configuration:

{
        path: 'es',
        data: { lang: 'es' },
        component: LanguageComponent,
        children: [
            {
                path: '',
                loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
            },
            {
                path: '**',
                redirectTo: 'pagina-no-encontrada'
            }
        ],
    },
    {
        path: 'en',
        data: { lang: 'en' },
        component: LanguageComponent,
        children: [
            {
                path: '',
                loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
            },
            {
                path: '**',
                redirectTo: 'page-not-found'
            }
        ],
    },
    {
        path: '',
        component: LanguageComponent,
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/es/pagina-no-encontrada',
        pathMatch: 'full'
    },

I do it that way to let the LanguageComponent detect the user language and redirect to the relevant /es or /en.

My language.component.ts has the following logic:

import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID, Renderer2 } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { TranslateService } from '../services/translate.service';
import { Subscription } from 'rxjs/internal/Subscription';
import { LANG_EN_NAME } from '../translate/lang-en';
import { LANG_ES_NAME } from '../translate/lang-es';
import { isPlatformBrowser, DOCUMENT } from '@angular/common';

@Component({
    selector: 'app-language',
    templateUrl: 'language.component.html',
    styleUrls: ['language.component.scss']
})
export class LanguageComponent implements OnInit, OnDestroy {
    private subscription: Subscription;
    private isPlatformBrowser: boolean;

    constructor(private activatedRoute: ActivatedRoute,
                private translate: TranslateService,
                private router: Router,
                @Inject(PLATFORM_ID) private platformId: Object) {}

    ngOnInit(): void {
        this.isPlatformBrowser = isPlatformBrowser(this.platformId);
        this.subscription = this.activatedRoute.data.subscribe((d: Data) => {
            if (d['lang'] !== undefined) {
                this.translate.use(d['lang']);
            } else if (this.isPlatformBrowser && navigator) {
                const userLanguage = navigator.language;
                if (userLanguage) {
                    if (userLanguage.startsWith('en')) {
                        this.router.navigateByUrl(LANG_EN_NAME);
                    } else {
                        this.router.navigateByUrl(LANG_ES_NAME);
                    }
                }
            } else {
                this.router.navigateByUrl(LANG_ES_NAME);
            }
        });
    }

    ngOnDestroy(): void {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}

so I can successfully detect the language via the navigator and display the page by going to the relevant section. On each component such as the HomeComponent within the HomeModule I invoke a SeoService which sets the title, the meta-description and sets the HTML lang tag depending on the language is set.

The problem I have is very weird as it comes to the google search results. Sometimes I get the site having the title displayed in Spanish then the description in english, some other times all English...and all started to happen since I decided to start using the navigator as driver of the language detection.

First I don't know whether my approach is the best to take in this scenario and in case it is, have you come across this problem of google engine language issues?

UPDATE: I think my question goes more towards the fact that in order to perform SSR I need to know the language of the browser of the user. Is it possible to somehow "transfer" that value to the server to perform that rendering? Otherwise I honestly don't know how to know the "user settings" to perform the actual rendering of the page and be "google friendly" if that makes sense