SEO en la página

A nivel general, el SEO en la página se refiere a los encabezados y enlaces que conforman la estructura general de la página. Los encabezados indican importancia en el documento y los enlaces conectan la web entre sí.

Encabezados y H1

Los encabezados ayudan a los usuarios a comprender la estructura de una página y lo que van a leer en los siguientes párrafos. También facilitan el trabajo de los motores de búsqueda para entender qué partes de la página son las más importantes.

Los encabezados van del 1 al 6, siendo el Encabezado 1 considerado generalmente como el más importante. Se recomienda usar la etiqueta H1 en cada página. El H1 debe representar el tema principal de la página y ser similar a tu etiqueta title.

function Page() {
  return <h1>Tu encabezado principal de página</h1>;
}

Enlaces internos

Internet está conectado por enlaces. Sin enlaces de un sitio web a otro, probablemente Internet no existiría. Los sitios web que reciben más enlaces tienden a representar sitios en los que los usuarios confían más.

Google inició este principio con la invención del Algoritmo PageRank.

El algoritmo PageRank, a grandes rasgos, es un algoritmo que recorre cada enlace en una base de datos y puntúa dominios basándose en cuántos enlaces reciben (cantidad) y de qué dominios (calidad). Muchos enlaces de sitios spam probablemente tienen poco o ningún valor.

Sin embargo, un enlace desde un sitio web de prensa nacional importante es probablemente muy valioso para los motores de búsqueda. Por esto los enlaces son importantes y siempre debes incluirlos tanto internamente entre tus páginas, como externamente a otros sitios web. Los enlaces siempre necesitan usar href para ser considerados en los cálculos de PageRank.

next/link

Next.js proporciona el componente Link que permite transiciones del lado del cliente entre rutas. Un caso de uso simple se vería así:

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

La propiedad href es obligatoria y añadirá correctamente el enlace a la etiqueta anchor, lo cual es vital para SEO. Cuando Google rastrea una página, seguirá este enlace sin depender de JavaScript.

Sin embargo, si el hijo de Link es un componente personalizado que envuelve una etiqueta a, debes añadir passHref a Link. Esto es necesario si usas bibliotecas como styled-components. Sin esto, la etiqueta a no tendrá el atributo href, lo que afecta el SEO de tu sitio.

Cómo usar passHref:

import Link from 'next/link';
import styled from 'styled-components';
 
// Esto crea un componente personalizado que envuelve una etiqueta <a>
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // Debes añadir passHref a Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

Si usas ESLint, Next.js tiene una regla para protegerte contra este problema.

Lecturas adicionales

• Next.js: Link
• Next.js: eslint-plugin-next