Google và Bing rất ưa chuộng semantic HTML5, vì vậy công nghệ này rất hữu ích cho SEO! Bài viết này cung cấp hướng dẫn đơn giản về các thẻ semantic HTML5 thiết yếu mà người viết nội dung và copywriter nên sử dụng để giao tiếp hiệu quả hơn với Google và Bing (cũng như máy móc nói chung). Có lẽ đối thủ cạnh tranh của bạn còn chưa áp dụng được những phương pháp tốt nhất, vì vậy việc sử dụng đúng các thẻ semantic HTML5 trong nội dung sẽ giúp bạn vượt lên trước một bước trong năm 2018 và những năm tiếp theo. Hãy đọc tiếp...
Để tìm hiểu cách sử dụng HTML5 để cấu trúc các trang web, hãy đọc bài viết này
Semantic HTML5 là gì?
Nếu biết đôi chút về HTML, bạn sẽ biết các thẻ HTML (phần lớn) được dùng để định dạng nội dung; các thẻ này cho trình duyệt biết cách hiển thị nội dung trên trang.
Một số thẻ truyền tải thông tin ngữ nghĩa (tức là ý nghĩa). Dưới đây là những thẻ hữu ích nhất bạn cần biết về semantic HTML5.
Dưới đây là những thẻ HTML5 hữu ích nhất bạn cần biết về ngữ nghĩa.
Hãy đọc tiếp để tìm hiểu cách sử dụng chính xác từng thẻ...
Thẻ H1 đến H6 = heading
Ai cũng biết các thẻ <h>. Chúng tạo cấu trúc cho bài viết, chia nội dung thành các chủ đề phụ và chủ đề phụ nhỏ hơn. Thẻ <h1> mô tả chủ đề tổng thể của bài viết. Các thẻ <h> khác bên dưới được dùng để thể hiện thứ bậc của các chủ đề phụ. Vì vậy, mỗi <h2> là một chủ đề phụ riêng biệt thuộc chủ đề tổng thể (thẻ <h1> cấp trên). Mỗi <h3> là chủ đề phụ của <h2> cấp trên — tức là chủ đề phụ nhỏ hơn. Cứ tiếp tục như vậy.
Các thẻ <h> có sức mạnh đáng kinh ngạc vì chúng xác định các chủ đề phụ chính trong nội dung, mức độ quan trọng tương đối và mối liên hệ giữa chúng. Qua đó, rất nhiều thông tin ngữ nghĩa được truyền tải. Bạn nên dành thời gian để thiết lập các thẻ này cho chính xác.
Đáng tiếc là nhiều trang web không tuân thủ ngữ nghĩa của thẻ <h>. Ví dụ: bỏ qua thẳng từ <h1> sang <h3> vì “it looks nicer”. Đừng làm vậy. Hãy dùng thẻ <h> theo đúng ngữ nghĩa để thể hiện cấu trúc, đồng thời dùng CSS / classes để kiểm soát hình thức hiển thị của văn bản.
Mẹo: Heading có các cấp từ H1 đến H6, nhưng rất hiếm khi cần dùng đến cấp cao hơn H4. Khi dùng đến H4, bạn nên tự hỏi liệu bài viết có đang đề cập quá nhiều chủ đề phụ và có thể tách thành nhiều bài riêng hay không.
Ví dụ về cách sử dụng thẻ theo ngữ nghĩa:
Quan trọng! Màu sắc, kích thước và vị trí ngang của văn bản trong ví dụ trên hoàn toàn không liên quan đến ý nghĩa ngữ nghĩa của các thẻ.
Về mặt ngữ nghĩa, HTML bên dưới hoàn toàn giống nhau.
Trong suốt bài viết này, hãy nhớ rằng cách trình bày trực quan của văn bản bên trong các thẻ HTML ngữ nghĩa không ảnh hưởng đến ý nghĩa ngữ nghĩa mà các thẻ đó truyền tải cho máy.
Thẻ STRONG = quan trọng
Lưu ý rằng tôi đã đưa ra hai ví dụ về cách trình bày. Thiết kế văn bản bên trong thẻ không liên quan đến ngữ nghĩa của thẻ strong.
Nếu một từ hoặc một số từ quan trọng hơn những từ khác trong câu, hãy dùng thẻ <strong>.
Với SEO, dù bạn rất dễ muốn đặt thẻ <strong> quanh tất cả keyword của mình, đừng làm vậy. Lạm dụng thẻ này sẽ làm giảm tác dụng và kích hoạt bộ lọc spam. Hãy sử dụng đúng cách và có chừng mực.
Thẻ EM = nhấn mạnh
Thiết kế văn bản bên trong thẻ không liên quan đến ngữ nghĩa của thẻ em.
Nếu cần đọc một từ hoặc một số từ với mức độ nhấn mạnh cao hơn để câu có ý nghĩa rõ ràng hơn, hãy dùng thẻ <em>. Khi đọc từ này câu này thành tiếng, bạn sẽ nhấn giọng vào từ “this”.
Khi gặp thẻ này, trình đọc màn hình sẽ thêm sắc thái nhấn mạnh vào giọng nói (robot) của nó.
Thẻ MARK = đánh dấu phần quan trọng trong ngữ cảnh
Thiết kế văn bản bên trong thẻ không liên quan đến ngữ nghĩa của thẻ mark.
Thẻ này dùng để đánh dấu (hoặc tô sáng) văn bản nhằm thu hút sự chú ý của người đọc vì nội dung đó có liên quan mật thiết đến hoạt động/ngữ cảnh hiện tại của người dùng. Ví dụ: tô sáng câu trả lời ngắn cho một câu hỏi.
Thẻ DEL = Văn bản đã bị xóa sau lần xuất bản đầu tiên INS tag = Văn bản được thêm vào sau lần xuất bản đầu tiên
Ở đây, tôi đã đổi ý về món ăn yêu thích sau chuyến đi đến Thái Lan :)
Bạn có thể dùng cách này để biểu thị các nội dung cập nhật và chỉnh sửa; hãy dùng <ins> cùng với <del>
Thẻ ABBR = từ viết tắt / chữ viết tắt
Một lần nữa, chúng ta có thể hiển thị văn bản theo bất kỳ cách nào mình muốn. Ý nghĩa ngữ nghĩa của thẻ abrr không thay đổi.
Thẻ này ít được dùng hơn, nhưng rất hữu ích để phân biệt nghĩa (sự mơ hồ là một vấn đề rất lớn đối với Google và Bing). Đặt thẻ này quanh từ “WHO” cho biết rõ rằng chúng ta đang nói đến Tổ chức Y tế Thế giới.
Thẻ CITE = trích dẫn một tác phẩm hoặc một người
Một lần nữa, chúng ta có thể hiển thị văn bản theo bất kỳ cách nào mình muốn. Ý nghĩa ngữ nghĩa của thẻ cite không thay đổi.
Trong HTML5, văn bản bên trong thẻ a biểu thị tên một người hoặc tiêu đề của một tác phẩm (ví dụ: sách, bài báo, bài luận, bài thơ, bản nhạc, bài hát, kịch bản, phim, chương trình truyền hình, trò chơi, tác phẩm điêu khắc, tranh vẽ, vở diễn sân khấu, vở kịch, opera, nhạc kịch, triển lãm, v.v.).
Trong ví dụ trên, chúng ta nói rõ rằng mình đang đề cập đến cuốn sách.
Thẻ BLOCKQUOTE = trích dẫn tương đối dài
Thông tin: <blockquote> nên có thẻ <cite> để chỉ rõ nguồn gốc. Bạn có thể chèn liên kết đến nguồn gốc bên trong thẻ blockquote bằng một phần tử liên kết (người đọc sẽ không nhìn thấy) hoặc hiển thị văn bản nhận diện nguồn gốc (tốt nhất là có liên kết). Ở đây, tôi đã dùng cả hai cách (đều ổn).
Thẻ Q = trích dẫn ngắn
Thẻ <q> phù hợp hơn với các trích dẫn ngắn. Trình duyệt thường đặt dấu ngoặc kép quanh văn bản trong thẻ <q>. Nếu trích dẫn trải dài nhiều dòng, bạn nên dùng thẻ <blockquote>.
Thẻ FIGURE FIGCAPTION = phần tử minh họa
Thẻ <figure> được dùng cho nội dung độc lập, nằm trong luồng nội dung tự nhiên xung quanh. Trong trường hợp này, đó là hình ảnh, bản đồ và biểu đồ. Bạn có thể thêm chú thích phía trên hoặc bên dưới hình ảnh — chỉ cần đặt chú thích bên trong thẻ <figcaption>, thuộc thẻ <figure>, như minh họa ở trên.
Thẻ UL OL - danh sách
Việc chọn <ul> hay <ol> giúp bổ sung ngữ nghĩa (ý nghĩa) cho danh sách.
Dù không hoàn toàn mang tính ngữ nghĩa, tôi không thể nói quá về tính hữu ích của danh sách có thứ tự và không có thứ tự. Chúng có cấu trúc nên Google có thể đọc và hiểu rất dễ dàng. Thật đáng ngạc nhiên khi mọi người thường nhầm lẫn hai loại này.
<ul> = không chỉ rõ thứ tự
<ol> = thứ tự được nêu rõ (trong trường hợp này, đây là lựa chọn tôi ưu tiên)
Ủa, không có <b>, <i> và <u> sao ????
Thẻ B I U S = xét trên thực tế, không còn cần thiết
Tất cả vẫn là HTML hợp lệ, nhưng không có ý nghĩa ngữ nghĩa và không mang lại lợi ích SEO nào.
Thẻ HTML bị lạm dụng nhiều nhất (và vô ích nhất): <b>
Lỗi đầu tiên (và phổ biến nhất) là dùng chữ đậm như một mẹo SEO để "boost" một keyword. Cách này không hiệu quả.
Thẻ HTML dễ gây nhầm lẫn nhất: <i>
Chữ nghiêng cũng là một mẹo SEO để "boost" một keyword. Cách này không hiệu quả.
Thẻ HTML gây hiểu lầm nhất: <u>
Đôi khi, chữ gạch chân được dùng như một mẹo SEO để "boost" một keyword. Cách này không hiệu quả. Hơn nữa, chữ gạch chân trông giống một liên kết.
Các thẻ <i> <b> <s> <u> không mang lại giá trị SEO và xét trên thực tế cũng không còn cần thiết. Trong 99% trường hợp, một trong những thẻ HTML5 ngữ nghĩa được mô tả trong bài viết này sẽ phù hợp hơn và nên được dùng thay thế.
HTML5 và khả năng tiếp cận
Nhiều khía cạnh của HTML5 dành cho SEO cũng tương ứng với các phương pháp tối ưu khả năng tiếp cận (trình đọc màn hình dành cho người khiếm thị một phần). Alt, title, em, strong…
Về cơ bản, Google không thể nhìn thấy, vì vậy bất kỳ yếu tố HTML5 nào liên quan đến khả năng tiếp cận và thực sự hỗ trợ trình đọc màn hình cũng sẽ giúp ích cho Google (và SEO của bạn).
Vì vậy, tôi khuyên bạn nên thực sự cân nhắc khả năng tiếp cận và trình đọc màn hình khi đánh dấu các trang.
Kết luận
Việc triển khai đúng HTML5 ngữ nghĩa đã vô cùng quan trọng và sẽ còn quan trọng hơn trong những năm tới. Google, Bing (và các crawler khác) chỉ có thể nhận diện bản chất nội dung ở mức độ nhất định. Như HTML5 Rocks đã nói (gần như vậy) “Chúng ta càng đánh dấu chính xác ngữ nghĩa của nội dung, robot càng dễ xử lý nội dung đó.“ HTML5 Rocks
Hiện tại, phần lớn người viết nội dung chưa biết cách sử dụng các thẻ HTML5 ngữ nghĩa và dùng các thẻ phi ngữ nghĩa (không phù hợp). Hiểu và triển khai đúng chỉ một vài thẻ ở trên cũng sẽ giúp bạn đi trước xu hướng.
Mẹo thêm: WordPress và HTML5 ngữ nghĩa
Tin vui cho người dùng WordPress: bạn đã có sẵn những thiết lập cơ bản, miễn là bạn thực hiện một trong hai cách sau:
Viết trực tiếp trong WordPress và sử dụng các nút định dạng mặc định
HOẶC
Sao chép/dán văn bản từ ứng dụng xử lý văn bản (Word, OpenOffice, Google Docs, Pages...) mà không giữ định dạng, sau đó áp dụng định dạng bằng trình soạn thảo văn bản WordPress.
Trình soạn thảo văn bản trong WordPress mặc định sử dụng HTML5.
Đưa góc nhìn thành kế hoạch.
Chia sẻ website và mục tiêu để LionTech tư vấn giải pháp phù hợp.
Đăng ký tư vấn ↗