Posicionamiento web de blog con Gatsby (SEO)

SEO (Search Engine Optimization ó Optimización para motores de búsqueda) es simplemente el proceso de mejorar tu sitio web para que los motores de búsqueda puedan indexar tu sitio facilmente (para el google bot básicamente).

Mejorar el SEO de tu página web es una de las mejores formas de aparecer en una de las primeras posiciones en una búsqueda en google.

Primero es necesario ver si nuestro sitio esta en la web, busca el url de tu sitio y verifica si aparece en google. Si no aparece, posiblemente necesites algunos links que apunten a tu sitio de alguna página ya situada o ¿quiźas bloqueaste el acceso a tu sitio? revisa tu archivo robots.txt si lo tuvieras. También puedes acceder a Google Webmaster para pedirle a google que comience a Indexar tu sitio (El índice de google es como el índice de cualquier libro, simplemente es una lista de todos los sitios web disponibles y su contenido). En general, google no te pondrá muchos problemas para indexar tu sitio siempre y cuando tu contenido ayude a la comunidad, no sea copiado y no intentes realizar alguna estafa o engañar al bot (comportense!!!).

Ahora que tenemos un poco de "background" sobre SEO, mejoremos nuestro blog creado con Gatsby (gatsby-remark para obtener los posts). Idealmente, en el caso de un blog es necesario tener un title diferente para cada página y una descripción de lo que cada página representa como mínimo.

1. Instalamos "react-helmet" (probablemente ya lo tengas instalado si el proyecto se inició con la plantilla por defecto de gatsby):

$ npm install --save react-helmet

2. Ahora evitemos crear la polvora, ya existe un componente para implementar SEO (código en github) que utiliza static queries. Lo agregamos a los componentes de nuestro sitio:

3. El componente espera que los valores por defecto se encuentren en el archivo gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Título de la página`,
    description: `Descripción`,
    author: `Nombre del autor`,
    siteUrl: `https://mi-sitio.com/`,
  },
  plugins: [
    {
      ...

Los datos importantes:

title: El título debe indicar el tema de la página, debería ser único y diferente para cada página en el sitio web.
description: Debería ser un resumen de lo que aparece en la página (Google puede usar esta descripción al mostrar los resultados en el buscador). No se tiene completamente claro cuál debería ser la longitud, pero alrededor de 150 carácteres siempre me ha funcionado bien.
siteUrl: Url del sitio web (Nota: no olvides obtener un certificado para ofrecer tu sitio sobre https, google toma en cuenta a los sitios "seguros")

4. Ahora, agregamos el componente a todas las páginas de nuestro sitio web, en este caso lo agregaré al template de cada post de mi blog, tomar en cuenta que obtengo la información de title y summary con un query estático, la imagen es opcional pero ayuda para el SEO con twitter. Es muy importante que se proporcione la información correcta de title y description.

import React from "react";
import Layout from "../components/layout";
import SEO from "../components/seo";
import { graphql } from "gatsby";

const PostFull = ({ data }) => {
  const slug = data.markdownRemark.frontmatter.slug;

  return (
    <Layout>
      <SEO
        title={data.markdownRemark.frontmatter.title}
        description={data.markdownRemark.frontmatter.summary}
        imageSource={data.markdownRemark.frontmatter.image.publicURL}
      />
      <h1>Titulo: {data.markdownRemark.frontmatter.title}</h1>
      Contenido:
      <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}></div>
    </Layout>
  );
};

export default PostFull;

export const postQuery = graphql`
  query findPost($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        author
        date
        slug
        title
        summary
        image {
          extension
          publicURL
        }
      }
      html
    }
  }
`;

Para asegurarte que funciona, el título debería cambiar en la pestaña de tu navedor. La descripción puede verificarse en el código fuente de la página:

Y listo, ahora el bot de google estará un poco más contento con nuestro contenido. Keep coding.