List thẻ Meta dạng HTML và XHTML Google hiểu được cần cho SEO

Discussion in 'Thuật ngữ SEO/SEM' started by tranngocthuy, Jul 8, 2017.

List thẻ Meta dạng HTML và XHTML Google hiểu được cần cho SEO 5 5 1votes
5/5, 1 vote

  1. tranngocthuy

    tranngocthuy Administrator Staff Member VIP lamSEO.com

    Có rất nhiều loại thẻ meta tag trong quá trình thiết kế web bạn cần để giúp Google cũng như các công cụ tìm kiếm khác hiểu được.

    Thẻ meta là gì?

    Thẻ meta là cách giúp cho các quản trị viên web khai bao với các công cụ tìm kiếm về thông tin nội dung trang web của họ.

    Tuỳ theo mỗi loại công cụ tìm kiếm hoặc ứng dụng (chia sẻ mạng xã hội) mà sử dụng (xử lý) các loại thẻ meta mà hệ thống của nó có thể hiểu. Chúng sẽ bỏ qua những những thẻ còn lại.

    Thẻ meta được thêm vào phần <head>…</head> trên trang HTML.

    list-the-meta-html.jpg

    Đây là phần mà người dùng không nhìn thấy, khi bạn view source (Ctrl+U hoặc cmd + U trên firefox), (Ctrl+alt+U hoặc alt+cmd+U trên Google Chorme).

    Các thẻ meta mà Google hiểu:

    1. Thẻ meta name="description"

    HTML:
    <meta name="description" content="Đây là đoạn mô tả vắn tắt nội dung của landing page (url) của bạn." />

    Đây là phần nội dung sẽ được hiển thị trên Google khi bạn xác định từ khóa chính và chưa từ khóa đó trong thẻ meta description.

    2. Thẻ title <title>

    HTML:
    <title>Tiêu đề trang của bạn</title>
    Thẻ meta title hay thẻ tiêu đề của trang, nếu xét về mặt kỹ thuật thì nó không được gọi là thẻ meta nhưng thẻ title thường được dùng kết hợp với thẻ meta "description".

    Đây là thẻ được hiển thị trên kế quả tìm kiếm của các công cụ tìm kiếm tự nhiên và sẽ hiển thị trên trình duyệt của người dùng.

    3. Thẻ meta robots

    HTML:
    <meta name="robots" content="…,…"/>
    <meta name="googlebot" content="…,…" />

    Các thẻ này nhằm khai báo với bot của các công cụ tìm kiếm hay trình thu thập dữ liệu có nên thu thập, bỏ qua, hay có hiển thị một đoạn trích trong kết quả tìm kiếm…

    Trong 2 thẻ trên thì thẻ meta name="googlebot" chỉ dành cho Google.

    Có rất nhiều loại giá trị và cách nhau bằng dấu phẩy (,) mình list ra những giá trị mà Google có thể hiểu:

    • noindex: ngăn lập chỉ mục một trang.
    • nofollow: ngăn chặn các Googlebot đi theo các liên kết từ trang này.
    • nosnippet: ngăn chặn việc hiển thị một đoạn trích trong kết quả tìm kiếm.
    • noodp: ngăn chặn việc sử dụng mô tả thay thế từ ODP/DMOZ.
    • noarchive: ngăn chặn Google hiển thị liên kết được lưu trong bộ nhớ cache của một trang.
    • unavailable_after:[date]: cho phép bạn chỉ định thời gian và ngày chính xác mà bạn muốn dừng thu thập dữ liệu và lập chỉ mục trang này.
    • noimageindex: cho phép bạn chỉ định rằng bạn không muốn trang của bạn xuất hiện dưới dạng một trang tham khảo cho một hình ảnh xuất hiện ở kết quả tìm kiếm của Google.
    • none: tương đương với noindex, nofollow.

    Để giúp các bạn có thể hiểu hơn mình sẽ lấy ví dụ và các bạn có thể dựa vào các giá trị ở trên mình bôi đậm sử dụng cho hiệu quả:

    HTML:
    <meta name="robots" content="noindex,nofollow" />
    Mình dùng giá trị noindex,nofollow thay cho dấu ba chấm (…) phía trên và name là robots: Google và các công cụ tìm kiếm khác không lập chỉ mục và chặn bot đi theo các liên kết từ trang này.

    4. Thẻ meta nositelinkssearchbox

    HTML:
    <meta name="google" content="nositelinkssearchbox" />
    Thẻ meta này khai báo cho Google biết không được hiển thị hộp tìm kiếm và liên kết trang web (site link).

    5. The meta notranslate

    HTML:
    <meta name="google" content="notranslate" />
    Đây là thẻ sẽ khai báo với Google không muốn dịch trang web của chúng ta. Viêc sử dụng thẻ này nhiều khi Google dịch sẽ không được chuẩn, vì thế hạn chế dùng.

    6. Thẻ meta verify

    HTML:
    <meta name="google-site-verification" content="…" />
    Đây là thẻ chúng ta sẽ sử dụng để verify trang web của chúng ta với Google Search Console. Lưu ý ở đây giá trị trong phần (…): content="…" có phân biệt chữ hoa và chữ thường.

    Đôi khi chúng ta hay dùng luôn Google Analytics để verify website và khi đó không cần thêm thẻ này.

    7. Thẻ meta Content-Type và charset

    HTML:
    <meta http-equiv="Content-Type" content="…; charset=…" />
    <meta charset="…" >
    Các thẻ meta này nhằm xác định loại nội dung và bộ ký tự của trang.

    8. Thẻ meta refresh

    HTML:
    <meta http-equiv="refresh" content="…;url=…" />
    Thẻ này nhằm đưa người dùng tới 1 trang nhất định trong 1 khoảng thời gian, Google cũng khuyến nghị sử dụng chuyển hướng 301.

    Trên đây là những thẻ meta cần thiết mà Google có thể đọc và hiểu bên cạnh đó phía dưới đây mình sẽ list thêm các thẻ trong phần <head>…</head> khi làm SEO cần lưu ý.

    9. Thẻ rel="canonical"

    HTML:
    <link rel="canonical" href="URL" />
    Thẻ này thực sự cần thiết và nên có trên mỗi landing page SEO của bạn.

    10. Open Graph Protocol

    Đây cũng là các thẻ khá quan trọng, nhằm mục đích khi chia sẻ trang web lên các mạng xã hội:

    Để xem chi tiết các bạn truy cập website chính thức của Open Graph Protocol (2).

    11. Favicon

    Đây là hình ảnh nhỏ thương có đuôi dạng .ico hoặc có thể hình ảnh dạng .png. jpg, nó được hiển thị trên trình duyệt của bạn (3) bạn có thể dùng công cụ miễn phí tạo nhanh (4).

    12. Next và Prev

    HTML:
    <link rel='pre' title='Tiêu đề URL1'  href='URL1' />
    <link rel='next' title='Tiêu đề URL3' href='URL3' />

    Đây là thẻ khai báo cho các công cụ tìm kiếm biết vị trí bạn đang xem và trang trước nó hay trang sau nó (danh mục) hoặc như ví dụ trên thì bài viết trước đó và bài tiếp.

    13. Thẻ meta Viewport

    HTML:
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi;width=device-width;height=device-height" />

    Đây là thẻ thường khi dùng thiết kế web Responsive, thẻ này nhằm khai báo với trình duyệt hiển thị giao diện tương ứng với kích thước trình duyệt của thiết bị.

    14. Thẻ Hreflang

    Đây là thẻ nhằm khái báo URL ngôn ngữ của trang đối với từng khu vực địa lý. Mình được hỏi khá nhiều về thẻ này. Dựa vào hình trên các bạn có thể hiểu.

    Thẻ này thường sử dụng với website có nhiều ngôn ngữ và làm SEO ở nhiều khu vực địa lý khác nhau. Chúng ta có thể kiểm tra được trong phần Nhằm mục tiêu địa lý trong Search Console.

    Trên đây là những thẻ thường dùng, bên cạnh đó khi bạn sử dụng các công cụ hay website hỗ trợ trực tuyến người ta thường yêu cầu bạn thêm thẻ để verify trang web của bạn.
     
    Tags:
    Mai Hà, Julio and CuongBui like this.
  2. bichphuongnguyen45

    bichphuongnguyen45 New Member

    Thẻ rel="canonical"
    Về thẻ này thì em được biết là để tránh trùng lặp nội dung. Nếu em gắn thẻ này lên landingpage A thì nghĩa là trang A là gốc hay bản sao ạ?
     
    tranngocthuy likes this.
  3. tranngocthuy

    tranngocthuy Administrator Staff Member VIP lamSEO.com

    Bên cạnh tránh trùng lặp nội dung còn có nhiều tác dụng khác như: Tránh các lỗi trùng lặp title, description, tránh trùng lặp phiên bản mobile, amp...
    Bạn có thể xem thêm tại https://tranngocthuy.com/the-meta-rel-canonical/
     
    bichphuongnguyen45 likes this.
  4. bichphuongnguyen45

    bichphuongnguyen45 New Member

    Mai Hà likes this.
  5. bichphuongnguyen45

    bichphuongnguyen45 New Member

    À em thấy phía dưới bài viết có người hỏi và anh giải đáp rồi :p
    nguyencong says:
    05/02/2017 at 8:09 am
    Anh ơi em nhờ anh chút! khi sử dụng thẻ canonical để chống trùng lặp phân trang danh mục em có trỏ canonical từ các phân trang sau về tất cả trang đầu tiên là sai hay đúng anh nhỉ! Ví dụ: như phân trang của em như sau http://gib.com.vn/thuong-hieu/vong-bi-fag-br35-p1/ từ http://gib.com.vn/thuong-hieu/vong-bi-fag-br35-p2/hoặc các trang xa hơn em đều canonical tất cả về http://gib.com.vn/thuong-hieu/vong-bi-fag-br35-p1/ nhờ ai giải đáp giúp em
    Trần Ngọc Thùy says:

    06/02/2017 at 12:29 am
    Ok bạn, việc bạn trỏ về trang đầu tiên hay việc các trang sau bạn không có index (dùng thẻ meta nofollow, noindex) đều ok!

    Bây giờ còn áp dụng được nữa không ạ
     
    tranngocthuy likes this.
  6. tranngocthuy

    tranngocthuy Administrator Staff Member VIP lamSEO.com

    Thoải mái nha bạn.
     
    bichphuongnguyen45 likes this.
  7. anhtdseo

    anhtdseo Administrator

    description gốc + p ấy ạ
    mình từng xử lý vấn đề này vào năm 2012 do code mình code truyện nó phân trạng và description nó tự động sinh ra thì mình thường cộng thêm chuỗi kiểu như phần 2, phần 3 ấy.
    còn giờ mình cũng không quan tâm nó trùng hay gì nữa :D
     
  8. Chà chà, căng à nghen. Em chỉ xài có cái thẻ xác nhận của Google và thẻ language còn lại để theme với Yoast SEO nó lo hết. Thấy ctr + U lên cũng một đống thẻ meta luôn ấy chứ.

    Cái này chắc là tùy trường hợp mà áp dụng phải không anh Thùy nhỉ ?
     
Rate this thread:
/5,

Share This Page

Loading...