[Web vỡ lòng] Số 01: Những kiến thức cơ bản về với thẻ html meta cho làm web

Một trong những phương châm của tôi trong quá trình xây dựng trang web là: “Nếu Google yêu cầu bạn làm điều gì đó, tốt hơn là bạn nên hoàn thành nó”.

Và khi nói đến việc sử dụng các thẻ meta HTML cho SEO, hẳn không ai trong chúng ta cũng biết hết. Và ý nghĩa của nó như thế nào.

Điều đáng nói, bạn biết nó ảnh hưởng như thế nào với cỗ máy tìm kiếm của Google. Các thuật toán luôn thay đổi và những gì Google cho là quan trọng trong một năm có thể dễ dàng thay đổi vào năm kế tiếp. Đó là lý do tại sao một số thẻ meta bạn có thể gặp phải chỉ là tàn tích kế thừa của những gì Google từng quan tâm.

Bài viết này sẽ giúp bạn tập trung vào các thẻ meta mà bạn thực sự cần sử dụng và những gì bạn có thể làm với chúng.

Thẻ Meta HTML là gì?

Phần đầu của một trang web chứa rất nhiều thông tin về nội dung được tìm thấy ở đó. Đây là nơi bạn sẽ tìm thấy các thẻ meta HTML của mình cùng với bất kỳ liên kết CSS hoặc JavaScript nào áp dụng cho trang.

Dưới đây là một ví dụ về giao diện của bài đăng gần đây của Ngôi Sao Số về thư viện CSS:

Bạn có thể thu thập một vài chi tiết quan trọng về trang chỉ từ đoạn mã này:

• Tiêu đề (meta)
• Mô tả meta
• Loại nội dung meta và chế độ xem

Đây là tất cả các thẻ meta. Hầu hết thời gian, chúng được viết bằng HTML dưới dạng một cặp tên / giá trị. Ví dụ

<meta property="og:title" content="5 mẹo để thiết kế trang web một trang hiệu quả">

Về cơ bản, thẻ meta chỉ là dữ liệu về trang web của bạn. Chúng không bao giờ hiển thị trên trang. Chúng chỉ ở chế độ nền, đợi các bot tìm kiếm phát hiện ra các mã HTML này và sử dụng nó để cải thiện kết quả tìm kiếm của trang. Chúng cũng hữu ích cho các trình duyệt, nguồn cấp dữ liệu RSS và các nền tảng truyền thông xã hội cung cấp các thông tin chi tiết này và hiển thị nội dung cho người dùng.

Bạn cần sử dụng thẻ meta nào?

Người ta có thể tranh luận rằng tất cả các thẻ meta được Google và các công cụ tìm kiếm khác công nhận đều đáng sử dụng. Nhưng giống như mọi thứ bạn làm trong thiết kế và phát triển web, bạn nên lựa chọn các trận chiến của mình một cách khôn ngoan.

Vì vậy, thay vì dành thời gian lấp đầy các trang web của bạn bằng mọi thẻ meta có thể, hãy tự làm quen với những thẻ nào có sẵn và thẻ nào đáng sử dụng.

Thẻ tiêu đề (title)

Mã HTML ví dụ

<title>5 mẹo để thiết kế trang web một trang hiệu quả</title>

Nó làm gì?
Điều này cho biết tên của trang.

Bạn có thực sự cần nó?

Có, nó không thể thiếu cho trang web của bạn vì nó cho các công cụ tìm kiếm biết tên của trang là gì.

Thẻ này rất hữu ích nếu bạn cũng muốn điều chỉnh tiêu đề của mình cụ thể cho các kết quả tìm kiếm.

Chuỗi tiêu đề đó dài 122 ký tự và không có cách nào Google có thể hiển thị đầy đủ. Thay vì viết lại tiêu đề cho trang web của mình, bạn có thể sử dụng thẻ tiêu đề (title) để cung cấp cho Google một thẻ phù hợp hơn với tiêu chuẩn của nó, như:

<title>Làm thế nào để có được một trang web ?</title>

Đó là 38 ký tự, trong giới hạn tiêu đề của Google và ý nghĩa của nó như tiêu đề gốc của bài viết.

Thẻ Mô tả (Description)

Mã HTML ví dụ:

<meta name="description" content="Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu...">

Nó làm gì?

Đây là bản tóm tắt ngắn gọn về những gì sẽ tìm thấy trên trang. Trong tìm kiếm, đây là mô tả trang xuất hiện bên dưới tiêu đề trang và URL.

Bạn có thực sự cần nó?

Chắc chắn cần, đây là một thẻ meta quan trọng.

Nó cho Google biết chính xác nội dung cần của bài viết là gì, nó cũng có giới hạn số ký tự là 160 ký tự. Và nếu bài viết của bạn không có thẻ mô tả này, điều này đồng nghĩa với việc khó khăn cho các công cụ tìm kiếm hiểu xâu về nội dung của bạn.

Vì vậy, hãy dành thời gian để viết lên.

Thẻ Từ khóa(Keywords)

Mã HTML ví dụ:

<meta name="keywords" content="tự thiết kế website,  thiết kế web,  code thiết kế web bằng html,  hướng dẫn thiết kế website miễn phí">

Nó làm gì?

Đây là những từ khóa bạn có thể nghĩ đến người dùng sẽ tìm thấy bài viết này khi tìm kiếm bạn trên các công cụ tìm kiếm.

Bạn có thực sự cần nó?

Chắc chắn cần, nhưng không phải quá quan trọng.

Bạn đừng nhầm tưởng khi đưa từ khóa vào đây là bạn sẽ thành công khi làm SEO. Bạn cần biết nội dung của bạn phải gần nhất với từ khóa vì các công cụ tìm kiếm ngày càng thông minh hơn nhờ các thuật toán AI giúp biết chính xác nội dung bài viết hiện tại là gì và nó có liên quan tới các từ khóa bạn đưa vào không. Vì vậy hãy cẩn thận khi sử dụng nó nhé.

Thẻ Character Set

Mã HTML ví dụ

<meta charset="UTF-8">

Nó làm gì?

Thẻ meta này xác định bộ ký tự mà trình duyệt sẽ sử dụng để diễn giải nội dung.

Bạn có thực sự cần nó?

UTF-8 không phải là bộ ký tự duy nhất cũng như không phải lúc nào trang web cũng sử dụng nó. Nó còn tùy thuộc vào ngôn ngữ của trang web để thể hiện thẻ này. Vì vậy, hãy đảm bảo rằng bạn đã xác định bộ ký tự mặc định cho trang web của mình bằng thẻ meta này.

Nếu bạn không chắc liệu trang web của mình có cần một bộ ký tự khác hay không, hãy tham khảo danh sách này. Có thể nói rằng nếu trang web được dịch cho khán giả quốc tế, bạn chắc chắn sẽ cần sử dụng thẻ ký tự khác với UTF-8.

Thẻ Hreflang

Mã HTML ví dụ

<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />

Nó làm gì?

Thẻ này cho Google biết nội dung của trang được viết bằng ngôn ngữ hoặc khu vực nào, do đó, thẻ có thể hiển thị cho đúng người dùng đang ở khu vực đó.

Bạn có thực sự cần nó?

Có một số lý do để sử dụng thẻ meta này:

1. Khi bạn đã xây dựng một trang web quốc tế với các phiên bản đa ngôn ngữ khác nhau;
2. Khi bạn đã viết nội dung bằng một ngôn ngữ cụ thể như vn-vi so với en-us;
3. Khi trang của bạn chứa nhiều ngôn ngữ và bạn muốn hệ thống sẽ tự động phát hiện từng ngôn ngữ.

Thẻ Viewport

Mã HTML ví dụ

<meta name="viewport" content="width=device-width, initial-scale=1">

Nó làm gì?

Nó cung cấp hướng dẫn về cách Google sẽ hiển thị trang của bạn trên tất cả các thiết bị, nhưng nó đặc biệt quan trọng cho các thiết bị di động ngày này.

Bạn có thực sự cần nó?

Chắc chắn! Thẻ meta này là một thẻ mà Google đã mất nhiều thời gian để giải thích. Về cơ bản, nếu bạn không bao gồm hoặc sử dụng không đúng cách, bạn có thể làm gián đoạn trải nghiệm xem của người dùng trên thiết bị di động.

Đó là lý do tại sao Google khuyên bạn nên đặt nội dung thành width = device-width, initial-scale = 1 mọi lúc. Nếu bạn cố gắng giới thiệu các biến ví dụ như minimum-scale, nó có thể làm ảnh hưởng đến giao diện của trang web khi người dùng chuyển thiết bị của mình từ hướng dọc sang ngang.

Thẻ liên kết Canonical

Mã HTML ví dụ

<link rel="canonical" href="https://www.ngoisaoso.vn/blog/5-meo-de-thiet-ke-trang-web-mot-trang-hieu-qua-3672.html">

Nó làm gì?

Khi bạn có nội dung trùng lặp trên trang web của mình hoặc các trang rất giống nhau, thẻ meta chuẩn sẽ cho Google biết trang nào là trang gốc và phải có lưu lượng truy cập đến trang đó.

Bạn có thực sự cần nó?

Google không thích nếu bạn sao chép nội dung. Nhưng giả sử bạn có một bài viết là “5 cách để tăng cường bảo mật cho WordPress của bạn” và nó là 1 phần viết lại của một bài đăng có tên “7 cách để tăng cường bảo mật cho WordPress” từ năm 2015.

Thay vì để Google phạt bạn vì có nội dung đã tồn tại trên trang web của bạn trước đó (và do đó, làm cho Google phải cố gắng xếp hạng hai lần cho cùng một nội dung), bạn sẽ sử dụng thẻ meta này để cho Google thấy nơi có nội dung gốc.

Điều này cũng sẽ hữu ích nếu bạn thay đổi cấu trúc URL của mình và muốn đảm bảo tất cả lưu lượng truy cập vào liên kết mới nhất.

Thẻ Robots

Mã HTML ví dụ

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

hoặc

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

Nó làm gì?

Các thẻ meta robots này cho phép tất cả các robots (tạm hiểu là các công cụ máy) tìm kiếm hoặc thu thập thông tin cụ thể (Ví dụ các robot thường thấy như: “googlebot”, “bingbot”, “duckduckbot” ...) hiểu cách xử lý một trang như thế nào. Nó thường liên quan đến việc cho phép một trang có hay không hiển thị trên các công cụ tìm kiếm và cách một trang sẽ được lập chỉ mục.

Bạn có thực sự cần nó?

Theo mặc định, các công cụ tìm kiếm sẽ lập chỉ mục và theo dõi các liên kết trên mọi trang bạn tạo trên trang web của mình. Có một số lý do tại sao bạn có thể hướng các công cụ tìm kiếm làm theo cách khác:

• noindex: Sử dụng tính năng này khi bạn muốn ẩn một trang khỏi tìm kiếm. (Đừng dựa vào điều này để bảo mật, hãy nhớ: đó chỉ là một gợi ý.)
• nofollow: Điều này hữu ích cho các blog chấp nhận nội dung từ những người đóng góp nhưng không kiểm tra nội dung. Bằng cách đó, nếu các liên kết liên kết được tạo trên trang, Google sẽ không theo dõi chúng.
• nosnippet hoặc max-snippet: Điều này kiểm soát cách văn bản, hình ảnh hoặc đoạn mã video của bạn xuất hiện trong tìm kiếm.
• noarchive: Nếu có các phiên bản được lưu trong bộ nhớ cache cũ hơn của một trang, hãy sử dụng điều này để cấm các công cụ tìm kiếm hiển thị chúng.
• unavailable_after:[date]: Đây là một cách thông minh bạn có thể sử dụng cho một chương trình khuyến mãi có giới hạn, chẳng hạn như bán hàng vào Black Friday. Mặc dù bạn có thể muốn tăng lưu lượng truy cập vào trang từ tháng 10 đến tháng 12, nhưng bạn nên đưa nó ra khỏi tìm kiếm sau khi hết ngày lễ và các giao dịch không còn hợp lệ.

Thẻ Google Site Verification

Mã HTML ví dụ

<meta name="google-site-verification" content="https://www.ngoisaoso.vn" />

Nó làm gì?

Đây là một trong những phương pháp bạn có thể sử dụng để xác minh quyền sở hữu trang web của mình cho Google Search Console.

Bạn có thực sự cần nó?

Bạn không cần thẻ meta này nếu bạn đã chọn một trong các tùy chọn khác. Ví dụ: bạn có thể xác minh quyền sở hữu trang web thông qua mã theo dõi Google Analytics hoặc bằng cách cập nhật bản ghi DNS của bạn. Nếu muốn, bạn chỉ có thể thêm thẻ meta HTML vào tiêu đề của mình.

Thẻ cho Facebook hay Twitter và Open Graph (Social Media)

Mã HTML ví dụ

<meta property="og:type" content="article">
<meta property="og:title" content="5 mẹo để thiết kế trang web một trang hiệu quả">
<meta property="og:description" content="Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu...">
<meta property="og:site_name" content="NGÔI SAO SỐ | Tên miền, Làm web, Lưu trữ web, Bảo mật web">
<meta property="og:image" content="https://www.ngoisaoso.vn/uploads/news/2020_09/5-meo-de-thiet-ke-trang-web-mot-trang-hieu-qua-6.png">
<meta property="og:url" content="https://www.ngoisaoso.vn/blog/5-meo-de-thiet-ke-trang-web-mot-trang-hieu-qua-3672.html">
<meta property="og:site_name" content="NGÔI SAO SỐ | Tên miền, Làm web, Lưu trữ web, Bảo mật web">

Nó làm gì?

Các thẻ meta Open Graph (như đoạn mã ở trên) cho Facebook và LinkedIn sẽ cho biết cách hiển thị siêu dữ liệu cho một trang hoặc bài đăng được chia sẻ trên các nền tảng truyền thông xã hội đó.

Các thẻ meta của Facebook cũng làm như vậy, ngoại trừ Twitter và thường yêu cầu xử lý của bạn.

Bạn có thực sự cần nó?

Nó có thể giúp ích, nhưng đôi khi nó không cần thiết. Theo kinh nghiệm của chúng tớ, khi chúng tớ điền dữ liệu cho các thẻ này cho một trang trên trang web, đó chính xác là những gì hiển thị khi quảng cáo nội dung trên mạng xã hội.

Tóm lại

Đây không phải là danh sách đầy đủ tất cả các thẻ meta đang tồn tại. Bạn có thể truy cập vào các trang web có chứa các thẻ meta khác như các thẻ khai báo tác giả (author), bản quyền (copyright) hoặc xếp hạng (rating). Những thẻ này thực ra không còn cần thiết nữa và bạn không nên lãng phí thời gian cho chúng.

Trên đây là danh sách đầy đủ các thẻ meta HTML mà bạn nên sử dụng cho trang web của bạn. Vì vậy, hãy tập trung vào việc cho các công cụ tìm kiếm biết chính xác những gì nó cần để lập chỉ mục trang của bạn trong khi giữ cho tài liệu HTML của bạn không bị các thẻ không cần thiết lấn át.