Next.js meta tags

# next.js # metadata # seo

Incluir metatags title y description en Next.js

Lo que hace Next es verificar que si la pagina tiene metadata y utilizarla, en el caso de que no tenga utiliza la del layout subsiguiente, ya que podemos tener layout anidados.

  // layout.tsx
 
import type { Metadata } from 'next';
import { Montserrat } from 'next/font/google';
import './globals.css';
 
const monserrat = Montserrat({ subsets: ['latin'] });
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
	}) {
	return (
		<html lang='es'>
			<body className={monserrat.className}>
				{children}
			</body>
		</html>
	);
}

En este ejemplo con codigo estamos exportando un objeto metadata el cual contiene los tags title y description, esto seria una forma basica de agregar metadatos a nuestra web.

Podemos repetir este proceso para para todas nuestras paginas que no sean dinamicas.

Un tip para utilizar en el layout principal es el siguiente

import type { Metadata, Viewport } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | ACME',
    default: 'Inicio | ACME',
  },
  description: siteConfig.description,
  keywords: siteConfig.keywords,
  creator: siteConfig.author,
  category: 'Blog',
  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
};

Al utilizar template en el title nos permite ahorrarnos, escribir codigo repetitivo en los metatags de las demas paginas, esto lo aplicamos en el layout principal, y lo que hace es que en template: '%s | ACME', nos sirve, para replicarlo en las demas paginas.

Por lo que el metatag title de las demas paginas quedara de la siguiente manera por ejemplo:

// app/about/page.tsx
 
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'About',
};

El metatag title de la pagina about se formara utilizando el emplate del layout About | ACME

Next.js nos permite incluir los metatags de forma sencilla, por lo que te recomiendo su documentación oficial

En este artículo, se explica qué son las etiquetas meta, qué etiquetas meta y atributos HTML admite Google para controlar la indexación, y otros puntos importantes que se deben tener en cuenta cuando se implementan etiquetas meta en tu sitio.