Optimizarea SEO pentru site-uri Next.js

Introducere

Optimizarea pentru motoarele de căutare (SEO) este crucială pentru succesul online. Next.js oferă instrumente puternice pentru implementarea celor mai bune practici SEO. În acest articol, vom explora cum să optimizăm un site Next.js pentru motoarele de căutare.

Metadata și Open Graph

Next.js 13+ oferă un sistem robust pentru gestionarea metadata:

export const metadata = {
  title: "Titlul Paginii",
  description: "Descrierea paginii pentru SEO",
  openGraph: {
    title: "Titlu pentru Social Media",
    description: "Descriere pentru Social Media",
    images: ["/og-image.jpg"],
  },
};

Generarea Sitemap-ului

Un sitemap XML este esențial pentru indexarea corectă:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getPosts();

  return [
    {
      url: "https://example.com",
      lastModified: new Date(),
    },
    ...posts.map((post) => ({
      url: `https://example.com/blog/${post.slug}`,
      lastModified: new Date(post.date),
    })),
  ];
}

Schema Markup

Schema.org markup ajută motoarele de căutare să înțeleagă conținutul:

export default function BlogPost({ post }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.title,
    datePublished: post.date,
    author: {
      "@type": "Person",
      name: post.author,
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      <article>
        {/* Conținutul articolului */}
      </article>
    </>
  );
}

Optimizarea Performanței

Performanța este un factor important pentru SEO:

1. Image Optimization

import Image from "next/image";

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Descriere"
      width={800}
      height={600}
      priority={true}
    />
  );
}

1. Font Optimization

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

Concluzie

Optimizarea SEO în Next.js este un proces continuu. Folosind aceste tehnici și urmărind metricile de performanță, poți îmbunătăți semnificativ vizibilitatea site-ului tău în rezultatele de căutare.

Resurse utile

• Google Search Console
• Schema.org
• Next.js SEO Documentation