Thẻ meta là gì ?
Thẻ meta trong HTML là một phần của mã nguồn HTML của trang web và được sử dụng để cung cấp các thông tin meta (siêu dữ liệu) về trang web. Các thông tin meta này không hiển thị trực tiếp trên trình duyệt web, nhưng nó cung cấp các thông tin mô tả về trang web cho các công cụ tìm kiếm, trình duyệt, và các dịch vụ khác.
Thẻ meta được đặt trong phần '<head>' của trang web và có thể có các thuộc tính khác nhau, ví dụ như 'name', 'http-equiv', và 'property'. Các thuộc tính này xác định mục đích và nội dung của thẻ meta.
Thẻ meta og:image là gì ?
Thẻ meta og:image là một phần của các thẻ meta trong mã nguồn HTML của trang web. Nó được sử dụng để chỉ định một hình ảnh đại diện (hay còn gọi là "hình ảnh xã hội") cho trang web khi nó được chia sẻ trên các mạng xã hội khác nhau, như Facebook, Twitter, LinkedIn và Pinterest.
Khi một liên kết đến trang web được chia sẻ trên mạng xã hội, các trình duyệt web và các dịch vụ chia sẻ mạng xã hội sẽ kiểm tra thẻ meta og:image để tìm hình ảnh để hiển thị cùng với tiêu đề và mô tả của trang. Nếu không có thẻ meta og:image hoặc nếu không tìm thấy hình ảnh, nó có thể lựa chọn một hình ảnh khác từ trang hoặc không hiển thị hình ảnh.
Để sử dụng thẻ meta og:image, bạn cần thêm một dòng mã vào phần head của trang web của bạn. Ví dụ:
<meta property="og:image" content="http://example.com/image.jpg">
Trong đó, thuộc tính "property" xác định rằng đây là thẻ meta og:image, và thuộc tính "content" xác định URL của hình ảnh đại diện bạn muốn hiển thị khi chia sẻ trang web.
Việc sử dụng thẻ meta og:image giúp tăng khả năng thu hút và chia sẻ của trang web trên các mạng xã hội, bởi vì một hình ảnh đẹp và thích hợp có thể thu hút sự chú ý của người dùng và tăng khả năng chia sẻ nội dung.
Các thẻ meta khác
Ngoài thẻ 'og:image', còn có một số thẻ meta Open Graph (OG) khác mà bạn có thể sử dụng để tăng cường cách trang web của bạn được hiển thị khi được chia sẻ trên các mạng xã hội. Một số thẻ OG meta phổ biến khác bao gồm 'og:title', 'og:description' và 'og:url'.
'og:title': Xác định tiêu đề của trang web khi chia sẻ lên mạng xã hội. Điều này giúp người dùng hiểu ngay tổng quan về nội dung của trang.
'og:description': Mô tả ngắn gọn về nội dung của trang web. Thẻ này cung cấp thông tin mô tả hấp dẫn và gây sự tò mò cho người dùng khi trang web được chia sẻ.
'og:url': Xác định URL của trang web, cho phép người dùng biết nguồn gốc và liên kết trực tiếp đến trang web khi chia sẻ.
Ví dụ, để sử dụng thẻ 'og:title' và 'og:description', bạn có thể thêm các dòng mã sau vào phần head của trang web:
<meta property="og:title" content="Tiêu đề của trang web">
<meta property="og:description" content="Mô tả ngắn gọn về nội dung của trang web">Bằng cách sử dụng các thẻ meta OG, bạn có thể tùy chỉnh cách trang web của mình được hiển thị và chia sẻ trên các mạng xã hội khác nhau, tạo ra một trải nghiệm hấp dẫn và thu hút sự chú ý của người dùng.
Lưu ý với kích thước của những hình ảnh sử dụng làm hình đại diện khi chia sẽ link
Kích thước của hình ảnh trong thuộc tính 'og:image' của thẻ meta Open Graph không có ràng buộc cụ thể. Tuy nhiên, có một số khuyến nghị về kích thước hình ảnh để tối ưu hóa hiển thị trên các nền tảng mạng xã hội khác nhau.
Đối với Facebook, độ phân giải tối thiểu được đề xuất cho hình ảnh là 1200 x 630 pixel. Đây là kích thước tối thiểu để hình ảnh được hiển thị chất lượng trên Facebook và các dịch vụ chia sẻ mạng xã hội khác. Tuy nhiên, để đảm bảo hình ảnh hiển thị tốt trên các màn hình cao cấp hơn, bạn có thể sử dụng độ phân giải lớn hơn như 2000 x 1000 pixel.
Đối với Twitter, kích thước tối thiểu đề xuất cho hình ảnh trong thuộc tính 'og:image' là 1200 x 675 pixel. Tương tự, kích thước lớn hơn như 4096 x 4096 pixel cũng được chấp nhận.
Tuy nhiên, mỗi nền tảng có thể có các yêu cầu khác nhau về kích thước hình ảnh. Do đó, để đảm bảo hình ảnh hiển thị đẹp trên mọi nền tảng, bạn có thể cung cấp một hình ảnh có kích thước lớn và sử dụng các thuộc tính khác như 'og:image:width' và 'og:image:height' để chỉ định kích thước chính xác của hình ảnh. Điều này giúp các nền tảng mạng xã hội biết cách hiển thị hình ảnh một cách chính xác.
Tôi xin ví dụ để minh họa cách sử dụng kích thước hình ảnh trong thuộc tính og:image của thẻ meta Open Graph.
Ví dụ, bạn muốn chia sẻ một bài viết trên Facebook và Twitter, và bạn muốn hình ảnh được hiển thị đẹp trên cả hai nền tảng. Bạn có một hình ảnh có kích thước 1500 x 900 pixel.
Đầu tiên, bạn có thể đặt thuộc tính og:image trong thẻ meta của trang web như sau:
<meta property="og:image" content="https://example.com/image.jpg" />Tiếp theo, để chỉ định kích thước của hình ảnh, bạn có thể sử dụng các thuộc tính og:image:width và og:image:height như sau:
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="900" />Với ví dụ trên, khi bạn chia sẻ liên kết của trang web trên Facebook hoặc Twitter, nền tảng mạng xã hội sẽ biết rõ kích thước của hình ảnh và hiển thị nó một cách chính xác và đẹp trên các bản xem trên cả hai nền tảng.
Lưu ý rằng việc sử dụng thuộc tính og:image:width và og:image:height là tùy chọn và không bắt buộc. Tuy nhiên, nó giúp đảm bảo rằng hình ảnh sẽ được hiển thị đúng kích thước và không bị co dãn hoặc kéo dài trên các nền tảng khác nhau.