Mở đầu — vì sao bài này quan trọng
Có một hiểu lầm rất phổ biến mà mình muốn phá vỡ ngay từ đầu bài học này: nhiều designer nghĩ rằng SEO (Search Engine Optimization — tối ưu hóa cho công cụ tìm kiếm) là chuyện của marketer hoặc developer, không liên quan đến mình. Suy nghĩ đó khiến bạn vô tình đánh mất một lợi thế nghề nghiệp rất lớn.
Sự thật là: rất nhiều quyết định ảnh hưởng đến thứ hạng tìm kiếm được đưa ra ngay trên bàn làm việc của designer, từ lúc bạn còn đang dựng layout trong Figma. Cấu trúc trang, kích thước ảnh, cách bạn đặt heading, độ nặng của hero section, việc bạn có dùng nút "Xem thêm" che mất nội dung hay không — tất cả đều tác động đến cách Google đọc hiểu và xếp hạng trang web.
Hãy hình dung thế này: một website đẹp long lanh nhưng không ai tìm thấy trên Google thì cũng giống như một cửa hàng thiết kế tuyệt vời nhưng nằm trong con hẻm không tên, không bảng hiệu. Khách hàng — và sếp của bạn — quan tâm đến lượng truy cập tự nhiên (organic traffic), vì đó là nguồn khách miễn phí và bền vững nhất. Khi bạn là designer hiểu SEO, bạn không chỉ làm ra giao diện đẹp, bạn làm ra giao diện được tìm thấy. Đó là sự khác biệt giữa một designer giỏi và một designer được trả lương cao.
Trong bài này, mình sẽ không biến bạn thành chuyên gia SEO. Mục tiêu là giúp bạn nắm những điểm SEO mà designer trực tiếp kiểm soát, để bạn ra quyết định thiết kế tốt hơn và nói chuyện tự tin với team marketing.
Khái niệm cốt lõi
SEO là gì và Google "nhìn" trang web ra sao
Khi bạn truy cập một website, mắt bạn thấy màu sắc, hình ảnh, bố cục. Nhưng Google không có mắt — nó dùng một chương trình gọi là crawler (hay bot) để "bò" qua mã HTML của trang, đọc text, theo các đường link, rồi lưu lại nội dung vào kho dữ liệu (gọi là indexing). Sau đó khi người dùng gõ từ khóa, Google xếp hạng (ranking) các trang phù hợp nhất lên đầu.
Điều quan trọng cho designer: Google đọc cấu trúc, không đọc cái đẹp. Một tiêu đề trông to và in đậm bằng CSS nhưng được code bằng thẻ <div> thì với Google chỉ là một dòng chữ bình thường. Cùng dòng chữ đó nếu để trong thẻ <h1> thì Google hiểu "đây là chủ đề chính của trang". Cái đẹp dành cho người, cấu trúc dành cho máy — và designer giỏi phục vụ được cả hai.
Ba trụ cột SEO mà designer kiểm soát trực tiếp
1. Cấu trúc trang (semantic HTML). Đây là phần liên quan chặt đến Bài 19 về HTML Semantic mà các bạn sẽ học. Ở góc độ SEO, điều cần nhớ là: mỗi trang chỉ nên có một thẻ <h1> mô tả chủ đề chính, sau đó các mục con dùng <h2>, <h3> theo thứ tự phân cấp logic. Heading không phải để làm chữ to — nó là dàn ý nội dung cho crawler. Khi bạn thiết kế, hãy nghĩ về cấp bậc thông tin (information hierarchy), không chỉ kích thước chữ.
2. Tốc độ tải trang (Core Web Vitals). Từ năm 2021, Google chính thức dùng tốc độ và trải nghiệm tải trang làm yếu tố xếp hạng. Bộ chỉ số này gọi là Core Web Vitals, gồm ba con số mà designer ảnh hưởng nhiều nhất:
- LCP (Largest Contentful Paint) — thời gian phần tử lớn nhất (thường là ảnh hero hoặc tiêu đề lớn) hiện ra. Nên dưới 2,5 giây. Đây là chỉ số designer tác động mạnh nhất vì hero section thường do bạn thiết kế.
- CLS (Cumulative Layout Shift) — mức độ giao diện bị "nhảy" khi đang tải. Ví dụ ảnh tải xong đẩy nội dung xuống làm người dùng bấm nhầm. Nên dưới 0,1.
- INP (Interaction to Next Paint) — độ trễ khi người dùng tương tác (bấm nút, mở menu). Nên dưới 200 mili-giây.
3. Trải nghiệm trên di động (Mobile experience). Google dùng mobile-first indexing — nghĩa là nó đánh giá phiên bản di động của trang trước tiên. Nếu bản mobile của bạn thiếu nội dung, chữ quá nhỏ, hoặc nút bấm sát nhau khó chạm, thứ hạng sẽ bị ảnh hưởng. Điều này gắn chặt với tư duy Mobile-First mà các bạn học ở Bài 16.
Những yếu tố thị giác có "trọng số SEO"
- Alt text cho ảnh. Mỗi
<img>cần thuộc tínhaltmô tả nội dung ảnh. Google không "nhìn" được ảnh, nó đọc alt text để hiểu. Đây vừa là SEO vừa là accessibility (trình đọc màn hình đọc alt text cho người khiếm thị). - Title và meta description. Đây là tiêu đề và đoạn mô tả hiện trên kết quả tìm kiếm Google. Designer thường thiết kế template trang nên cần chừa chỗ và quy ước cho hai phần này.
- Định dạng và dung lượng ảnh. Ảnh nặng làm chậm LCP. Dùng WebP/AVIF thay JPG/PNG, nén ảnh hợp lý — phần này nối tiếp Bài 31 về tối ưu ảnh.
- Văn bản thật, không phải chữ trong ảnh. Chữ nằm trong file ảnh thì Google không đọc được. Nếu bạn thiết kế banner có slogan quan trọng bằng chữ trong ảnh, nội dung đó "vô hình" với SEO.
Tình huống thực tế
Ví dụ 1: Hero "khủng" của một sàn TMĐT khiến điểm SEO tụt
Một bạn designer làm cho một sàn thương mại điện tử thời trang ở TP.HCM (gọi là StyleVina cho dễ hình dung) thiết kế trang chủ với một ảnh hero toàn màn hình rất đẹp: model mặc bộ sưu tập mới, file PNG độ phân giải cao nặng 3,8 MB. Trên màn hình desktop văn phòng wifi mạnh thì không sao. Nhưng khi đo bằng PageSpeed Insights, LCP trên mạng 4G của điện thoại lên tới 5,9 giây — gần gấp đôi ngưỡng 2,5 giây của Google.
Hậu quả: trang chủ bị xếp vào nhóm "Poor" của Core Web Vitals, và tỷ lệ thoát trang (bounce rate) trên mobile cao bất thường vì khách Việt phần lớn dùng 4G, thấy trang trắng quá lâu nên thoát.
Cách xử lý: bạn designer đổi ảnh hero sang WebP, nén còn 220 KB (giảm hơn 90% mà mắt thường gần như không thấy khác biệt), thêm thuộc tính width/height cố định để tránh layout shift, và đánh dấu ảnh hero là ưu tiên tải (fetchpriority="high"). LCP rớt xuống 2,1 giây.
Bài học: Hero section là "mặt tiền" SEO. Một quyết định thiết kế tưởng vô hại — chọn ảnh nét nhất — có thể đánh sập điểm tốc độ. Designer cần cân giữa độ đẹp và dung lượng ngay từ khi chọn ảnh.
Ví dụ 2: Heading "đẹp mà sai" của một startup giáo dục
Một startup edtech ở Hà Nội thuê freelancer thiết kế landing page khóa học. Trang trông rất chuyên nghiệp, nhưng bạn designer dùng <div> với CSS để tạo mọi tiêu đề vì "linh hoạt hơn khi style". Toàn trang không có một thẻ <h1> nào, còn dòng chữ to nhất là tên thương hiệu chứ không phải chủ đề khóa học.
Khi team marketing chạy công cụ SEO audit, kết quả báo: "Trang không có H1", "Cấu trúc heading rỗng". Google không xác định được trang này nói về cái gì, nên dù nội dung tốt, trang vẫn không lên được top cho từ khóa "khóa học digital marketing online".
Cách xử lý: designer giữ nguyên giao diện nhưng đổi đúng thẻ — tiêu đề chính "Khóa học Digital Marketing thực chiến" thành <h1>, các phần "Lộ trình học", "Giảng viên", "Học phí" thành <h2>. CSS không đổi một dòng, nhìn y hệt, nhưng giờ Google đọc được dàn ý. Sau vài tuần, trang bắt đầu lên trang nhất cho từ khóa mục tiêu.
Bài học: Thẻ HTML và kích thước chữ là hai chuyện khác nhau. Bạn có thể làm <h1> nhỏ và <div> to bằng CSS — nhưng với SEO, cái quyết định là thẻ, không phải cỡ chữ. Hãy thiết kế phân cấp tiêu đề đúng nghĩa, rồi style sau.
Ví dụ 3: "Layout nhảy" làm khách bấm nhầm trên một trang tin
Một trang tin tức công nghệ đặt khối quảng cáo banner ngay dưới tiêu đề bài viết, nhưng không cố định chiều cao khối đó. Khi quảng cáo tải xong (chậm hơn nội dung), nó "đẩy" toàn bộ bài viết xuống dưới. Nhiều độc giả đang định bấm vào link đầu bài thì đột nhiên nội dung nhảy, họ bấm nhầm vào quảng cáo. Điểm CLS lên tới 0,38 — rất tệ so với ngưỡng 0,1.
Cách xử lý: designer quy định một khung cố định (reserved space) cho mọi vị trí quảng cáo và ảnh — đặt sẵn min-height đúng kích thước slot. Khi nội dung động tải vào, nó lấp vào chỗ đã chừa sẵn, không đẩy gì cả. CLS rớt xuống 0,02.
Bài học: Mọi thứ tải bất đồng bộ — ảnh, quảng cáo, font, widget — đều cần được "chừa chỗ" trong thiết kế. Designer là người quyết định bố cục, nên cũng là người ngăn được layout shift. Đây là tư duy "thiết kế cho trạng thái đang tải", không chỉ trạng thái hoàn chỉnh.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng cho mọi trang mình thiết kế, từ lúc dựng layout đến lúc bàn giao.
Bước 1 — Phác thảo dàn ý heading trước khi vẽ. Trước khi mở Figma, viết ra dàn ý nội dung kiểu mục lục: H1 là gì, các H2 nào, H3 nào. Dàn ý này vừa hướng dẫn bố cục thị giác vừa là cấu trúc SEO. Mỗi trang đúng một H1.
Bước 2 — Thiết kế hero "nhẹ". Khi chọn ảnh hero, hỏi ngay: ảnh này sẽ nặng bao nhiêu sau khi nén? Ưu tiên ảnh có thể nén tốt, hoặc kết hợp màu nền/gradient + ảnh nhỏ. Nhắm dung lượng ảnh hero dưới 300 KB.
Bước 3 — Chừa chỗ cho mọi phần tử động. Với mỗi ảnh, video, banner, hay widget, xác định kích thước cố định và ghi rõ trong file thiết kế để developer set width/height. Đây là vũ khí chống CLS.
Bước 4 — Quy ước alt text. Trong file thiết kế, với mỗi ảnh có ý nghĩa nội dung, ghi chú alt text gợi ý. Ảnh trang trí thuần túy thì ghi rõ "alt rỗng" để developer biết.
Bước 5 — Thiết kế chỗ cho title & meta description. Nếu bạn làm template (ví dụ trang sản phẩm), hãy quy ước title hiển thị tối đa ~60 ký tự, meta description ~155 ký tự, để khi hiện trên Google không bị cắt cụt.
Bước 6 — Kiểm tra bản mobile như bản chính. Thiết kế và review bản mobile kỹ như desktop: chữ tối thiểu 16px cho body, vùng chạm tối thiểu 44x44px, nội dung không bị giấu sau quá nhiều nút "Xem thêm".
Bước 7 — Đo bằng công cụ miễn phí. Sau khi trang lên, chạy PageSpeed Insights (pagespeed.web.dev) hoặc tab Lighthouse trong Chrome DevTools. Đọc ba số LCP, CLS, INP. Đây là cách bạn tự kiểm tra mà không cần làm phiền developer.
Lỗi thường gặp & mẹo
Lỗi: Nhồi nhiều H1 trong một trang. Nhiều bạn dùng H1 cho mọi tiêu đề lớn vì nghĩ "càng nhiều H1 càng mạnh SEO". Sai. Mỗi trang một H1 duy nhất; phần còn lại dùng H2/H3.
Lỗi: Chữ quan trọng nằm trong ảnh. Slogan, giá tiền, thông tin chính nằm trong file ảnh thì Google không đọc được. Hãy để text quan trọng dưới dạng text HTML thật, ảnh chỉ làm nền.
Lỗi: Quên alt text hoặc nhồi từ khóa vào alt. Alt text nên mô tả thật nội dung ảnh, không phải nơi nhét từ khóa lặp đi lặp lại. Google phạt hành vi nhồi từ khóa.
Lỗi: Hero quá nặng hoặc dùng video tự động phát nặng. Cân nhắc kỹ — một video hero 8 MB tự phát có thể đẹp nhưng giết chết tốc độ trên 4G.
Lỗi: Giấu nội dung quan trọng sau tab/accordion ẩn trên mobile. Google vẫn index nội dung trong accordion, nhưng nếu bạn ẩn hẳn (display none vĩnh viễn) thì rủi ro. Nội dung cốt lõi nên hiển thị trực tiếp.
Mẹo: Dùng font hệ thống hoặc giới hạn số font. Mỗi font tải về làm chậm trang và có thể gây "nhảy chữ" (FOIT/FOUT). Giới hạn 1–2 họ font, dùng font-display: swap để chữ hiện sớm.
Mẹo: Lazy-load ảnh dưới màn hình đầu, nhưng KHÔNG lazy-load ảnh hero. Ảnh ngoài tầm nhìn ban đầu nên tải trễ để tiết kiệm; nhưng ảnh hero cần tải ngay nếu không LCP sẽ tệ.
Mẹo: Nói chung ngôn ngữ với marketing. Khi bạn biết nói "trang này LCP 2,1 giây, CLS 0,02", bạn lập tức được team SEO/marketing tôn trọng và tin tưởng hơn hẳn.
Bài tập thực hành
- Audit một trang có sẵn. Chọn một website bạn thích (hoặc trang của công ty bạn), mở pagespeed.web.dev, dán URL và chạy. Ghi lại ba số LCP, CLS, INP cho cả mobile và desktop. Trang này đạt hay không đạt ngưỡng? Vấn đề lớn nhất nằm ở đâu?
- Soi cấu trúc heading. Vẫn trang đó, bấm chuột phải > Inspect, tìm xem có bao nhiêu thẻ
<h1>, dàn heading có logic không. Vẽ lại dàn ý heading của trang ra giấy như một mục lục.
- Tối ưu một ảnh hero. Lấy một ảnh hero bất kỳ định dạng PNG/JPG. Dùng công cụ như Squoosh (squoosh.app) chuyển sang WebP và nén. Ghi lại dung lượng trước/sau và quan sát mắt thường có thấy khác biệt không.
- Viết alt text. Chọn 5 ảnh trong một bài viết hoặc trang sản phẩm, viết alt text cho từng ảnh (mô tả, ngắn gọn, không nhồi từ khóa). So sánh ảnh nào là ảnh nội dung, ảnh nào chỉ trang trí (alt rỗng).
- Thiết kế chống CLS. Lấy một layout có ảnh + quảng cáo, đánh dấu trong Figma mọi vị trí cần "chừa chỗ cố định" và ghi kích thước cụ thể. Đây là bản giao việc chống layout shift cho developer.
Tóm tắt
SEO không phải là việc xảy ra sau khi thiết kế xong — nó được quyết định ngay trong từng lựa chọn thiết kế của bạn. Là designer, bạn kiểm soát trực tiếp ba trụ cột quan trọng: cấu trúc trang (heading và semantic HTML giúp Google hiểu nội dung), tốc độ tải (Core Web Vitals — LCP dưới 2,5s, CLS dưới 0,1, INP dưới 200ms), và trải nghiệm di động (mobile-first indexing).
Hãy nhớ nguyên tắc cốt lõi: cái đẹp dành cho người, cấu trúc dành cho máy — và designer giỏi phục vụ cả hai cùng lúc. Thẻ HTML đúng quan trọng hơn cỡ chữ, ảnh nhẹ quan trọng hơn ảnh nét tối đa, và mọi phần tử động đều cần được chừa chỗ để không làm nhảy layout.
Khi bạn bắt đầu nghĩ về LCP lúc chọn ảnh hero, nghĩ về H1 lúc dựng dàn ý, và nghĩ về CLS lúc đặt quảng cáo, bạn đã trở thành một designer mà cả người dùng lẫn Google đều yêu thích. Và đó chính là loại designer mà thị trường Việt Nam đang rất thiếu — người làm ra giao diện vừa đẹp, vừa được tìm thấy.