I have developed a web application in angular15 and I have used ngx-translate to make it multilingual. The problem is that when I search for it on google the description is in English regardless of the language of the browser or the search engine. I would like to know if it is possible that the description changes according to the language of the browser. Or failing that it appears in Spanish. I also have the meta tag "description" but the search engine is not showing it, instead it shows my first <h1> and <p>.
Thank you in advance.
My relevant index.html is as follows:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Tienda</title>
<meta name="description" content="Descripcion de la tienda en español">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
And my component that handles language:
export class MyComponent {
defaultLanguage:string = 'es';
additionalLanguages:string[] = ['en', 'fr', 'pt'];
languages: string[] = [this.defaultLanguage].concat(this.additionalLanguages);
constructor(
private _translate:TranslateService
){
this.defaultLanguage = this.getDefaultLanguage();
}
ngOnInit(): void {
this.setDefaultLanguage();
}
getDefaultLanguage():string{
let def = 'es';
if(this.languages.includes(navigator.language)) def = navigator.language;
else if(this.languages.includes(navigator.language.substring(0,2))) def = navigator.language.substring(0,2);
return def
}
setDefaultLanguage():void {
this._translate.setDefaultLang(this.defaultLanguage);
this._translate.addLangs(this.additionalLanguages);
this._translate.use(this.defaultLanguage);
}
setCustomLanguage(languageCode:string):void {
this._translate.use(languageCode);
this.setLanguageCookie(languageCode);
}
}
