9 Thẻ HTML (& 11 Thuộc tính) Bạn Phải biết để SEO

MozSeo · 29/11/17

HTML là nền tảng của một trang web. Thông qua việc sử dụng các phần tử HTML, các chuyên gia SEO có thể dễ dàng hơn trong việc truyền đạt thông tin về trang cho người dùng, cũng như bot tìm kiếm.

Đây được xem là một trong những phần cơ bản nhất của SEO kỹ thuật. Bởi nó giúp làm rõ tầm quan trọng, bản chất và thứ tự của nội dung trên một trang, cũng như mối liên hệ của nó với các trang Web khác. Chính vì vậy, trong bài viết dưới này, chúng ta sẽ cùng nhau đi khám phá các thẻ và thuộc tính HTML quan trọng đối với SEOer.

Sự khác biệt giữa thẻ & thuộc tính

Để hiểu sự khác biệt giữa các thẻ và thuộc tính, chúng ta cần đảm bảo rằng chúng ta đã hiểu đúng thuật ngữ của mình.

Định dạng của phần tử HTML sẽ gồm ba phần:

- Thẻ mở đầu.
- Nội dung cụ thể cho thẻ đó.
- Thẻ đóng.

Ví dụ:

<h1> Chào mừng bạn đến với trang của tôi về mèo con </h1>

“<h1>” mở thẻ.

“Chào mừng đến với trang của tôi về mèo con” là nội dung của thẻ.

“</h1>” đóng thẻ.

Phần tử này chính là tiêu đề và sẽ được sử dụng làm tiêu đề hiển thị trên Websites, để giới thiệu nội dung về mèo con.

Thẻ
Thẻ phải có phần tử <X> mở và đóng </X> để thẻ hoạt động.

Ngoài ra còn có các phần tử trống, như <br>, không có bất kỳ nội dung hoặc thẻ kết thúc nào cho chúng.

Thuộc tính

Các thuộc tính được thêm vào các phần tử để sửa đổi chúng. Chúng nằm trong phần tử, chẳng hạn như:
Mã:
<link rel = "canonical" href = "https://www.example.com" />
3 thẻ HTML cơ bản

Để tạo một Websites hữu ích, bạn cần có một số thẻ chính.

<! DOCTYPE html>

Thẻ <! DOCTYPE html> là thẻ đầu tiên trên trang web. Về cơ bản, nó giới thiệu trang là một trang web.

<head>
Thẻ <head> giới thiệu phần đầu tiên của trang. Đây là nơi chứa thông tin về trang, không được hiển thị trên trang. Các SEOer cần phải biết về <head> vì đây là nơi chứa một số thẻ quan trọng cho SEO.

<body>

Thẻ body chứa thông tin trên trang mà khách truy cập của bạn sẽ nhìn thấy. Đây là nơi chứa nội dung, hình ảnh và video của bạn.

<meta>

Thẻ <meta> nằm trong <head> của trang.

Nó có thể chứa các thuộc tính mô tả thông tin về Websites mà không thực sự được nhìn thấy trong nội dung của trang.

Thẻ meta này thường được gọi là “siêu dữ liệu” vì các thuộc tính được sử dụng với nó để kiểm soát những thứ như “mô tả meta” và “từ khóa meta” không còn được sử dụng nữa.

Thuộc tính tên

Thuộc tính name được sử dụng với thẻ <meta>. Về cơ bản, nó là một cách chỉ định cho bất kỳ bot nào có thể truy cập trang, nếu thông tin sau có áp dụng cho chúng hay không.

Ví dụ: bao gồm <meta name = ”robots” content = ”noindex” /> có nghĩa là tất cả các bot phải chú ý đến lệnh “noindex”.

Bạn sẽ thường nghe thấy điều này được gọi là “thẻ meta rô bốt”. Nếu những thứ sau được sử dụng <meta name = ”googlebot” content = ”noindex” /> thì có nghĩa là chỉ bot của Google mới cần lưu ý đến lệnh “noindex”.

Đây là một cách tốt để đưa ra lệnh cho một số chương trình tìm kiếm không cần thiết cho chính Websites của bạn.

Thuộc tính Noindex

Thuộc tính "noindex" là thuộc tính thường được sử dụng trong SEO. Bạn sẽ thường nghe nó được gọi là “thẻ noindex” nhưng chính xác hơn nó là một thuộc tính của thẻ <meta>.

Nó được xây dựng:
Mã:
<meta name = "robots" content = "noindex" />
Đoạn mã này cho phép nhà xuất bản xác định nội dung nào có thể được đưa vào lập chỉ mục của công cụ tìm kiếm. Bằng cách thêm thuộc tính “noindex”, về cơ bản bạn đang thông báo cho một công cụ tìm kiếm rằng: nó có thể không sử dụng trang này trong chỉ mục của nó.

Ví dụ: điều này hữu ích nếu có nội dung nhạy cảm mà bạn muốn không có sẵn từ tìm kiếm không phải trả tiền.

Ví dụ: nếu bạn có các khu vực trên trang web của mình mà chỉ những thành viên trả phí mới có thể truy cập được, thì việc cho phép nội dung này vào các chỉ số tìm kiếm có thể làm cho nó có thể truy cập được mà không cần đăng nhập.

Chỉ thị "noindex" cần được đọc để tuân theo. Tức là, các bot tìm kiếm cần có thể truy cập vào trang để đọc mã HTML có chứa chỉ thị. Do đó, bạn hãy cẩn thận để không chặn rô bốt truy cập vào trang trong tệp robots.txt.

Thuộc tính mô tả

Thuộc tính mô tả, còn được gọi là “mô tả meta”, được sử dụng với thẻ <meta>.
Nội dung của thẻ này được sử dụng trong SERPs, bên dưới nội dung của thẻ <title>.

Nó cho phép nhà xuất bản tóm tắt nội dung trên trang theo cách giúp người tìm kiếm có thể xác định xem trang có đáp ứng nhu cầu của họ hay không. Điều này không ảnh hưởng đến thứ hạng của một trang, nhưng nó lại có thể giúp khuyến khích sự gia tăng các nhấp chuột qua trang từ SERPs.

Điều quan trọng cần nhận ra là trong nhiều trường hợp, Google sẽ bỏ qua nội dung của thuộc tính mô tả, để ưu tiên sử dụng mô tả của chính nó trong SERPs. Để có nhiều nhấp chuột hơn, thu hút được nhiều người dùng hơn, bạn cần phải tối ưu thẻ mô tả.

<title>

Thẻ tiêu đề là loại thẻ vô cùng quen thuộc không chỉ với các SEOer mà còn cả với các chuyên viên về nội dung. Nó còn có tên gọi khác là “meta title”, đó là thẻ bạn sử dụng để xác định tiêu đề của trang. Nó nằm trong <head> của trang web.

Do đó, nó không hiển thị cho người dùng khi ở trên trang web. Tuy nhiên, nó xuất hiện trên thanh trình duyệt, trong SERPs và cho phép bạn biểu thị mức độ liên quan của một trang với truy vấn của người tìm kiếm - cả với bot tìm kiếm và người dùng. Nó là một yếu tố vô cùng quan trọng trong SEO, có gây ảnh hưởng đến chính vị trí thứ hạng của Websites.

<h1> đến <h6>

Các thẻ tiêu đề được sử dụng để chỉ ra những phần nào của nội dung HTML nên được định dạng là tiêu đề.

Khi tạo một trang web, các nhà phát triển sẽ đảm bảo các kiểu được liên kết với từng loại thẻ tiêu đề. Điều này có nghĩa là các từ được bọc trong thẻ <h1> sẽ trông khác với các từ được bọc trong thẻ <h2>.

Điều này giúp người dùng xác định được đâu là tiêu đề và phụ đề. Các thẻ tiêu đề cũng giúp các bot tìm kiếm xác định được cấu trúc của nội dung trên một trang.

Thẻ liên kết & thuộc tính Href

Là chuyên gia SEO, chúng tôi dành nhiều thời gian để theo đuổi các liên kết. Chúng tôi nhận ra rằng, mỗi liên kết sẽ mang những giá trị khác nhau.

Một siêu liên kết chuẩn về cơ bản là một thẻ <a>. Định dạng của nó như sau:
Mã:
<a href="www.example.com"> anchor text of link ở đây </a>.
Thẻ <a> cho biết đó là một liên kết. Thuộc tính href = chỉ ra điểm đến của liên kết (tức là nó đang liên kết đến trang nào).

Văn bản nằm giữa thẻ <a> mở và thẻ đóng </a> là văn bản liên kết. Đây là văn bản mà người dùng sẽ thấy trên trang và có thể nhấp được. Nó sẽ xuất hiện trong <body> của trang.

Thẻ <link> được sử dụng để liên kết tài nguyên này với tài nguyên khác và xuất hiện trong <head> của trang. Các liên kết này không phải là siêu liên kết, chúng không thể nhấp được. Chúng cho chúng ta thấy mối quan hệ giữa các tài liệu ở trên websites.

Thuộc tính Rel = ”nofollow”

Thuộc tính rel = ”nofollow” cho bot biết rằng URL trong thuộc tính href không phải là URL mà chúng có thể theo sau.

Việc sử dụng thuộc tính rel = ”nofollow” sẽ không ảnh hưởng đến khả năng người dùng nhấp vào liên kết và được đưa đến trang khác. Nó chỉ ảnh hưởng đến bot của các công cụ tìm kiếm.

Điều này được sử dụng trong SEO để giúp ngăn chặn các công cụ tìm kiếm truy cập vào một trang hoặc mô tả bất kỳ của một trang liên kết với một trang khác. Điều này được cho là làm cho một liên kết trở nên vô dụng theo quan điểm xây dựng liên kết SEO truyền thống vì vốn liên kết sẽ không đi qua liên kết.

Tuy nhiên, hiện nay có những lập luận cho rằng nó vẫn là một liên kết có lợi nếu nó khiến khách truy cập vào liên kết đó.

Thuộc tính "nofollow" còn có thể được các nhà xuất bản sử dụng để giúp các công cụ tìm kiếm biết được khi nào một trang được liên kết đến là kết quả của việc thanh toán, chẳng hạn như một quảng cáo.

Điều này có thể giúp ngăn chặn các vấn đề với các hình phạt liên kết vì nhà xuất bản thừa nhận rằng liên kết là kết quả của một thỏa thuận hợp pháp chứ không phải là một nỗ lực để thao túng bảng xếp hạng.

Thuộc tính rel = ”nofollow” có thể được sử dụng trên cơ sở liên kết riêng lẻ như sau:

<a href=www.example.com rel="nofollow"> văn bản liên kết của liên kết ở đây </a>

Hoặc nó có thể được sử dụng để hiển thị tất cả các liên kết trên một trang dưới dạng “nofollow” thông qua việc sử dụng nó trong <head> như thuộc tính “noindex” được sử dụng:
Mã:
<meta name = "robots" content = "nofollow" />
Cách Google sử dụng thuộc tính rel = ”nofollow”

Vào năm 2019, Google đã thông báo rằng sẽ có một số thay đổi đối với cách sử dụng thuộc tính “nofollow”. Điều này bao gồm việc thông báo cho chúng tôi một số thuộc tính bổ sung có thể được sử dụng thay cho “nofollow”, để thể hiện tốt hơn mối quan hệ của liên kết với trang mục tiêu của nó.

Các thuộc tính mới này là rel = ”ugc” và rel = ”sponsored.”

Chúng sẽ được sử dụng để giúp Google hiểu khi nào nhà xuất bản muốn trang mục tiêu được giảm giá cho mục đích tín hiệu xếp hạng.

Thuộc tính rel = ”sponsored.” là để xác định khi nào một liên kết là kết quả của một giao dịch trả phí, chẳng hạn như quảng cáo hoặc tài trợ. Thuộc tính rel = ”ugc” là để xác định khi nào một liên kết đã được thêm vào thông qua nội dung do người dùng tạo, chẳng hạn như diễn đàn.

Điều này trái ngược hoàn toàn với trước kia, nếu trước kia thuộc tính “nofollow” sẽ dẫn đến việc Googlebot bỏ qua liên kết được chỉ định, thì bây giờ nó sẽ đưa gợi ý đó dưới dạng lời khuyên nhưng vẫn có thể coi nó như thể “nofollow” không có mặt.

Thuộc tính Hreflang

Mục đích của thuộc tính hreflang là giúp các nhà xuất bản có trang web hiển thị cùng một nội dung bằng nhiều ngôn ngữ khác nhau. Nó giúp người dùng có thể dễ dàng đọc nội dung bằng ngôn ngữ yêu thích của họ.

Thuộc tính hreflang được sử dụng với thẻ <link>. Thuộc tính này chỉ định ngôn ngữ của nội dung trên URL được liên kết đến.

Nó được sử dụng trong <head> của trang và được định dạng như sau:
Mã:
<link rel = "alternate" href = "https://example.com" hreflang = "en-gb" />
Nó được chia thành nhiều phần:
- Rel = ”alternate” gợi ý trang có một trang thay thế có liên quan đến nó.
- Thuộc tính href = biểu thị URL nào đang được liên kết đến.
- Mã ngôn ngữ là một ký hiệu gồm hai chữ cái để cho các bot tìm kiếm biết trang được liên kết được viết bằng ngôn ngữ nào. Hai chữ cái được lấy từ danh sách chuẩn hóa được gọi là mã ISO 639-1

Thuộc tính hreflang cũng có thể được sử dụng trong tiêu đề HTTP cho các tài liệu không có trong HTML (như PDF) hoặc trong sơ đồ trang XML của trang web.

Thuộc tính hợp quy

Thuộc tính rel = ”canonical” của thẻ liên kết cho phép các chuyên gia SEO chỉ định trang nào khác trên trang web hoặc một tên miền khác sẽ được tính là trang chuẩn. Một trang là trang chính tắc về cơ bản có nghĩa là nó là trang chính, trong đó những trang khác có thể là bản sao

Đối với mục đích của công cụ tìm kiếm, đây là dấu hiệu của trang mà nhà xuất bản muốn được coi là trang chính cần được xếp hạng, các bản sao không nên được xếp hạng.

Thuộc tính canonical trông giống như sau:
Mã:
<link rel = "canonical" href = "https://www.example.com/" />
Mã phải nằm ở <head> của trang. Trang web được nêu sau “href =” phải là trang mà bạn muốn các bot tìm kiếm coi là trang chuẩn.

Thẻ này hữu ích trong các trường hợp mà hai hoặc nhiều trang có thể có nội dung giống hệt nhau hoặc gần giống hệt nhau.

Sử dụng thuộc tính hợp quy

Trang web có thể được thiết lập theo cách hữu ích cho người dùng, chẳng hạn như trang danh sách sản phẩm trên trang thương mại điện tử.

Ví dụ: trang danh mục chính của một bộ sản phẩm, chẳng hạn như “giày”, có thể có bản sao, tiêu đề và tiêu đề trang được viết về “giày”.

Nếu người dùng nhấp vào bộ lọc để chỉ hiển thị đôi giày màu nâu, cỡ 8, thì URL có thể thay đổi nhưng bản sao, tiêu đề và tiêu đề trang có thể vẫn giống như trang "giày".

Điều này sẽ dẫn đến hai trang giống hệt nhau ngoài danh sách các sản phẩm được hiển thị. Trong trường hợp này, chủ sở hữu trang web có thể muốn đặt một thẻ chuẩn trên trang “giày màu nâu, cỡ 8” trỏ đến trang “giày”.

Điều này sẽ giúp các công cụ tìm kiếm hiểu rằng trang "giày màu nâu, cỡ 8" không cần được xếp hạng, trong khi trang "giày" là trang quan trọng hơn trong hai trang và nên được xếp hạng.

Vấn đề với thuộc tính hợp quy

Điều quan trọng là phải nhận ra rằng các công cụ tìm kiếm chỉ sử dụng thuộc tính canonical làm hướng dẫn, nó không phải là thứ phải tuân theo. Có nhiều trường hợp trong đó thuộc tính chuẩn bị bỏ qua và một trang khác được chọn làm trang chuẩn của tập hợp.

Hình ảnh

Thẻ <img> được sử dụng để nhúng hình ảnh vào một trang HTML.

Thẻ hình ảnh không dùng để chèn hình ảnh vào trang, nhưng nhờ việc liên kết đến thẻ giúp cho hình ảnh được hiển thị trên trang. Về cơ bản, nó tạo một vùng chứa cho một hình ảnh được lưu trữ ở nơi khác.

Định dạng của thẻ <img> như sau:

<img src = "imagename.jpg" alt = "đây là mô tả của hình ảnh">

Thẻ này chứa hai thuộc tính, một thuộc tính cần thiết để thẻ hoạt động, một thuộc tính có thể để trống.

Thuộc tính Src

Thuộc tính src = được sử dụng để tham chiếu đến vị trí của hình ảnh đang được hiển thị trên trang.

Nếu hình ảnh nằm trên cùng một miền với vùng chứa mà nó sẽ xuất hiện, thì một URL tương đối (chỉ là phần cuối của URL, không phải miền) có thể được sử dụng.
Nếu hình ảnh được lấy từ một trang web khác, thì URL tuyệt đối (toàn bộ) cần được sử dụng. Mặc dù thuộc tính này không phục vụ bất kỳ mục đích SEO nào, nhưng nó cần thiết để thẻ hình ảnh có thể hoạt động.

Thuộc tính thay thế

Ví dụ về thẻ hình ảnh ở trên cũng chứa thuộc tính thứ hai chính là thuộc tính alt =. Thuộc tính này được sử dụng để chỉ định văn bản thay thế nào sẽ được hiển thị, nếu không thể hiển thị hình ảnh.

Thuộc tính alt = phải có trong thẻ <img>, nhưng có thể để trống nếu như bạn không muốn có văn bản thay thế. Công cụ tìm kiếm không thể xác định chính xác hình ảnh là gì, nhưng thông qua thuộc tính thay thế này, nó có thể hiểu rõ hơn về nội dung của hình ảnh, và có thể xếp hạng cho ảnh của chính bạn.

Sử dụng thuộc tính thay thế này cũng giúp củng cố mức độ liên quan của hình ảnh với chủ đề của trang. Điều này có thể hỗ trợ cho các các công cụ tìm kiếm xác định mức độ liên quan của trang đó đối với các truy vấn tìm kiếm.

Tuy nhiên, điều quan trọng cần nhớ là đây không phải là lý do chính cho thuộc tính alt =. Văn bản này được sử dụng bởi trình đọc màn hình và công nghệ hỗ trợ để cho phép những người sử dụng công nghệ này hiểu được nội dung của hình ảnh. Chính vì vậy, thuộc tính alt = nên được xem xét đầu tiên và quan trọng nhất để làm cho các trang web có thể truy cập được đối với những người sử dụng công nghệ này.

Phần kết luận

Bài viết này là phần giới thiệu về các thẻ và thuộc tính HTML cốt lõi mà bạn có thể dùng trong SEO. Tuy nhiên, có rất nhiều thứ khác khiến cho một trang web hoạt động, có thể thu thập thông tin và lập chỉ mục.

Bài viết được dịch tại SEJ và đăng tải duy nhất lên SEOMxh.com
NGUỒN: https://www.searchenginejournal.com/html-tags-attributes-seo/389503/

moidichvu · 28/12/20

Còn thuộc tính rel=”noopener” và rel=”noreferrer” thường có trên wordpress giúp hạn chế tấn website nữa thì cũng chắc đủ bộ rồi nhỉ!

Đức Huy · 31/12/20

Cái này sẽ khá hữu ích cho những bạn mới chập chững bắt tay làm SEO, sẽ hiểu được mấy cái khái niệm dễ hơn là chỉ biết đến cái tên như tiêu đề, mô tả, bla bla

hongkhanh · 5/1/21

Mấy cái này là code đơn giản, tuy nhiên một số thẻ thì cần phải nắm rõ cách sử dụng như canonical, thẻ h, meta, title.

dinhdunghs · 18/2/21

Có bác nào chuyên về thiết kế web ko ak. Mình cần làm 1 web về mảng bds, mong gặp dc bác đã có kinh nghiệm tk web bds

vinhmtz · 18/3/21

Bài viết hay cho mọi người làm seo, cảm ơn nek.....
--- Post updated ---
Ngày trước và hiện tại tới bây giờ, mình vẫn đang khó khăn về mấy vụ này ghê.

vidinhtuan · 31/3/21

Seo nhưng ko quan tâm cho lắm vì web wp nó có sẵn plugin seo nên toàn tối uue theo nó

itseo1994 · 1/4/21

Cám ơn bạn đã chia sẻ, nhưng dài quá, tóm gọn thông tin lại sẽ có nhiều người đọc hơn

thanh95 · 5/4/21

Người làm seo ít nhất phải biết mấy thứ này, mới có thể tối ưu được web

kientrucnhadep · 5/4/21

Đúng cái mình cần, thiên về kỹ thuật, bấy lâu nay vẫn cảm thấy bản thân ko mạnh về HTML gây khó khăn trong làm Seo vô cùng

Đăng nhập

9 Thẻ HTML (& 11 Thuộc tính) Bạn Phải biết để SEO

Các file đính kèm:

ok222.jpg

Chủ đề tương tự

moidichvu Moderator

Đức Huy Member

hongkhanh Thiết kế Web: NhaTrangDev.vn

dinhdunghs New Member

vinhmtz New Member

vidinhtuan Member

itseo1994 Member

thanh95 Member

kientrucnhadep Member