SEO en Next.js

Vamos a definir un conjunto de atributos SEO comunes a todas las páginas, que después podrán ser reemplazados, si es necesario, por otros atributos espacíficos de alguna página.

WARNING

Recuerda que el contenido de <head> se limpia cuando se desmonta la página.

Para ello vamos a utilizar la librería next-seo.

  1. Instalamos la librería:
npm install --save next-seo
  1. Sobreescribimos el archivo pages/_app.js, que es un archivo que Next.js utiliza para renderizar cada página de la aplicación:



 


 

















 






/* Vendor */
import React from 'react';
import App, { Container } from 'next/app';
import NextSeo from 'next-seo';

/* Config */
import { DEFAULT_SEO } from '../config';

export default class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <NextSeo config={DEFAULT_SEO}/>
        <Component {...pageProps}/>
      </Container>
    );
  }
}

La mayor parte de ese código es el que utiliza Next.js por defecto. Lo único que estamos haciendo nosotros es importar el componente NextSeo.

  1. Creamos el conjunto de atributos SEO comunes a todas las páginas, dentro de config/index.js:
const DEFAULT_SEO = {
  title: 'Mikel Goig - Desarrollador web full-stack',
  description: 'Mikel Goig - Desarrollador web full-stack',

  twitter: {
    cardType: 'summary_large_image',
    handle: '@mgoigfer',
  },

  openGraph: {
    url: 'https://mikelgoig.com',
    type: 'website',
    title: 'Mikel Goig - Desarrollador web full-stack',
    description: 'Mikel Goig - Desarrollador web full-stack',
    images: [
      {
        url: 'https://mikelgoig.com/static/images/og-image-mikel-goig-website.png',
        width: 1200,
        height: 1200,
        alt: 'Mikel Goig - Desarrollador web full-stack',
      },
    ],
    defaultImageHeight: 1200,
    defaultImageWidth: 1200,
    locale: 'es_ES',
    site_name: 'MikelGoig.com',
  },
};

export {
  DEFAULT_SEO,
};

TIP

El protocolo Open Graph permite enriquecer los meta tags de cualquier página web para cuando sea compartida en redes sociales. Así es como se ve un sitio web compartido en Facebook o Twitter:

Ejemplos del protocolo Open Graph en Facebook y Twitter

Además, te habrás dado cuenta de que hemos configurado la altura y la anchura de la etiqueta og:image. Esto es importante para que Facebook pueda renderizar la imagen la primera vez que la página se comparta. Sin esto, la imagen sólo empezará a mostrarse a partir de la segunda vez que la página se comparta.

En cuanto a Twitter, hemos seteado twitter:card con summary_large_image, para que la imagen og:image aparezca en la tarjeta. Puedes ver otros atributos utilizados por Twitter en su documentación oficial.