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

Try this fiddle

demo.html

<!-- 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>

demo.js

Vue.use(VueSEO);

new Vue({
  el: 'body',
  data () {
    return {
      langs: false
    }
  }
})