Chúng ta đã quen với thực tế là hầu hết công việc liên quan đến HTML đều được thực hiện bởi các lập trình viên, lập trình viên và nhà phát triển phần mềm. Nhưng điều này không có nghĩa là các chuyên gia SEO và nhà tiếp thị kỹ thuật số không nên hiểu rõ về các thẻ HTML thiết yếu. Điểm mấu chốt là thẻ là điều cần phải biết nếu bạn muốn phát triển đúng các thông số kỹ thuật và hiểu thẻ ảnh hưởng đến SEO như thế nào.
Vì vậy, những thẻ và thuộc tính nào quan trọng trong việc tối ưu hóa công cụ tìm kiếm? Tại sao bạn thậm chí cần chúng và chúng nên được sử dụng như thế nào? Chúng tôi đã xem xét từng thẻ HTML hiện có và tập hợp một danh sách những thẻ quan trọng nhất để giúp bạn tìm hiểu các khái niệm về HTML hoặc đơn giản là làm mới trí nhớ của bạn.
Chia nhỏ những điều cơ bản về HTML
Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được các trang web sử dụng để cho trình duyệt biết nó chứa những thành phần nào và những thành phần nào cần được hiển thị trên màn hình.
HTML là nền tảng của phần lớn các trang web và là một trong những phần thiết yếu nhất của SEO kỹ thuật. Với sự trợ giúp của các phần tử HTML, người làm SEO có thể chuyển tiếp thông tin trên các trang web tới cả người dùng và bot công cụ tìm kiếm. Làm như vậy có thể giúp mọi người hiểu rõ cấu trúc trang và thứ tự nội dung là gì, đồng thời nó cũng làm rõ trang này có liên quan như thế nào với các trang web trực tuyến khác.
Theo thuật ngữ thông thường, nếu bạn truy cập bất kỳ trang web nào với tư cách là con người, bạn sẽ thấy một văn bản được đánh dấu cùng với các phần, tiêu đề phụ, hình ảnh và liên kết. Nhưng hãy nhớ rằng đối với trình duyệt web và bot công cụ tìm kiếm, các trang web không khác gì một mã HTML với các phần tử cụ thể.
Chúng tôi đã đề cập đến các thuật ngữ như HTML thành phần và thẻ, nhưng cũng có thẻ meta và thuộc tính. Nó có thể trở nên rất khó hiểu nếu bạn không biết sự khác biệt. Vì vậy, chúng ta hãy xem các thuật ngữ cơ bản mà chúng tôi sẽ sử dụng trong suốt bài viết này.
Cấu trúc phần tử HTML
Phần tử HTML là các thành phần thiết yếu của trang web giúp tổ chức và hiển thị thông tin trang, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, liên kết, v.v. Phần tử HTML bao gồm thẻ mở, thuộc tính, nội dung và thẻ đóng (ngoại trừ các phần tử tự đóng).
Trong ví dụ này có một phần tử HTML được gọi là tiêu đề. Tiêu đề được chỉ định trong mã bởi thẻ bắt đầu và thẻ đóng. Phần tử có thuộc tính căn chỉnh=”trái”, có nghĩa là nó được định vị và căn chỉnh về phía bên trái của trang. Nội dung của phần tử là văn bản, sẽ được hiển thị dưới dạng tiêu đề trên trang web.
An Thẻ HTML là một đoạn mã xác định các thành phần trong một trang web. Thẻ HTML đóng một vai trò quan trọng trong việc cấu trúc và định dạng nội dung web cũng như cho phép trình duyệt web diễn giải và hiển thị trang một cách chính xác.
Thẻ được đặt trong dấu ngoặc nhọn (<>) và có thể là thẻ mở hoặc thẻ đóng. Một số thẻ, chẳng hạn như or , không yêu cầu thẻ đóng. Nội dung giữa thẻ mở và thẻ đóng thể hiện nội dung của phần tử hoặc các phần tử lồng nhau. Ví dụ về các thẻ HTML bao gồm cho đoạn văn, đến cho các tiêu đề, cho các liên kết và cho hình ảnh.
A thẻ meta là một phần tử HTML cung cấp siêu dữ liệu, đóng vai trò là thông tin bổ sung về tài liệu HTML. Các thẻ meta này được đặt trong phần của tài liệu HTML và cung cấp siêu dữ liệu có cấu trúc cho trình duyệt web, công cụ tìm kiếm và các ứng dụng khác. Dữ liệu này bao gồm tiêu đề, mô tả, tác giả, ngày xuất bản, từ khóa, v.v. Mỗi yếu tố này đóng một vai trò quan trọng trong việc xác định kết quả nỗ lực SEO của bạn cũng như cải thiện vị trí và hiển thị nội dung của bạn trong kết quả tìm kiếm.
An thuộc tính cung cấp thông tin bổ sung và điều chỉnh hành vi hoặc sửa đổi cách hiển thị của phần tử HTML. Nó được chỉ định trong thẻ mở của một phần tử. Các thuộc tính bao gồm một cặp tên-giá trị, trong đó tên đại diện cho thuộc tính cụ thể và giá trị của nó xác định hiệu ứng mong muốn. Các thuộc tính được sử dụng để kiểm soát các khía cạnh khác nhau của một phần tử, chẳng hạn như hình thức, hành vi hoặc liên kết với các tài nguyên bên ngoài.
Sự khác biệt giữa thẻ và thuộc tính
Vì nhiều người sử dụng thuật ngữ tag và thuộc tính thực tế là đồng nghĩa, chúng ta hãy dành chút thời gian để hiểu rõ thuật ngữ này.
Dưới đây là ví dụ về định dạng phần tử HTML chia phần tử thành ba phần:
Đây là một tiêu đề
Trong ví dụ này, mở thẻ, “Đây là tiêu đề” là nội dung của thẻ và đóng thẻ.
Phần tử HTML trong ví dụ trên là tiêu đề được sử dụng làm tiêu đề hiển thị trên trang web để giới thiệu nội dung về tối ưu hóa công cụ tìm kiếm. Bây giờ chúng ta hãy rút ra sự khác biệt.
Mặc dù các thẻ phải có phần tử bắt đầu và đóng để hoạt động bình thường, nhưng các thuộc tính thì không và chúng được thêm vào các phần tử HTML dưới dạng công cụ sửa đổi, ví dụ:
Trong ví dụ này, rel và href là những thuộc tính của tag.
Tại sao người dùng và công cụ tìm kiếm cần thẻ
Bây giờ chúng ta đã hiểu rõ về các thẻ và thuộc tính HTML, hãy thảo luận lý do tại sao các công cụ tìm kiếm, trình duyệt và người dùng cần chúng.
Trước hết, Google sử dụng thẻ meta để lấy thông tin về nội dung của trang và cuối cùng đưa nó vào kết quả tìm kiếm. Đoạn mã này xác nhận trực tiếp điều này vì nó được tạo thành từ thẻ tiêu đề và thẻ meta mô tả.
Tuy nhiên, nếu tiêu đề và mô tả của trang được thiết lập không chính xác (như gây hiểu lầm, bị spam quá nhiều từ khóa, v.v.), Google sẽ tự động thay thế chúng bằng văn bản phù hợp hơn từ nội dung trang.
Trung tâm trợ giúp Search Console của Google có danh sách mọi thẻ meta được hỗ trợ bởi gã khổng lồ tìm kiếm. Vì vậy, nếu bạn cảm thấy muốn tìm hiểu sâu hơn về từng thẻ HTML, hãy nhớ kiểm tra nó.
Thẻ và thuộc tính HTML
Bây giờ chúng ta đã đề cập đến tất cả những điều cơ bản về HTML, hãy chuyển sang các thẻ và thuộc tính thường được sử dụng.
| Nhãn | Mô tả |
|---|---|
| Xác định loại tài liệu là HTML | |
| Chứa siêu dữ liệu và thông tin về tài liệu: tập lệnh, biểu định kiểu, mã hóa ký tự, cài đặt chế độ xem, v.v. | |
| Xác định nội dung chính của tài liệu HTML | |
| Chỉ định tiêu đề của tài liệu HTML, xuất hiện trên thanh tiêu đề của trình duyệt, kết quả của công cụ tìm kiếm và dấu trang | |
| Cung cấp siêu dữ liệu về tài liệu HTML, chẳng hạn như mã hóa ký tự và từ khóa | |
| Tạo siêu liên kết cho phép người dùng điều hướng đến các trang web, tệp hoặc phần cụ thể khác trong cùng một trang | |
| Chỉ định liên kết giữa tài liệu HTML và tài nguyên bên ngoài, chẳng hạn như biểu định kiểu hoặc biểu tượng | |
| Nhúng và hiển thị hình ảnh trong tài liệu HTML | |
| Tạo kiểu cho văn bản được in nghiêng hoặc đánh dấu văn bản theo ngữ nghĩa là được nhấn mạnh hoặc quan trọng | |
| , | Làm đậm văn bản hoặc nhấn mạnh tầm quan trọng của nó |
| Áp dụng kiểu hoặc nhóm nội tuyến và nhắm mục tiêu các phần tử cụ thể cho mục đích tạo kiểu hoặc tạo tập lệnh | |
| Xác định kiểu CSS trực tiếp trong tài liệu HTML | |
| Tạo bảng để sắp xếp dữ liệu | |
| Đại diện cho một danh sách không có thứ tự (có dấu đầu dòng) | |
| Đại diện cho một danh sách có thứ tự (đánh số) | |
| Xác định vùng chứa cho nội dung giới thiệu và điều hướng trang web | |
| ĐẾN | Chỉ định các tiêu đề ở các cấp độ khác nhau, với là cao nhất |
| Xác định vùng chứa cho phần chân trang của tài liệu hoặc phần | |
| Tạo một vùng chứa chung để nhóm các thẻ và tạo kiểu cho nội dung | |
| Xác định một phần trong tài liệu hoặc đề cương tài liệu | |
| Đại diện cho một phần nội dung khép kín và có thể phân phối độc lập | |
| Xác định nội dung có liên quan mật thiết với nội dung chính | |
| Nhúng một trang web hoặc tài liệu bên ngoài vào trong tài liệu hiện tại | |
| Xác định một phần của liên kết điều hướng | |
| Nhúng hoặc tham chiếu tệp hoặc mã JavaScript bên ngoài | |
| Đại diện cho một đoạn mã máy tính |
Thẻ HTML cơ bản
Nếu bạn muốn tạo một trang web hữu ích cho mọi người và quan trọng hơn là trong bối cảnh của bài viết này, cho các công cụ tìm kiếm, thì bạn phải đưa vào ba thẻ HTML chính.
: Chỉ định rằng tài liệu là một trang web HTML
Sản phẩm thẻ được đặt ở đầu mã trang web của bạn. Mục đích của nó là giới thiệu trang này với các công cụ tìm kiếm và trình duyệt web, cho biết rằng đó là một tài liệu HTML. Bằng cách bao gồm thẻ này, bạn thông báo cho công cụ tìm kiếm rằng trang của bạn được cấu trúc bằng HTML. Điều này cho phép họ diễn giải và hiển thị nội dung một cách chính xác.
Lưu ý rằng bản thân thẻ không phải là thẻ HTML, đó là lý do tại sao nó không có bất kỳ thuộc tính nào. Nó cung cấp thông tin cực kỳ quan trọng cho các trình duyệt cho phép họ biết loại tài liệu nào sẽ tìm thấy trên trang và cách nó phải được hiển thị.
Đây là một ví dụ về mã được sử dụng:
Đây là tiêu đề của một tài liệu Đây là một tiêu đề Đây là một đoạn văn.
: Chứa siêu dữ liệu và thông tin cần thiết khác về trang
Sản phẩm phần tử hoạt động như một nơi chứa siêu dữ liệu, có nghĩa là nó chứa thông tin về tài liệu HTML không hiển thị trên trang web. Nó được định vị giữa thẻ và nhãn. Bạn có thể bao gồm nhiều phần tử HTML khác nhau trong thẻ, chẳng hạn như , , ,, , và quan trọng nhất, .
Đây là mã HTML trông như thế nào:
Đây là tiêu đề của một tài liệu Đây là một tiêu đề Đây là một đoạn văn.
Trong ví dụ trên, bạn có thể nhận thấy rằng thẻ chứa siêu dữ liệu quan trọng, bao gồm tiêu đề của tài liệu, siêu dữ liệu này không hiển thị trực tiếp trên trang web. Ngoài ra, thẻ có thể chứa nhiều phần tử khác nhau cung cấp dữ liệu bổ sung về trang.
Sản phẩm hỗ trợ thẻ Thuộc tính toàn cầu HTML có thể được sử dụng với bất kỳ phần tử HTML nào. Các thuộc tính này nâng cao chức năng và hành vi của các phần tử trong phần.
: Xác định nội dung chính của trang web
Sản phẩm thẻ xác định nội dung của tài liệu và hoạt động như một nơi chứa thông tin trên trang, bao gồm mọi văn bản, hình ảnh và video mà bạn hiển thị trên trang web của mình cho mọi người xem.
Sản phẩm thẻ chứa nội dung chính của tài liệu HTML, bao gồm các tiêu đề, đoạn văn, đa phương tiện, siêu liên kết, bảng, danh sách, v.v. Về cơ bản, mọi thứ mà mắt người có thể nhìn thấy trên một trang web đều được lưu trữ trong nhân tiện, thẻ này chỉ có thể có một trong số đó.
Đây là mã HTML trông như thế nào:
Đây là tiêu đề của một tài liệu Đây là một tiêu đề Đây là một đoạn văn.
Khi bạn chạy mã, bạn sẽ thấy điều này:
Ở đây, chúng ta có thể thấy các phần tử HTML được bao bọc trong nhãn: và . Điều đáng chú ý là thẻ chứa siêu dữ liệu, chẳng hạn như tiêu đề và mô tả của tài liệu, không hiển thị trên trang thực tế.
Sản phẩm thẻ cũng hỗ trợ Thuộc tính toàn cầu HTML. Hơn nữa, nó còn hỗ trợ Thuộc tính sự kiện HTML cho phép các sự kiện kích hoạt hành động trong trình duyệt, tương tự như việc nhấp vào một phần tử trong JavaScript.
Các thẻ và thuộc tính HTML hữu ích
Và bây giờ, chuyển sang các thẻ HTML khác có thể giúp ích cho SEO của bạn.
Như chúng ta đã đề cập, thẻ có thể cho trình duyệt và công cụ tìm kiếm biết mọi thứ họ cần biết bằng ngôn ngữ mà họ có thể hiểu, như cách xử lý trang, nội dung của trang và mục đích của trang đó là gì.
Bí quyết duy nhất là biết bạn muốn sử dụng cái gì và sử dụng nó như thế nào một cách chính xác. Để đảm bảo mã HTML của bạn được cấu trúc chính xác và tuân thủ các tiêu chuẩn phù hợp, bạn có thể sử dụng Trình xác thực HTML được cung cấp bởi W3C.
: Xác định tiêu đề của tài liệu HTML
Là một trong những thẻ được các chuyên gia SEO yêu thích nhất, thẻ thẻ giúp cả người dùng và công cụ tìm kiếm hiểu nội dung của trang.
Trong tựa đề được hiển thị dưới dạng tiêu đề có thể nhấp vào trên SERPs. Nó rất quan trọng đối với khả năng sử dụng và tối ưu hóa công cụ tìm kiếm. Mục đích của thẻ này là mô tả chính xác và ngắn gọn nội dung của trang để người tìm kiếm bị lôi kéo truy cập trang và công cụ tìm kiếm có đủ thông tin bổ sung về chủ đề của trang. Thông thường, người dùng sử dụng tiêu đề clickbait để thu hút sự chú ý của người dùng và thu hút họ đến các trang web.
Tiêu đề không chỉ được hiển thị trong đoạn trích mà còn trong tab trình duyệt, giúp người dùng hiểu nhanh những trang nào đang mở trong trình duyệt.
Tiêu đề cũng được hiển thị dưới dạng văn bản liên kết khi bạn đăng liên kết lên mạng xã hội, nếu bạn không sử dụng Đánh dấu đồ thị mở đó là. Đó chính xác là lý do tại sao tiêu đề phải ngắn gọn, đầy đủ thông tin, độc đáo và thú vị để thu hút độc giả tiềm năng.
Độ dài tiêu đề được khuyến nghị tối đa là 55 ký tự, vì tiêu đề quá dài sẽ bị cắt bớt xuống còn 600 pixel. Kết quả là thông tin không đầy đủ sẽ được đưa vào đoạn trích.
Được rồi, với vấn đề về độ dài tiêu đề đã được giải quyết, hãy tìm hiểu xem liệu chúng ta có cần sử dụng từ khóa mục tiêu trong thẻ tiêu đề hay không. Câu trả lời ngắn gọn là có. Theo các nghiên cứu, việc sử dụng từ khóa mục tiêu trong thẻ tiêu đề có thể có tác động tích cực đến thứ hạng của trang web. Từ khóa mục tiêu có thể giúp tăng thứ hạng nhưng không có mối liên hệ trực tiếp nào giữa việc sử dụng từ khóa trong thẻ tiêu đề và việc tăng thứ hạng. Google từ lâu đã học cách phân tích ngữ nghĩa trang web mà không chỉ quan tâm đến thẻ, như trường hợp trước đây.
Điểm mấu chốt là bạn do cần sử dụng từ khóa nhưng chỉ với mục đích giúp cả công cụ tìm kiếm và người dùng hiểu trang của bạn nói về nội dung gì, không hơn thế nữa.
Bạn cũng có quyền chỉ định các thông tin bổ sung khác trong tiêu đề, chẳng hạn như giá cả, nhãn hiệu, các tùy chọn giao hàng, v.v.
Đây là mã HTML trông như thế nào:
Đây là tiêu đề của một tài liệu Đây là một tiêu đề Đây là một đoạn văn.
Điều thú vị là, kể từ khi phần tử là một phần của của tệp HTML, nó không được hiển thị trên chính trang đó. Hơn nữa, chỉ nên có một thẻ trong một tài liệu duy nhất phải được đặt bên trong thùng đựng hàng. Các thẻ cũng hỗ trợ Thuộc tính toàn cầu HTML, nhưng không hỗ trợ Thuộc tính sự kiện.
: Cung cấp siêu dữ liệu bổ sung về trang web
Sản phẩm thẻ xác định siêu dữ liệu của tài liệu HTML không được hiển thị trên trang nhưng có thể được xử lý bởi các bot tìm kiếm để xác định từ khóa và bởi trình duyệt để hiển thị nội dung hoặc tải lại trang.
Nó phải luôn được đặt trong và thường được sử dụng để chỉ định bộ ký tự được sử dụng trên trang, mô tả trang, từ khóa, tác giả tài liệu cũng như cài đặt chế độ xem.
Chúng ta hãy xem xét các thuộc tính mà thẻ có thể chứa.
Thuộc tính tên
Sản phẩm Họ tên Thuộc tính là một trong những thuộc tính cơ bản của thẻ mà chúng tôi sẽ tập trung vào. Nó được sử dụng để chỉ định tên cho siêu dữ liệu. Đây là cách nó có thể được sử dụng:
- Thông báo cho các bot tìm kiếm: Bạn có thể sử dụng thuộc tính tên để cho biết liệu thông tin trên một trang có dành cho các bot tìm kiếm hay không. Bằng cách đưa thuộc tính tên vào thẻ meta, bạn có thể chỉ ra cho tất cả hoặc các bot cụ thể mà chúng nên xem xét noindex chỉ thị, ngăn họ tương tác với trang của bạn. Ví dụ:
tên=”googlebot” nội dung=”noindex”> name=”robot” nội dung=”noindex”>
name=”từ khóa” content=”HTML, thẻ, thuộc tính”>
- Xác định mô tả của trang: Điều này giúp các công cụ tìm kiếm và các ứng dụng khác hiểu được nội dung trang của bạn. Ví dụ:
tên=”mô tả” content=”Đây là một mô tả tuyệt vời”>
- Xác định tác giả: Thuộc tính tên cũng có thể được sử dụng để xác định tác giả của nội dung trang. Điều này cung cấp sự ghi công cho tác giả ban đầu. Ví dụ:
tên=”tác giả” content=”John Appleseed”>
Nhưng đây không phải là tất cả các giá trị của thuộc tính name. Chúng ta hãy xem xét kỹ hơn một số cái khác.
Thuộc tính mô tả
Thuộc tính mô tả, thường được gọi là mô tả meta, là một thuộc tính khác được sử dụng với thẻ, điều này rất cần thiết cho SEO. Thuộc tính này cung cấp mô tả bằng văn bản về nội dung của trang được hiển thị trong SERP cùng với tiêu đề.
Đây là mã HTML của nó trông như thế nào:
tên="mô tả" content="Thẻ HTML và thuộc tính bạn cần biết">
Bên cạnh việc cung cấp thông tin bổ sung trên trang cho các công cụ tìm kiếm, thuộc tính mô tả còn mang đến cho người tạo nội dung cơ hội viết văn bản lôi cuốn nhằm khuyến khích mọi người nhấp qua trang trực tiếp từ SERPs.
Văn bản mô tả phải mang tính lôi cuốn một chút để mọi người có động lực truy cập trang. Nhưng lưu ý rằng Google có thể thay thế mô tả trang được cung cấp bằng các phần nội dung có liên quan đến truy vấn tìm kiếm của người dùng.
Bây giờ, mặc dù văn bản mô tả không giúp tăng thứ hạng trực tiếp nhưng nó có thể tăng CTR của bạn, do đó, được coi là tín hiệu xếp hạng tích cực.
Thẻ meta chế độ xem
Mặc dù nó không phải là một thuộc tính nhưng thẻ meta khung nhìn cho phép bạn kiểm soát chiều rộng và tỷ lệ của khung nhìn—khu vực của một trang hiển thị cho người dùng—để trang đó được hiển thị chính xác trên các màn hình thuộc mọi kích cỡ: từ máy tính để bàn đến máy tính xách tay và từ máy tính bảng tới điện thoại di động.
Mã HTML trông như thế này và tôi khuyên bạn nên thêm nó vào tất cả các trang web của mình:
tên="khung nhìn" content="width=device-width, first-scale=1.0">
Với sự trợ giúp của dữ liệu này, trình duyệt có thể lấy thông tin về cách kiểm soát kích thước và tỷ lệ của trang web. Nhìn kỹ hơn vào mã, chúng ta có thể thấy rằng width = chiều rộng thiết bị được thiết lập sao cho chiều rộng của trang sẽ khớp với chiều rộng màn hình của thiết bị được sử dụng.
Đối với các quy mô ban đầu = 1.0 một phần, nó đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên. Vì vậy, bạn có thể muốn kiểm tra nó tùy thuộc vào cách thiết lập trang của bạn. Dưới đây là ví dụ về một trang không sử dụng thẻ meta khung nhìn, cùng với trang web sử dụng thẻ này:
Trong thời đại hiện đại, khi khả năng sử dụng của một trang web ảnh hưởng trực tiếp đến vị trí xếp hạng của nó, việc tạo các trang không điều chỉnh theo kích thước của các màn hình khác nhau là điều không thể chấp nhận được. Mọi người sẽ ngay lập tức rời khỏi trang của bạn nếu nó trông giống như ví dụ bên trái.
Thuộc tính nội dung
Thuộc tính nội dung hoạt động kết hợp với tên và http-tương đương thuộc tính và tiết lộ ý nghĩa/loại dữ liệu của thẻ meta cho công cụ tìm kiếm. Về cơ bản, nó chỉ định nội dung chứa thẻ meta.
Dưới đây là ví dụ về thuộc tính nội dung được sử dụng trong thẻ meta:
<tên meta="mô tả" content="Thẻ và thuộc tính HTML là gì? Bạn sử dụng chúng như thế nào để đạt được lợi thế SEO? Hãy xem mọi thẻ HTML quan trọng và thuộc tính của nó trong bài đăng này!">
Trong bối cảnh của http-tương đương thuộc tính mà chúng ta sẽ đề cập tiếp theo, thuộc tính nội dung xác định loại dữ liệu được gửi tới trình duyệt. Nhưng trước tiên, hãy tập trung vào một giá trị rất quan trọng của thuộc tính nội dung.
Thuộc tính noindex
Noindex là một thuộc tính thẻ meta thường được sử dụng khác cho mục đích SEO. Về cơ bản, thuộc tính noindex cho phép bạn thông báo cho các công cụ tìm kiếm rằng họ không thể sử dụng trang đã cho trong chỉ mục tương ứng của họ.
Tương tự như rô bốt meta thẻ, thuộc tính noindex thường được gọi là thuộc tính noindex thẻ vì công dụng của nó, mặc dù nó là một thuộc tính của thẻ meta.
Đây là mã HTML trông như thế nào:
<tên meta="robot" nội dung="noindex">
Dưới đây là một số ví dụ về các lệnh có thể được sử dụng trong thẻ meta robots noindex (chúng có thể được sử dụng kết hợp):
- Không theo: không theo bất kỳ liên kết nào từ trang và cũng không tính đến liên kết nước trái cây khi tính toán thứ hạng.
- Chỉ mục, nofollow: tôindex nội dung của trang nhưng không theo bất kỳ liên kết nào từ trang.
Thuộc tính này rất hữu ích khi bạn muốn ẩn dữ liệu nhạy cảm khỏi tìm kiếm không phải trả tiền. Ví dụ: bạn có thể có một khu vực trên trang web của mình mà chỉ các thành viên trả phí mới có thể truy cập và không sử dụng được noindex thẻ sẽ làm cho bất kỳ ai cũng có thể truy cập được nội dung từ các trang kết quả tìm kiếm.
Khi sử dụng chỉ thị robot trên trang của bạn, hãy đảm bảo trang đó không bị chặn bởi tập tin robot.txt. Nếu không, công cụ tìm kiếm sẽ không thể truy cập trang và xem các chỉ thị được chỉ định trongmeta> thẻ.
Thuộc tính tương đương HTTP
Sản phẩm http-tương đương Thuộc tính hiển thị nội dung của Tiêu đề HTTP và được máy chủ sử dụng để thu thập thông tin trang bổ sung. Theo thuật ngữ thông thường, trình duyệt chuyển đổi giá trị của http-tương đương thuộc tính—được xác định với sự trợ giúp của nội dung thuộc tính—theo định dạng tiêu đề phản hồi HTTP và xử lý chúng như thể chúng đến trực tiếp từ máy chủ.
Đây là một ví dụ về mã HTML trông như thế nào:
http-equiv="hết hạn" nội dung="4 tháng 2022 năm XNUMX"> http-equiv="làm mới" nội dung="60">
Tiêu đề HTTP tiết lộ nhiều dữ liệu hữu ích cho các chuyên gia SEO, chẳng hạn như trạng thái phản hồi của máy chủ (200, 404, v.v.) hoặc tên của máy chủ đã gửi phản hồi.
Ngoài ra, nó có thể được sử dụng để chỉ định URL chuẩn cho trang được yêu cầu, chặn robot lập chỉ mục một trang bằng cách sử dụng X-Robot-Tag tiêu đề HTTP hoặc thiết lập một Chuyển hướng HTML sử dụng thuộc tính làm mới.
Sau đây là một số thuộc tính các giá trị có thể được sử dụng trong http-tương đương thuộc tính:
- Chính sách bảo mật nội dung: Chỉ định chính sách nội dung của tài liệu.
http-equiv="nội dung-bảo mật-chính sách" nội dung=”default-src 'self'”>
- Loại nội dung: Chỉ định mã hóa ký tự của tài liệu.
http-equiv="loại nội dung" nội dung =”văn bản/html; bộ ký tự=UTF-8″>
- Kiểu mặc định: Chỉ định biểu định kiểu ưa thích của tài liệu. Giá trị của thuộc tính nội dung phải khớp với giá trị của thuộc tính tiêu đề trên thành phần liên kết hoặc phải khớp với giá trị của thuộc tính tiêu đề trên thành phần kiểu.
http-equiv="kiểu mặc định" content=”biểu định kiểu ưa thích của tài liệu”>
- Refresh: Xác định tần suất (tính bằng giây) tài liệu cần tự động làm mới.
http-equiv=”làm mới” nội dung=”120″>
Thuộc tính bộ ký tự
Sản phẩm bảng chữ cái thuộc tính chịu trách nhiệm mã hóa tài liệu. Nó xác định kiểu mã hóa ký tự của một trang web, cần được chỉ định để trình duyệt có thể hiển thị chính xác văn bản của tài liệu HTML trên trang. Nếu thẻ chứa dữ liệu mã hóa có lỗi, bạn sẽ chỉ thấy các ký tự bị xáo trộn trên trang.
Đây là mã HTML trông như thế nào:
bộ ký tự="UTF-8">
Một trong những cách được sử dụng thường xuyên nhất tiêu chuẩn mã hóa là UTF-8, với 96.6% trang web được phân tích sử dụng nó. Nó được hỗ trợ bởi tất cả các trình duyệt và công cụ tìm kiếm hiện đại. Một số tiêu chuẩn mã hóa khác bao gồm ISO-8859-1, Windows-1251 và Windows-1252, nhưng chúng được sử dụng bởi ít hơn 3% trang web.
Không sử dụng nhiều tiêu chuẩn mã hóa trong một tài liệu vì điều này sẽ gây nhầm lẫn cho cả trình duyệt và công cụ tìm kiếm. Đổi lại, điều này có thể dẫn đến các vấn đề về lập chỉ mục nội dung và hiển thị văn bản không chính xác.
Ngày nay, hầu như mọi công cụ tìm kiếm đều biết cách xác định mã hóa trang mà không cần sự trợ giúp từ bên ngoài. Tuy nhiên, để đảm bảo an toàn, tốt nhất bạn nên chỉ định mã hóa được sử dụng trên trang để tránh gặp sự cố.
Và : Tạo liên kết cho phép người dùng điều hướng đến các trang web khác hoặc các vị trí cụ thể trong cùng các trang đó
Sản phẩm thẻ dùng để xác định các siêu liên kết liên kết đến các trang web, tệp hoặc phần cụ thể khác trong cùng một trang. Đây là một ví dụ về mã HTML của nó trông như thế nào:
liên kết văn bản neo
Khi được thêm vào mã HTML và đặt vào nội dung, ví dụ trên sẽ trông như thế này.
Bây giờ, hãy chia nhỏ nó để hiểu các phần của nó. Đầu tiên, chúng ta có thẻ chỉ ra rằng phần tử là một liên kết. Sau đó, href thuộc tính xác định trang mà liên kết liên kết tới, đó là www.trang web.com trong trường hợp của chúng ta. Văn bản mà bạn có thể nhìn thấy giữa phần đầu gắn thẻ và đóng thẻ là văn bản liên kết, giống như văn bản trong nội dung có thể nhấp vào mà khách truy cập sẽ thấy trên trang.
Sản phẩm thẻ được sử dụng cho các liên kết có thể nhấp được đặt trong nội dung của trang, như trong nhãn. Nếu bạn cần liên kết một trang web với một tài nguyên bên ngoài, như tài liệu chứa phông chữ hoặc biểu định kiểu bên ngoài, bạn cần sử dụng thẻ xuất hiện trong của trang.
Đây là mã HTML của nó trông như thế nào:
Sản phẩm liên kết thẻ không phải là siêu liên kết, chúng không thể nhấp vào được và Bản thân phần tử chỉ chứa các thuộc tính. Chúng chỉ đơn giản cho thấy các tài liệu web có liên quan với nhau như thế nào.
Bây giờ, chúng ta hãy xem xét các thuộc tính được liên kết với thẻ liên kết.
Thuộc tính Hreflang
Các thuộc tính quan trọng nhất của thẻ là href và hreflang các thuộc tính cho biết đích đến của liên kết và chỉ định quốc gia và ngôn ngữ của trang thay thế tương ứng.
Sản phẩm hreflang thuộc tính được thiết kế chủ yếu cho các trang web chứa cùng một bản sao ở các ngôn ngữ khác nhau. Nó cho phép các công cụ tìm kiếm biết phiên bản trang nào phải được hiển thị cho khách truy cập trang web, cho phép họ xem nội dung bằng ngôn ngữ ưa thích của họ.
Sản phẩm hreflang thuộc tính cũng có thể được sử dụng trong thẻ nơi nó xác định ngôn ngữ của trang web được liên kết tới và đây là mã HTML của nó trông như thế nào:
<Liên kết rel="thay thế" href="https://website.com" hreflang="en-gb" />
Mã có thể được chia thành ba phần:
- Sản phẩm luân phiên giá trị cho công cụ tìm kiếm biết rằng trang web đó có một trang liên quan thay thế.
- Sản phẩm href thuộc tính xác định URL của trang được liên kết ra.
- Mã ngôn ngữ được chỉ định sau hreflang thuộc tính cho phép công cụ tìm kiếm biết ngôn ngữ hoặc quốc gia của trang được liên kết. Kiểm tra danh sách đầy đủ các mã ngôn ngữ được gọi là Mã ISO 639-1.
Sản phẩm hreflang Ngoài ra, thuộc tính này có thể được sử dụng trong tiêu đề HTTP cho các tài liệu không phải HTML hoặc có thể được chỉ định trong sơ đồ trang web XML của trang web.
Thuộc tính Rel=“nofollow”
Sản phẩm rel = ”nofollow” thuộc tính chỉ ra các bot công cụ tìm kiếm rằng chúng không được phép đi theo URL được chỉ ra trong href thuộc tính.
Thuộc tính này không có bất kỳ tác dụng nào đối với người truy cập trang web nên họ vẫn có thể nhấp vào liên kết để đi đến các trang khác. Tuy nhiên, nó ảnh hưởng đến các bot, vì chúng bị cấm theo liên kết để truy cập một trang hoặc nêu bật bất kỳ khía cạnh tích cực cụ thể nào của việc liên kết trang này với trang khác.
Thuộc tính này có thể được áp dụng cho một liên kết như sau:
<a href=www.website.com rel="nofollow">văn bản neo liên kết
Hoặc bạn có thể đánh dấu tất cả các liên kết trên một trang là nofollow bằng cách sử dụng nó trong thẻ giống như thuộc tính noindex:
name="robot" nội dung="nofollow"/>
Nhưng vấn đề không chỉ là về các công cụ tìm kiếm và bot của chúng. Bạn vẫn có thể hưởng lợi gián tiếp từ các liên kết nofollow nếu khách truy cập trang web của bạn nhấp qua trang web được liên kết.
Việc Google sử dụng thuộc tính rel=“nofollow”
Nhiều năm về trước, Google đã thực hiện một số thay đổi đến nofollow thuộc tính và giới thiệu UGC và được tài trợ thuộc tính. Không giống như nofollow thuộc tính mới này cho phép nhà xuất bản nêu mối quan hệ giữa các liên kết và trang mục tiêu của họ một cách rõ ràng hơn nhiều.
Chúng giúp Google nhận ra khi nào một trang được liên kết đến không nên được tính đến khi xếp hạng các trang:
- Sản phẩm UGC thuộc tính là viết tắt của nội dung do người dùng tạo và được sử dụng để đánh dấu các liên kết đã được thêm thông qua các tài nguyên có sẵn công khai
- Sản phẩm được tài trợ thuộc tính được sử dụng để xác định các liên kết có được thông qua quảng cáo hoặc tài trợ.
Hơn nữa, Google cũng tuyên bố rằng nofollow, UGCvà được tài trợ các thuộc tính hiện được công cụ tìm kiếm coi là gợi ý. Bot của Google trước đây thường bỏ qua những liên kết như vậy, nhưng giờ đây nó có thể coi “gợi ý” được cung cấp nhưng vẫn có thể coi liên kết đó là “nofollow”.
Thuộc tính chuẩn
Thẻ liên kết rel=”chuẩn” thuộc tính cho phép SEO chỉ ra trang web nào khác sẽ được xem xét kinh điển—như trong đó là phiên bản chính của trang, nhưng các bản sao của nó có thể tồn tại. Từ góc độ SEO, điều này giúp quảng bá một trang cụ thể trong tìm kiếm không phải trả tiền, ngăn chặn các bản sao của nó được xếp hạng.
Thuộc tính này trông như thế này:
Mã có thuộc tính chuẩn phải được đặt trong phần của trang yếu tố. Lưu ý rằng bạn nên chỉ ra trang bạn muốn bot công cụ tìm kiếm xem là trang chuẩn sau href thuộc tính.
Hãy xem Google nói gì về liên kết chuẩn để tìm hiểu thêm.
: Chèn hình ảnh vào trang web
Sản phẩm thẻ hiện diện trên bất kỳ trang nào có hình ảnh. Nó được sử dụng để nhúng hình ảnh vào mã HTML và hiển thị chúng ở đị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 một tệp khác. Để làm điều này, chỉ cần đặt gắn thẻ vào thùng đựng hàng.
Hình ảnh cũng có thể được sử dụng dưới dạng HTML bản đồ hình ảnh khi hình ảnh chứa các khu vực có thể nhấp vào hoạt động như liên kết. Bản đồ hình ảnh không khác với hình ảnh thông thường ở bất kỳ điểm nào ngoại trừ bản đồ hình ảnh có thể được chia thành các vùng vô hình với nhiều hình dạng khác nhau mà có thể nhấp vào.
Điều thú vị là thẻ này không thực sự chèn bất kỳ hình ảnh nào vào các trang mà liên kết với chúng để chúng được hiển thị trên trang. Các về cơ bản, thẻ đóng vai trò như một nơi chứa các hình ảnh trên thực tế được đặt ở một nơi khác, chẳng hạn như máy chủ.
Đây là mã HTML của thẻ trông giống như:
Như bạn có thể thấy, có ba thuộc tính trong thẻ này. Một trong số chúng phải được điền chính xác để thẻ hoạt động, trong khi những cái còn lại có thể không có giá trị. Chúng ta hãy xem xét ba chi tiết hơn.
Thuộc tính Src
Mục đích chính của thuộc tính src là chỉ ra vị trí (URL) của tệp hình ảnh hiển thị trên trang web. Vị trí của hình ảnh, như trong URL của nó, có thể được chỉ định theo hai cách để src thuộc tính.
Nếu có thể tìm thấy hình ảnh trên cùng miền với vùng chứa hình ảnh đó thì bạn nên sử dụng URL tương đối. Trong trường hợp này, tên miền không có trong địa chỉ URL. Nếu không có dấu gạch chéo ở đầu URL thì URL đó có liên quan đến trang hiện tại.
src="imagefile.png"
Nhưng nếu có dấu gạch chéo ở đầu URL thì nó có liên quan đến tên miền:
src=”/images/imagefile.png”
Các URL tương đối sẽ không bị hỏng khi thay đổi tên miền, chẳng hạn như khi chuyển từ HTTP sang HTTPS. Và nếu trình duyệt không tìm thấy hình ảnh, văn bản thay thế sẽ được hiển thị cùng với biểu tượng liên kết bị hỏng.
Nếu bạn muốn sử dụng hình ảnh nằm trên một trang web khác, hãy sử dụng URL tuyệt đối:
src=”https://www.website.com/images/imagefile.png”
Lưu ý rằng việc sử dụng hình ảnh từ các nguồn bên ngoài mà không được phép có thể vi phạm luật bản quyền, hơn nữa bạn không có quyền kiểm soát chúng và sẽ không biết khi nào chúng bị xóa hoặc cập nhật.
Mục đích duy nhất của thuộc tính này về mặt SEO là bạn cần nó để lập chỉ mục hình ảnh và xem chúng được xếp hạng trong tìm kiếm hình ảnh. Ngoài ra, thẻ hình ảnh sẽ không hoạt động nếu không có thuộc tính này.
thuộc tính thay thế
Mục đích chính của thuộc tính này là cho biết văn bản thay thế sẽ xuất hiện nếu hình ảnh không thể hiển thị trên trang vì bất kỳ lý do gì. Vì các công cụ tìm kiếm vẫn đang nỗ lực tìm ra công nghệ cho phép họ hiểu một cách hoàn hảo những gì được miêu tả trên hình ảnh, nên alt thuộc tính cung cấp một cách khác—ngoài việc tiêu đề thuộc tính—để họ hiểu những gì được mô tả trên một hình ảnh và cuối cùng là xếp hạng nó trong tìm kiếm hình ảnh.
Sử dụng từ khóa mô tả hình ảnh, phù hợp với chủ đề của trang web để SEO tốt hơn.
Đối với khách truy cập trang web là con người, văn bản trong thuộc tính alt được trình đọc màn hình và công nghệ hỗ trợ sử dụng để giúp người mù hoặc khiếm thị hiểu được nội dung trong hình ảnh. Vì vậy, bạn có thể muốn tận dụng tối đa thuộc tính alt để giúp những người như vậy tiếp thu nội dung.
Mặc dù các alt thuộc tính phải có trong thẻ hình ảnh giống như thuộc tính tiêu đề, bạn không bắt buộc phải điền nó. Tuy nhiên, xem xét các điểm đã nêu ở trên, cuối cùng bạn có thể muốn điền vào.
Thuộc tính tiêu đề
Sản phẩm tiêu đề thuộc tính mô tả nội dung của hình ảnh. Mặc dù thuộc tính này không quan trọng cho việc tối ưu hóa như thuộc tính alt Thuộc tính này không được sử dụng để xếp hạng tìm kiếm nhưng vẫn đáng để điền vì nó có thể cung cấp thông tin bổ sung khi người dùng di chuột qua hình ảnh.
Nhiều thuộc tính khác được sử dụng cùng với thẻ chịu trách nhiệm về vị trí của hình ảnh trên trang, kích thước và các tính năng thiết kế. Vì vậy, đây là một số trong số họ:
- Nguồn gốc chéo: Cho phép sử dụng hình ảnh từ các trang web của bên thứ ba cho phép sử dụng quyền truy cập nhiều nguồn gốc bằng canvas
- Chiều cao: Xác định chiều cao của hình ảnh
- Bản đồ Ismap: Xác định hình ảnh dưới dạng bản đồ hình ảnh phía máy chủ
- Tải: Xác định liệu trình duyệt có nên tải hình ảnh ngay lập tức hay đợi cho đến khi đáp ứng các điều kiện cụ thể
- Longdesc: Xác định một trang web chứa mô tả hình ảnh chi tiết
- Chính sách giới thiệu: Xác định thông tin liên kết giới thiệu nào phải được sử dụng khi tìm nạp hình ảnh
- Kích thước: Xác định kích thước của hình ảnh cho các bố cục trang khác nhau
- Srcset: Cung cấp danh sách các tệp hình ảnh nên được sử dụng trong các tình huống khác nhau
- Sơ đồ sử dụng: Xác định hình ảnh dưới dạng bản đồ hình ảnh phía máy khách
- Chiều rộng: Xác định chiều rộng hình ảnh
Sản phẩm thẻ cũng hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Một nhóm thẻ riêng biệt chịu trách nhiệm nhấn mạnh văn bản—làm cho văn bản được in đậm, in nghiêng, gạch chân, v.v. Lựa chọn văn bản rất hữu ích khi bạn cần làm nổi bật một cách hợp lý một phần quan trọng của văn bản, cho cả người đọc và công cụ tìm kiếm.
Dưới đây là các thẻ phổ biến nhất giúp định dạng văn bản:
- Sản phẩm thẻ làm cho văn bản in nghiêng.
- Sản phẩm thẻ xác định văn bản được nhấn mạnh. Nội dung trong thẻ được hiển thị in nghiêng. Trình đọc màn hình sử dụng trọng âm khi phát âm các từ trong :
Đoạn văn bản được nhấn mạnh
Lưu ý rằng sự khác biệt chính giữa và thẻ sau cung cấp sự nhấn mạnh về mặt ngữ nghĩa đối với một từ hoặc phần từ quan trọng (hữu ích cho SEO), trong khi thẻ trước chỉ là văn bản bù đắp được tạo kiểu theo kiểu in nghiêng theo quy ước để thể hiện tâm trạng hoặc giọng nói thay thế.
- Sản phẩm thẻ làm cho văn bản được in đậm:
Văn bản được in đậm
- Sản phẩm thẻ cũng làm cho văn bản được in đậm. Tuy nhiên, không giống như thẻ chỉ đơn giản làm cho văn bản được in đậm mà không có bất kỳ ý nghĩa logic nào đằng sau nó, thẻ này cho các công cụ tìm kiếm biết rằng văn bản được in đậm có tầm quan trọng rất lớn:
Văn bản mạnh mẽ
Đây là cách chúng trông như thế nào trong mã:
: Áp dụng kiểu hoặc định dạng cho các phần văn bản đã chọn
Sản phẩm thẻ là phần tử nội tuyến được sử dụng để áp dụng kiểu hoặc định dạng cho các phần văn bản cụ thể trong khối nội dung lớn hơn. Nó không làm thay đổi cấu trúc hoặc ý nghĩa của văn bản. Thay vào đó, nó hoạt động như một nơi chứa kiểu dáng được nhắm mục tiêu.
Đây là mã HTML trông như thế nào:
từ này là màu xanh da trời.
Và đây là cách nó hiển thị trực tiếp trong mã:
Sản phẩm phần tử rất linh hoạt và có thể được lồng trong các phần tử khác để tạo kiểu có chọn lọc cho từng từ, cụm từ hoặc phần nhỏ của đoạn văn. Bằng cách thêm các kiểu CSS vào chẳng hạn như thay đổi màu phông chữ hoặc áp dụng màu nền, bạn có thể phân biệt và nhấn mạnh các phần cụ thể của văn bản một cách trực quan.
Sản phẩm thẻ có thể đóng vai trò như một cái móc cho chức năng JavaScript. Bằng cách gán một ID hoặc lớp cho phần tử, bạn có thể dễ dàng nhắm mục tiêu và thao tác nội dung bằng JavaScript. Điều này mở ra khả năng cho các tính năng tương tác, cập nhật nội dung động hoặc xử lý sự kiện trong các phần cụ thể của văn bản.
: Defines internal CSS styles
Sản phẩm thẻ trong HTML được sử dụng để xác định kiểu CSS nội bộ trong tài liệu HTML, cho phép bạn áp dụng kiểu tùy chỉnh cho các thành phần hoặc phần cụ thể của trang web mà không cần tệp CSS bên ngoài.
h1 {màu:đỏ;}
p {màu:xanh dương;}
Một tiêu đề Một đoạn văn.
Bằng cách đặt các quy tắc CSS bên trong thẻ, bạn có thể kiểm soát việc trình bày trực quan nội dung. Điều này bao gồm các thuộc tính như màu sắc, phông chữ, bố cục, v.v. Các thẻ cung cấp một cách thuận tiện để sắp xếp và quản lý kiểu dáng của các thành phần HTML trong một tệp HTML duy nhất, giúp việc duy trì và sửa đổi giao diện của trang web trở nên dễ dàng hơn.
Thông thường, thẻ được đặt trong phần của tài liệu HTML:
Việc sử dụng các Bản thân thẻ không ảnh hưởng trực tiếp đến SEO nhưng cách bạn sử dụng gắn thẻ và áp dụng kiểu cho các thành phần HTML của bạn có thể ảnh hưởng gián tiếp đến nó.
Xin lưu ý rằng việc sử dụng kiểu nội tuyến trực tiếp trong tài liệu HTML thường được coi là phương pháp kém tối ưu hơn. Cách tiếp cận này có thể dẫn đến một cơ sở mã lộn xộn và khó bảo trì, cản trở khả năng mở rộng và tái sử dụng. Thay vào đó, bạn nên sử dụng các tệp CSS bên ngoài hoặc bảng định kiểu nội bộ để duy trì sự tách biệt rõ ràng giữa các mối quan tâm, nâng cao khả năng tổ chức mã và tạo điều kiện tạo kiểu nhất quán và hiệu quả trên toàn bộ trang web.
, , : Cấu trúc và sắp xếp dữ liệu thành bảng và danh sách
Bảng và danh sách giúp sắp xếp thông tin trên một trang và mang lại cho bạn một phần thưởng hấp dẫn—cơ hội xuất hiện trong Hộp Trả lời của Google. Ví dụ: khi nhập truy vấn “so sánh các quốc gia theo khu vực”, chúng ta thấy Hộp Trả lời có bảng sau:
Đây là mã HTML rõ ràng khi không có tất cả thông tin bổ sung:
table, th, td { border: 1px solid black; border-collapse: collapse;
}
Quốc gia Số lượng Hoa Kỳ 9.16 triệu km vuông Canada 9.9 triệu kmXNUMX
Hãy chia nhỏ các từ viết tắt này và tìm hiểu cách sử dụng , , , và thẻ chính xác:
- : Xác định cấu trúc và nội dung của bảng. Các , , , và các phần tử khác được sử dụng bên trong nhãn. Bạn hoàn toàn có thể thay đổi bảng bằng các thuộc tính: căn chỉnh bảng, đặt hình nền, thay đổi màu nền, đặt độ rộng đường viền, v.v.
- : Tạo tiêu đề cho mô tả bảng
- : Tạo một hàng trong bảng
- : Tạo một ô tiêu chuẩn trong bảng
- : Tạo ô tiêu đề trong bảng với văn bản được in đậm đều đặn
Theo danh sách, chúng ta có thể thấy một câu chuyện tương tự. Giá trị SEO của danh sách nằm ở cấu trúc từng bước rõ ràng, ngắn gọn, giúp tăng cơ hội cho trang xuất hiện trong đoạn trích nổi bật.
Đây là một ví dụ về mã HTML trông như thế nào đối với mã không có thứ tự () và đặt hàng () danh sách:
Mục danh sách không có thứ tự Thêm một mục danh sách nữa Một mục danh sách khác Mục danh sách đặt hàng Thêm một mục danh sách nữa Một mục danh sách khác
Một lần nữa, hãy chia nhỏ nó ra và tìm hiểu cách sử dụng , và thẻ chính xác:
- : định nghĩa một danh sách không có thứ tự (có dấu đầu dòng)
- : định nghĩa một danh sách có thứ tự
- : chỉ định giá trị của một mục danh sách, trong đó mỗi phần tử trong danh sách phải bắt đầu bằng tag
- và
- ví dụ về thẻ” class=”wp-image-48403″ srcset=”https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-12 .png 2048w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-60.png 450w, https://zephyrnet.com /wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-61.png 924w, https://zephyrnet.com/wp-content/uploads/2023/07/ html-tags-you-cant-do-without-in-2023-62.png 768w, https://seranking.com/blog/wp-content/uploads/2023/06/ul-ol-tags-1536×828 .png 1536w”sizes=”(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px”>
Từ quan điểm của SEO, việc sử dụng bảng thay vì danh sách sẽ có lợi hơn nhiều vì bảng cho phép các công cụ tìm kiếm dễ dàng tìm nạp dữ liệu bảng và kết quả là xếp hạng bài viết cao hơn.
: Xác định phần trên cùng của trang web để giới thiệu thương hiệu và điều hướng
Sản phẩm thẻ được thiết kế để xác định tiêu đề trang hoặc phần nhằm giới thiệu nội dung phía trước và thường có logo hoặc biểu tượng, liên kết điều hướng và thanh tìm kiếm.
Điều quan trọng cần chỉ ra là có thể có một số các thẻ trong một mã HTML duy nhất, nhưng bản thân thẻ đó không thể được đặt trong một hay cách khác nhãn. Các thẻ hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Đây là mã HTML trông như thế nào:
Viết tiêu đề ở đây Được đăng bởi John Appleseed Giới thiệu phần nội dung của bạn Bây giờ hãy đi vào tất cả các chi tiết
Khi bạn chạy nó, bạn sẽ nhận được những điều sau:
Đây chỉ là một ví dụ nhưng bạn có thể dễ dàng tìm thấy phần tử được sử dụng ở đầu rất nhiều trang web:
Về lợi ích SEO, các bot công cụ tìm kiếm coi tiêu đề là thân thiện với người dùng vì chúng cung cấp định dạng trang, giúp nội dung trên trang có thể quét được. Nếu không có tiêu đề, các bot tìm kiếm có thể cho rằng trang của bạn không thân thiện với người dùng và kết quả là thứ hạng của bạn có thể bị ảnh hưởng. Ngoài ra, vì tiêu đề cũng có thể chứa các liên kết điều hướng nội bộ, điều này giúp công cụ tìm kiếm hiểu rõ ràng về những trang nào quan trọng nhất trong cấu trúc trang web của bạn.
ĐẾN : Xác định tiêu đề ở các cấp độ khác nhau
Mỗi phần nội dung trực tuyến đều được cấu trúc theo cách giúp cả công cụ tìm kiếm và người dùng hiểu nội dung đó. Kết quả là toàn bộ văn bản có tiêu đề và được chia thành các khối ngữ nghĩa logic, mỗi khối có tiêu đề riêng. HTML sử dụng các thẻ đặc biệt để làm nổi bật các thành phần như vậy trên trang: tiêu đề.
Có sáu cấp độ tiêu đề: từ h1 đến h6. được sử dụng làm tiêu đề chính và thường được đặt phía trên văn bản. Tất cả các tiêu đề phải tuân theo nguyên tắc phân cấp, với thẻ chỉ được sử dụng một lần trên một trang trong phần lớn các trường hợp.
Đây là tiêu đề 1 Đây là tiêu đề 1 Đây là tiêu đề 1 Đây là tiêu đề 2 Đây là tiêu đề 2 Đây là tiêu đề 2
Đây là mã HTML trông như thế nào:
Nó đã được xác nhận rằng thẻ có mức độ ưu tiên. Không quan trọng là bao nhiêu các tiêu đề bạn tối ưu hóa, chúng vẫn không thể xếp hạng cao hơn một trang web có thứ hạng được tối ưu hóa .
Để nhận được lợi ích SEO, tốt nhất bạn nên tuân thủ các phương pháp hay nhất về việc sử dụng tiêu đề trong nội dung—chỉ sử dụng một tiêu đề h1 và duy trì hệ thống phân cấp tiêu đề.
Lưu ý rằng và thẻ không giống nhau. Sự nhầm lẫn có thể xảy ra do cả hai đều có chức năng mô tả nội dung trang giống nhau. Nhưng điểm khác biệt chính giữa hai thẻ này là tiêu đề được hiển thị trong các tab đoạn mã, mạng xã hội và trình duyệt, trong khi thẻ chỉ được hiển thị trên trang dưới dạng tiêu đề. Trên hết, chúng phải khác nhau vì chúng phục vụ các mục đích khác nhau: tiêu đề thu hút mọi người từ SERP và thẻ xác nhận rằng người tìm kiếm đã đến đúng trang bằng cách mô tả nội dung.
: Đánh dấu phần dưới cùng của trang web để cải thiện hơn nữa cấu trúc liên kết và điều hướng
Sản phẩm thẻ được thiết kế để xác định phần chân trang của tài liệu hoặc phần trên trang web.
Thẻ này có thể chứa thông tin về quyền tác giả, bản quyền, chi tiết liên hệ (phải nằm bên trong thẻ trong ), liên kết đến các tài liệu và trang có liên quan, liên kết quay lại đầu trang và thậm chí có thể là sơ đồ trang web. Một mã HTML có thể chứa nhiều thẻ. Ngoài ra, thẻ này hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Đây là một ví dụ về mã HTML trông như thế nào:
Phần tử chân trang Tác giả: John Appleseed[email được bảo vệ]">[email được bảo vệ]
Mã trực tiếp tạo ra trang sau:
Ví dụ trên không phải là chân trang điển hình mà bạn có thể nghĩ đến nhưng có thể tìm thấy nó dưới nhiều bài viết khác nhau. Bên dưới, bạn sẽ thấy chân trang chứa đầy liên kết từ trang chủ của SE Xếp hạng cùng với mã HTML của nó:
Trong hầu hết các trường hợp, phần chân trang giống nhau trên toàn bộ trang web và cung cấp cho người dùng tất cả thông tin họ có thể cần.
Nhưng lợi ích SEO của việc sử dụng chân trang là gì? Vâng, phần chân trang có chứa các liên kết. Rất nhiều liên kết. Và trong SEO, điều này quan trọng vì nó cung cấp 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 của bạn đều được liên kết từ chân trang để các công cụ tìm kiếm có thể xem.
: Chia trang web thành các phần hoặc vùng chứa
Sản phẩm thẻ được thiết kế để xác định một phần trong mã HTML. Nó được sử dụng để chứa tất cả các loại phần tử HTML.
Để nói rõ hơn, thẻ là một phần tử khối nhằm mục đích làm nổi bật một đoạn tài liệu nhằm thay đổi giao diện nội dung của nó. Để bạn không phải mô tả kiểu của thẻ mỗi lần, hãy chọn kiểu từ biểu định kiểu bên ngoài, đồng thời thêm một tốt nghiệp lớp XNUMX or id thuộc tính cùng với tên bộ chọn.
Đây là mã HTML trông như thế nào:
.myDiv {
border: 3px outset black;
background-color: lightblue;
text-align: center;
}
Thẻ div
Tiêu đề trong thẻ div Văn bản trong thẻ div.
Văn bản bên ngoài thẻ div.Khi chạy mã thành công, bạn sẽ thấy nội dung bên trong phần tử div được tách biệt khỏi phần còn lại:
Sản phẩm thẻ cũng hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Từ quan điểm SEO, việc gói nội dung trang vào sẽ không phải là vấn đề trực tiếp, tuy nhiên, việc có nhiều thẻ không cần thiết trong tài liệu HTML của bạn có thể làm chậm trang, dẫn đến các vấn đề về UX.
: Xác định một phần độc lập trong trang web
Rõ ràng và đơn giản, thẻ được thiết kế để xác định một phần tài liệu HTML. Nhưng bên cạnh mục đích này, nó cũng có thể được sử dụng để đánh dấu các khối tin tức, chi tiết liên hệ, chương nội dung và tab hộp thoại, v.v.
Cần lưu ý rằng phần tử này thường có tiêu đề và bạn có thể đặt một phần tử phần này vào phần tử khác. Ngoài ra, việc sử dụng thẻ bên trong các phần tử khi cấu trúc tài liệu HTML. Điều này cho phép bạn thiết lập hệ thống phân cấp hợp lý và nâng cao khả năng truy cập cũng như khả năng đọc nội dung của bạn.
Đây là mã HTML trông như thế nào:
Tiêu đề phần Văn bản của phần
Khi bạn chạy nó, bạn sẽ nhận thấy rằng nó trông giống như or các phần tử, mặc dù có sự khác biệt rõ rệt về cấu trúc trang:
Như bạn có thể thấy trong ảnh chụp màn hình bên dưới, chúng tôi cũng sử dụng trên trang web của chúng tôi để gắn thẻ các phần hoặc phần khác nhau trên trang chủ của chúng tôi:
Về mặt SEO, phần tử tương tự như nhưng mặc dù có vẻ như không có gì xảy ra nhưng nó sẽ gửi tín hiệu mạnh mẽ hơn đến các công cụ tìm kiếm. Nó cho họ biết rằng một nhóm nội dung liên quan hợp lý được bao bọc trong thẻ, giống như phần chi tiết liên hệ.
: Xác định một phần nội dung độc lập
Sản phẩm thẻ bao bọc nội dung chính trên một trang. Nhưng, không giống như tag, bạn có thể cắt và dán từ nơi này sang nơi khác, giống như một trang khác và bài viết sẽ không mất đi ý nghĩa. Hơn nữa, điều này có thể được thực hiện trong vài phút. Thẻ thường được sử dụng cho các bài viết và bài đăng trên blog.
Đây là mã HTML trông như thế nào:
Google Chrome Google Chrome là trình duyệt web được phát triển bởi Google, phát hành năm 2008. Chrome là trình duyệt web phổ biến nhất thế giới hiện nay!
Và đây là giao diện trên trang web:
: Tạo một phần cho thanh bên hoặc nội dung liên quan
Sản phẩm thẻ được sử dụng để xác định một khối ở bên cạnh trang chứa các tiêu đề, liên kết đến nội dung khác, thẻ cũng như thông tin khác. Điều này thường được gọi là thanh bên, mặc dù nó có thể chứa chú thích cuối trang, quảng cáo hoặc nội dung khác.
Nội dung được đặt trong phần tử sang một bên không được liên quan trực tiếp đến nội dung của trang. Tương tự như thẻ, sang một bên chỉ tạo một thanh bên và không hiển thị bất kỳ khía cạnh thiết kế nào. Tuy nhiên, nó có thể được tạo kiểu thông qua CSS. Các thẻ hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Đây là mã HTML trông như thế nào đối với thanh bên trên trang chủ blog của chúng tôi:
Sản phẩm thẻ giúp công cụ tìm kiếm nhanh chóng có được thông tin trang có giá trị. Hơn nữa, thẻ này có thể được sử dụng để cung cấp thêm nội dung kèm theo trên một trang có liên quan đến toàn bộ trang chứ không phải một trong các bài đăng trên blog của trang đó. Điều này mang lại cho các công cụ tìm kiếm cơ hội phân tích môi trường xung quanh trang để hiểu rõ hơn về chủ đề tổng thể và cụ thể hơn, với mục tiêu cuối cùng là xếp hạng trang cho các truy vấn có liên quan.
hoặc : Xác định phương pháp nhúng nội dung bên ngoài
Bạn có thể đã nghe nói rằng hầu hết các chuyên gia SEO đều không hài lòng với các trang web sử dụng khung (phần lớn các trang web như vậy được tạo ra từ những năm 90). Những trang web như vậy khó tối ưu hóa, chúng được lập chỉ mục chậm hơn và không phải lúc nào cũng chính xác, cộng thêm những trang web này có rất nhiều vấn đề về khả năng sử dụng.
Sản phẩm thẻ xác định các thuộc tính của một khung trang web. Nó được đặt bên trong vùng chứa chia trang thành các khu vực khác nhau. Trọng tâm của nó là mỗi khu vực là một trang web riêng biệt.
Ngày nay, công nghệ này được coi là lỗi thời vì các khung truyền thống không còn được HTML5 hỗ trợ. Tuy nhiên, nhiều công nghệ hiện đại hỗ trợ , cho phép bạn chèn khung vào khối văn bản trên các trang.
Sản phẩm thẻ được sử dụng để chỉ định khung nội tuyến. Về bản chất, iframe cho phép bạn nhúng một trang web khác vào mã HTML của trang web của bạn như bản đồ tương tác cũng như video YouTube.
Vì vậy, thẻ cung cấp cho bạn khả năng nhúng nội dung từ một trang web khác vào trong trang web của riêng bạn. Vì các công cụ tìm kiếm hiểu rằng nội dung có khung nội tuyến đang được lấy từ một tài nguyên khác nên đây không phải là lựa chọn lý tưởng nhưng vẫn tốt hơn. .
: Đánh dấu một phần bằng các liên kết điều hướng
Sản phẩm thẻ được sử dụng để điều hướng trang web và chỉ ra các trang quan trọng nhất của trang web.
Vì chúng ta đã thảo luận về các liên kết điều hướng và cấu trúc nội bộ trong và của bài viết blog này, bạn có thể tự hỏi thẻ này khác nhau như thế nào. Chà, nếu trang của bạn chứa nhiều khối liên kết, bạn có thể sử dụng để đánh dấu các liên kết ưu tiên.
Sản phẩm thẻ thường chỉ được sử dụng cho menu điều hướng chính. Với sự trợ giúp của thẻ này, trình đọc màn hình có thể biết liệu họ có cần bỏ qua quá trình hiển thị ban đầu của nội dung hay không. Thêm vào đó, thẻ hỗ trợ Thuộc tính toàn cầu HTML và Thuộc tính sự kiện HTML.
Đây là mã HTML trông như thế nào:
Yếu tố điều hướng Phần tử điều hướng xác định một tập hợp các liên kết điều hướng: HTML | CSS | JavaScript | Python
Dưới đây, bạn có thể xem mã HTML trông như thế nào khi nó hoạt động:
Để tối ưu hóa công cụ tìm kiếm, các liên kết được gắn thẻ với gửi tín hiệu đến các bot công cụ tìm kiếm về các trang mà bạn cho là quan trọng nhất trên trang web của mình. Hơn nữa, nó cung cấp cho họ quyền truy cập nhanh chóng và dễ dàng vào các trang web này.
: Embeds or references JavaScript code
Mục đích chính của thẻ là để thêm tập lệnh, chủ yếu là JavaScript, sang tài liệu HTML. JavaScript được sử dụng để tạo bản đồ tương tác phản ứng với hành động của người dùng. Ví dụ: menu mở rộng khi nhấp chuột, lượt thích được thêm sau khi nhấp vào biểu tượng Trái tim, v.v.
Phần tử này có thể chứa liên kết đến tệp liên kết bên ngoài hoặc văn bản của nó bằng ngôn ngữ mã hóa cụ thể được gọi là câu lệnh kịch bản. Các tập lệnh có thể được đặt trong các tệp bên ngoài và được liên kết với bất kỳ tài liệu HTML nào.
Sản phẩm thẻ có thể được đặt trong phần đầu hoặc phần thân của tài liệu HTML không giới hạn số lần. Trong hầu hết các trường hợp, vị trí của tập lệnh không ảnh hưởng đến hiệu suất của tập lệnh theo bất kỳ cách nào. Tuy nhiên, việc bao gồm các gắn thẻ có liên kết đến tệp tập lệnh ngay trước khi đóng gắn thẻ và sử dụng thuộc tính trì hoãn. Cách tiếp cận này cho phép trình duyệt tải và hiển thị các thành phần ban đầu của trang trước khi thực thi tập lệnh, giúp hiển thị trang nhanh hơn và cải thiện trải nghiệm người dùng.
Đây là một ví dụ về mã HTML trông như thế nào:
Trước khi chúng ta tìm hiểu những lợi ích SEO của việc sử dụng thẻ, đây là bảng sẽ giúp bạn hiểu cách bạn có thể thực thi các tập lệnh bên ngoài trên trang của mình và những thuộc tính nào có thể trợ giúp:
- Không đồng bộ: Chỉ định rằng tập lệnh sẽ được thực thi khi trang đang phân tích cú pháp
- Hoãn lại: Chỉ định rằng tập lệnh sẽ được thực thi sau khi trang được phân tích cú pháp
- Ngôn ngữ: Chỉ định ngôn ngữ mã hóa mà tập lệnh được viết
- Sr.: Chỉ định địa chỉ URL của tệp tập lệnh bên ngoài sẽ được nhập vào tài liệu hiện tại
- Kiểu: Chỉ định loại nội dung của tag
Lưu ý rằng nếu không có bất kỳ thuộc tính async hoặc defer nào trong tập lệnh, nó sẽ được tìm nạp và thực thi không chậm trễ, ngay cả trước khi trình duyệt phân tích cú pháp tài nguyên.
Cũng cần nhớ rằng các công cụ tìm kiếm thường gặp vấn đề với JavaScript. Nếu nội dung nhất định chỉ xuất hiện trên trang web sau khi người dùng thực hiện một hành động thì các công cụ tìm kiếm thường sẽ không phát hiện và lập chỉ mục nội dung đó.
Cho đến nay, chỉ có Google mới biết cách xử lý JavaScript, vì vậy nếu bạn muốn tất cả các công cụ tìm kiếm nhìn thấy nội dung JavaScript của mình, chúng tôi khuyên bạn nên sử dụng kết xuất động hoặc kết xuất phía máy chủ.
: Highlight and display programming code
Sản phẩm Thẻ trong HTML được sử dụng để bao bọc và biểu thị một phần văn bản thể hiện mã máy tính hoặc hướng dẫn lập trình. Nó chủ yếu được sử dụng để hiển thị các đoạn mã hoặc làm nổi bật nội dung liên quan đến lập trình trên trang web.
Sản phẩm phần tử hiển thị văn bản kèm theo ở phông chữ đơn cách, giữ nguyên định dạng và thụt lề của mã. Điều này giúp phân biệt mã với văn bản thông thường và duy trì khả năng đọc của nó.
Đây là giao diện của nó trong mã HTML:
Đây là một công việc button trong HTML.
Sản phẩm thẻ cho phép nhà phát triển và người đọc dễ dàng xác định và hiểu các đoạn mã trong nội dung. Bằng cách sử dụng thẻ, bạn có thể trình bày các đoạn mã rõ ràng hơn và làm cho chúng nổi bật so với văn bản xung quanh.
tag example" class="wp-image-48442" srcset="https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-25.png 2048w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-105.png 450w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-106.png 924w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-107.png 768w, https://seranking.com/blog/wp-content/uploads/2023/06/code-tag-1536x828.png 1536w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">Additionally, the <code> tag can be combined with other elements, such as <pre> for preformatted text or <span> for additional styling, to further enhance the appearance and presentation of the code. This combination provides flexibility in applying specific styles or formatting to the code content.
From an SEO perspective, the <code> tag can also be advantageous. Search engines often recognize and treat the content within <code> tags as code, granting it special consideration in terms of indexing and relevance. This can improve the visibility of code-related content in search engine results and attract developers or individuals seeking programming information.
How to check if your tags are in order
To avoid making mistakes in your HTML tags that may affect the quality of your site’s promotion, it is necessary to run a full analysis of the site. You can easily audit your entire website with the help of SE Ranking Website Audit.
A detailed analysis of every single one of your site’s pages will show those with the noindex, hreflang, canonical and alternate tags. Moreover, the tool checks the headers and meta tags for uniqueness and compliance with length restrictions, locates all duplicates and images with empty alt tags, analyzes h1-h6 tags and so much more. Besides errors and comments, the report also includes suggestions on how to solve them. Additionally, you can manually configure how often audits should be performed based on your needs and how often you make changes to the website.
In this blog post, we only covered the tags and attributes that SEO pros are most often faced with. Having a good understanding of the importance of each of these elements, their structure and role on the page, you can identify tag usage errors, correctly develop tasks for programmers and content writers, and, perhaps even do some coding without any help.
You don’t necessarily need to love HTML tags, but knowing which ones are important for site optimization is a definite must. If you want search engines to rank your pages, help them by providing useful and relevant information in the HTML code.
33753 views
- SEO Powered Content & PR Distribution. Get Amplified Today.
- PlatoData.Network Vertical Generative Ai. Empower Yourself. Access Here.
- PlatoAiStream. Web3 Intelligence. Knowledge Amplified. Access Here.
- PlatoESG. Automotive / EVs, Carbon, CleanTech, Energy, Environment, Solar, Waste Management. Access Here.
- BlockOffsets. Modernizing Environmental Offset Ownership. Access Here.
- Source: https://seranking.com/blog/html-tags-in-seo/
Latest Intelligence
