Breadcrumb (seo-breadcrumb)

Syntax

<!-- one seo breadcrumb for each fragment -->
<seo-breadcrumb
  name="Products"
  url="http://mywebsite.com/products"
></seo-breadcrumb>

Props

• name: The name to display in the google result for this part of the breadcrumb
• url: The url of this part of the breadcrumb
• position: (optional) The position of this fragment in the breadcrumb hierarchy

Impact

• Google: Add readable and clickable breadcrumbs to your search results

Tip

If you are makin a single page application then you can define a seo-breadcrumb in every component. Every time the user (=search bot) switch to anoter page anoter component will change and the breadcrumb will be updated !

Example

To have the same result as in the previous image you could do this

Try this fiddle

demo.html

<seo-breadcrumb name="Arts" url="http://www.theguardian.com/arts"></seo-breadcrumb>
<seo-breadcrumb name="Books" url="http://www.theguardian.com/arts/books"></seo-breadcrumb>
<seo-breadcrumb name="Peotry" url="http://www.theguardian.com/arts/books/poetry"></seo-breadcrumb>

demo.js

Vue.use(VueSEO);

new Vue({
  el: 'body',
})