We have developed a vue app with support for different languages. For such, we use the dictionaries of i18n.
Also, on "/public/index.html", we have added the descritions we expect to read on the google search page with the tags:
<meta property="og:title" content="....">
But what we see on google is:
So my questions are:
Thanks
--------------- EDIT 1 -------------------
Every string on the app, it check the indexes on a dictionary:
BF_PRICING_CARD...
If It does not exist, the default behaviour is to print/echo the string of the key
About the og:title: tags. We are using this set:
<meta name="title" content="bla bla">
<meta name="author" content="bla">
<meta name="description" content="bla bla bla">
<meta name="keywords" content="bla bla bla bla bla">
--------------- EDIT 2 -------------------
<title>bla blag</title>
The URL does not change. The language is detected on the browser and then passed to the app as a JS variable to take the right dictionary.
Google cannot index translated content unless you use separate URLs for each language. Google says:
If you prefer to dynamically change content or reroute the user based on language settings, be aware that Google might not find and crawl all your variations. This is because the Googlebot crawler usually originates from the USA. In addition, the crawler sends HTTP requests without setting
Accept-Languagein the request header.
In my experience, Googlebot won't find multiple languages served from the same URL. You need to create multiple URLs for pages. See How should I structure my URLs for both SEO and localization?
When using a single page application framework like Vue, that usually means:
history.pushState() to change the URL when loading new content (or changing the language)<a href=...> links in your pages to tell search engines about other pages. For users you can intercept these clicks and change the content and URL with your JavaScript framework.When you use meta tags, make sure they match the URL. You'll want the <title> tag and the <meta name=description> tags for SEO. If you want your site to look nice when shared on Facebook and Twitter, you'll need to include open graph meta tags for an image and description.