12 Thẻ HTML SEO Bạn Cần Biết

Thẻ HTML là gì?

Thẻ HTML là các đoạn mã bạn thêm vào các trang web để cung cấp ngữ cảnh cho các công cụ tìm kiếm. Chúng giúp các công cụ tìm kiếm xác định nội dung của trang web của bạn.

HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Đây là ngôn ngữ được sử dụng bởi các trang web.

Các thẻ cũng được sử dụng để cấu trúc nội dung. Và xác định cách nó nên được hiển thị trong trình duyệt web. Chúng hữu ích cho cả các công cụ tìm kiếm và con người.

Các thẻ HTML được bao quanh bởi dấu ngoặc nhọn ( < > ) và thường đi theo cặp—một thẻ mở và một thẻ đóng. Thẻ mở chỉ ra sự bắt đầu của một phần tử. Trong khi thẻ đóng chỉ ra sự kết thúc của phần tử đó.

Ví dụ, đây là cách một thẻ meta description trông như thế nào trong mã nguồn:

Và đây là cách một meta description trông như thế nào trên Google:

Một thẻ title tag cho biết cho các công cụ tìm kiếm rằng một cụm từ cụ thể là tiêu đề của trang.

Đây là cách nó trông như thế nào trong mã nguồn:

Và đây là cách nó trông như thế nào đối với người truy cập web:

Tại sao các thẻ HTML lại quan trọng cho SEO?

Các thẻ HTML có lợi cho trang web của bạn. Và cho cả người truy cập. Dưới đây là cách chúng hoạt động:

Cấu trúc

Các thẻ HTML giúp bạn tổ chức và định dạng nội dung của mình.

Điều này bao gồm:

• Tiêu đề
• Đoạn văn
• Danh sách
• Bảng

Các công cụ tìm kiếm có thể hiểu và lập chỉ mục nội dung của bạn tốt hơn với các thẻ HTML.

Hiểu biết

Các thẻ SEO HTML cung cấp ngữ cảnh cho các công cụ tìm kiếm về mục đích của các phần tử khác nhau trên trang của bạn.

Bằng cách sử dụng các thẻ liên quan như <title>, <meta>, và <alt>, bạn giúp các công cụ tìm kiếm hiểu chủ đề và mục đích của nội dung của bạn.

Khả năng đọc

Các thẻ HTML cấu trúc nội dung một cách trực quan cho người truy cập web và các công cụ tìm kiếm. Các tiêu đề rõ ràng, các điểm bullet và văn bản được định dạng tốt giúp trang của bạn dễ đọc hơn. Và giúp giữ chân người dùng.

Tối ưu hóa Keyword

Các thẻ HTML cho phép bạn chỉ định các từ khóa và cụm từ quan trọng liên quan đến nội dung của bạn. Các công cụ tìm kiếm có thể sử dụng những từ khóa này để xác định sự liên quan của trang của bạn đối với các truy vấn tìm kiếm cụ thể.

12 Thẻ và Thuộc Tính HTML SEO Cần Thiết Cho Trang Web Của Bạn

Hãy cùng thảo luận về những thẻ HTML quan trọng nhất cho SEO. Và trải nghiệm người dùng.

1. Title Tags <title>

Một title tag là một phần tử HTML được sử dụng để chỉ định tiêu đề của một trang web. Nó được hiển thị trên các trang kết quả của công cụ tìm kiếm (SERPs) dưới dạng một liên kết có thể nhấp.

Các title tag rất quan trọng cho trải nghiệm người dùng và SEO. Chúng cung cấp một mô tả ngắn gọn về trang. Vì vậy, người tìm kiếm biết điều gì để mong đợi khi họ nhấp vào. Và giúp các công cụ tìm kiếm hiểu nội dung.

Đây là cách một title tag trông như thế nào trong SERP dưới dạng một liên kết có thể nhấp:

Thẻ này cũng được hiển thị trong tab trình duyệt của người dùng.

Để thêm một title tag, hãy sử dụng thuộc tính <title> trong trình tạo HTML của bạn.

Thêm một thẻ mở <title> trước văn bản bạn muốn hiển thị dưới dạng tiêu đề. Và một thẻ đóng </title> ở cuối nó.

Hệ thống quản lý nội dung (CMS) của bạn—như WordPress hoặc HubSpot—có thể tự động tạo thẻ <title> của bạn khi bạn thêm một tiêu đề cho trang web của mình.

Thực Hành Tốt Nhất Cho Title Tag

• Giữ cho nó ngắn gọn: Nhắm đến 50–60 ký tự. Nếu tiêu đề của bạn vượt quá khoảng này, nó có thể bị cắt trong kết quả tìm kiếm. Vì Google chỉ có thể hiển thị tối đa 600 pixel (hoặc khoảng 60 ký tự).
• Không sao chép title tag: Hãy làm cho mỗi tiêu đề trở nên độc đáo để giúp các công cụ tìm kiếm xác định mục đích của trang.
• Sử dụng từ khóa chính: Bao gồm primary keyword (thuật ngữ chính mà bạn đang nhắm đến cho trang) để chỉ ra chủ đề của nội dung.
• Phân tích SERP: Thực hiện tìm kiếm trên Google cho chủ đề của nội dung của bạn. Xem các tiêu đề xuất hiện cho các trang có thứ hạng cao và các từ khóa mà những tiêu đề đó sử dụng. Điều này sẽ cho bạn ý tưởng về các từ khóa bạn cũng nên sử dụng để giúp nội dung của bạn xếp hạng.
• Giữ sự nhất quán: Một title tag nên giống hoặc tương tự như H1 của trang. Cả hai yếu tố giúp các công cụ tìm kiếm hiểu chủ đề chính.
• Đưa các thuật ngữ quan trọng lên đầu: Sử dụng những từ quan trọng nhất ở đầu tiêu đề. Để người tìm kiếm dễ dàng tìm thấy những gì họ đang tìm kiếm.

2. Meta Descriptions <meta description>

Một meta description là một thẻ meta HTML khác cho SEO. Đây là một mô tả ngắn về trang web của bạn có thể được hiển thị trên các công cụ tìm kiếm. Và một số bản xem trước trên mạng xã hội.

Meta descriptions là các thẻ cung cấp một giải thích ngắn gọn về nội dung của một trang. Chúng thường xuất hiện bên dưới thẻ title tag trên SERPs.

Mặc dù meta descriptions không phải là yếu tố xếp hạng, nhưng chúng có thể ảnh hưởng đến tỷ lệ nhấp chuột (CTR) của bạn. Và thu hút người dùng đến trang web của bạn. Một meta description hấp dẫn có thể làm tăng khả năng người dùng nhấp vào liên kết của bạn.

Các công cụ như Yoast và Rank Math giúp bạn dễ dàng thêm meta descriptions mà không cần phải cập nhật HTML.

Một đoạn mã meta description trông như thế này trong HTML:

<meta name="description" content="Tìm hiểu cách phát triển giọng điệu thương hiệu của bạn và sử dụng mẫu của chúng tôi để bắt đầu.">

Phần tử name="description" chỉ ra loại metadata mà bạn đang cung cấp (một mô tả).

Phần tử content=" là nơi bạn thêm một mô tả về nội dung của trang web của bạn (trong cặp dấu ngoặc kép thứ hai).

Đây là cách một meta description trông như thế nào trên các công cụ tìm kiếm:

Thực Hành Tốt Nhất Cho Meta Description

Bằng cách viết một meta description hấp dẫn cho người tìm kiếm, bạn có thể thu hút nhiều traffic hơn đến trang. Cải thiện CTR.

Dưới đây là một số thực tiễn tốt nhất:

• Mô tả nội dung của bạn là gì. Để người tìm kiếm biết điều gì sẽ xảy ra khi họ nhấp vào trang web của bạn.
• Hãy hướng đến một mô tả ngắn gọn dưới 155 ký tự. Các meta description dài hơn có thể bị cắt ngắn trong SERP. Nếu bạn tối ưu hóa cho di động, hãy giữ khoảng 105 ký tự.
• Bao gồm keyword chính của bạn
• Sử dụng một plugin như Yoast hoặc Rank Math để giúp bạn tuân theo các thực tiễn tốt nhất về độ dài ký tự và việc sử dụng keyword.

Plugin của Yoast trông như thế này:

3. Thẻ tiêu đề <h1> đến <h6>

Thẻ tiêu đề, như <h1>, <h2>, và <h3>, giúp bạn xác định từng tiêu đề và tiêu đề phụ trên một trang. Và giúp bạn cấu trúc nội dung trên tất cả các loại trang. Bao gồm trang chủ, trang dịch vụ, trang sản phẩm, bài viết blog và nhiều hơn nữa. Để giúp khách truy cập dễ dàng đọc và hiểu.

Chúng cũng giúp các công cụ tìm kiếm hiểu được cấu trúc và ngữ cảnh của nội dung.

Kích thước tiêu đề càng lớn (H1 > H2), càng quan trọng để bao gồm một keyword hoặc cụm từ mô tả.

Vì tiêu đề có tiềm năng quan trọng hơn văn bản thông thường (chúng giúp chỉ ra cấu trúc trang), bạn nên tối ưu hóa chúng với keyword khi có thể.

Trong đánh dấu HTML, các thẻ tiêu đề sau đây là phổ biến:

• Tiêu đề 1 <h1>: Tiêu đề/chủ đề chính của trang
• Tiêu đề 2 <h2>: Tiêu đề phụ
• Tiêu đề 3 <h3>: Tiêu đề phụ của một <h2>
• Tiêu đề 4 <h4>: Tiêu đề phụ của một <h3>
• Tiêu đề 5 <h5>: Tiêu đề phụ của một <h4>
• Tiêu đề 6 <h6>: Tiêu đề phụ của một <h5>

Ví dụ, Các thẻ H1 cho các công cụ tìm kiếm biết chủ đề chính của một trang là gì. Và tổ chức nội dung một cách rõ ràng. Chúng cũng cho khách truy cập thấy rằng trang có thông tin mà họ đang tìm kiếm.

Đây là cách một H1 trông như thế nào trong HTML:

Và đây là cách nó trông như thế nào đối với một khách truy cập:

Để thêm một thẻ tiêu đề 1 trong HTML, bạn sẽ sử dụng thẻ mở <h1> ở đầu tiêu đề. Và thẻ đóng </h1> ở cuối.

Nhiều CMS tự động tạo một H1 từ tiêu đề trang web của bạn. Và cho phép bạn dễ dàng chọn các tiêu đề (như H2, H3 và H4) từ trình soạn thảo mà không cần cập nhật HTML.

H2 giới thiệu mỗi phần chính trên một trang web hoặc bài viết blog.

H3 xuất hiện sau H2. Sử dụng chúng để tổ chức nội dung dưới một H2. Và cải thiện khả năng đọc.

H3 có kích thước văn bản nhỏ hơn. Chỉ ra các tiểu mục trong H2 của bạn.

Trong một CMS như WordPress, sử dụng trình soạn thảo để chọn các thẻ tiêu đề.

4. Alt Text của Hình ảnh <img>

Alt text, hoặc văn bản thay thế, là một mô tả tương ứng với một hình ảnh. Nếu hình ảnh không tải được, văn bản sẽ hiển thị thay thế cho nó. Văn bản cũng hữu ích cho những người sử dụng trình đọc màn hình.

Đây là một ví dụ về thẻ HTML hình ảnh:

<img src="https://example.com/.pixel-7-pro-camera-barjpg" alt="Mặt sau của Pixel 7 Pro cho thấy thanh camera bằng nhôm">

“Img src” chỉ định nguồn hình ảnh. Và (alt) chỉ định văn bản alt của hình ảnh.

Đây là cách alt text trông như thế nào khi hình ảnh không tải được:

Alt text của hình ảnh rất quan trọng cho SEO vì nó cung cấp cho các công cụ tìm kiếm thông tin về nội dung của hình ảnh. Điều này có thể giúp cải thiện độ liên quan của trang.

Tối ưu hóa hình ảnh của bạn cũng có thể thúc đẩy traffic và cải thiện khả năng xếp hạng của bạn.

Mỗi hình ảnh bạn thêm vào trang web của mình là một cơ hội để thêm keyword và cụm từ một cách chiến lược. Tối ưu hóa nội dung của bạn hơn nữa cho các công cụ tìm kiếm.

Trong nhiều CMS, bạn có thể áp dụng alt text mà không cần sử dụng trình chỉnh sửa HTML.

Mẹo

SEO Writing Assistant của Semrush sẽ nhắc bạn thêm alt text cho hình ảnh của bạn. Và giúp bạn tối ưu hóa và cải thiện nội dung của mình. 5. Thẻ Canonical <canonical>

Một thẻ canonical cho phép bạn chỉ định phiên bản ưu tiên của một trang khi có nhiều phiên bản của cùng một trang tồn tại.

Ví dụ, giả sử bạn điều hành một trang thương mại điện tử. Mỗi biến thể màu sắc của cùng một sản phẩm có một URL duy nhất. Nhưng nội dung là giống nhau trên mỗi trang. Sử dụng các thẻ canonical để chỉ ra URL nào bạn muốn Google lập chỉ mục.

Các thẻ canonical rất quan trọng cho SEO vì chúng giúp ngăn chặn các vấn đề về Duplicate Content. Điều này có thể ảnh hưởng tiêu cực đến thứ hạng. Các công cụ tìm kiếm có thể hiểu phiên bản nào của một trang để lập chỉ mục và hiển thị trong kết quả tìm kiếm.

Các thẻ này cho các công cụ tìm kiếm biết phiên bản trang nào (được gọi là “

canonical URL”) mà nó nên lập chỉ mục. Kết quả là, nội dung lặp lại sẽ không hiển thị trong kết quả tìm kiếm. Và bất kỳpage authority nào sẽ chuyển đến canonical URL mà bạn đã chỉ định. Để thêm một thẻ canonical, hãy sử dụng đoạn mã:

<link rel="canonical" href="https://example.com/preferred-url-here/" />

Một thẻ canonical có một số thuộc tính:

“link”

• : Định nghĩa mối quan hệ giữa một URL và một URL khácrel="canonical"
• : Chỉ ra loại mối quan hệhref="URL"
• : Xác nhận URL cụ thể của nội dung gốcTrong một số CMS, như Versoly được hiển thị bên dưới, bạn có thể thêm một canonical URL mà không cần truy cập vào trình chỉnh sửa HTML.

Các công cụ tìm kiếm có thể lập chỉ mục sai trang nếu bạn không sử dụng thẻ canonical. Điều này có nghĩa là bạn có thể không xếp hạng cao như bạn có thể cho trang ưu tiên của mình.

6. Thẻ Meta Robots <meta robots>

Bạn có thể không muốn các công cụ tìm kiếm lập chỉ mục mọi trang trên trang web của bạn. Kết hợp thẻ meta robots với các chỉ thị như “noindex” hoặc “nofollow” giúp các công cụ tìm kiếm thu thập dữ liệu và lập chỉ mục trang web của bạn một cách tối ưu.

Một

Một robots meta tag là một thẻ cấp trang cho biết cho các công cụ tìm kiếm và các trình thu thập dữ liệu website cách thu thập dữ liệu trên trang của bạn.

Sử dụng thẻ meta robots để chỉ định xem một trang có nên được lập chỉ mục bởi các công cụ tìm kiếm hay không. Và liệu các liên kết trên trang có nên được theo dõi hay không.

Các trang phổ biến mà bạn có thể bao gồm thẻ này là:

• Trang quản trị hoặc đăng nhập
• Trang xác nhận. Chẳng hạn như trang cảm ơn.
• Trang kết quả tìm kiếm nội bộ
• Các trang từ trang thử nghiệm của bạn
• Các trang có nội dung trùng lặp
• Các trang đích (landing pages) trả phí (PPC)

Ví dụ, bạn có thể bao gồm đoạn mã sau trong phần đầu HTML của bạn nếu bạn không muốn các công cụ tìm kiếm lập chỉ mục một trang:

<meta name="robots" content="noindex">

Hai thuộc tính là “name” và “content.”

• Name: Chỉ định loại metadata đang được định nghĩa (robots)
• Content: Chỉ dẫn được đưa ra (no index)

Bạn cũng có thể sử dụng nhiều chỉ dẫn trong thuộc tính content. Chẳng hạn như noindex, nofollow và noimageindex, trong số những chỉ dẫn khác. Sử dụng dấu phẩy để phân tách từng chỉ dẫn.

Dưới đây là một ví dụ về việc sử dụng nhiều chỉ dẫn:

<meta name="robots" content="noindex, nofollow">

Chỉ thị noindex cho biết cho các công cụ tìm kiếm không bao gồm trang trong kết quả tìm kiếm. Chỉ thị nofollow cho biết cho các trình thu thập dữ liệu không theo dõi các liên kết trên trang.

7. Schema Markup

Schema markup là một loại structured data mà bạn có thể thêm vào nguồn của một trang để giúp các công cụ tìm kiếm hiểu nội dung.

Các chủ sở hữu trang thường sử dụng dữ liệu này để cung cấp thông tin bổ sung về trang. Chẳng hạn như chi tiết sản phẩm, đánh giá, xếp hạng và nhiều hơn nữa.

Dưới đây là một ví dụ về markup trên trang chủ Semrush:

Mặc dù schema markup không phải là một thẻ HTML, nhưng nó vẫn có giá trị. Nó có thể giúp cải thiện khả năng hiển thị và sự liên quan của trang bạn trong kết quả tìm kiếm. Vì vậy, nó nổi bật với rich snippets.

Các định dạng rich snippet phổ biến bao gồm nhưng không giới hạn ở:

• Markup sản phẩm
• Câu hỏi thường gặp (FAQs)
• Đánh giá
• Công thức nấu ăn
• Phim
• Sự kiện

Bất kể loại hình kinh doanh của bạn là gì, việc sử dụng markup có thể nâng cao diện mạo nội dung của bạn trong SERP và cải thiện tỷ lệ nhấp chuột của bạn. Mọi người có khả năng nhận thấy và nhấp vào danh sách hơn.

Giả sử bạn điều hành một tiệm bánh, và trang web của bạn có một phần cho các công thức nấu ăn. Bằng cách thêm schema markup cho một trang công thức, kết quả tìm kiếm cho các trang công thức của bạn có thể hiển thị khác biệt so với các danh sách organic tiêu chuẩn. Trong markup, bạn có thể bao gồm các chi tiết như nguyên liệu, thời gian chuẩn bị và thời gian nấu.

Dưới đây là cách mà rich snippets cho các công thức nấu ăn trông như thế nào:

Sử dụng Structured Data Markup Helper của Google để thêm schema markup.

Mở công cụ. Chọn loại snippet mà bạn muốn tạo, và nhập URL trang của bạn. Sau đó, nhấp vào “Start Tagging.”

Đối với ví dụ này, chúng ta sẽ tạo markup structured data cho sản phẩm.

Công cụ sẽ tự động điền URL của trang web vào chế độ xem “Tag Data”:

Ví dụ này là một snippet sản phẩm cho MacBook Pro. Vì vậy, chúng ta sẽ bao gồm các yếu tố như tên sản phẩm, giá, hình ảnh, thương hiệu, logo, v.v.

Chọn hoặc làm nổi bật các yếu tố trang, và công cụ sẽ yêu cầu bạn gán thẻ cho chúng.

Ví dụ, để thêm tên sản phẩm, hãy làm nổi bật nó và gán thẻ với “Name.”

Nếu bạn muốn thêm giá, bạn sẽ làm nổi bật và chọn thẻ “Price”:

Khi bạn làm việc, công cụ sẽ thêm tất cả thông tin vào bảng bên phải.

Gán thẻ cho nhiều yếu tố nhất có thể.

Sau đó, nhấp vào nút đỏ "Create HTML" ở góc trên bên phải của màn hình.

Công cụ sẽ tạo mã schema markup trong bảng bên.

Cuối cùng, sao chép hoặc tải xuống mã và thêm nó vào phần <head> của trang của bạn.

Thế là xong. Bạn đã thêm schema markup thành công.

8. Table <table>

Thẻ table là một phần tử HTML được sử dụng để tạo bảng trên các trang web.

Mặc dù việc thêm bảng vào nội dung của bạn có thể không nghe như một chiến thuật SEO điển hình, nhưng bạn có thể sử dụng chúng để tổ chức và hiển thị dữ liệu theo định dạng có cấu trúc. Điều này có thể nâng cao diện mạo và cảm nhận của nội dung của bạn. Giúp dễ đọc hơn.

Sử dụng thẻ table để tạo các hàng và cột (bảng) bên trong nội dung của bạn để trình bày dữ liệu theo cách có cấu trúc và hấp dẫn về mặt hình ảnh.

Ví dụ, bảng Sizely hiển thị kích thước áo khoác theo quốc gia. Điều này rất hữu ích cho người mua sắm.

Bảng có khả năng xuất hiện như các rich snippets trong Google. Điều này có thể thu hút sự chú ý. Và tạo ra nhiều nhấp chuột vào trang web hơn.

Nếu CMS của bạn hỗ trợ việc sao chép và dán bảng từ các phần mềm khác như Google Docs hoặc Microsoft Word, bạn có thể không cần phải lo lắng về việc tạo các thẻ cụ thể xung quanh nội dung của bạn.

Các thẻ bảng chính cần lưu ý là:

• <table>: Chỉ định sự bắt đầu của một bảng
• <tr>: Định nghĩa một hàng bảng
• <td>: Định nghĩa một ô trong bảng
• <th>: Định nghĩa một ô tiêu đề bảng
• <td>: Định nghĩa các ô dữ liệu cho hàng đầu tiên

Một ví dụ về điều này có thể trông như sau:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Trong ví dụ trên, chúng ta đã thực hiện các bước sau:

• Bắt đầu một bảng bằng <table>
• Định nghĩa một hàng bằng <tr>
• Thêm một tiêu đề bảng bằng <th> quanh header 1
• Thêm một tiêu đề bảng bằng <th> quanh header 2
• Thêm các ô dữ liệu quanh dữ liệu trong CMS của chúng ta
• Định nghĩa một hàng bằng <tr>
• Kết thúc bảng bằng <table>

Đầu ra sẽ trông khác nhau tùy theo CMS. Tùy thuộc vào việc bạn áp dụng các chủ đề hoặc định dạng tùy chỉnh.

9. Iframe <iframe>

Iframe (hay inline frame) là một phần tử HTML cho phép bạn nhúng một tài liệu HTML vào trong một trang. Nó giống như một cửa sổ nhỏ trên trang của bạn hiển thị nội dung từ một nơi khác.

Các tình huống mà bạn có thể sử dụng iframe bao gồm:

• Nhúng các yếu tố đa phương tiện. Chẳng hạn như video, tệp âm thanh và hoạt hình từ các nền tảng như YouTube hoặc SoundCloud.
• Nhúng tài liệu. Như một PDF.
• Tích hợp một ứng dụng bên thứ ba. Chẳng hạn như một widget Google Maps.
• Tải nội dung từ các nguồn bên ngoài. Bao gồm các bài đăng trên mạng xã hội từ Twitter, Facebook và Instagram.

Mã snippet cơ bản của bạn trông như thế này:

<iframe src="https://example.com"></iframe>

Ví dụ, sử dụng iframe để nhúng một video YouTube sẽ hiển thị phương tiện như thế này:

Trong một CMS như WordPress, bạn sẽ có một nút nhúng/nhập cho phép bạn thêm một thành phần bên ngoài bằng cách sử dụng một URL. Thay vì lấy và tạo mã.

Ví dụ, bạn có thể thêm URL video YouTube thay vì tạo mã iframe.

Trong khi iframes có thể cải thiện trải nghiệm người dùng, cũng có những nhược điểm cho SEO:

• Tải một iframe có nghĩa là tải hai trang đồng thời. Điều này có thể làm chậm trang của bạn. Tốc độ trang là một yếu tố xếp hạng của Google.
• Iframes có thể là một rủi ro bảo mật nếu nội dung nhúng đến từ một nguồn không đáng tin cậy. Một iframe độc hại có thể chèn mã gây hại vào trang của bạn.
• Các công cụ tìm kiếm coi nội dung iframe như thuộc về một trang web khác. Điều này có nghĩa là nó không trực tiếp mang lại lợi ích cho thứ hạng của bạn.

Chúng tôi khuyên bạn nên thực hiện các thực tiễn tốt nhất sau đây để tích hợp nội dung bên ngoài:

• Chỉ sử dụng iframes cho các mục đích cụ thể hỗ trợ nội dung. Chẳng hạn như nhúng một bản đồ trên trang địa điểm của bạn.
• Đảm bảo nội dung nhúng có liên quan. Và nâng cao trải nghiệm người dùng.
• Tối ưu hóa thời gian tải trang bằng cách tránh các iframe không cần thiết. Khi bạn sử dụng một iframe, hãy tối ưu hóa trang cho tốc độ để bù đắp cho bất kỳ sự chậm trễ nào do iframe gây ra.
• Chỉ tích hợp nội dung từ các nguồn đáng tin cậy để giảm thiểu rủi ro bảo mật

Lưu ý

Nội dung bên trong iframes không được lập chỉ mục bởi các công cụ tìm kiếm.

10. Thẻ danh sách <li>

Bạn có nhận thấy số lượng danh sách được sử dụng trong bài viết blog này không?

Một thẻ danh sách biến văn bản thành một danh sách. Sử dụng các thẻ này để tổ chức thông tin.

Khi người đọc quét nội dung của bạn, họ ít có khả năng đọc từng từ. Danh sách giúp các điểm chính dễ dàng hơn để lướt qua. Và dễ đọc hơn.

Danh sách được định dạng tốt cũng có thể giúp với SEO.

Google hiển thị featured snippets khi nó quyết định rằng nó cung cấp trải nghiệm người dùng tốt nhất. Một loại featured snippet là danh sách. Google có thể lấy những điều này từ nội dung của bạn nếu nó nghĩ rằng bạn có danh sách tốt nhất để hỗ trợ truy vấn của người tìm kiếm.

Đây là cách một danh sách trông như thế nào trong HTML:

Và đây là cách nó trông như thế nào đối với một khách truy cập:

Nếu CMS của bạn hỗ trợ sao chép và dán từ các công cụ tạo tài liệu (Word, Google Docs, Notion, v.v.), các thẻ sẽ được áp dụng tự động.

Trước khi tạo một danh sách bằng HTML, hãy chọn xem bạn muốn danh sách đó được sắp xếp hay không sắp xếp.

• Có thứ tự: Các mục được hiển thị với các số tương ứng
• Không có thứ tự: Các mục được hiển thị theo bất kỳ thứ tự nào

Khi viết hướng dẫn hoặc công thức, hãy chọn có thứ tự vì người dùng cần thực hiện các mục trong danh sách theo một thứ tự cụ thể.

Danh sách có thể không có thứ tự nếu các mục trong danh sách không cần được thực hiện theo thứ tự liên tiếp. Một ví dụ sẽ là danh sách các nguyên liệu trong công thức.

Đối với danh sách có thứ tự, hãy sử dụng thẻ <ol> trước và thẻ </ol> sau các thẻ danh sách của bạn.

Bên trong các thẻ <ol>, bao gồm các mục danh sách của bạn và bao quanh chúng bằng các thẻ <li> trong trình chỉnh sửa HTML của bạn.

Danh sách của bạn sẽ trông như thế này trong HTML:

<ol>
<li>Mục đầu tiên</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ol>

Khi được xuất bản trên trang của bạn, danh sách của bạn sẽ trông như thế này:

1. Mục đầu tiên
2. Mục thứ hai
3. Mục thứ ba

Đối với danh sách không có thứ tự, hãy sử dụng thẻ <ul> để đứng trước và sau các thẻ danh sách của bạn và bao quanh chúng bằng các thẻ <li> trong trình chỉnh sửa HTML của bạn.

Danh sách của bạn sẽ trông như thế này trong HTML:

<ul>
<li>Cam</li>
<li>Đường</li>
<li>Nước</li>
</ul>

Khi được xuất bản, danh sách của bạn sẽ trông như thế này:

• Cam
• Đường
• Nước

11. Siêu liên kết <a>

Siêu liên kết, thường được gọi đơn giản là “liên kết,” là các phần tử HTML liên kết một trang với một trang khác. Bạn có thể sử dụng siêu liên kết để giúp người dùng điều hướng giữa các trang trên cùng một trang web. Hoặc bạn có thể liên kết đến các trang web khác.

Siêu liên kết rất quan trọng cho SEO vì chúng giúp các công cụ tìm kiếm phát hiện và lập chỉ mục nội dung của bạn. Chúng cũng giúp các công cụ tìm kiếm hiểu mối quan hệ giữa các trang khác nhau.

Mã HTML của siêu liên kết được tạo thành từ:

• <a>: Thẻ Anchor để đánh dấu sự bắt đầu của một chuyển hướng
• href= "Https://www.exampleurl.com">: nơi bạn đang chuyển hướng văn bản hoặc hình ảnh
• Anchor text: Thêm văn bản hiển thị cho khách truy cập của bạn (thường là bản sao hiện có)
• </a>: đóng thẻ

Khi kết hợp lại, mã HTML của siêu liên kết của bạn sẽ trông như thế này:

Trên trang đã xuất bản của bạn, một siêu liên kết trông như thế này:

Lưu ý

Trang web của bạn sẽ hiển thị siêu liên kết dựa trên chủ đề và định dạng của nó. Chúng có thể được gạch chân, in đậm hoặc có màu khác với phần còn lại của văn bản.

Nếu bạn đã sao chép văn bản liên kết từ Google Docs hoặc Word, ví dụ, liên kết có thể đi kèm với văn bản khi bạn dán nó ở nơi khác.

Bạn cũng có thể sử dụng hyperlink cho internal linking.Một internal link là một hyperlink dẫn hướng người truy cập đến một trang khác trên website của bạn.

Thêm internal links vào bất kỳ trang nào của bạn. Như các “money pages” của bạn. Bao gồm các biểu mẫu liên hệ, bản dùng thử miễn phí và yêu cầu demo.

Thêm một call to action (CTA) để khuyến khích người dùng tương tác thêm. Như "Đăng ký dùng thử miễn phí của bạn tại đây."

12. Open Graph Tags và Twitter Cards

Việc cá nhân hóa cho các đối tượng khác nhau là rất quan trọng để tạo ra sự tương tác từ các nền tảng khác ngoài công cụ tìm kiếm.

Open graph tags kiểm soát cách bạn trình bày các trang web trên mạng xã hội.

Mỗi bài viết blog mà bạn viết có khả năng sẽ được chia sẻ trên mạng xã hội. Tại sao không tăng cường hiệu suất của nó để nó có khả năng nhận được nhiều nhấp chuột hơn?

Thêm một hình ảnh, tiêu đề hoặc mô tả mới để khuyến khích các đối tượng trên các nền tảng xã hội khác nhau nhấp vào nội dung của bạn.

Bạn có thể muốn một trang web hiển thị khác đi trên các công cụ tìm kiếm so với trên Twitter, Facebook hoặc LinkedIn để nhận được nhiều nhấp chuột hơn từ các đối tượng cụ thể.

Vì vậy, trong khi trang web của bạn có thể trông như thế này trên các công cụ tìm kiếm và website của bạn:

Nó cũng có thể trông như thế này trên mạng xã hội. (Lưu ý tiêu đề khác nhau.)

CMS của bạn có thể có tùy chọn để thêm một tiêu đề Open Graph mà không cần chỉnh sửa mã HTML.

Nếu không, hãy thêm đoạn mã HTML ví dụ sau để tạo tiêu đề, hình ảnh và mô tả thay thế khi chia sẻ nội dung trên mạng xã hội.

<meta property="og:title" content="Insert Your Title Here">

Các thuộc tính chính ở đây là:

• og:title: Hiển thị một tiêu đề khác với nội dung gốc
• og:image: Hiển thị một hình ảnh khác với nội dung gốc
• og:description: Hiển thị một mô tả xem trước khác với nội dung gốc

Triển khai HTML Tags cho SEO

Bạn có thể đang sử dụng HTML tags mà không nhận ra. Nhiều CMS tự động áp dụng các tags này cho các trang của bạn.

Hãy làm theo những thực tiễn tốt nhất này để sử dụng HTML tags một cách chính xác:

• Sử dụng title tags để thông báo cho các công cụ tìm kiếm và người dùng về chủ đề chính của nội dung
• Sử dụng thẻ H1 để phân loại tiêu đề chính của trang
• Sử dụng thẻ H2 và H3 để phân loại và cấu trúc các tiêu đề phụ
• Đảm bảo mỗi trang đều có một thẻ meta description bao gồm keyphrase mục tiêu của bạn
• Thêm alt text mô tả cho các hình ảnh quan trọng hỗ trợ nội dung

Đây là một ví dụ về việc sử dụng một keyword một cách chiến lược trong alt text.

Công cụ và Tài nguyên cho Tối ưu hóa Tag SEO

Sử dụng HTML tags rất tốt cho SEO, nhưng quá trình này có thể mất thời gian nếu không có công cụ phù hợp.

• Google Tag Manager (GTM): GTM cho phép quản lý và triển khai nhiều tags khác nhau trên một website mà không cần chỉnh sửa mã trực tiếp
• Trình chỉnh sửa HTML trực tuyến của W3Schools: W3Schools cung cấp một trình chỉnh sửa mã trực tuyến nơi bạn có thể viết và thực hành HTML. Nó rất tốt để thử nghiệm với các đoạn mã và kiểm tra.
• Các trình tạo schema markup: Các công cụ miễn phí, chẳng hạn như Google’s Structured Data Markup Helper, sẽ tạo markup dựa trên đầu vào của bạn
• Các plugin SEO: Các plugin phổ biến, như Yoast SEO, cung cấp các trình tạo meta tag

Phân tích các tags của bạn để tối ưu hóa tác động với Semrush’s On Page SEO Checker.

Lưu ý

Nếu bạn chưa làm, hãy thiết lập miền của bạn trong On Page SEO Checker. Sử dụng hướng dẫn cấu hình nếu bạn cần trợ giúp.

Khi bạn đã hoàn tất thiết lập, bạn sẽ thấy một cái nhìn tổng quan bảng điều khiển như thế này:

Để tìm cơ hội tối ưu hóa các tags, hãy nhấp vào tab “Optimization Ideas”. Công cụ sẽ đưa ra các ý tưởng để tối ưu hóa các trang web.

Để xem các khuyến nghị trang, hãy nhấp vào nút màu xanh “# ideas” trong cột “All Ideas”.

Cuộn xuống phần nội dung. Phần này đánh giá sự hiện diện của các keywords trong các tags của bạn. Nó cũng cảnh báo bạn nếu phát hiện việc nhồi nhét từ khóa.

Và cung cấp các gợi ý để khắc phục các vấn đề về tag. Ví dụ, nó có thể đề xuất viết một title tag liên quan hơn.

Các Sai Lầm Thường Gặp Cần Tránh trong Triển Khai Tag SEO

Mặc dù HTML tags rất hữu ích cho SEO, nhưng vẫn có những cạm bẫy cần tránh. Dưới đây là một số chiến lược để đảm bảo nỗ lực của bạn không cản trở thứ hạng tìm kiếm của bạn.

Sử dụng Tags Quá Mức hoặc Nhồi Nhét Từ Khóa

Việc sử dụng quá mức các thẻ HTML—chẳng hạn như nhiều thẻ title hoặc meta description—có thể gây hại cho nỗ lực SEO của bạn. Nhồi nhét keywords vào các thẻ HTML cũng không được khuyến nghị. Cả hai trường hợp đều có thể khiến trang web của bạn trông giống như spam. Và thậm chí có thể khiến khách truy cập rời bỏ.

Giải pháp: Sử dụng tags khi phù hợp để nâng cao nội dung của bạn. Ưu tiên tính dễ đọc và sự liên quan hơn là việc sử dụng từ khóa quá mức.

Title Tags và Meta Descriptions Tối Ưu Kém

Quên các thẻ meta HTML cho SEO là điều phổ biến. Một số CMS sẽ tự động tạo chúng—như title tags—nhưng bạn vẫn cần tối ưu hóa chúng cho thương hiệu của bạn. Và các keywords mục tiêu.

Giải pháp: Viết các title tags mô tả, giàu từ khóa mà truyền đạt nội dung của trang. Tương tự, viết các meta descriptions giàu từ khóa để thu hút người dùng nhấp vào.

Bỏ Qua Header Tags

Header tags tổ chức nội dung theo thứ bậc. Bỏ qua hoặc quên chúng có thể ngăn cản các công cụ tìm kiếm hiểu cấu trúc của trang.

Giải pháp: Sử dụng header tags để tổ chức cấu trúc của trang.

Kiểm tra HTML Tags của Website của bạn với Semrush

Sử dụng các thẻ HTML có thể giúp website của bạn xếp hạng cao hơn, tạo ra nhiều lượt nhấp chuột hơn và cải thiện khả năng đọc của nội dung.

Bằng cách tuân theo các phương pháp tốt nhất trong hướng dẫn này, bạn có thể sử dụng các thẻ HTML trên toàn bộ trang web của mình để mang lại trải nghiệm tốt cho cả người dùng và các công cụ tìm kiếm.

Chạy công cụ SEO checker miễn phí của chúng tôi để phát hiện các vấn đề thường gặp về thẻ HTML như thiếu tiêu đề, meta, tiêu đề, alt text và structured data.

Để có cái nhìn tổng quan về sức khỏe của trang web bạn trên mọi trang, hãy sử dụng Semrush Site Audit.