Comenzamos en: 17d 8h 36m 8s
PLAZAS LIMITADAS

Metas y JSON en Frameworks de JS

Diferentes formas de poner metaetiquetas y datos estructurados en una web de Javascript

Fecha de publicación: 2022-07-01
Última revisión: 2022-07-04

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 descencientes).

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>

ng-Helmet

En el caso de Angular, las meta etiquetas por medio de ng-helmet, se incluyen por medio de este código:

import { NgHelmetModule } from «ng-helmet»;
@NgModule({
imports: [
NgHelmetModule.forRoot({
baseTitle: «| Replay Value»,
}),
],
})
export class AppModule {}

Incluyendo luego en la página el siguiente código con el contenido de las etiquetas:

<div class=»application»>
<ng-helmet>
<title>My Title</title>
<meta charset=»utf-8″ />
</ng-helmet></div>

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.

¿Quieres hacer el Master de SEO Técnico?

Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB

¡Accede al Master de SEO Técnico!
Tal vez te interesen estos artículos:

Si te ha gustado esta publicación, siempre me lo puedes agradecer dándome like en esta publicación de LinkedIn sobre este mismo artículo.