Chúng ta đã quen với thực tế là hầu hết các thao tác với mã code HTML đều do các lập trình viên thực hiện. Đó là điều chúng ta nên làm. Nhưng điều này đôi khi cũng có ích nhiều cho người làm SEO cơ bản ở mức tối thiểu, để thiết lập chính xác các thông số kỹ thuật và sâu hơn là để hiểu các thẻ HTML ảnh hưởng đến SEO như thế nào

Những thẻ HTML và thuộc tính nào là quan trọng đối với SEO? Tối ưu thẻ một cách chính xác và tại sao tối hưu thẻ HTML cho website là cần thiết? Kdigimind đã nghiên cứu các thẻ quan trọng nhất đối với SEO và biên soạn ra 5 thẻ HTML quan trọng nhất để bạn có thể cập nhật kiến ​​thức của mình hoặc tìm hiểu những điều cơ bản về HTML từ đầu. 

1. Thẻ HTML là gì?

Thẻ HTML là ngôn ngữ đánh dấu tạo nền tảng cho hầu hết các trang web. Nó được tạo ra với mục đích thiết kế, tạo lập website từ các nguồn có sẵn trên mạng lưới toàn cầu, trong truyền thông nó được cho là một trong những phần cơ bản nhất của kỹ thuật SEO.

Tìm hiểu về thẻ HTML là gì?

Tìm hiểu về thẻ HTML là gì?

Sử dụng thẻ HTML, người làm SEO có thể truyền đạt thông tin về một trang cho người dùng và  bot tìm kiếm. Cấu trúc của các thẻ HTML có thể giúp làm rõ tầm quan trọng, bản chất và thứ tự của nội dung trên trang, cũng như mối quan hệ của nó với các trang web khác. Ở đây tôi giải thích các thẻ và thuộc tính HTML chính cần thiết cho SEO, chúng được sử dụng để làm gì và cách viết chúng. 

Ngoài ra, bạn cũng cần chú ý rằng các thẻ trong html không phải là ngôn ngữ lập trình. Điều này có nghĩa nó không tạo ra chức năng “động” như khi viết một đoạn code cho web. Chức năng chính của thẻ tương tự như Microsoft Word là dùng cho bố cục và định dạng trang web.

 2.Sự khác biệt giữa thẻ và thuộc tính

Để hiểu sự khác biệt giữa thẻ và thuộc tính, cần đảm bảo rằng chúng ta đang sử dụng thuật ngữ chính xác. Nhiều người sử dụng các từ “Thẻ” và “thuộc tính” thay thế cho nhau, nhưng hãy xác định chúng thật chính xác. 

Các phần tử HTML sau được định dạng thành ba phần:

  • Thẻ mở.
  • Nội dung cụ thể cho thẻ này.
  • Thẻ kết thúc.

Ví dụ: <h1> Chào mừng đến với Pharma Center </h1>

  • Thẻ mở là “<h1>”.
  • Nhãn có nội dung “Chào mừng đến với Pharma Center”.
  • Thẻ đóng “</h1>”.

Phần tử này là tiêu đề 1 và sẽ được sử dụng làm tiêu đề hiển thị trên các trang web để giới thiệu nội dung về Pharma Center.

Thuộc tính

Thuộc tính là phần định hướng cho các phần tử có trong cặp thẻ đóng mở HTML. 

Thêm thuộc tính vào các phần tử để sửa đổi chúng. Chúng nằm bên trong các yếu tố như:

<link rel=”canonical” href=”https://www.example.com” />

Bên trên ta có thuộc tính “ rel=”canonical” và thộc tính href=” https://www.example.com” đều nằm trong thẻ <Link> 

Một số thuộc tính khác thường gặp như : 

  • Thuộc tính Name : <meta name = ” robots” content = “noindex” /> có nghĩa là tất cả rô bốt phải chú ý đến lệnh “noindex”.
  • Thuộc tính noindex : Thuộc tính “noindex” là một thuộc tính thường được sử dụng trong SEO.Mã này cho phép người xuất bản xác định nội dung nào có thể được đưa vào chỉ mục của công cụ tìm kiếm.
  • 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à nó có thể theo dõi .
  • Thuộc tính Hreflang : Mục đích của thuộc tính hreflang là giúp trang web của nhà xuất bản hiển thị cùng một nội dung bằng nhiều ngôn ngữ.
  • Thuộc tính Src: Thuộc tính src = được sử dụng để chỉ vị trí của hình ảnh được hiển thị trên trang.
  • 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ị khi không thể hiển thị hình ảnh. Thuộc tính alt = phải có trong thẻ <img>, nhưng nó có thể được để trống nếu văn bản thay thế không bắt buộc.

2. Tầm quan trọng của html trong SEO

Thẻ html sẽ giúp bạn trình bày website theo ý muốn của mình hoặc tạo sự khác biệt với các web khác. Các thẻ trong html trình duyệt trên web hiểu và hiển thị chính xác các chỉ mục theo yêu cầu của người quản trị.

HTML giữ vai trò quan trọng trong việc thiết kế website của người làm seo

HTML giữ vai trò quan trọng trong việc thiết kế website của người làm seo

Đặc biệt, các công cụ tìm kiếm như Google, Bing đều dựa vào thẻ html để truy vấn trang web. Đồng thời, những công cụ này cũng thông qua thẻ để đánh giá thứ hạng website. Thẻ html còn có tác dụng giúp các googlebot kiểm tra được trang web của bạn có đang mắc lỗi hay không.

Do đó, việc tối ưu thẻ trong html là điều cực kỳ quan trọng mà bất kỳ kỹ thuật viên SEO nào cũng cần phải làm. Điều này sẽ giúp trang web có giao diện chuẩn SEO và trở nên tương thích với mọi công cụ tìm kiếm. Sẽ có những thẻ html cơ bản nhưng yêu cầu SEOer phải sử dụng đúng cách để mang lại hiệu quả cao cho website.

3. Tổng hợp các thẻ HTML thông dụng cần tối ưu chuẩn SEO

Bên cách việc hiểu về khái niệm và tầm quan trọng của thẻ html đối với website. Người làm SEO web còn phải biết được tổng hợp các thẻ trong html để thiết kế trang web. Dưới đây là một số loại thẻ thông dụng người làm seo nên nắm vững khi xây dựng website: 

3 Thẻ HTML cơ bản

Để tạo các trang web hữu ích, cần phải có một số thẻ chính.

Thẻ <! DOCTYPE html>

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

Thẻ <head>

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

Thẻ <body>

Thẻ body chứa thông tin mà khách truy cập sẽ thấy trên trang.Đây là nơi chuyển văn bản, hình ảnh và video. Phần thân cũng sẽ giữ một số thẻ HTML khác mà chúng ta sẽ thảo luận sau.

3.1. Thẻ title (tiêu đề)

Thẻ html Tag <title> phần tử giúp bạn xác định được tiêu đề của website. Thẻ tiêu đề thường được hiển thị ở phần kết quả của các công cụ tìm kiếm như Google, Bing…. Thẻ tiêu đề website quan trọng ở chỗ nó giúp mô tả ngắn gọn và chính xác nội dung trang đề cập đến.

 Thẻ title giúp xác định tiêu đề website

Thẻ title giúp xác định tiêu đề website

Lấy ví dụ việc bạn đến nhà sách và chọn mua một quyển sách giữa hàng ngàn cuốn sách. Trong đó, cuốn nào có tiêu đề hấp dẫn và chứa từ khóa bạn quan tâm thì bạn sẽ mua nó. Điều này cũng tương tự như việc đặt thẻ tiêu đề hay sẽ giúp website của bạn thu hút nhiều người dùng hơn.

Không ngoa khi nói rằng thẻ tiêu đề có sức ảnh hưởng cực kỳ lớn đến chiến dịch SEO website. Nó có tác dụng thu hút người dùng mạng click vào trang web của bạn và ở lại đó. Vì vậy, muốn tối ưu thẻ Tag Title bạn nên làm theo những điều sau: 

  • Đặt tiêu đề bài viết trên web đúng trọng tâm ngắn gọn và súc tích
  • Thêm từ khóa quan trọng liên quan đến chủ đề của bài viết vào tiêu đề
  • Tiêu đề bài viết nên đặt mức tối đa ở 60 ký tự (tính cả khoảng trắng giữa các ký tự)
  • Không nên đặt tiêu đề quá ngắn vì sẽ khiến người đọc khó hiểu chủ đề của web
  • Nên đưa từ khóa quan trọng lên phía trước tiêu đề bài viết nếu thấy hợp lý

3.2. Thẻ meta description(mô tả)

Nếu thẻ tiêu đề thể hiện ngắn gọn nội dung bài viết thì thẻ meta description lại đi vào chi tiết hơn. Tuy nhiên, khi làm thẻ mô tả SEOer vẫn cần tuân thủ theo nguyên tắc súc tích và đi đúng trọng tâm. Mặc dù thẻ meta có mức độ quan trọng kém hơn thẻ tiêu đề nhưng nó vẫn không thể thiếu đối với web.

Thẻ Meta Description miêu tả ngắn gọn nội dung bài viết

Thẻ Meta Description miêu tả ngắn gọn nội dung bài viết

Sử dụng thẻ mô tả sẽ giúp Search Engine hiểu rõ hơn nội dung bài viết trên website muốn nói đến điều gì. Ngoài ra, thẻ này còn thể hiện phần Description của trang web khi hiển thị trên google. Vì thế, khi làm thẻ meta cho web bạn phải chú trọng về cả nội dung lẫn những nguyên tắc sau:

  • Câu từ dùng cho thẻ meta cần súc tích, đi vào đúng trọng tâm và thể hiện chi tiết hơn tiêu đề bài viết
  • Nên thêm keyword chính vào mục mô tả một cách tự nhiên, khéo léo để tăng lợi thế khi SEO web
  • Ưu tiên đưa từ khóa quan trọng lên phía trước của Description nếu thấy hợp lý
  • Số ký tự tối đa dùng cho thẻ meta nên dừng ở mức 150 bao gồm cả khoảng trắng

Các thẻ trong html thì Tag <a> là một dạng liên kết từ trang này đến trang khác. Loại thẻ <a> thường thấy nhất trên website chính là internal link (liên kết nội bộ) và backlink. Sử dụng Tag <a> sẽ giúp tăng cường độ uy tín cho trang web của bạn với googlebot và đẩy thứ hạng web lên cao.

Khi đặt thẻ <a> giữa các trang trên cùng một website, SEOer phải chú ý đến tính hợp lý của nó. Dưới đây là các thuộc tính quan trọng có trong Tag <a>:

  • href: có tác dụng chứa đường dẫn (hay url) của trang mà nó hướng đến. Đường dẫn trong thẻ có thể ở dạng tuyệt đối hoặc tương đối. Tuy nhiên bạn nên sử dụng dạng tuyệt đối để mang lại nhiều lợi ích cho website của mình.
  • rel (hay Relationship): dùng để chỉ mối quan hệ giữa các trang web có chứa hyperlink và trang web được trỏ đến
  • target: có tác dụng mở ra trang web được trỏ đến bằng tab hiện tại hoặc tab mới 

3.4. Heading (h1, h2, h3, h4,…)

Tag Heading (hay thẻ heading) sẽ gồm các tag từ <h1> đến <h6> và có tác dụng xác định tiêu đề từng phần. Trong đó:

Thẻ Heading giúp xác định từng phần tiêu đề trong bài viết

Thẻ Heading giúp xác định từng phần tiêu đề trong bài viết

3.4.1. Thẻ <h1>

Tag <h1> được xem như phần quan trọng nhất trong các thẻ tiêu đề bài viết trên website. Thẻ này được dùng làm tiêu đề của bài và có cùng nội dung với tag <title>. Vì thế, mỗi một trang web chỉ nên dùng 1 tag H1 và SEOer cần đưa từ khóa chính vào trong thẻ này.

3.4.2. Thẻ <h2> đến <h6>

Kể từ tag <h2> trở đi là những tiêu đều dùng cho các mục con trong nội dung bài viết. Bạn có thể chia bài của mình ra thành nhiều phần và sử dụng tag <h2> đến <h6> một cách hợp lý. Điều này sẽ giúp bố cục bài viết dễ nhìn, dễ hiểu hơn đối với người dùng khi đọc bài.

Phân chia bài viết bằng thẻ <h2> đến <h6> còn giúp search engine hiểu rõ bài viết của bạn đang nói đến vấn đề nào. Nguyên tắc dùng những thẻ này là <h2> đặt cho các mục lớn rồi sau đó đến <h3> => <h4> => <h5> => <h6>….

3.5. Thẻ Img (hình ảnh)

Tag Img (hay thẻ hình ảnh) là các thẻ trong html thường gặp nhất khi thiết kế website. Nó giúp cho trang web của bạn trở nên sinh động và có sức hút hơn trong mắt người dùng mạng. Không chỉ vậy, thẻ này còn giúp nâng cao chất lượng nội dung các bài viết trên web.

Thẻ hình ảnh chuyên dùng để thiết kế web trở nên thu hút hơn

Thẻ hình ảnh chuyên dùng để thiết kế web trở nên thu hút hơn

Google cũng có một công cụ tìm kiếm riêng về hình ảnh nhằm đáp ứng nhu cầu ngày càng cao từ người dùng. Vì thế, mỗi bài viết trên web đều phải có hình ảnh minh họa cho phần nội dung. Nó giúp trang web của bạn trở nên uy tín và có thêm nhiều lượt truy cập hơn với search engine.

3.6. Thẻ canonical

Tag link canonical là thẻ html thông dụng giúp SEOer tránh được lỗi trùng lặp nội dung trên web. Google thường xem mỗi một url là 1 trang tách biệt và lập chỉ mục để đánh giá chất lượng web. Nếu google index các url trên web có nội dung giống nhau sẽ ảnh hưởng đến chiến dịch SEO của website.

Thẻ Canonical giúp tránh lỗi trùng lặp nội dung website

Thẻ Canonical giúp tránh lỗi trùng lặp nội dung website

Do đó, để tránh trường hợp này xảy ra, bạn cần phải sử dụng tag link canonical cho mỗi bài viết trên web. Lưu ý thẻ canonical phải là duy nhất và do chính bạn định nghĩa nó. Không đặt thẻ theo url do người dùng truy cập vì sẽ khiến thẻ mất đi ý nghĩa và bị google đánh giá là trùng lặp.

3.7. Thẻ <b> hoặc <strong>

Khi hiển thị cho người dùng dù cả hai thẻ này đều in đậm chữ bên trong nhưng chúng vẫn có sự khác biệt. Trong đó, thẻ <b> chỉ mang công dụng làm nổi bật văn bản chứa bên trong đó chứ không có ý nhấn mạnh. Còn thẻ <strong> thì lại có công dụng vừa in đậm chữ lại vừa nhấn mạnh nội dung văn bản.

Vì vậy, khi thiết kế web, bạn nên ưu tiên sử dụng thẻ <strong> hơn là thẻ <b>. Bởi tag <strong> giúp bạn nói đến điều quan trọng như từ khóa chính trong bài viết còn thẻ <b> thì không. Bạn chỉ nên dùng tag <b> khi không còn thẻ nào phù hợp với ngữ cảnh của bài viết trên web.

3.7.1. Thẻ <i> hoặc <em>

Cả 2 tag <em> & tag <i> đều có tác dụng làm cho văn bản trong bài viết in nghiêng. Tuy nhiên, tag <em> mang ý nghĩa khẳng định điều SEOer muốn nói còn tag <i> thì không. Thẻ <i> sẽ được dùng khi thể hiện quy ước của một số văn bản trên tạp chí, báo hoặc các tác phẩm văn học.

4. Các thẻ HTML thường dùng khác trong Seo

Ngoài các thẻ cơ bản trong html nêu trên, SEOer có thể dùng thêm một vài loại thẻ khác khi thiết kế web. Ví dụ:

4.1. Header

Thẻ <header> là thẻ có tác dụng chứa các thông tin mở đầu nội dung hoặc chứa link điều hướng. Thẻ header phổ biến nhất trên web bạn có thể tìm thấy chính là phần menu. Thẻ này cũng được dùng trong các tag <section> hay <article> với mục đích mở đầu cho một nội dung của trang.

Thẻ Header thường nằm ở phần Menu trang

Thẻ Header thường nằm ở phần Menu trang

Tag <footer> trên website thường có chứa các thông tin về tác giả, bản quyền hay thông tin liên hệ… Các link ở những mục quan trọng trên web cũng có thể cho vào thẻ <footer>. Thường thẻ này sẽ được đặt ở phía cuối của trang web để hài hòa bố cục và tăng tính thẩm mỹ.

4.3. Navigation (<nav> – thẻ điều hướng)

Thẻ điều hướng có tác dụng chứa các thông tin điều hướng của 1 hoặc toàn bộ trang web. Do đó, SEOer thường sẽ đặt nó tại mục menu bên trong thẻ header và footer của website. Bên cạnh đó, thẻ <nav> cũng đảm nhận chứa những đường dẫn điều hướng tại nội bộ trang.

4.4. <ul> & <ol> (thẻ liệt kê danh sách)

Hai thẻ này có tác dụng liệt kê danh sách hoặc các hạng mục có trên website của bạn. Điểm khác biệt giữa chúng là thẻ <ul> không quan trọng thứ tự của các hạng mục. Trong khi đó, sử dụng thẻ <ol> lại thể hiện sự liên quan của các mục trên web với nhau.

4.5. <blockquote> (thẻ trích dẫn)

Đứng cuối cùng trong danh sách các thẻ html thông dụng với website chính là thẻ trích dẫn. Nếu bạn muốn trích dẫn nguồn từ 1 trang web nào đó thì có thể sử dụng thẻ <blockquote>. Thẻ này còn có tác dụng giúp tăng cường chất lượng và độ uy tín website của bạn với google.

 Thẻ trích dẫn hỗ trợ tăng cường độ uy tín và chất lượng cho website

Thẻ trích dẫn hỗ trợ tăng cường độ uy tín và chất lượng cho website

Lời Kết

Trên đây là những thông tin cơ bản nhất về các thẻ trong html mà bạn cần biết khi thiết kế, xây dựng web. Mong rằng bài viết đã giúp bạn hiểu được tác dụng và tầm quan trọng của ngôn ngữ đánh dấu siêu văn bản.