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:

1. How can we set the right values?
2. Do we have to request somehow to google to update the values in case those were taken before our update?

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.

1. Can the issue be that when Google index it, we do not have any translation available for its robot?

CodePudding user response：

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-Language in 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:

• Using history.pushState() to change the URL when loading new content (or changing the language)
• Using <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.
• Configuring your web server to serve your single page app for every valid URL and making sure your app loads the correct content based on the initial URL.
• Implementing server side rendering (also called pre-rendering) to make your site more accessible to bots. Googlebot is the only search engine bot advanced enough to execute the JS. Even for Googlebot, indexing will be worse and slower if you require Googlebot to render it rather than doing so server side.
• Avoiding changing the content you want indexed in search engines based on user interaction. Even when Googlebot executes JavaScript it doesn't simulate user behavior such as clicking or scrolling.

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.