() translation by (you can also view the original English article)
Trong mẹo nhỏ này, tôi sẽ giới thiệu với bạn một công cụ đơn giản, nhưng rất hữu ích được gọi là Hey Meta. Nếu bạn muốn xem hồ sơ chia sẻ trang web của bạn trông như thế nào, và bạn muốn chắc chắn rằng các thẻ meta mà bạn đang sử dụng có đúng hay không, thì Hey Meta chính là những gì bạn cần. Hãy cùng tìm hiểu nào!
Sử dụng đúng các Thẻ Meta
Kiểm tra các Thẻ Meta của bạn
Kiểm tra tính hiệu quả của việc thiết lập thẻ meta hiện tại của trang web bằng cách nhập đường dẫn URL vào input. Bạn sẽ thấy một thẻ xem trước (những gì có thể được hiển thị trên mạng xã hội, các ứng dụng chia sẻ v.v ..) và tiêu đề, mô tả, hình ảnh đặc trưng của URL được đề cập đến.
Nếu trang web của bạn không có bất kỳ thẻ meta nào cho các mục này, sẽ không có gì được hiển thị cả.
Tạo ra các Thẻ Meta chính xác
Nếu trang của bạn có vẻ như thiếu thông tin chi tiết hoặc hiển thị metadata không chính xác thì bạn có thể sử dụng Hey Meta để tạo ra các thẻ chính xác cho bạn. Nhập thông tin mà bạn muốn hiển thị trong các trường được chỉ ra:
Tương tự có thể thực hiện đối với mô tả trang web, URL và hình ảnh đặc trưng. Các thẻ được tạo ra sẽ được hiển thị trong các bản xem trước và markup sẽ trông giống như sau:
1 |
<!-- HTML Meta Tags -->
|
2 |
<title>Test website</title> |
3 |
<meta name="description" content="This is the website description. Nice eh?"> |
4 |
|
5 |
<!-- Google / Search Engine Tags -->
|
6 |
<meta itemprop="name" content="Test website"> |
7 |
<meta itemprop="description" content="This is the website description. Nice eh?"> |
8 |
<meta itemprop="image" content="https://lorempixel.com/400/200/"> |
9 |
|
10 |
<!-- Facebook Meta Tags -->
|
11 |
<meta property="og:url" content="https://nothing.com"> |
12 |
<meta property="og:type" content="website"> |
13 |
<meta property="og:title" content="Test website"> |
14 |
<meta property="og:description" content="This is the website description. Nice eh?"> |
15 |
<meta property="og:image" content="https://lorempixel.com/400/200/"> |
16 |
|
17 |
<!-- Twitter Meta Tags -->
|
18 |
<meta name="twitter:card" content="summary_large_image"> |
19 |
<meta name="twitter:title" content="Test website"> |
20 |
<meta name="twitter:description" content="This is the website description. Nice eh?"> |
21 |
<meta name="twitter:image" content="https://lorempixel.com/400/200/"> |
22 |
|
23 |
<!-- Meta Tags Generated via https://heymeta.com -->
|
Ở đây bạn sẽ thấy các thẻ meta HTML nguyên bản như <title>, các thẻ Twitter, và Open Graph chẳng hạn như <meta property="og:title"> cho phép việc chia sẻ mạng xã hội một cách chính xác. Những thẻ này sau đó có thể được đặt bên trong phần <head> của tài liệu HTML.
Kết luận
Hãy đảm bảo thẻ meta của bạn hiển thị đúng các thông tin chi tiết về trang web của bạn!
Tìm hiểu thêm
