Phát Triển•10 tháng 1, 2025•3 min read

Tối Ưu SEO Cho Next.js: Hướng Dẫn Hoàn Chỉnh A-Z

Hướng dẫn chi tiết cách tối ưu SEO cho website Next.js: metadata, sitemap, structured data, Core Web Vitals và nhiều hơn nữa.

Dino

Author

Tối Ưu SEO Cho Next.js: Hướng Dẫn Hoàn Chỉnh

Next.js là framework tuyệt vời cho SEO nhờ SSR và SSG. Hãy cùng tìm hiểu cách tối ưu SEO từ A-Z.

1. Metadata Configuration

App Router (Next.js 13+)

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: 'Nhanh Agency',
    template: '%s | Nhanh Agency'
  },
  description: 'Digital Agency chuyên nghiệp',
  keywords: ['web design', 'digital marketing', 'SEO'],
  authors: [{ name: 'Nhanh Agency' }],
  openGraph: {
    type: 'website',
    locale: 'vi_VN',
    url: 'https://nhanhagency.com',
    siteName: 'Nhanh Agency',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@nhanhagency',
  }
}

Dynamic Metadata

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.image],
    }
  }
}

2. Structured Data (JSON-LD)

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  image: post.image,
  datePublished: post.date,
  author: {
    '@type': 'Person',
    name: post.author
  }
}

// Trong component
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>

3. Sitemap Generation

// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts()
  
  const postUrls = posts.map((post) => ({
    url: `https://nhanhagency.com/blog/${post.slug}`,
    lastModified: post.date,
    changeFrequency: 'weekly',
    priority: 0.8,
  }))

  return [
    {
      url: 'https://nhanhagency.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...postUrls,
  ]
}

4. Image Optimization

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Descriptive alt text"
  width={1200}
  height={600}
  priority // For above-the-fold images
  quality={85}
  placeholder="blur"
  blurDataURL="data:image/..."
/>

5. Core Web Vitals Optimization

LCP (Largest Contentful Paint)

Optimize images với Next/Image
Use CDN cho static assets
Implement lazy loading
Preload critical resources

FID (First Input Delay)

Code splitting
Defer non-critical JavaScript
Use Web Workers cho heavy tasks

CLS (Cumulative Layout Shift)

Set dimensions cho images/videos
Reserve space cho ads
Avoid inserting content above existing content

6. Font Optimization

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin', 'vietnamese'],
  display: 'swap',
  variable: '--font-inter',
})

export default function RootLayout({ children }) {
  return (
    <html lang="vi" className={inter.variable}>
      <body>{children}</body>
    </html>
  )
}

7. Robots.txt

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/admin/',
    },
    sitemap: 'https://nhanhagency.com/sitemap.xml',
  }
}

8. Canonical URLs

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://nhanhagency.com/blog/seo-nextjs',
  },
}

9. Performance Monitoring

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
        <Analytics />
      </body>
    </html>
  )
}

10. SEO Checklist

Kết Luận

SEO cho Next.js không khó nếu bạn biết cách tận dụng các tính năng built-in. Hãy implement từng bước và monitor kết quả.

Cần tư vấn về Next.js và SEO? Liên hệ ngay

Chia sẻ bài viết

Twitter LinkedIn Facebook