Los títulos de página, las metaetiquetas y las metadescripciones son importantes para el SEO. Son las primeras cosas que un usuario ve en las SERPS y determinan si hacen clic en su sitio web. Por lo tanto, es importante que optimice los títulos, las metaetiquetas y la descripción de su sitio web.
En Next.js, los agrega a través del componente de encabezado personalizado. Puede agregarlos en todas las páginas de la aplicación o personalizarlos para cada página.
Agregar una etiqueta de encabezado global a todas las páginas de Next.js
Next.js proporciona _app.js para inicializar páginas. Puede usarlo para crear etiquetas meta compartidas en todas las páginas.
importar '../estilos/globales.css'
importar Cabeza de 'siguiente/cabeza'funciónMi aplicación({ Componente, accesorios de página }) {
devolver <>
<Cabeza>
<metanombre="autor" contenido="Juan Pérez"/>
</Head>
<Componente {...pageProps} />
</>
}
exportarpor defecto Mi aplicación
Si desea que una página tenga un título y una descripción personalizados, agregue el componente principal y Next.js lo usará en lugar del predeterminado en el componente de la aplicación.
Adición de metaetiquetas y descripción a una página específica de Next.js
Las metaetiquetas estáticas y las descripciones son adecuadas para páginas cuyo contenido sigue siendo el mismo, por ejemplo, una página de inicio.
Abra el archivo /pages/index.js y modifique la etiqueta principal con el título y la descripción adecuados.
importar Cabeza de "siguiente/cabeza";constante Inicio= () => {
devolver (
<>
<Cabeza>
<título>Blog</title>
<metanombre="mirador" contenido="escala inicial=1.0, ancho=ancho del dispositivo" />
<metanombre='descripción' contenido='Artículos de programación'/>
</Head>
<principal>
<h1>¡Bienvenido a mi blog!</h1>
</main>
</>
);
};
exportarpor defecto Hogar;
Accede al componente Head importándolo desde next/head. Funciona agregando elementos a la etiqueta principal de una página HTML. Dependiendo de dónde coloque este componente, las metaetiquetas y la descripción estarán disponibles en toda la aplicación o en páginas individuales.
Agregar el título, el ancho de la ventana gráfica y la descripción en el archivo _app.js garantiza que todas las páginas tengan los mismos metadatos.
Esta página tiene contenido estático, pero a veces, es posible que desee crear páginas que consuman contenido dinámico.
Adición de descripciones y metatítulos dinámicos a una página de Next.js
Según el caso de uso, puede usar getStaticProps(), getStaticPaths() o getServerSideProps() para obtener datos en Next.js. Estos datos determinan el contenido de la página. Úselo para crear los metadatos de la página.
Por ejemplo, sería tedioso crear los metadatos para la aplicación Next.js que representa publicaciones de blog.
La forma recomendada es crear una página dinámica que reciba un identificador que pueda usar para obtener el contenido del blog. A continuación, puede utilizar este contenido en el componente principal.
importar { getAllPosts, getSinglePost } de "../../utils/mdx";
importar Cabeza de "siguiente/cabeza";constante Publicación = ({título, descripción, contenido}) => {
devolver (
<>
<Cabeza>
<título>{título}</title>
<metanombre="descripción" contenido={descripción} />
</Head>
<principal>{/* contenido de página */}</main>
</>
);
};exportarconstante getStaticProps = asíncrono ({parámetros}) => {
// obtener una sola publicación
constante publicar = esperar getSinglePost (params.id, "publicaciones");devolver {
accesorios: {... publicar },
};
};exportarconstante getStaticPaths = asíncrono () => {
// Recuperar todas las publicaciones
rutas constantes = getAllPosts("publicaciones").mapa(({id}) => ({parámetros: {id}}));devolver {
caminos,
retroceder: FALSO,
};
};
exportarpor defecto Correo;
La función getStaticProps pasa los datos de publicación al componente de publicación como accesorios. El componente Publicar desestructura el título, la descripción y el contenido de los accesorios. El componente principal luego usa el título y la descripción en las metaetiquetas.
Next.js es un marco optimizado
Acaba de aprender a usar el componente head para agregar metatítulos y descripciones a un proyecto Next.js. Utilice este conocimiento para crear encabezados compatibles con SEO, suba las SERP y atraiga a más visitantes a su sitio.
Además del componente principal, Next.js proporciona otros componentes como Enlace e Imagen. Estos componentes están optimizados desde el primer momento, lo que facilita la creación de sitios web rápidos y compatibles con SEO.