Bootstrap

Meta data comp vue meta

Vue Meta

Este componente es necesario para inyectar metadata en los elementos de sitios públicos que requieran SEO, vengan cargados desde un API externa y sea utilIzado el router js para hacer el manejo de las url, y usando vue-meta para su implementación. 

	
	<template><div></div></template>
	
	
		var metaDataComp={
	name: 'MetaDataCmp',
	template:'#meta-data-comp-template',
  props: {
   
    title: {
      type: String,
      default: 'Catalogo',
    },
    description: {
      type: String,
      default: 'Un catálogo con descuentos y productos pensado en todo eso que te gusta ¡Acumula puntos y canjea lo que quieras!',
    },
    imgUrl: {
      type: String,
      default: undefined,
    },
    logoUrl: {
      type: String,
      default: undefined,
    },
  },
  data:function() {
    return {
      siteName: "Starter Kit Builder",
      url: window.location.href,
    };
  },
  metaInfo:function() {
    var description = this.truncateDesc(this.description);
    var titleTpl = this.title+' | '+this.siteName;
    return {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: this.title,
      titleTemplate: '%s | '+this.siteName,
      meta: [
        { vmid: 'description', name: 'description', content: description },
        // Open Graph / Facebook
        { vmid: 'og:type', property: 'og:type', content: 'website' },
        { vmid: 'og:site_name', property: 'og:site_name', content: this.siteName },
        { vmid: 'og:url', property: 'og:url', content: this.url },
        { vmid: 'og:title', property: 'og:title', content: titleTpl },
        { vmid: 'og:description', property: 'og:description', content: description },
        { vmid: 'og:image', property: 'og:image', content: this.logoUrl },
        // Twitter
        { vmid: 'twitter:card', name: 'twitter:card', content: this.logoUrl },
        { vmid: 'twitter:url', name: 'twitter:url', content: this.url },
        { vmid: 'twitter:title', name: 'twitter:title', content: titleTpl },
        { vmid: 'twitter:description', name: 'twitter:description', content: description },
        { vmid: 'twitter:image', name: 'twitter:image', content: this.imgUrl },
      ],
     link: [
        { rel: 'canonical', href: this.url },
      ],
			/*
      script: [{
        vmid: 'appLdJSONVM',
        innerHTML: '{ "@context": "http://schema.org","@type": "LocalBusiness",'
                 + `"@id": "${this.url}","name": "${this.title}","url": "${this.url}","description": "${this.description.replace(/[^A-Z0-9]+/ig, ' ')}"}`,
        type: 'application/ld+json',
      }],*/
    };
  },
  methods: {
    truncateDesc:function(desc) {
      return typeof desc === 'string' && desc.length > 150 ? desc.substr(0, 150) : desc;
    },
  },
};