--- title: "Metaetiquetas y datos estructurados en Frameworks de Javascript - Carlos Sánchez" description: "Código en Javascript para poner metaetiquetas y datos estructurados en vue react o angular" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/metas-json-framework-js/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-react-angular-vue.jpg --- # Metas y JSON en Frameworks de JS Diferentes formas de poner metaetiquetas y datos estructurados en una web de Javascript ![Metas y JSON en Frameworks de JS](https://carlossanchezdonate.com/wp-content/uploads/cover-react-angular-vue.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Metaetiquetas](https://carlossanchezdonate.com/seo-avanzado/metaetiquetas/) , : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) **Fecha de publicación:** : 2022-07-01 **Última revisión:** : 2024-01-16 **Índice** mostrar 1 Meta etiquetas 1.1 React-Helmet 1.2 Vue-Helmet 1.3 ngx-seo 2 Datos Estructurados 2.1 Datos estructurados con React Helmet 2.1.1 JSON de Organization en React 2.2 Datos estructurados con Vue 2.2.1 vue-jsonld para Vue.js 2.3 Singleton para Angular 2.3.1 JSON-LD de Organization en Angular Los [distintos Frameworks de Javascript](https://carlossanchezdonate.com/articulo/react-vue-angular-seo/) tienen sus peculiaridades. Una de ellas es que las metaetiquetas y los datos estructurados no se meten de una forma tan sencilla como en otro tipo de webs. Aquí expongo unas formas sencillas pero eficaces de añadirlas en los Frameworks/librerías más conocidas de JS (que funcionan para sus descendientes). Hay que entender que donde pone React, también vale la implementación en sus sucedáneos como Gatsby o Next, y donde pone Vue también afecta a sus sucedáneos como Gridsome y Nuxt. ## Meta etiquetas ### React-Helmet Para añadir [meta etiquetas](https://carlossanchezdonate.com/seo-avanzado/metaetiquetas/) en React-Helmet, debemos primero instalar el paquete de [react-helmet](https://www.npmjs.com/package/react-helmet) en nuestra web, luego simplemente debemos añadir este código con las metaetiquetas que queramos usar: `import { Helmet } from 'react-helmet'; function App() { return ( App Title ); } export default App;` ### Vue-Helmet En Vue el código para las meta etiquetas por medio de [vue-helmet](https://www.npmjs.com/package/vue-helmet) sería el siguiente: ` My Title import { Helmet } from "@jnields/vue-helmet"; export default { name: 'app', components: { HelmetProvider, Helmet }, }; ` ### ngx-seo En el caso de Angular, las meta etiquetas por medio de [ngx-seo](https://www.npmjs.com/package/@avivharuzi/ngx-seo), se incluyen por medio de este código: `import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxSeoModule } from '@avivharuzi/ngx-seo'; @NgModule({ declarations: [ AppComponent // ... otros componentes ], imports: [ BrowserModule, NgxSeoModule.forRoot({ // Aquí puedes establecer las configuraciones predeterminadas title: 'Título predeterminado | Replay Value', description: 'Descripción predeterminada', // ... otras configuraciones predeterminadas }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ` Incluyendo luego en la página el siguiente código con el contenido de las etiquetas: `import { Component, OnInit } from '@angular/core'; import { NgxSeoService } from '@avivharuzi/ngx-seo'; @Component({ selector: 'app-home', template: 'Pagina de Inicio;' }) export class HomeComponent implements OnInit { constructor(private seoService: NgxSeoService) {} ngOnInit() { this.seoService.updateTitle('Home Page | Replay Value'); this.seoService.updateDescription('Descripción de la página de inicio'); // También puedes actualizar otros metadatos SEO según sea necesario } } ` ## Datos Estructurados La mejor forma de explicar cómo realizar algo en programación es con ejemplos, así que haré los ejemplos con un [Json de Organization](https://schema.org/Organization) en cada una de las ramas. Por cuestión de optimización, recomiendo siempre que vayan en el footer. ### Datos estructurados con React Helmet Ya que he recomendado React Helmet como componente para React y se puede utilizar para este propósito, se puede hacer más o menos sencillo. #### JSON de Organization en React ` {JSON.stringify({ '@context': 'https://schema.org', '@type':'Organization', url:'https://google.com', name:'Google', contactPoint: { '@type':'ContactPoint', telephone:'01293019413', contactType:'Customer service' } })} ` ### Datos estructurados con Vue Para este caso, recomendaría utilizar [vue-jsonld](https://www.npmjs.com/package/vue-jsonld) por su sencillez y su compatibilidad con [Server Side Rendering](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/#ssr). #### vue-jsonld para Vue.js ` export default { data () { const jsonld = { '@context': 'https://schema.org', '@type':'Organization', url:'https://google.com', name:'Google', contactPoint: { '@type':'ContactPoint', telephone:'01293019413', contactType:'Customer service' } ]} return { jsonld}}} ` ### Singleton para Angular Para añadir JSON-LD en Angular, es conveniente utilizar [Singleton](https://angular.io/guide/singleton-services), se puede utilizar AppComponent, pero nos supondría ciertos problemas de optimización. Para la inserción dinámica y más información debido a lo problemático que suele ser Angular, recomiendo [este artículo](https://javascript.plainenglish.io/how-to-use-json-ld-for-advanced-seo-in-angular-63528c98bb91). Ejemplos: #### JSON-LD de Organization en Angular `static orgSchema = () => ({ '@context': 'https://schema.org', '@type':'Organization', url:'https://google.com', name:'Google', contactPoint: { '@type':'ContactPoint', telephone:'01293019413', contactType:'Customer service' });` Recomiendo testear los códigos antes de utilizarlos, son simplemente una ejemplificación, lo ideal es hacerlos dinámicos. Si tienes alguna duda al respecto siempre la puedes consultar en mi canal de [Discord](https://discord.gg/jgzsXYbwGd) o [contratarme](https://carlossanchezdonate.com/servicios-seo/). Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/metas-json-framework-js/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/metas-json-framework-js/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/metas-json-framework-js/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/metas-json-framework-js/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/metas-json-framework-js/) No se te da mal el SEO Técnico **Te falta mi máster**. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB [¡Accede al Máster de SEO Técnico!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [Redireccionar etiquetas, anclas o hash de una URL](https://carlossanchezdonate.com/articulo/redireccionar-etiquetas-anclas-o-hash-de-una-url/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)