Go Live: SEO Optimization & Vercel Deployment
Đây là bài học cuối cùng - đưa landing page của bạn lên production và đảm bảo Google có thể tìm thấy bạn!
Part 1: SEO Optimization
Metadata Configuration:
@file app/layout.tsx
Add comprehensive metadata:
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Nguyễn Văn A | Full-Stack Developer",
description: "Portfolio của một developer đam mê React, Next.js và AI. Xem các dự án và liên hệ hợp tác.",
keywords: ["developer", "react", "nextjs", "vietnam", "portfolio"],
authors: [{ name: "Nguyễn Văn A" }],
creator: "Nguyễn Văn A",
openGraph: {
type: "website",
locale: "vi_VN",
url: "https://yoursite.com",
title: "Nguyễn Văn A | Full-Stack Developer",
description: "Portfolio và dự án của Full-Stack Developer",
siteName: "Your Name Portfolio",
images: [{
url: "https://yoursite.com/og-image.png",
width: 1200,
height: 630,
alt: "Portfolio Preview"
}]
},
twitter: {
card: "summary_large_image",
title: "Nguyễn Văn A | Full-Stack Developer",
description: "Portfolio và dự án của Full-Stack Developer",
images: ["https://yoursite.com/og-image.png"]
},
robots: {
index: true,
follow: true
}
};
Semantic HTML Audit:
@folder components/landing
Review all components cho semantic HTML:
- Proper heading hierarchy (h1 > h2 > h3)
- Chỉ một h1 per page
- Descriptive alt texts cho images
- ARIA labels cho interactive elements
- Proper form labels
Generate checklist và fix issues.
Structured Data (JSON-LD):
@file app/layout.tsx
Add JSON-LD structured data cho Person schema:
const personJsonLd = {
"@context": "https://schema.org",
"@type": "Person",
name: "Nguyễn Văn A",
jobTitle: "Full-Stack Developer",
url: "https://yoursite.com",
sameAs: [
"https://github.com/yourusername",
"https://linkedin.com/in/yourusername"
]
};
// In layout.tsx <head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd) }}
/>
Part 2: Performance Optimization
Image Optimization:
@folder public/images
@file next.config.js
Optimize images:
- Convert to WebP format
- Add proper width/height để prevent CLS
- Use next/image component
- Implement lazy loading
- Add blur placeholder
Core Web Vitals:
"Analyze và optimize cho Core Web Vitals:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
Check with Lighthouse và suggest fixes."
Bundle Size:
@file package.json
Audit dependencies:
- Remove unused packages
- Replace heavy libraries với lighter alternatives
- Enable tree-shaking
- Dynamic imports for below-fold components
Run: npm run analyze (add bundle analyzer)
Part 3: Vercel Deployment
Step 1: Prepare Repository
# Initialize git if not done
git init
git add .
git commit -m "Initial portfolio setup"
# Create GitHub repo và push
gh repo create my-portfolio --public
git push -u origin main
Step 2: Connect to Vercel
- Go to vercel.com
- Click "Add New Project"
- Import từ GitHub
- Configure:
- Framework: Next.js (auto-detected)
- Root Directory: ./
- Build Command: npm run build
- Output Directory: .next
Step 3: Environment Variables (if needed)
# In Vercel dashboard
NEXT_PUBLIC_GA_ID=G-XXXXXX
RESEND_API_KEY=re_xxxxx
Step 4: Custom Domain
1. Vercel Dashboard > Project > Settings > Domains
2. Add domain: yourdomain.com
3. Configure DNS tại domain provider:
- A Record: 76.76.21.21
- CNAME: cname.vercel-dns.com
4. Wait for SSL certificate (automatic)
Part 4: Post-Launch Checklist
Analytics Setup:
@file app/layout.tsx
Add Google Analytics:
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
<GoogleAnalytics gaId="G-XXXXXXX" />
</html>
);
}
Monitoring:
- Vercel Analytics enabled
- Google Search Console setup
- Uptime monitoring (Vercel built-in)
- Error tracking (Sentry optional)
Launch Announcement:
- Share on LinkedIn
- Post on Twitter
- Update GitHub profile README
- Add to email signature
SEO Maintenance Checklist
| Task | Frequency |
|---|---|
| Check Google Search Console | Weekly |
| Update content | Monthly |
| Add new projects | As completed |
| Check broken links | Monthly |
| Review Core Web Vitals | Monthly |
| Update dependencies | Quarterly |
Pro Tips
- Preview deployments: Vercel auto-creates preview URLs for PRs
- Rollback: One-click rollback nếu có issues
- Edge functions: Consider cho faster global performance
- ISR: Use Incremental Static Regeneration cho dynamic content
🎉 Congratulations! Bạn đã hoàn thành khóa học Vibe Coding Foundation. Landing page của bạn giờ đã LIVE trên internet!
Final Bài Tập
- Deploy landing page lên Vercel
- Setup custom domain (nếu có)
- Run Lighthouse audit, achieve score > 90
- Submit URL to Google Search Console
- Share link với community!
