- SEO là gì? Tại sao frontend developer cần hiểu SEO?
SEO (Search Engine Optimization) là tối ưu hoá 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…
- Meta tags quan trọng nhất cho SEO là gì? Cách viết title và description hiệu quả?
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,…
- robots.txt là gì? Cách cấu hình đúng?
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…
- Sitemap XML là gì? Khi nào cần và cách tạo?
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 đã…
- Canonical URL là gì? Khi nào cần sử dụng?
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),…
- CSR, SSR, SSG ảnh hưởng SEO như thế nào? Cách Google crawl SPA?
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:…
- Core Web Vitals là gì? Ảnh hưởng thế nào đến SEO ranking?
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:…
- Structured Data (Schema.org) là gì? Lợi ích cho SEO?
Structured Data (JSON-LD) là cách mark up content để Google hiểu semantic context và có thể hiển thị Rich Results. Format phổ biến: JSON-LD trong <script type='application/ld+json'. Lợi ích: Rich Results — kết quả tìm kiếm đặc biệt với rating stars, price, availability, breadcrumbs, sitelinks…
- Open Graph và Twitter Cards là gì? Cách implement trong Next.js?
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,…
- Internal linking ảnh hưởng SEO như thế nào? Best practices?
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)…
- Crawl budget là gì? Cách tối ưu cho website lớn?
- Internationalization (i18n) SEO: hreflang là gì? Cách implement?
- JavaScript SEO: những lỗi phổ biến khiến Google không index được content?
- Metadata API trong Next.js App Router hoạt động như thế nào?
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…
- Cách tạo dynamic sitemap và robots.txt trong Next.js App Router?
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…
- next/image tối ưu SEO và performance như thế nào?
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…
- Dynamic OG images trong Next.js là gì? Cách tạo?
- generateStaticParams và ISR ảnh hưởng SEO thế nào?
- Cách tối ưu Largest Contentful Paint (LCP) trong React/Next.js?
- Alt text cho images: tại sao quan trọng và cách viết đúng?
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 —…
- URL structure ảnh hưởng SEO thế nào? Best practices?
URL chỉ là tín hiệu phụ giúp 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…
- SEO audit checklist cho frontend developer: cần kiểm tra những gì?
- 301 vs 302 vs 308 redirect — khác nhau gì và ảnh hưởng SEO thế nào?
Khác biệt cốt lõi: 301/308 = permanent, 302/307 = temporary — và cặp 307/308 giữ nguyên HTTP method + body, còn 301/302 cho phép browser đổi POST thành GET (hành vi cũ giữ lại vì lý do lịch sử). Ảnh hưởng SEO: (1) Redirect permanent…
- Mobile-first indexing là gì? Dev cần lưu ý gì?
Mobile-first indexing nghĩa là Google dùng phiên bản mobile của trang (crawl bằng Googlebot smartphone) để index và ranking — không phải phiên bản desktop. Nội dung chỉ có trên desktop mà thiếu trên mobile sẽ không được tính khi xếp hạng. Dev cần lưu…
