Resalta tu aplicación con Next.js usando su API de metadata para el SEO

Haziel Ortiz

lunes, 2 de diciembre de 2024

TABLA DE CONTENIDOS

¿Qué es el SEO y por qué es importante?

El SEO (Search Engine Optimization) es el proceso de optimizar tu sitio web para mejorar su visibilidad en los motores de búsqueda como Google. Un buen SEO ayuda a que tu página aparezca entre los primeros resultados de búsqueda, lo que incrementa la probabilidad de atraer visitantes interesados en tu contenido, productos o servicios.El SEO no se trata solo de palabras clave; incluye otros aspectos como la velocidad del sitio, la optimización para dispositivos móviles, el uso adecuado de etiquetas meta y datos estructurados, y una experiencia de usuario fluida. En Next.js V14, el framework facilita muchas de estas tareas gracias a herramientas como el objeto metadata y la capacidad de manejar SEO dinámico de forma sencilla.

Usa el objeto metadata

Permite definir metadatos estáticos directamente en las páginas de tu aplicación. Esto incluye etiquetas como title, description, openGraph, y más.Ubicación: Se define como una exportación dentro de los archivos de las páginas (e.g., page.js), consta en exportar la constante metadata, en TypeScript es conveniente usar el tipo Metadata de next/metadata, para conocer más propiedades de este objeto puedes usar el autocompletado de TypeScript o revisar la documentación oficial.
Ejemplo:


  export const metadata: Metadata = {
    title: 'Página de inicio',
    description: 'Descripción de la página de inicio',
    keywords: 'palabra clave 1, palabra clave 2',
    image: 'https://www.example.com/image.jpg',
    url: 'https://www.example.com',
    type: 'website',
    locale: 'es_ES',
    site_name: 'Nombre del sitio',
    twitter: {
      card: 'summary_large_image',
      site: '@example',
      creator: '@example',
      image: 'https://www.example.com/image.jpg',
    },
    openGraph: {
      title: "Título en Redes Sociales",
      description: "Descripción específica para previsualizaciones",
      images: ["/imagen.jpg"],
    },
  };

Genera la metadata dinámicamente con generateMetadata

Es una función asíncrona que permite generar metadatos dinámicos basados en parámetros, datos de la API, o cualquier lógica personalizada. Es muy útil si quieres mostrar metadatos personalizados dependiendo del contenido a mostrar, por ejemplo usar en el título de la pestaña del navegador los datos del objeto mostrado obtenido del API cómo "Mi App | Detalles del Producto 1" o mostrar imágenes para las redes sociales que dependen del contenido.Ubicación: Funciona de la misma forma que la constante metadata, sin embargo aquí exportamos una funciona asíncrona.
Ejemplo:


  export async function generateMetadata({ params }) {
    const data = await fetchData(params.id);
    return {
      title: data.name,
      description: data.summary,
    };
  }

Muestra una página personalizada para el error 404 con notFound

Si tu contenido dinámico no existe (por ejemplo, un ID inválido en la URL), puedes devolver notFound() para que Next.js maneje la página 404 automáticamente. Esto también afecta cómo los motores de búsqueda indexan el sitio y mejora la experiencia del usuario mostrando una página personalizada.Ubicación: Se puede crear un archivo con el nombre not-found.js. Funciona igual que una página por lo que puedes retornar un componente para crear tu página personalizada.
Ejemplo:


  export default function notfound() {
    return <MiPaginaDeError404 />;
  }

Genera un sitemap de tu aplicación dinámicamente con sitemap.js

Permite generar un sitemap dinámico que incluya todas las rutas indexables de tu aplicación, ayudando a los motores de búsqueda a entender la estructura de tu sitio.Ubicación: Crea un archivo llamado sitemap.js, generalmente se crea directamente en app/sitemap.js.
Ejemplo:


  export async function generateSitemap() {
    const routes = await getRoutes();
    return routes.map(route => ({
      url: `https://mi-sitio.com/${route}`,
      lastModified: new Date(),
    }));
  }

Crea un archivo para los robots de los motores de búsqueda con robots.js

Similar al sitemap, puedes definir reglas dinámicas para los rastreadores de motores de búsqueda. Útil cuando buscas también que los motores de búsqueda no indexen ciertas páginas de tu aplicación o toda tu aplicación.Ubicación: Crea un archivo llamado app/robots.js
Ejemplo:


  export async function generateRobots() {
    return {
      rules: [
        { userAgent: "*", allow: "/" },
        { userAgent: "Googlebot", disallow: "/admin/" },
      ],
      sitemap: "https://mi-sitio.com/sitemap.xml",
    };
  }

Crea metadatos globales con defaultMetadata

Configura valores predeterminados para metadatos aplicables a todo el sitio, evitando repetición en cada página sí es que necesitas que la misma metadata se muestre en toda tu aplicación.Ubicación: Funciona de igual forma que la metadata estática, sin embargo hay que exportarla directamente en el layout más inicial de nuestro proyecto como en app/layout.js
Ejemplo:


  export const metadata = {
    title: {
      default: "Nombre del Sitio",
      template: "%s | Nombre del Sitio",
    },
    description: "Descripción genérica para todo el sitio",
  };

Herramientas para Testear la Metadata y SEO de tu aplicación

Una vez has aplicado estas herramientas a tu aplicación, es conveniente probar como funcionan nuestros cambios, lo cual no es tan fácil de realizar como un cambio en una página ya que estos metadatos están ocultos a simple vista y algunos solo son visibles por los motores de búsqueda. Sin embargo a continuación se detallan algunas herramientas para probar la metadata y SEO de nuestra app:

Google Search Console: Permite verificar cómo Google interpreta tu sitio y su metadata, ofreciendo datos sobre indexación, clics y errores de rastreo. Ideal para monitorear la salud SEO de tu aplicación.
Meta Tag Analyzer: Analiza etiquetas meta como title, description y las de Open Graph para asegurarte de que cumplen con las mejores prácticas de SEO.
Twitter Card Validator: Verifica cómo se mostrarán tus páginas en Twitter, asegurándote de que las tarjetas configuradas en metadata.twitter funcionen correctamente.
Open Graph Debugger: El Facebook Sharing Debugger, también conocido como Open Graph Debugger, es una herramienta gratuita proporcionada por Meta (Facebook) que permite verificar y depurar cómo se visualizan tus páginas web cuando se comparten en redes sociales que utilizan el protocolo Open Graph, como Facebook, LinkedIn o WhatsApp.
Lighthouse (en DevTools): Integra una auditoría completa de SEO y rendimiento desde las herramientas para desarrolladores de Google Chrome, brindando recomendaciones prácticas.

Conclusión

Implementar SEO en una aplicación Next.js V14 utilizando el objeto metadata es una excelente manera de mejorar la visibilidad de tu sitio web en motores de búsqueda y optimizar la experiencia del usuario al compartir contenido en redes sociales. A través de herramientas como el Facebook Sharing Debugger y la correcta configuración de archivos clave como sitemap.js y robots.js, puedes asegurarte de que tu página esté bien indexada y optimizada para SEO.Recuerda que la personalización de metadatos no solo beneficia el rendimiento de tu sitio, sino que también mejora la forma en que los usuarios interactúan con tu contenido en diversas plataformas. Con los ejemplos y herramientas proporcionadas en este artículo, estás listo para implementar prácticas de SEO eficientes y dinámicas en tu aplicación Next.js. ¡No dudes en comenzar hoy mismo y llevar tu proyecto al siguiente nivel!En Inncol podemos asesorarte o crear tu aplicación haciendo uso de las mejores prácticas para el SEO en Next.js y hacer crecer tu visibilidad en un mundo tan competitivo como el de los motores de búsqueda y su optimización.