Meta data comp 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; }, }, };