): 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'.\n\nMeta 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.\n\nMeta robots (<meta name='robots'>): điều khiển indexing — index,follow (mặc định), noindex (không index), nofollow (không follow links).\n\nCanonical (<link rel='canonical'>): chỉ định URL chính thức khi có duplicate content.\n\nOpen Graph (og:title, og:description, og:image): kiểm soát preview khi share trên social media.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-3","number":3,"title":"robots.txt là gì? Cách cấu hình đúng?","answer":"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.\n\nLư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'>.\n\nSai lầm: block CSS/JS files khiến Google không render được trang → ảnh hưởng SEO nghiêm trọng.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-4","number":4,"title":"Sitemap XML là gì? Khi nào cần và cách tạo?","answer":"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).\n\nKhi 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.\n\nTrong 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.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-5","number":5,"title":"Canonical URL là gì? Khi nào cần sử dụng?","answer":"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.\n\nVí dụ: /products?sort=price và /products?sort=name cùng nội dung → canonical trỏ về /products. Khi nào CẦN:\n\nURL parameters tạo duplicate (filters, sort, pagination)\nHTTP vs HTTPS, www vs non-www\nSyndicated content (bài viết đăng trên nhiều site)\nMobile 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()\n\nLưu ý: canonical phải là absolute URL, self-referencing canonical cũng tốt (mỗi trang canonical trỏ về chính nó).","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-6","number":6,"title":"Alt text cho images: tại sao quan trọng và cách viết đúng?","answer":"Alt text (alt attribute trên <img>) mô tả nội dung ảnh cho:\n\nSearch engines — Google không 'nhìn' ảnh, dùng alt text để hiểu ảnh và rank trên Google Images,\nScreen readers — người khiếm thị nghe mô tả ảnh,\nFallback — hiển thị khi ảnh không load được\n\nCá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).\n\nVí dụ tốt: alt='Golden retriever puppy playing fetch in park'.\n\nVí dụ xấu: alt='dog', alt='image1.jpg', alt='best dog training tips buy now click here'.\n\nKhi 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.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-7","number":7,"title":"CSR, SSR, SSG ảnh hưởng SEO như thế nào? Cách Google crawl SPA?","answer":"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.\n\nCSR (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í.\n\nSSR (Server-Side Rendering): HTML đầy đủ từ server → Google index ngay lập tức, tốt nhất cho SEO.\n\nSSG (Static Site Generation): HTML pre-built → nhanh nhất, SEO tuyệt vời cho content tĩnh.\n\nGoogle 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-8","number":8,"title":"Core Web Vitals là gì? Ảnh hưởng thế nào đến SEO ranking?","answer":"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.\n\nLCP (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.\n\nINP (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.\n\nCLS (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.\n\nGoogle 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-9","number":9,"title":"Structured Data (Schema.org) là gì? Lợi ích cho SEO?","answer":"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'>.\n\nLợ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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-10","number":10,"title":"Open Graph và Twitter Cards là gì? Cách implement trong Next.js?","answer":"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.\n\nOpen 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.\n\nTwitter 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.\n\nTrong 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-11","number":11,"title":"Internal linking ảnh hưởng SEO như thế nào? Best practices?","answer":"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.\n\nẢnh hưởng SEO:\n\nCrawlability: Google khám phá trang mới qua internal links\nLink equity: trang được nhiều internal links trỏ đến sẽ rank cao hơn\nContext: anchor text của internal link giúp Google hiểu trang đích nói về gì\n\nBest 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-12","number":12,"title":"Metadata API trong Next.js App Router hoạt động như thế nào?","answer":"Next.js App Router Metadata API thay thế hoàn toàn react-helmet — type-safe, server-rendered, cascade từ layout xuống page.\n\n2 cách dùng:\n\nStatic metadata: export const metadata: Metadata = { title: '...', description: '...' } từ layout.tsx hoặc page.tsx\nDynamic metadata: export async function generateMetadata({ params }) { ... return { title, description } } — fetch data rồi generate meta tags\n\nMetadata 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).\n\nNext.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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-13","number":13,"title":"Cách tạo dynamic sitemap và robots.txt trong Next.js App Router?","answer":"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.\n\nSitemap: 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).\n\nrobots.txt: tạo app/robots.ts export default function trả về MetadataRoute.Robots object với rules (User-Agent, allow, disallow) và sitemap URL.\n\nVí 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-14","number":14,"title":"next/image tối ưu SEO và performance như thế nào?","answer":"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.\n\nLazy loading mặc định — chỉ load khi gần viewport, giảm initial page weight\nResponsive images — tự generate srcset với nhiều sizes, browser chọn size phù hợp\nFormat optimization — auto convert sang WebP/AVIF nếu browser hỗ trợ, giảm 30-50% file size\nPrevent CLS — bắt buộc width/height hoặc fill, tránh layout shift\nPriority loading — set priority={true} cho LCP image (above-the-fold)\n\nSEO 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-15","number":15,"title":"URL structure ảnh hưởng SEO thế nào? Best practices?","answer":"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.\n\nBest practices:\n\nNgắn gọn, descriptive: /blog/react-query-tutorial tốt hơn /blog/post?id=123\nDùng hyphens (-) ngăn cách từ, KHÔNG dùng underscores (_) — Google coi hyphen là word separator, underscore không\nLowercase only — /About và /about là 2 URLs khác nhau (duplicate content)\nTránh parameters khi có thể — /products/shoes tốt hơn /products?category=shoes\nTránh thay đổi URL — nếu bắt buộc, 301 redirect URL cũ → mới\nInclude keyword target — nhưng tự nhiên\nTránh nested quá sâu — /a/b/c/d/e/page kém hơn /a/page\n\nTrong Next.js: file-based routing tạo clean URLs tự động.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-16","number":16,"title":"Crawl budget là gì? Cách tối ưu cho website lớn?","answer":"Crawl budget là số pages Googlebot crawl trong một khoảng thời gian — waste crawl budget bằng duplicate URLs hay redirect chains có thể khiến important pages không được index.\n\nGồm 2 yếu tố: Crawl rate limit (tốc độ crawl không gây quá tải server) và Crawl demand (Google muốn crawl bao nhiêu dựa trên popularity/freshness). Quan trọng khi website >10,000 pages.\n\nLãng phí crawl budget:\n\nduplicate content (URL parameters, www/non-www)\nsoft 404s (trang trống return 200)\nredirect chains (A→B→C→D)\ninfinite URL spaces (calendar, filters tạo vô hạn URL combinations)\n\nTối ưu: canonical tags, robots.txt block unnecessary paths, clean URL structure, sitemap chỉ chứa important pages, server response time <500ms, dùng 410 thay vì 404 cho permanently deleted pages. Lưu ý: rel=next/prev cho pagination đã bị Google deprecated từ tháng 3/2019 — không còn hiệu lực.","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-17","number":17,"title":"Internationalization (i18n) SEO: hreflang là gì? Cách implement?","answer":"hreflang attribute cho Google biết trang nào dành cho ngôn ngữ/quốc gia nào — tránh duplicate content penalty khi có nhiều phiên bản ngôn ngữ. Format: <link rel='alternate' hreflang='vi' href='https://example.com/vi/page'>.\n\nQuy tắc:\n- Mỗi trang phải có hreflang trỏ đến TẤT CẢ phiên bản ngôn ngữ (kể cả chính nó — self-referencing).\n- hreflang phải reciprocal (trang A trỏ B, trang B phải trỏ lại A).\n- Dùng x-default cho fallback language.\n\nFormat language code: 'vi' (ngôn ngữ), 'en-US' (ngôn ngữ-quốc gia). Trong Next.js: cấu hình i18n routing trong next.config, generateMetadata() với alternates.languages.\n\nSai lầm: hreflang không reciprocal (Google bỏ qua), mixed signals (hreflang nói tiếng Việt nhưng content tiếng Anh), quên x-default.","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-18","number":18,"title":"JavaScript SEO: những lỗi phổ biến khiến Google không index được content?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-19","number":19,"title":"Dynamic OG images trong Next.js là gì? Cách tạo?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-20","number":20,"title":"generateStaticParams và ISR ảnh hưởng SEO thế nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-21","number":21,"title":"Cách tối ưu Largest Contentful Paint (LCP) trong React/Next.js?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-22","number":22,"title":"SEO audit checklist cho frontend developer: cần kiểm tra những gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"}]}]}]]}] </article></body></html>

5:["$","div",null,{"className":"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10","children":[["$","$L10",null,{"href":"/","className":"inline-flex items-center gap-2 text-sm text-slate-500 hover:text-white transition-colors mb-8 group","children":[["$","svg",null,{"className":"w-4 h-4 group-hover:-translate-x-0.5 transition-transform","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M15 19l-7-7 7-7"}]}],"Trang chủ"]}],["$","div",null,{"className":"mb-8","children":[["$","div",null,{"className":"flex items-start gap-4 mb-4","children":[["$","div",null,{"className":"text-4xl sm:text-5xl leading-none","children":"🔍"}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","h1",null,{"className":"text-2xl sm:text-3xl font-bold text-white mb-2","children":"SEO"}],["$","div",null,{"className":"flex flex-wrap items-center gap-2 sm:gap-4 text-sm","children":[["$","span",null,{"className":"text-slate-400","children":[["$","span",null,{"className":"text-white font-semibold","children":22}]," câu hỏi"]}],["$","span",null,{"className":"hidden sm:block text-slate-600","children":"·"}],["$","span",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"w-2 h-2 rounded-full bg-emerald-400"}],["$","span",null,{"className":"text-emerald-400","children":[6," Cơ Bản"]}]]}],["$","span",null,{"className":"hidden sm:block text-slate-600","children":"·"}],["$","span",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"w-2 h-2 rounded-full bg-amber-400"}],["$","span",null,{"className":"text-amber-400","children":[7," Nâng Cao"]}]]}]]}]]}]]}],["$","$L10",null,{"href":"/interview?categories=seo","className":"inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors","children":[["$","svg",null,{"className":"w-4 h-4","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"}]}],"Luyện tập chủ đề này"]}]]}],["$","$7",null,{"fallback":["$","div",null,{"className":"text-slate-500 text-sm","children":"Đang tải..."}],"children":["$","$L11",null,{"questions":[{"id":"seo-1","number":1,"title":"SEO là gì? Tại sao frontend developer cần hiểu SEO?","answer":"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.\n\nFrontend developer trực tiếp ảnh hưởng SEO vì:\n\nHTML structure quyết định cách Google hiểu nội dung (semantic tags, heading hierarchy)\nPerformance ảnh hưởng ranking (Core Web Vitals là ranking signal từ 2021)\nRendering strategy quyết định Google có index được content không (CSR vs SSR)\nTechnical SEO implementation (meta tags, structured data, sitemap) thường do frontend làm","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-2","number":2,"title":"Meta tags quan trọng nhất cho SEO là gì? Cách viết title và description hiệu quả?","answer":"Có 5 meta tags quan trọng nhất mà frontend dev cần nắm: title, description, robots, canonical, và Open Graph.\n\nTitle tag (): 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'.\n\nMeta 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.\n\nMeta robots (<meta name='robots'>): điều khiển indexing — index,follow (mặc định), noindex (không index), nofollow (không follow links).\n\nCanonical (<link rel='canonical'>): chỉ định URL chính thức khi có duplicate content.\n\nOpen Graph (og:title, og:description, og:image): kiểm soát preview khi share trên social media.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-3","number":3,"title":"robots.txt là gì? Cách cấu hình đúng?","answer":"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.\n\nLư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'>.\n\nSai lầm: block CSS/JS files khiến Google không render được trang → ảnh hưởng SEO nghiêm trọng.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-4","number":4,"title":"Sitemap XML là gì? Khi nào cần và cách tạo?","answer":"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).\n\nKhi 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.\n\nTrong 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.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-5","number":5,"title":"Canonical URL là gì? Khi nào cần sử dụng?","answer":"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.\n\nVí dụ: /products?sort=price và /products?sort=name cùng nội dung → canonical trỏ về /products. Khi nào CẦN:\n\nURL parameters tạo duplicate (filters, sort, pagination)\nHTTP vs HTTPS, www vs non-www\nSyndicated content (bài viết đăng trên nhiều site)\nMobile 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()\n\nLưu ý: canonical phải là absolute URL, self-referencing canonical cũng tốt (mỗi trang canonical trỏ về chính nó).","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-6","number":6,"title":"Alt text cho images: tại sao quan trọng và cách viết đúng?","answer":"Alt text (alt attribute trên <img>) mô tả nội dung ảnh cho:\n\nSearch engines — Google không 'nhìn' ảnh, dùng alt text để hiểu ảnh và rank trên Google Images,\nScreen readers — người khiếm thị nghe mô tả ảnh,\nFallback — hiển thị khi ảnh không load được\n\nCá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).\n\nVí dụ tốt: alt='Golden retriever puppy playing fetch in park'.\n\nVí dụ xấu: alt='dog', alt='image1.jpg', alt='best dog training tips buy now click here'.\n\nKhi 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.","difficulty":"Cơ Bản","category":"seo","categoryName":"SEO"},{"id":"seo-7","number":7,"title":"CSR, SSR, SSG ảnh hưởng SEO như thế nào? Cách Google crawl SPA?","answer":"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.\n\nCSR (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í.\n\nSSR (Server-Side Rendering): HTML đầy đủ từ server → Google index ngay lập tức, tốt nhất cho SEO.\n\nSSG (Static Site Generation): HTML pre-built → nhanh nhất, SEO tuyệt vời cho content tĩnh.\n\nGoogle 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-8","number":8,"title":"Core Web Vitals là gì? Ảnh hưởng thế nào đến SEO ranking?","answer":"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.\n\nLCP (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.\n\nINP (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.\n\nCLS (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.\n\nGoogle 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-9","number":9,"title":"Structured Data (Schema.org) là gì? Lợi ích cho SEO?","answer":"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'>.\n\nLợ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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-10","number":10,"title":"Open Graph và Twitter Cards là gì? Cách implement trong Next.js?","answer":"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.\n\nOpen 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.\n\nTwitter 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.\n\nTrong 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-11","number":11,"title":"Internal linking ảnh hưởng SEO như thế nào? Best practices?","answer":"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.\n\nẢnh hưởng SEO:\n\nCrawlability: Google khám phá trang mới qua internal links\nLink equity: trang được nhiều internal links trỏ đến sẽ rank cao hơn\nContext: anchor text của internal link giúp Google hiểu trang đích nói về gì\n\nBest 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-12","number":12,"title":"Metadata API trong Next.js App Router hoạt động như thế nào?","answer":"Next.js App Router Metadata API thay thế hoàn toàn react-helmet — type-safe, server-rendered, cascade từ layout xuống page.\n\n2 cách dùng:\n\nStatic metadata: export const metadata: Metadata = { title: '...', description: '...' } từ layout.tsx hoặc page.tsx\nDynamic metadata: export async function generateMetadata({ params }) { ... return { title, description } } — fetch data rồi generate meta tags\n\nMetadata 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).\n\nNext.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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-13","number":13,"title":"Cách tạo dynamic sitemap và robots.txt trong Next.js App Router?","answer":"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.\n\nSitemap: 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).\n\nrobots.txt: tạo app/robots.ts export default function trả về MetadataRoute.Robots object với rules (User-Agent, allow, disallow) và sitemap URL.\n\nVí 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-14","number":14,"title":"next/image tối ưu SEO và performance như thế nào?","answer":"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.\n\nLazy loading mặc định — chỉ load khi gần viewport, giảm initial page weight\nResponsive images — tự generate srcset với nhiều sizes, browser chọn size phù hợp\nFormat optimization — auto convert sang WebP/AVIF nếu browser hỗ trợ, giảm 30-50% file size\nPrevent CLS — bắt buộc width/height hoặc fill, tránh layout shift\nPriority loading — set priority={true} cho LCP image (above-the-fold)\n\nSEO 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.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-15","number":15,"title":"URL structure ảnh hưởng SEO thế nào? Best practices?","answer":"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.\n\nBest practices:\n\nNgắn gọn, descriptive: /blog/react-query-tutorial tốt hơn /blog/post?id=123\nDùng hyphens (-) ngăn cách từ, KHÔNG dùng underscores (_) — Google coi hyphen là word separator, underscore không\nLowercase only — /About và /about là 2 URLs khác nhau (duplicate content)\nTránh parameters khi có thể — /products/shoes tốt hơn /products?category=shoes\nTránh thay đổi URL — nếu bắt buộc, 301 redirect URL cũ → mới\nInclude keyword target — nhưng tự nhiên\nTránh nested quá sâu — /a/b/c/d/e/page kém hơn /a/page\n\nTrong Next.js: file-based routing tạo clean URLs tự động.","difficulty":"Trung Bình","category":"seo","categoryName":"SEO"},{"id":"seo-16","number":16,"title":"Crawl budget là gì? Cách tối ưu cho website lớn?","answer":"Crawl budget là số pages Googlebot crawl trong một khoảng thời gian — waste crawl budget bằng duplicate URLs hay redirect chains có thể khiến important pages không được index.\n\nGồm 2 yếu tố: Crawl rate limit (tốc độ crawl không gây quá tải server) và Crawl demand (Google muốn crawl bao nhiêu dựa trên popularity/freshness). Quan trọng khi website >10,000 pages.\n\nLãng phí crawl budget:\n\nduplicate content (URL parameters, www/non-www)\nsoft 404s (trang trống return 200)\nredirect chains (A→B→C→D)\ninfinite URL spaces (calendar, filters tạo vô hạn URL combinations)\n\nTối ưu: canonical tags, robots.txt block unnecessary paths, clean URL structure, sitemap chỉ chứa important pages, server response time <500ms, dùng 410 thay vì 404 cho permanently deleted pages. Lưu ý: rel=next/prev cho pagination đã bị Google deprecated từ tháng 3/2019 — không còn hiệu lực.","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-17","number":17,"title":"Internationalization (i18n) SEO: hreflang là gì? Cách implement?","answer":"hreflang attribute cho Google biết trang nào dành cho ngôn ngữ/quốc gia nào — tránh duplicate content penalty khi có nhiều phiên bản ngôn ngữ. Format: <link rel='alternate' hreflang='vi' href='https://example.com/vi/page'>.\n\nQuy tắc:\n- Mỗi trang phải có hreflang trỏ đến TẤT CẢ phiên bản ngôn ngữ (kể cả chính nó — self-referencing).\n- hreflang phải reciprocal (trang A trỏ B, trang B phải trỏ lại A).\n- Dùng x-default cho fallback language.\n\nFormat language code: 'vi' (ngôn ngữ), 'en-US' (ngôn ngữ-quốc gia). Trong Next.js: cấu hình i18n routing trong next.config, generateMetadata() với alternates.languages.\n\nSai lầm: hreflang không reciprocal (Google bỏ qua), mixed signals (hreflang nói tiếng Việt nhưng content tiếng Anh), quên x-default.","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-18","number":18,"title":"JavaScript SEO: những lỗi phổ biến khiến Google không index được content?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-19","number":19,"title":"Dynamic OG images trong Next.js là gì? Cách tạo?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-20","number":20,"title":"generateStaticParams và ISR ảnh hưởng SEO thế nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-21","number":21,"title":"Cách tối ưu Largest Contentful Paint (LCP) trong React/Next.js?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"},{"id":"seo-22","number":22,"title":"SEO audit checklist cho frontend developer: cần kiểm tra những gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"seo","categoryName":"SEO"}]}]}]]}] </article></body></html>