Hướng dẫn về thẻ HTML và thẻ meta trong năm 2018

199

1 Thẻ meta HTML và thẻ meta ?

Để làm rõ công dụng thẻ meta HTML và thẻ meta. Sự khác biệt giữa hai loại thẻ phần lớn là tùy ý, với cú pháp cho thẻ meta HTML có nghĩa là nó sẽ chứa siêu dữ liệu trong đó, trong khi thẻ được định nghĩa là thẻ meta không nhất thiết phải có.

Quyết định mà W3C quyết định hoặc không được xác định theo thời gian, tuy nhiên, điều quan trọng đối với chúng tôi phải nhớ là cả hai đều phục vụ cùng một mục đích, đó là chúng được sử dụng để cung cấp công cụ tìm kiếm với thông tin về trang web

Sidenote: Một số dữ liệu bao gồm các thẻ tiêu đề dưới dạng thẻ meta, nhưng khi chúng mô tả một phần tử của một trang, không phải nội dung của một trang, chúng tôi đã quyết định loại bỏ chúng. Tuy nhiên vẫn đảm bảo bạn đang tối ưu hóa các thẻ tiêu đề của bạn sẽ giúp công cụ tìm kiếm, và quan trọng hơn người sử dụng, hiểu những gì mà nội dung web của bạn thể hiện

Với việc đó chúng tôi có thể bắt đầu vận dụng và xem xét lựa chọn cả thẻ HTML và thẻ meta mà chúng tôi cho là hữu ích khi thực hiện SEO.

2 Thẻ hreflang

Thẻ Hreflang không phải là một thẻ mang tính chất kỹ thuật . Đây là một thuộc tính, nhưng nó là một thuộc tính quan trọng có thể giúp cho Google biết bạn đang sử dụng ngôn ngữ nào trên một trang web.

Nếu bạn có trang web sử dụng nhiều ngôn ngữ hoặc ở các lãnh thổ khác nhau, bạn nhất định nên sử dụng Hreflang để đảm bảo rằng phiên bản ngôn ngữ chính xác đang được phân phối trong các phiên bản chính xác của Google. Điều này có thể giúp các công cụ tìm kiếm xếp hạng nội dung của bạn tốt hơn và quan trọng hơn là đảm bảo người dùng ở các lãnh thổ khác nhau có được trải nghiệm phù hợp.

Đoạn mã ví dụ để nhắm mục tiêu trang web tại người dùng tiếng Anh ở Vương quốc Anh:

<link rel = ”alternate” href = ”http://example.com” hreflang = ”vi-gb” />

3 Thẻ Canonical

Một điều rất quan trọng khác là thẻ Canonical. Sử dụng nó không chính xác và bạn có nguy cơ mất khả năng hiển thị trong SERPs và gây ra các vấn đề thực sự cho trang web của bạn. Nếu được sử dụng đúng cách, đó là một cách tuyệt vời để nói với các công cụ tìm kiếm rằng URL của trang web là phiên bản defacto. Đó là cách tốt nhất để tránh các vấn đề nội dung trùng lặp trên trang web của bạn, do các công cụ tìm kiếm thu thập dữ liệu nhiều URL chứa cùng một hoặc gần giống với nội dung trên chúng.

Nói chung, nếu một công cụ tìm kiếm tìm thấy nhiều URL có nội dung giống hệt nhau, nó sẽ có một công việc khó khăn hơn để xác định đó là bản nào gốc và bản nào là bản copy. Điều này có thể dẫn đến thứ hạng thấp hơn cho cả hai, hoặc tệ hơn, một trang quan trọng sẽ không xếp hạng.

Đoạn mã ví dụ để sử dụng thẻ chuẩn:

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

4 Thẻ loại nội dung

Thẻ loại nội dung được sử dụng để xác định loại nội dung trang và ký tự đặt nó sử dụng. Sử dụng điều này sẽ giúp trình duyệt của bạn hiểu và giải mã một trang và do đó nó rất quan trọng.

Đoạn mã ví dụ để sử dụng thẻ loại nội dung:

<meta http-equiv = ”Nội dung kiểu” nội dung = ”văn bản / html; charset = utf-8 ″ />

5 Thẻ title

<strong>Thẻ title</strong>
THẺ TITLE

Có lẽ một trong những thẻ dễ nhận biết và được sử dụng nhiều nhất cho bất kỳ ai thực hiện công việc SEO. Thẻ title được sử dụng để chỉ định trang web là gì. Chúng được hiển thị trong tab trình duyệt của bạn để cung cấp cho người dùng chỉ đạo, và quan trọng hơn là được sử dụng bởi các công cụ tìm kiếm để tạo ra các kết quả mà chúng ta thấy trong SERPs.

Từ góc độ SEO, việc tối ưu hóa thẻ title của bạn để chứa thông tin chủ đề / từ khóa về nội dung trên trang có thể giúp cải thiện thứ hạng của bạn cho các chủ đề / từ khóa đó. Hiện tại, bạn có thể mong đợi Google hiển thị từ 50 đến 60 ký tự tiêu đề của bạn trước khi nó bị cắt ngắn, vì vậy hãy chú ý đến độ dài khi viết những cái này.

Đoạn mã ví dụ cho thẻ tiêu đề nằm trong thẻ đầu ở đầu trang web của bạn:

<title> Example.com | Các ví dụ tốt nhất trên web </ title>

6 Thẻ meta description

<strong>Thẻ </strong><strong>meta description</strong>
THẺ DESCRIPTION

Tương tự như thẻ title, thẻ meta description chuyên dụng và cung cấp cho bạn cơ hội để thông báo cho các công cụ tìm kiếm và người dùng trong SERPs nội dung trang web của bạn. Mặc dù không phải là yếu tố xếp hạng trực tiếp, bạn nên tối ưu hóa meta description của mình để cung cấp một tài khoản ngắn gọn hấp dẫn về nội dung trang web của bạn.

Nếu Google không nghĩ bạn đã hoàn thành đủ công việc, họ có thể chọn thay thế thẻ meta description của bạn bằng cách diễn giải riêng của họ, thường sử dụng nội dung từ một vài đoạn mở đầu của trang web của bạn.

Đoạn mã ví dụ cho thẻ meta description:

<meta name = ”description” content = ”Đây là meta description”>

Thẻ Viewport

Meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (thiết lập initial-scale với giá trị cố định là 1). Trước đây, không cần thẻ này vì mọi người đã xem các trang web trên máy tính để bàn trên các màn hình có kích thước tương tự, nhưng với sự phát triển của việc sử dụng thiết bị di động và máy tính bảng thì Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive.

Việc triển khai đúng thẻ sẽ đảm bảo rằng người dùng trải nghiệm trang web của bạn theo cách chính xác

Đoạn mã ví dụ cho thẻ meta chế độ xem:

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

7 Thẻ meta robots

Có một số lượng lớn thẻ meta robots bạn có thể sử dụng, tất cả đều giúp trình thu thập thông tin của công cụ tìm kiếm thực hiện công việc thu thập thông tin và lập chỉ mục các trang web của họ trên internet. Không phải tất cả các công cụ tìm kiếm sẽ làm theo tất cả các lệnh, nhưng dưới đây là một vài ví dụ về thẻ meta robots và những gì họ yêu cầu trình thu thập thông tin thực hiện:

Nofollow Cho trình thu thập thông tin không theo dõi bất kỳ liên kết nào được liệt kê trên trang đó và cũng không được chuyển bất kỳ quyền sở hữu nào vào trang được liên kết
Noindex Cho trình thu thập thông tin không lập chỉ mục trang đó
Noimageindex Cho trình thu thập thông tin không lập chỉ mục hình ảnh từ trang đó
Noarchive Cho trình thu thập thông tin không bao gồm phiên bản được lưu trong bộ nhớ cache

Đoạn mã ví dụ cho thẻ meta robots:

<meta name = “robot” content = “noindex, nofollow”>

8 Mở thẻ meta Open Graph (OG) cho mạng xã hội

Cuối cùng, chúng tôi có thẻ meta OG cho mạng xã hội. Mặc dù ít tập trung hơn cho SEO, đảm bảo bạn đã triển khai đúng thẻ meta OG cho mạng xã hội có thể giúp đảm bảo nội dung của bạn trông hoàn thiện hơn khi được chia sẻ, có thể giúp cải thiện mức độ tương tác với bài đăng và cuối cùng tăng lưu lượng truy cập.

<meta property = ”og: title” content = ”Bài viết về thẻ” />
<meta property = “og: image” content = “https://example.com/img/facebooklogo.png” />
<meta property = “Og: site_name” content = “SEO blog” />
<meta property = “og: description” content = “Bài viết này sẽ nói về các thẻ” />

Không cần phải nói, có một loạt các thẻ khác bạn có thể sử dụng trên trang web của mình và danh sách này không đầy đủ, nhưng hy vọng sẽ cung cấp cho bạn chỉ dẫn về một số thẻ quan trọng và hữu ích hơn mà bạn có thể sử dụng trên trang web của mình trải nghiệm tốt hơn cho cả công cụ tìm kiếm và trình thu thập thông tin.

Get real time updates directly on you device, subscribe now.

Comments
Loading...