SEO en Next.js 14: Metadata y Open Graph
Optimiza tu portfolio para buscadores con metadata correcta y Open Graph tags
Por Im_JVallejo
#Next.js#SEO#Metadata
¿Por qué importa SEO?
Un portfolio sin SEO es invisible en Google. Optimizar metadata es gratuito y toma 30 minutos.
Metadata en Next.js 14
En `app/layout.tsx`, usamos el objeto `Metadata`:
Código
export const metadata: Metadata = {
title: "Im_JVallejo | Full-Stack Developer",
description: "Portfolio profesional con Next.js, TypeScript y Tailwind CSS",
metadataBase: new URL("https://imjvallejo.dev"),
openGraph: {
title: "Im_JVallejo | Full-Stack Developer",
description: "Descubre mis proyectos y experiencia",
url: "https://imjvallejo.dev",
siteName: "Im_JVallejo Portfolio",
images: [
{
url: "/og-image.jpg",
width: 1200,
height: 630,
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Im_JVallejo | Full-Stack Developer",
description: "Descubre mis proyectos y experiencia",
images: ["/og-image.jpg"],
},
};Robots y Sitemap
Archivos estáticos para SEO:
Código
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: [
{
userAgent: "*",
allow: "/",
disallow: "/api/",
},
],
sitemap: "https://imjvallejo.dev/sitemap.xml",
};
}Código
export default function sitemap() {
return [
{
url: "https://imjvallejo.dev",
lastModified: new Date(),
changeFrequency: "weekly",
priority: 1,
},
{
url: "https://imjvallejo.dev/blog",
lastModified: new Date(),
changeFrequency: "weekly",
priority: 0.8,
},
];
}Core Web Vitals
Google prioriza estos métricas:
Optimizaciones
Código
import Image from "next/image";
export function MyImage() {
return (
<Image
src="/image.jpg"
alt="desc"
loading="lazy"
width={400}
height={300}
/>
);
}Verificación
Usa herramientas:
Objetivo: 90+ en todas las categorías.
Conclusión
SEO no es un lujo, es fundamental. En Next.js, es super simple implementar best practices que catapultan tu visibilidad en Google.