Metas y JSON en Frameworks de JS

Los distintos Frameworks de Javascript 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 en React-Helmet, debemos primero instalar el paquete de 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 (
<div className="App">
<Helmet>
<title>App Title</title>
<meta name="description" content="App Description" />
<meta name="theme-color" content="#008f68" />
</Helmet>
</div>
);
}
export default App;

Vue-Helmet

En Vue el código para las meta etiquetas por medio de vue-helmet sería el siguiente:
<template>
<helmet-provider>
<div>
<helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</helmet>
</div>
</helmet-provider>
</template>
<script>
import { Helmet } from "@jnields/vue-helmet";
export default {
name: 'app',
components: { HelmetProvider, Helmet },
};
</script>

ngx-seo

En el caso de Angular, las meta etiquetas por medio de 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: '<h1>Pagina de Inicio</h1>;'
})
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 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

<Helmet>
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org',
'@type':'Organization',
url:'https://google.com',
name:'Google',
contactPoint: {
'@type':'ContactPoint',
telephone:'01293019413',
contactType:'Customer service'
}
})}
</script>
</Helmet>

Datos estructurados con Vue

Para este caso, recomendaría utilizar vue-jsonld por su sencillez y su compatibilidad con Server Side Rendering.

vue-jsonld para Vue.js

<script>
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}}}
</script>
<template>
<script v-html="jsonld", type="application/ld+json">
</template>

Singleton para Angular

Para añadir JSON-LD en Angular, es conveniente utilizar Singleton, 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.

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 o contratarme.