Tối ưu SEO kỹ thuật Next.js trên VPS: Web nhanh, top bền

export async function generateStaticParams() {
  return posts.map((post) => ({ slug: post.slug }))
}

export const revalidate = 3600

export const metadata = {
  title: 'Dịch vụ SEO kỹ thuật Next.js',
  description: 'Hướng dẫn tối ưu SEO kỹ thuật cho website Next.js host trên VPS.',
  alternates: {
    canonical: 'https://example.com/seo-nextjs-vps',
  },
  openGraph: {
    title: 'SEO Next.js trên VPS',
    description: 'Checklist tối ưu crawl, speed, index.',
    url: 'https://example.com/seo-nextjs-vps',
    siteName: 'Example',
    type: 'article',
  },
}

Với trang động

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)

return {
    title: post.seoTitle,
    description: post.metaDescription,
    alternates: {
      canonical: https://example.com/blog/${post.slug},
    },
  }
}

Checklist metadata:

– Title duy nhất
– Description hấp dẫn
– Canonical đúng
– Noindex cho trang mỏng
– OG/Twitter image đầy đủ
– Không trùng canonical giữa nhiều URL

3. Tối ưu cấu trúc URL, redirect, trailing slash

URL sạch → dễ crawl, dễ chia sẻ, ít duplicate.

Nên dùng:

/blog/toi-uu-seo-nextjs-vps
/dich-vu/seo-technical
/san-pham/hosting-vps

Tránh:

/post?id=123
/category?name=seo
/blog/Toi-Uu-SEO!!!

Redirect 301 bắt buộc

Các biến thể cần quy về 1 bản:

– http → https
– www → non-www hoặc ngược lại
– /page/ → /page nếu không dùng trailing slash
– URL cũ → URL mới

Nginx mẫu:

server {
  listen 80;
  server_name example.com www.example.com;
  return 301 https://example.com$request_uri;
}

Nếu muốn bỏ www:

server {
  listen 443 ssl http2;
  server_name www.example.com;
  return 301 https://example.com$request_uri;
}

4. Cấu hình Nginx reverse proxy đúng

Next.js thường chạy qua Node process, sau đó Nginx proxy.

server {
  listen 443 ssl http2;
  server_name example.com;

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;

proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

Quan trọng:

– Giữ đúng Host
– Forward IP thật
– Bật HTTP/2
– Không để app public trực tiếp nếu không cần
– Dùng firewall chỉ mở 80/443/SSH

5. Cache static asset mạnh

Next.js build asset có hash. Cache lâu được.

Nginx:

location /_next/static/ {
  proxy_pass http://127.0.0.1:3000;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

Ảnh, font, CSS, JS cache tốt → LCP/FCP cải thiện.

Với file public:

location ~* .(?:ico|css|js|gif|jpe?g|png|webp|avif|svg|woff2?)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Cẩn thận: không cache HTML quá lâu nếu có nội dung động.

6. Tối ưu Core Web Vitals

SEO kỹ thuật hiện đại gắn chặt UX. 3 chỉ số chính:

– LCP: tốc độ tải nội dung chính
– INP: phản hồi tương tác
– CLS: độ ổn định layout

Tối ưu LCP

– Dùng next/image
– Ưu tiên ảnh hero
– Tránh ảnh quá lớn
– Dùng WebP/AVIF
– Preload font/asset quan trọng

import Image from 'next/image'

<Image
  src="/hero.webp"
  alt="SEO Next.js VPS"
  width={1200}
  height={630}
  priority
/>

Giảm CLS

Luôn khai báo width, height cho ảnh/video/ad block. Tránh inject banner làm xô layout.

Giảm INP

– Giảm JS client
– Dùng Server Components
– Lazy load component nặng
– Tránh third-party script thừa

import dynamic from 'next/dynamic'

const Chart = dynamic(() => import('./Chart'), {
  ssr: false,
})

7. Tạo sitemap động

Sitemap giúp bot phát hiện URL nhanh hơn, nhất là site lớn.

Với App Router:

export default async function sitemap() {
  const posts = await getPosts()

return posts.map((post) => ({
    url: https://example.com/blog/${post.slug},
    lastModified: post.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.8,
  }))
}

File:

/app/sitemap.js

Kết quả:

https://example.com/sitemap.xml

Với site lớn > 50.000 URL → chia nhiều sitemap:

/sitemap-posts.xml
/sitemap-products.xml
/sitemap-categories.xml
/sitemap-index.xml

8. Robots.txt rõ ràng

Robots không thay thế noindex, nhưng giúp định hướng crawl.

export default function robots() {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/', '/search'],
    },
    sitemap: 'https://example.com/sitemap.xml',
  }
}

File:

/app/robots.js

Lưu ý:

– Không disallow trang cần index
– Trang filter/search mỏng nên noindex
– API/private route nên chặn crawl
– Không rely robots để bảo mật dữ liệu nhạy cảm

9. Canonical, pagination, filter URL

Website có category, tag, filter dễ sinh duplicate.

Ví dụ duplicate:

/shoes
/shoes?sort=price
/shoes?color=black
/shoes?page=1

Giải pháp:

– Trang filter không có search intent → noindex, follow
– Trang category chính → canonical về chính nó
– ?page=1 → canonical /category
– Trang phân trang → canonical riêng nếu có giá trị crawl

Trong metadata:

robots: {
  index: false,
  follow: true,
}

Không canonical toàn bộ pagination về page 1 nếu các page 2,3 chứa sản phẩm/bài viết cần crawl.

10. Structured Data bằng JSON-LD

Schema giúp Google hiểu nội dung.

Article schema:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: post.title,
      description: post.description,
      datePublished: post.publishedAt,
      dateModified: post.updatedAt,
      author: {
        '@type': 'Person',
        name: post.author,
      },
    }),
  }}
/>

Schema nên dùng:

– Article
– BreadcrumbList
– Product
– FAQPage
– Organization
– LocalBusiness

Kiểm tra bằng:

https://search.google.com/test/rich-results

11. SSL, HTTP/2, security header

HTTPS là bắt buộc. Dùng Let’s Encrypt:

sudo certbot --nginx -d example.com -d www.example.com

Security header cơ bản:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;

HSTS chỉ bật khi chắc chắn toàn site dùng HTTPS ổn định:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

12. Quản lý process bằng PM2 hoặc systemd

App crash → downtime → bot gặp lỗi 5xx → SEO giảm.

PM2:

npm install -g pm2
pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup

Theo dõi:

pm2 logs
pm2 monit

Nên có:

– Auto restart
– Log rotate
– Memory limit
– Health check
– Alert khi 5xx tăng

13. Log, monitoring, crawl audit

SEO kỹ thuật không đoán. Phải xem log.

Cần theo dõi:

– Googlebot vào URL nào
– Tỷ lệ 200/301/404/500
– Trang nào TTFB cao
– Static asset có cache không
– Sitemap URL có được crawl không

Công cụ:

– Google Search Console
– PageSpeed Insights
– Lighthouse
– Screaming Frog
– GoAccess
– Nginx access log
– WebPageTest

Lệnh xem bot:

grep -i "googlebot" /var/log/nginx/access.log

Lệnh xem lỗi 500:

awk '$9 ~ /500/' /var/log/nginx/access.log

Kết luận: VPS cho Next.js tốt, nếu bạn kiểm soát đủ

Host Next.js trên VPS cho bạn tự do, hiệu năng, chi phí tốt. Nhưng SEO kỹ thuật không tự đến. Cần render đúng, metadata chuẩn, sitemap sạch, robots rõ, redirect nhất quán, cache mạnh, Core Web Vitals tốt, server ổn định.

Checklist ngắn:

– SSG/ISR cho trang SEO
– SSR có cache
– Canonical chuẩn
– Sitemap động
– Robots đúng
– Nginx reverse proxy chuẩn
– Cache _next/static 1 năm
– Ảnh WebP/AVIF
– PM2/systemd auto restart
– Log crawl định kỳ

Làm tốt các điểm trên → Next.js trên VPS vẫn có thể đạt SEO kỹ thuật rất mạnh: nhanh, crawlable, stable, scalable.