Tối ưu các thẻ HTML là một kỹ thuật quan trọng của SEO On-page. Vậy làm sao để tối ưu các thẻ này như thế nào để tăng xếp hạng từ khóa? Cùng LAGENCY tìm hiểu chi tiết trong nội dung dưới đây nhé!
Tóm Tắt
Thẻ HTML là gì?
Thẻ HTML là một đoạn text mã nguồn giúp cho các công cụ tìm kiếm có thể hiểu và thu thập thông tin của trang web đó.
Hầu hết các thẻ trong HTML đều gồm hai phần: Một phần mở và một phần đóng. Ví dụ, <html>là thẻ mở, còn </html> là thẻ đóng. Lưu ý rằng thẻ đóng có cùng nội dung văn bản với thẻ mở, nhưng có thêm ký tự gạch chéo “/”.
Tuy nhiên có một số thẻ HTML là trường hợp ngoại lệ với quy tắc trên, tức là chỉ có thẻ mở chứ không có thẻ đóng. Thẻ <img> chính là một ví dụ, thẻ này được sử dụng để nhúng một hình ảnh trong một trang HTML.
Một tệp HTML hợp lệ của một trang web cấu tạo từ 4 bộ thẻ HTML cơ bản gồm:
- <html> </html>;
- <head> </head>;
- <title> </title>;
- <body> </body>.
Bên trong mỗi thẻ này lại có nhiều thẻ HTML khác, ví dụ như thẻ <head> sẽ chứa thêm thẻ rel=”canonical”. Như vậy khi tổng hợp các thẻ trong HTML của một trang web có lẽ phải lên đến con số vài chục.
Vai trò của thẻ html trong SEO
Thẻ HTML là ngôn ngữ duy nhất mà các công cụ tìm kiếm có thể hiểu và “đọc” đúng nội dung trên website của bạn. Nhờ vậy, văn bản, hình ảnh và các liên kết nội bộ trong bài viết có thể được hiển thị chính xác giống như những gì mà lập trình viên thiết lập trong mã HTML.
Các thẻ trong HTML có thể giúp bạn cải thiện xếp hạng từ khóa nếu được tối ưu đúng. Bên cạnh đó, một số thẻ HTML cơ bản còn giúp chỉ định những thông tin mà họ muốn người dùng có thể nhìn thấy trên website của họ.
Tổng hợp các thẻ HTML thông dụng cần tối ưu chuẩn SEO
Tối ưu thẻ HTML là kỹ thuật SEO website cực kỳ quan trọng trong quy trình SEO để chúng ta có được một website thân thiện với công cụ tìm kiếm. Dưới đây chúng tôi đã tổng hợp 8 loại thẻ HTML thông dụng và cách tối ưu các thẻ này:
1. Thẻ title (tiêu đề)
Thẻ Title là phần hiển thị trên kết quả tìm kiếm của Google, mục đích của thẻ title là mô tả chính xác và ngắn gọn nội dung bài viết muốn truyền đạt. Thẻ tiêu đề lôi cuốn, đáp ứng đúng insight sẽ khiến người dùng click vào để xem nội dung bên trong.
Từ đó Google sẽ căn cứ vào thời gian trên trang, tỷ lệ nhấp chuột, tỷ lệ thoát trang và nhiều yếu tố khác để xếp hạng trang web của bạn.
Một thẻ title đã được tối ưu phải thỏa mãn 5 điều kiện gồm:
- Title đánh trúng vào tâm lý người dùng;
- Title phải nêu ngắn gọn nội dung content bên trong;
- Title phải chứa từ khóa chính, nhưng không được nhồi nhét từ khóa;
- Title nên dài từ 55-60 ký tự (đã bao gồm khoảng trắng), nếu dài hơn thì cần phải đẩy từ khóa chính lên đầu tiên;
- Title mỗi trang không được trùng nhau.
2. Thẻ Meta Description (mô tả)
Thẻ Meta Description được sử dụng để thiết lập phần đoạn văn bản màu xám, xuất hiện ở ngay phía dưới title trong bảng hiển thị kết quả tìm kiếm.Google không phải lúc nào cũng sử dụng thẻ meta description đã được thiết lập trong mã nguồn để hiển thị trên trang tìm kiếm. Đôi khi họ sẽ lấy một đoạn trích dẫn từ nội dung trong trang. Điều này thường xảy ra khi câu trích dẫn này phù hợp với truy vấn của người dùng hơn là đoạn meta mà bạn đã thiết lập.
Thẻ meta description trong mã nguồn HTML được thiết lập như sau:
<meta name=description content=”Điền nội dung bạn muốn nhập vào đây”>
Để tối ưu thẻ meta description, bạn chỉ cần lưu ý 2 điều sau:
- Nội dung súc tích nhưng độ dài đoạn text không được quá 150 ký tự (đã bao gồm khoảng cách);
- Phần description phải chứa từ khóa chính, có thể lồng ghép thêm từ khóa phụ hoặc từ đồng nghĩa để gần hơn với truy vấn người dùng.
Riêng đối với những bài viết về dịch vụ, trong meta description nên chèn thêm các ký tự đặc biệt để làm nổi bật điểm mạnh.
3. Thẻ a (<a> hyperlink)
Thẻ <a> hyperlink là một thẻ HTML dùng để liên kết đến một phần khác trong bài viết hoặc đến một bài viết khác. Cấu trúc đầy đủ của thẻ <a> hyperlink trong mã nguồn HTML gồm 3 phần:
- href: chứa URL của trang web mà bạn định liên kết đến;
- rel: mối quan hệ giữa hai trang;
- target: lựa chọn mở URL mới ở cửa sổ mới (Open links in new tab) hoặc mở URL mới ở cửa sổ hiện tại.
Trong SEO, chúng ta có 2 loại hyperlink thường sử dụng là backlink và internal link.
- Backlink hay còn gọi là “liên kết ngược”, sử dụng khi một trang web khác liên kết đến trang web của bạn ở đâu đó trong nội dung bài viết của họ.
- Internal link hay còn gọi là “liên kết nội bộ”, sử dụng khi muốn liên kết đến các URL khác trong cùng một website.
Tối ưu các liên kết ngược thôi là chưa đủ, bạn cũng cần tập trung tối ưu các liên kết nội bộ cũng như liên kết với các trang bên ngoài để tăng lưu lượng truy cập.
4. Heading (h1, h2, h3, h4,…)
Đứng từ quan điểm của công cụ tìm kiếm, các thẻ Tiêu đề – Heading Tags giúp các chương trình thu thập thông tin hiểu được nội dung tổng quát của trang.
Còn đứng trên phương diện người dùng, thẻ heading nằm trong số các thẻ trong HTML giúp cho họ có thể nắm được nội dung trang một cách nhanh chóng.
Có 6 cấp độ thẻ heading từ H1 đến H6, trong đó thẻ H1 là quan trọng nhất. Một bài viết chuẩn SEO phải có tối thiểu H1, H2, H3; các heading từ H4 đến H4 không có cũng không sao.
- Thẻ H1 chính là tiêu đề của bài viết, nội dung H1 có thể giống hoặc khác với Title nhưng các bước tối ưu hóa thẻ H1 hoàn toàn tương tự như tối ưu thẻ Title.
- Đối với thẻ H2, bạn cần chèn từ khóa chính nhưng không phải tất cả các H2 đều chứa từ khóa chính. Thay vào đó bạn cần sử dụng linh hoạt các từ khóa liên quan tới chủ đề mà bạn đang nói tới trong bài. Ví dụ keyword là “mỹ phẩm” thì từ khóa liên quan có thể là “dụng cụ làm đẹp”, “thành phần”, “skincare”,…
- Số lượng heading từ H3 đến H6 là không giới hạn, bạn cần viết nội dung heading một cách cụ thể để làm rõ thông tin được đề cập trong các heading trước đó.
5. Thẻ Img (hình ảnh)
Thẻ <img> được thiết lập để nhúng hình ảnh vào mã HTML và hiển thị ảnh ở định dạng PNG, JPEG hoặc GIF.
Bạn cũng có thể thêm hình ảnh dưới dạng liên kết đến tệp khác. Để thực hiện việc này, chỉ cần đặt thẻ <img> vào vùng chứa thẻ <a>.
Mục đích của thẻ img là giúp người dùng hiểu nội dung hình ảnh khi không thể xem được hình ảnh.
Thẻ <img> phải chứa ít nhất 2 thuộc tính gồm:
- src: cho biết URL của hình ảnh được hiển thị trên một trang web nằm ở đâu;
- alt: chỉ ra văn bản thay thế sẽ xuất hiện nếu không thể hiển thị hình ảnh trên trang vì bất kỳ lý do gì.
Ngoài ra trong thẻ <img> còn chứa một số thuộc tính khác như title, height, width.
Như vậy để tối ưu thẻ <img>, bạn cần chèn từ khóa chính vào thuộc tính alt và mô tả càng chi tiết càng tốt thông điệp mà bức ảnh muốn truyền tải.
6. Thẻ canonical
Thẻ rel = ”canonical” cho phép SEOer chỉ ra trang web nào được coi là trang chuẩn (phiên bản chính của trang) khi tồn tại đồng thời nhiều trang web có nội dung tương tự. Điều này có tác dụng hạn chế Google đánh tụt điểm SEO của trang web do tình trạng trùng lặp nội dung.
Canonical URL sẽ được phép xuất hiện ở bảng hiển thị kết quả tìm kiếm và ngăn Google xếp hạng các bản sao của trang đó.
Bạn có thể thiết lập thẻ canonical bằng cách sử dụng Yoast SEO hay Rank Math hoặc trực tiếp chèn thẻ HTML rel=”canonical” vào thẻ <head> của trang trùng lặp.
→ Tham khảo: Canonical URL là gì? Cách sử dụng thẻ Canonical trong SEO hiệu quả!
7. Thẻ <b> hoặc <strong>
Thẻ <b> có tác dụng đánh dấu văn bản được in đậm, cùng xem đoạn mã HTML của thẻ <b> này nhé:
<b>địa chỉ cụ thể</b>
Thẻ <strong> cũng làm cho văn bản được in đậm. Tuy nhiên, không giống như thẻ <b> chỉ làm cho văn bản in đậm mà không có bất kỳ ý nghĩa logic nào đằng sau, thẻ này báo cho các công cụ tìm kiếm biết rằng văn bản được in đậm là nội dung trọng điểm của bài viết.
8. Thẻ <i> hoặc <em>
Cả 2 thẻ <i> và thẻ <em> đều có tác dụng đánh dấu văn bản in nghiêng. Tuy nhiên sự khác biệt chính giữa 2 thẻ này là thẻ <em> nhấn mạnh về ngữ nghĩa trên một từ hoặc nội dung quan trọng (hữu ích cho SEO), trong khi thẻ <i> chỉ là văn bản theo kiểu in nghiêng thông thường để làm nổi bật văn bản chứ không có tác dụng với SEO.
Một số thẻ HTML thường dùng khác trong SEO
Ngoài 8 thẻ HTML kể trên, còn rất nhiều thẻ HTML khác cũng thông dụng không kém, được sử dụng trong kỹ thuật SEO website. Chúng tôi sẽ tiếp tục tổng hợp các thẻ trong HTML cơ bản trong phần dưới đây.
1. Thẻ Header
Thẻ <header> trong HTML được sử dụng để xác định phần tiêu đề phía trên cùng cho toàn bộ trang web (thanh menu) hoặc tiêu đề của một bài viết trong trang.
Khi thẻ <header> làm tiêu đề trang, nó thường chứa thông tin về tác giả, biểu tượng tìm kiếm, các danh mục chính và các phần tử khác.
Trong một bảng mã HTML của trang có thể có nhiều thẻ <header> nhưng nó không được đặt trong thẻ <footer>, thẻ <address> hoặc trong một thẻ <header> khác.
Về mặt lợi ích trong SEO, thẻ <header> là thẻ HTML thông dụng cung cấp định dạng trang và giúp công cụ tìm kiếm có thể thu thập nội dung trên trang. Nếu website không có thẻ <header>, Googlebot có thể nghĩ rằng trang của bạn không thân thiện với người dùng và do đó, thứ hạng trang web có thể bị ảnh hưởng.
Ngoài ra, vì thẻ này có thể chứa các liên kết điều hướng nội bộ, điều này giúp các công cụ tìm kiếm hiểu rõ những trang nào là quan trọng nhất trong cấu trúc trang web của bạn.
Thẻ <footer> là thẻ HTML cơ bản, được thiết kế để xác định nguồn tài liệu hoặc phần chân trang của một website.
Thẻ này thường chứa thông tin về quyền tác giả, bản quyền, chi tiết liên hệ, liên kết đến các tài liệu và trang liên quan, liên kết quay lại đầu trang và thậm chí có thể là một sơ đồ trang web.
Thẻ <footer> chứa rất nhiều liên kết. Và trong SEO, điều này rất quan trọng vì nó cung cấp một cấu trúc liên kết nội bộ rõ ràng. Vì vậy, hãy đảm bảo rằng tất cả các trang quan trọng đều được liên kết đến từ thẻ <footer>.
3. Thẻ Navigation (<nav> – thẻ điều hướng)
Thẻ <nav> được sử dụng để điều hướng trang web và chỉ ra các trang quan trọng nhất trong toàn bộ trang.
Nếu trang của bạn chứa nhiều khối liên kết, bạn có thể sử dụng nhiều thẻ <nav> để đánh dấu các liên kết ưu tiên. Tuy nhiên đừng gắn thẻ tất cả các liên kết bằng thẻ <nav> và không đặt nó bên trong thẻ <address>.
Để tối ưu hóa công cụ tìm kiếm, các liên kết được gắn thẻ <nav> sẽ gửi tín hiệu đến Googlebot về các trang mà bạn cho là những trang quan trọng nhất trên trang web của mình.
4. Thẻ <blockquote> (thẻ trích dẫn)
Thẻ HTML <blockquote> được sử dụng để trích dẫn một khối văn bản từ một nguồn khác. Xem thử đoạn mã HTML của một câu trích dẫn:
<blockquote class=”wp-block-quote”><p>Đây là câu trích dẫn Blockquote”. </p></blockquote>
5. Thẻ <ul> & <ol> (thẻ liệt kê danh sách )
Cả 2 thẻ <ul> và thẻ <ol> đều dùng để liệt kê danh sách các hạng mục. Tuy nhiên đối với thẻ <ol>, thứ tự sắp xếp của các hạng mục là vô cùng quan trọng. Việc thay đổi thứ tự của một hạng mục sẽ thay đổi ý nghĩa của toàn bộ danh sách.
Trong khi đó, với thẻ <ul>, thứ tự sắp xếp là không quan trọng, hạng mục nào đứng trước cũng được.
Trên đây là tổng hợp kiến thức thẻ HTML là gì, cấu trúc, vai trò và cách tối ưu từng loại thẻ HTML cơ bản thường gặp trong SEO. Đừng phiền lòng nếu những khái niệm này khiến bạn hơi “đau đầu”, chỉ cần kiên nhẫn đọc nhiều lần, chắc chắn bạn sẽ hiểu và vận dụng chúng một cách thành thạo.
