JFdeSousa

Mejorar el SEO usando Next.js en su versión 13

31 de marzo de 2023

===================================================

Next.js es un framework de React que permite crear aplicaciones web con renderizado del lado del servidor (SSR) y generación de páginas estáticas (SSG). Una de las principales ventajas de Next.js es su capacidad para mejorar el SEO de una aplicación web. En este artículo, exploraremos algunas estrategias para mejorar el SEO usando Next.js en su versión 13.

1. Renderizado del lado del servidor (SSR)

El renderizado del lado del servidor (SSR) es una t√©cnica que permite renderizar las p√°ginas de una aplicaci√≥n web en el servidor antes de enviarlas al cliente. Esto permite que los motores de b√ļsqueda puedan rastrear el contenido de la p√°gina antes de que se cargue en el navegador del usuario.

Next.js admite SSR de forma nativa y permite renderizar páginas en el servidor con facilidad. Para habilitar el SSR en Next.js, solo necesitas crear una página en la carpeta pages con el nombre correspondiente y exportar una función getServerSideProps.

export async function getServerSideProps(context) {
  // lógica para obtener datos del servidor
  return {
    props: {
      // datos a pasar a la p√°gina
    },
  };
}

En este ejemplo, estamos exportando una función getServerSideProps que obtiene los datos del servidor y los pasa a la página como propiedades. Cuando un usuario solicita esta página, Next.js la renderiza en el servidor y envía el HTML resultante al navegador del usuario.

2. Generación de páginas estáticas (SSG)

La generaci√≥n de p√°ginas est√°ticas (SSG) es otra t√©cnica que permite crear p√°ginas web est√°ticas en tiempo de compilaci√≥n. Esto es √ļtil para p√°ginas que no cambian con frecuencia y que no requieren datos en tiempo real.

Next.js admite SSG de forma nativa y permite generar páginas estáticas con facilidad. Para habilitar el SSG en Next.js, solo necesitas crear una página en la carpeta pages con el nombre correspondiente y exportar una función getStaticProps.

export async function getStaticProps(context) {
  // lógica para obtener datos en tiempo de compilación
  return {
    props: {
      // datos a pasar a la p√°gina
    },
    revalidate: 60, // tiempo de revalidación en segundos
  };
}

En este ejemplo, estamos exportando una función getStaticProps que obtiene los datos en tiempo de compilación y los pasa a la página como propiedades. El tiempo de revalidación especifica cada cuánto tiempo Next.js debe volver a generar la página.

3. Etiquetas meta y título

Las etiquetas meta y t√≠tulo son importantes para el SEO de una p√°gina web. Las etiquetas meta proporcionan informaci√≥n adicional sobre la p√°gina, como la descripci√≥n y las palabras clave. El t√≠tulo es el texto que se muestra en la pesta√Īa del navegador y en los resultados de b√ļsqueda.

Next.js permite configurar las etiquetas meta y título de forma dinámica en cada página. Para hacerlo, puedes utilizar el componente Head de Next.js y agregar las etiquetas dentro del mismo.

import Head from 'next/head';

function MyPage({ data }) {
  return (
    <>
      <Head>
        <title>{data.title}</title>
        <meta name="description" content={data.description} />
        <meta name="keywords" content={data.keywords} />
      </Head>
      {/* contenido de la p√°gina */}
    </>
  );
}

En este ejemplo, estamos utilizando el componente Head para configurar el título, la descripción y las palabras clave de la página. El contenido de estas etiquetas se puede obtener de la función getServerSideProps o getStaticProps.

4. URLs amigables

Las URLs amigables son importantes para el SEO de una p√°gina web. Una URL amigable debe ser f√°cil de leer y entender para los usuarios y los motores de b√ļsqueda. Next.js permite crear URLs amigables utilizando el componente¬†Link.

import Link from 'next/link';

function MyPage() {
  return (
    <>
      <Link href="/blog/[slug]" as="/blog/my-blog-post">
        <a>My Blog Post</a>
      </Link>
      {/* contenido de la p√°gina */}
    </>
  );
}

En este ejemplo, estamos utilizando el componente Link para crear una URL amigable para una página de blog. La URL resultante será /blog/my-blog-post.

Conclusión

Next.js es un framework poderoso y flexible que permite mejorar el SEO de una aplicación

‚Üź Regresar al inicio