SEO (Search Engine Optimization) là tối ưu hóa website để đạt thứ hạng cao trên Google, Bing, và các công cụ tìm kiếm. 68% online experiences bắt đầu từ search engine — frontend developer ảnh hưởng trực tiếp đến khả năng index và rank của trang.

Frontend developer trực tiếp ảnh hưởng SEO vì:

1. HTML structure quyết định cách Google hiểu nội dung (semantic tags, heading hierarchy)
2. Performance ảnh hưởng ranking (Core Web Vitals là ranking signal từ 2021)
3. Rendering strategy quyết định Google có index được content không (CSR vs SSR)
4. Technical SEO implementation (meta tags, structured data, sitemap) thường do frontend làm

Có 5 meta tags quan trọng nhất mà frontend dev cần nắm: title, description, robots, canonical, và Open Graph.

Title tag (<title>): quan trọng nhất, hiển thị trên tab browser và kết quả tìm kiếm. Quy tắc: 50-60 ký tự, chứa keyword chính ở đầu, unique cho mỗi trang, format: 'Primary Keyword - Secondary | Brand'.

Meta description (<meta name='description'>): mô tả trang hiển thị dưới title trên Google. Quy tắc: 150-160 ký tự, chứa keyword tự nhiên, có call-to-action, unique.

Meta robots (<meta name='robots'>): điều khiển indexing — index,follow (mặc định), noindex (không index), nofollow (không follow links).

Canonical (<link rel='canonical'>): chỉ định URL chính thức khi có duplicate content.

Open Graph (og:title, og:description, og:image): kiểm soát preview khi share trên social media.

Semantic HTML giúp search engine hiểu cấu trúc và ý nghĩa nội dung, trực tiếp ảnh hưởng ranking — dùng <div> cho mọi thứ là cách nhanh nhất để giảm khả năng index.

Các thẻ quan trọng: <header> (phần đầu trang), <nav> (navigation — Google hiểu đây là menu), <main> (nội dung chính — Google ưu tiên index phần này), <article> (bài viết độc lập — có thể xuất hiện trong Google News), <section> (phần nội dung có chủ đề), <aside> (sidebar — Google biết đây không phải nội dung chính), <footer> (chân trang).

Heading hierarchy: chỉ 1 <h1> mỗi trang (chứa keyword chính), <h2> cho sections, <h3> cho sub-sections — Google dùng heading để hiểu topic hierarchy. Sai lầm phổ biến: dùng <div> cho mọi thứ, nhiều <h1>, skip heading levels (h1 → h3).

robots.txt là file text đặt ở root domain (example.com/robots.txt) hướng dẫn search engine bots nên/không nên crawl phần nào của website. Syntax: User-agent: * (áp dụng cho tất cả bots), Disallow: /admin (không crawl /admin), Allow: /admin/public (ngoại lệ cho phép), Sitemap: https://example.com/sitemap.xml.

Lưu ý quan trọng: robots.txt chỉ là 'yêu cầu', bot xấu có thể bỏ qua. Disallow KHÔNG giống noindex — trang vẫn có thể xuất hiện trên Google nếu có backlinks. Muốn chắc chắn không index → dùng <meta name='robots' content='noindex'>.

Sai lầm: block CSS/JS files khiến Google không render được trang → ảnh hưởng SEO nghiêm trọng.

Sitemap XML (sitemap.xml) là file liệt kê tất cả URLs quan trọng của website, giúp search engine khám phá và index nhanh hơn. Format: <urlset> chứa nhiều <url>, mỗi url có <loc> (URL), <lastmod> (ngày cập nhật), <changefreq> và <priority> — lưu ý Google đã giảm tầm quan trọng của hai trường này từ ~2022 (vẫn giữ cho tương thích).

Khi nào CẦN: website lớn (>500 trang), trang mới tạo chưa có backlinks, website có nhiều content động (blog, e-commerce), trang deep link (>3 clicks từ homepage). Khi nào KHÔNG cần: website nhỏ (<50 trang) với navigation tốt.

Trong Next.js: dùng app/sitemap.ts export function trả về mảng URLs — Next.js tự generate sitemap.xml. Giới hạn: max 50,000 URLs hoặc 50MB mỗi sitemap, dùng sitemap index cho website lớn hơn.

Canonical URL (<link rel='canonical' href='...'>) cho Google biết URL nào là 'bản gốc' khi có nhiều URLs chứa cùng nội dung.

Ví dụ: /products?sort=price và /products?sort=name cùng nội dung → canonical trỏ về /products. Khi nào CẦN:

1. URL parameters tạo duplicate (filters, sort, pagination)
2. HTTP vs HTTPS, www vs non-www
3. Syndicated content (bài viết đăng trên nhiều site)
4. Mobile URL khác desktop URL. Nếu không có canonical, Google tự chọn 'bản gốc' — có thể chọn sai. Trong Next.js: dùng metadata.alternates.canonical trong generateMetadata()

Lưu ý: canonical phải là absolute URL, self-referencing canonical cũng tốt (mỗi trang canonical trỏ về chính nó).

Alt text (alt attribute trên <img>) mô tả nội dung ảnh cho:

1. Search engines — Google không 'nhìn' ảnh, dùng alt text để hiểu ảnh và rank trên Google Images,
2. Screen readers — người khiếm thị nghe mô tả ảnh,
3. Fallback — hiển thị khi ảnh không load được

Cách viết tốt: mô tả cụ thể, ngắn gọn (125 ký tự), chứa keyword tự nhiên (không keyword stuffing).

Ví dụ tốt: alt='Golden retriever puppy playing fetch in park'.

Ví dụ xấu: alt='dog', alt='image1.jpg', alt='best dog training tips buy now click here'.

Khi nào để trống (alt=''): decorative images không mang thông tin (icons, dividers, background patterns). Ảnh text (infographic, banner): alt text nên chứa text trong ảnh.

Rendering strategy là yếu tố critical ảnh hưởng khả năng Google index content — CSR là rủi ro cao nhất, SSR/SSG an toàn nhất.

CSR (Client-Side Rendering): HTML ban đầu trống, JS render content → Google phải chờ JS execute (second wave indexing). Rủi ro: Googlebot có thể timeout, content không index đầy đủ, crawl budget lãng phí.

SSR (Server-Side Rendering): HTML đầy đủ từ server → Google index ngay lập tức, tốt nhất cho SEO.

SSG (Static Site Generation): HTML pre-built → nhanh nhất, SEO tuyệt vời cho content tĩnh.

Google crawl SPA: Googlebot dùng Chromium headless, render JS rồi mới index — nhưng có hàng đợi dài (render queue), có thể mất vài ngày đến vài tuần. Nếu bắt buộc CSR: đảm bảo critical content trong initial HTML, dùng dynamic rendering cho bot.

Core Web Vitals (CWV) là 3 metrics đo trải nghiệm người dùng, là ranking signal của Google từ 2021. INP thay thế FID từ tháng 3/2024.

LCP (Largest Contentful Paint): thời gian render phần tử lớn nhất (hero image, heading) — target: <2.5s. Cải thiện: optimize images (WebP, lazy load), preload fonts, SSR/SSG.

INP (Interaction to Next Paint): thời gian phản hồi khi user interact (click, tap) — target: <200ms. Cải thiện: code split, defer heavy JS, reduce main thread work.

CLS (Cumulative Layout Shift): mức độ layout bị 'nhảy' — target: <0.1. Cải thiện: set width/height cho images/videos, font-display swap, avoid dynamic content injection above fold.

Google Search Console báo CWV cho từng URL. Trang có CWV tốt được ưu tiên ranking khi 2 trang có relevance tương đương.

Structured Data (JSON-LD) là cách mark up content để Google hiểu semantic context và show Rich Snippets — tăng CTR đáng kể không cần thay đổi ranking. Format phổ biến: JSON-LD trong <script type='application/ld+json'>.

Lợi ích: Rich Snippets — kết quả tìm kiếm đặc biệt với rating stars, price, availability, FAQ accordion, breadcrumbs, sitelinks. CTR tăng 20-30% với rich snippets. Schema phổ biến cho frontend: Article (blog), Product (e-commerce), FAQPage (FAQ), BreadcrumbList (breadcrumbs), Organization (company info), WebSite (search box trong Google). Trong Next.js: tạo component <JsonLd> render <script> tag với JSON.stringify(data). Validate bằng Google Rich Results Test.

Open Graph và Twitter Cards kiểm soát preview khi share link trên social media — share preview đẹp → nhiều click → nhiều traffic → nhiều backlinks → ranking tăng gián tiếp.

Open Graph (OG): meta tags chuẩn Facebook để kiểm soát preview trên Facebook, LinkedIn, Zalo, Telegram. Tags quan trọng: og:title, og:description, og:image (1200x630px recommended), og:url, og:type.

Twitter Cards: tương tự OG nhưng cho Twitter/X — twitter:card ('summary_large_image' phổ biến nhất), twitter:title, twitter:description, twitter:image.

Trong Next.js App Router: dùng metadata export hoặc generateMetadata() — Next.js tự generate OG và Twitter meta tags. Dynamic OG images: dùng opengraph-image.tsx (hoặc @vercel/og) để generate image động chứa title, author, date.

Internal linking phân phối link equity và giúp Google khám phá trang — trang không có internal link nào trỏ đến là 'orphan page', có thể không bao giờ được index.

Ảnh hưởng SEO:

1. Crawlability: Google khám phá trang mới qua internal links
2. Link equity: trang được nhiều internal links trỏ đến sẽ rank cao hơn
3. Context: anchor text của internal link giúp Google hiểu trang đích nói về gì

Best practices: dùng descriptive anchor text (không 'click here'), link từ high-authority pages đến important pages, sử dụng breadcrumbs, related posts, sidebar navigation. Trong React/Next.js: dùng <Link> component (không phải <a>) để SPA navigation nhưng vẫn render <a> cho SEO.

Next.js App Router Metadata API thay thế hoàn toàn react-helmet — type-safe, server-rendered, cascade từ layout xuống page.

2 cách dùng:

1. Static metadata: export const metadata: Metadata = { title: '...', description: '...' } từ layout.tsx hoặc page.tsx
2. Dynamic metadata: export async function generateMetadata({ params }) { ... return { title, description } } — fetch data rồi generate meta tags

Metadata cascade: layout metadata → page metadata (page override layout). Tính năng: title.template (pattern cho child pages, ví dụ '%s | MyApp'), openGraph, twitter, robots, alternates (canonical, hreflang), icons (favicon), verification (Google Search Console).

Next.js tự động generate <title>, <meta>, OG tags, Twitter cards, canonical URL từ metadata object — không cần thư viện bên ngoài.

Next.js App Router tích hợp native sitemap và robots.txt với TypeScript type-safety — không cần plugin hay static files.

Sitemap: tạo app/sitemap.ts export default function trả về mảng MetadataRoute.Sitemap. Mỗi item có url, lastModified, changeFrequency, priority. Có thể fetch data từ DB/CMS để generate dynamic URLs. Cho website lớn: tạo app/sitemap/[id]/route.ts để generate multiple sitemaps (sitemap index).

robots.txt: tạo app/robots.ts export default function trả về MetadataRoute.Robots object với rules (User-Agent, allow, disallow) và sitemap URL.

Ví dụ: { rules: { userAgent: '*', allow: '/', disallow: '/admin/' }, sitemap: 'https://example.com/sitemap.xml' }. Cả 2 đều type-safe với TypeScript, auto-generate tại build time.

next/image tự động handle lazy loading, responsive srcset, WebP conversion, và CLS prevention — 5 tính năng trực tiếp cải thiện Core Web Vitals.

1. Lazy loading mặc định — chỉ load khi gần viewport, giảm initial page weight
2. Responsive images — tự generate srcset với nhiều sizes, browser chọn size phù hợp
3. Format optimization — auto convert sang WebP/AVIF nếu browser hỗ trợ, giảm 30-50% file size
4. Prevent CLS — bắt buộc width/height hoặc fill, tránh layout shift
5. Priority loading — set priority={true} cho LCP image (above-the-fold)

SEO impact: LCP cải thiện (ranking signal), CLS giảm (ranking signal), smaller images = faster page = better crawl experience. Luôn thêm alt text mô tả ảnh cho Google Image Search và accessibility.

URL là signal nhẹ cho Google hiểu nội dung, nhưng ảnh hưởng CTR đáng kể vì user đọc URL trước khi click — URL xấu mất click dù rank cao.

Best practices:

1. Ngắn gọn, descriptive: /blog/react-query-tutorial tốt hơn /blog/post?id=123
2. Dùng hyphens (-) ngăn cách từ, KHÔNG dùng underscores (_) — Google coi hyphen là word separator, underscore không
3. Lowercase only — /About và /about là 2 URLs khác nhau (duplicate content)
4. Tránh parameters khi có thể — /products/shoes tốt hơn /products?category=shoes

1. Tránh thay đổi URL — nếu bắt buộc, 301 redirect URL cũ → mới
2. Include keyword target — nhưng tự nhiên
3. Tránh nested quá sâu — /a/b/c/d/e/page kém hơn /a/page

Trong Next.js: file-based routing tạo clean URLs tự động.