Lang (seo-lang
)
This components is here to warn search engines your page is available in other languages
Syntax
<seo-lang code="en" url="myenurl.com" current></seo-lang>
Props
- code : The code for this language
- url : The url of the equivalent page
- current: Tells if this is the current displayed language
Impact
- Google:
- Add Hreflang tags, You can read this
- OpenGraph / Facebook Search:
- Add locale to your open graph
- Add alternative locales
Example
<!-- these tags are behaving the same way as normal components
- You can use v-if
- You can bind dynamic properties
- Of course v-show does not have any effect
-->
<seo-lang v-if="langs" code="fr" url="google.fr"></seo-lang>
<seo-lang v-if="langs" code="de" url="google.de" current></seo-lang>
<seo-lang v-if="langs" code="en" url="google.com"></seo-lang>
<button
@click="langs = !langs"
>
Toogle multiple langs
{{ langs?'enabled':'disabled'}}
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<script src="https://rawgit.com/GuillaumeLeclerc/vue-seo/master/index.js"></script>
Vue.use(VueSEO);
new Vue({
el: 'body',
data () {
return {
langs: false
}
}
})