Where To Place Google Search Description On VUE App?
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:
- How can we set the right values?
- Do we have to request somehow to google to update the values in case those were taken before our update?
--------------- EDIT 1 -------------------
Every string on the app, it check the indexes on a dictionary:
If It does not exist, the default behaviour is to print/echo the string of the key
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 -------------------
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.
- Can the issue be that when Google index it, we do not have any translation available for its robot?
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)
- 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.
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.
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present