Title (seo-title)

Syntax

<seo-title
  value="myTitle"
></seo-title>

Props

• value : The title of the page

Impact

• Google: Sets the title of the search result
• Browser: Sets the title of the window/tab
• OpenGraph/Facebook search: Sets the Title of your shared item

Example 1 (Simple)

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

    When there are two duplicate values, here title, vue-seo apply a policy to determine
    what to do. The default policy is to take the most inner most bottom version

    Here if override is false then the first title is displayed
    if override is true the the content of "specialTitle is used"
  -->
  <seo-title value="This is the default boring title"></seo-title>
  <seo-title v-if="override" :value="specialTitle"></seo-title>
  <label>
    The title is dynamic !: <input type="text" v-model="specialTitle"><br>
    <input type="checkbox" v-model="override">
  </label>
   <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 {
      specialTitle: "This is less boring",
      override: false
    }
  }
})

Example 2 (Complex)

Does not work for now ! This example make uses of Policies, if you don't know about it yet, read THIS

Try this fiddle

demo.html

<!-- 
    This examples shows how a joined policy can be very usefull

    If you are doing a Single page app you can define a seo-title in every node of your routing tree. With the join startegy you can display the contactenation 

    This example simulate a simple router with three pages

    - /
    - /Inner
    - /Inner/Inner2
  -->
  <seo-title value="Company"></seo-title>
  <div v-if="inner">
    <seo-title value="Inner Page"></seo-title>
    <seo-title v-if="inner2" value="Inner2"></seo-title>
  </div>

  <label>
    Go to inner page
    <input type="checkbox" v-model="inner">
  </label>
  <label>
    Go even further
    <input type="checkbox" v-model="inner2">
  </label>
  <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

// We can set the policies for a given key in vue-seo
//
// The available policies are available in the docs

Vue.use(VueSEO, {
  policies: {
    'title': VueSEO.policies.join(' - ', true)
  }
});

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