Integración de React Helmet para mejorar el SEO con meta etiquetas

Meta tags del componente Helmet:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@TU_USER"/>
<meta name="twitter:creator" content="@TU_USER"/>
<meta name="twitter:title" content="Platzi Conf Store"/>
<meta name="twitter:description" content="Platzi Conf Store"/>
<meta
  name="twitter:image"
  content="https://s3.amazonaws.com/gndx.dev/gndxdev.png"
/>
<meta property="og:title" content="Platzi Conf Store"/>
<meta property="og:description" content="Platzi Conf Store"/>
<meta
  property="og:image"
  content="https://s3.amazonaws.com/gndx.dev/gndxdev.png"
/>
<meta property="og:url" content="platzistore.xyz" />
<meta property="og:site_name" content="Platzi Conf Store" />
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="ID_APP_FACEBOOK" />

Así quedo mi código, cree un componente para los meta datos.

import React from 'react';
import { Helmet } from 'react-helmet';

const MetaHead = ({ title, description, image, url }) => (
  <Helmet>
    <title>{`MocaFood - ${title}`}</title>
    <meta name="description" content={description} />
    <meta
      name="robots"
      content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"
    />
    <link rel="canonical" href={url} />
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content={`MocaFood - ${title}`} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={url} />
    <meta property="og:site_name" content="MocaFood" />
    <meta property="og:image" content={image} />
    <meta property="og:image:secure_url" content={image} />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="720" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@davecast_" />
    <meta name="twitter:creator" content="@davecast_" />
    <meta name="twitter:title" content={`MocaFood ${title}`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={image} />
  </Helmet>
);

export default MetaHead;

Y luego lo uso donde quiera pasando los datos que se requieran

import React from 'react';
import initialState from '../initialState';

import Products from '../components/Products';
import MetaHead from '../components/MetaHead';

const meta = (
  <MetaHead
    title="Productos"
    description="Encuentra todos tus productos favoritos"
    image="https://davecast.s3.amazonaws.com/avatarnegativo.jpg"
    url="https://mocafood.xyz/"
  />
);

const Home = () => (
  <>
    {meta}
    <Products products={initialState.products} />
  </>
);

export default Home;

En NextJS no es necesario instalar Helmet. Para mejorar el SEO, podemos usar el componente Head que viene por defecto en la instalación de Next.

https://nextjs.org/docs/api-reference/next/head

Comando del video

npm install react-helmet --save

Les sugiero que tambien agreguen estas etiquetas

• <meta name=“description” content=“Descripcion de la pagina en la que esta el usuario” />
• <meta name=“keywords” content=“E-commerce,HTML, CSS, JavaScript, React” />
• <meta name=“author” content=“Su nombre” />

Me gusta hacerlo de esta manera:

import React from "react";
import Seo from "../seo/Seo";
import Products from "../components/Products";

const Home = () => {
  return (
    <>
      <Seo
        title="Shop"
        twitter_card="summary_large_image"
        twitter_site="@TU_USER"
        twitter_creator="@TU_USER"
        twitter_title="Shop"
        twitter_description="Shop - see all products"
        twitter_image="s3.amazonaws.com/gndx.dev/gndxdev.png"
        og_title="Shop"
        og_description="Shop - see all products"
        og_image="s3.amazonaws.com/gndx.dev/gndxdev.png"
        og_url="shop.example.com"
        og_site_name="Shop"
        og_locale="es_ES"
        og_type="article"
        fb_app_id="ID_APP_FACEBOOK"
      />
      <Products />
    </>
  );
};

export default Home;

import React from "react";
import { Helmet } from "react-helmet";

const Seo = ({
  title,
  twitter_card,
  twitter_site,
  twitter_creator,
  twitter_title,
  twitter_description,
  twitter_image,
  og_title,
  og_description,
  og_image,
  og_url,
  og_site_name,
  og_locale,
  og_type,
  fb_app_id,
}) => {
  return (
    <Helmet>
      <title>{title}</title>
      {/* Twitter */}
      <meta name="twitter:card" content={twitter_card} />
      <meta name="twitter:site" content={twitter_site} />
      <meta name="twitter:creator" content={twitter_creator} />
      <meta name="twitter:title" content={twitter_title} />
      <meta name="twitter:description" content={twitter_description} />
      <meta name="twitter:image" content={twitter_image} />
      {/* Web */}
      <meta property="og:title" content={og_title} />
      <meta property="og:description" content={og_description} />
      <meta property="og:image" content={og_image} />
      <meta property="og:url" content={og_url} />
      <meta property="og:site_name" content={og_site_name} />
      <meta property="og:locale" content={og_locale} />
      <meta property="og:type" content={og_type} />
      {/* Faccebook */}
      <meta property="fb:app_id" content={fb_app_id} />
    </Helmet>
  );
};

export default Seo;

Básicamente hacer una carpeta llamada seo con un archivo Seo.jsx y pasar por props la información.

si quieren aprender seo vayan a blogger3cero y teamplatino

Buenas, falto subir el archivo, saludos

Que interesante Helmet !!

Un poco tedioso el configurar el Seo en React …

Tal vez por no ser tema directo de este curso no lo mencionan pero es importante saber que las apps en react al ser SPA no son muy SEO friendly, por lo que para funciones como compartir link creo que es necesario usar herramientas como next mas aun cuando se quiere implementar metadata dinámica, por ejemplo un link del tipo:

/product/:product-slug

para poder poder compartir por redes y que la metadata se cargue de forma dinamica dependiendo del link del producto hay que implementar cosas como SSR, igual yo mismo sigo intentando comprender bien este tema y me gustaría escuchar la opinión de alguien mas

¿algun alma buena tiene el link del repositorio de platzi-conf-merch ?

Excelente, ya creo saber cómo se hace para mostrar cosas en la pestaña a cuerdo a la inetracción del User

m