Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Thêm Open Graph Meta Tag Cho Website

Cách Thêm Open Graph Meta Tag Cho Website


Ngày 31 Tháng 10 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu thẻ open graph meta là gì và cách thêm thẻ này vào cho trang web.

Open Graph Meta Tag

Thẻ Open Graph Meta Là Gì?

Thẻ meta Open Graph là các đoạn code giúp bạn có thể xem cách mà URL được hiển thị khi chia sẻ trên các trang mạng xã hội. Nó là giao thức Open Graph của Facebook và có thể sử dụng trên nhiều trang mạng xã hội phổ biến hiện nay như là Facebook, Twitter, LinkedIn... Tuy nhiên mỗi mạng xã hội sẽ sử dụng cú pháp riêng nên mình sẽ giới thiệu ở phần sau nha.

Dưới đây là ví dụ khi mình sử dụng open graph cho website trên Facebook:

Ví Dụ Open Graph

Cách Thêm Open Graph Meta Tag Vào Website

Để thiết lập open graph cho website thì chúng ta sẽ sử dụng các thẻ meta và đặt nó trong thẻ head của file HTML. Thông thường sẽ có 5 thẻ chính là:

<head> 
<meta property="og:type" content="website" />
<meta property="og:title" content="Niem Vui Lap Trinh" />
<meta property="og:description" content="Nơi chia sẻ các kiến thức về lập trình" />
<meta property="og:url" content="https://www.niemvuilaptrinh.com/" />
<meta property="og:image" content="https://www.niemvuilaptrinh.com/image.png" />
</head>

Ở đây mình sẽ giải thích các thuộc tính của thẻ open graph là:

  • og:type - Là dạng mà chúng ta muốn hiển thị có thể là website, artilce, video...
  • og:title - Là tiêu đề của trang web.
  • og:description - Là phần miêu tả khái quát nội dung của trang..
  • og:url - Là địa chỉ Url của trang.
  • og:image - Là hình ảnh hiển thị cho trang web (Thường sử dụng đường dẫn để lấy hình ảnh).

Nếu bạn muốn tìm hiểu các thuộc tính khác của open graph thì có thể truy cập The Open Graph protocol để biết thêm thông tin.

Cách Thêm Twitter Meta Tags

Đối với mạnh xã hội twitter thì chúng ta không thể sử dụng cách trên để sử dụng. Vì nó có đặc điểm hơi khác biệt do đó trong phần này mình sẽ hướng dẫn hiển thị tiêu đề, hình ảnh, thông tin... của bài viết trên Twitter thông qua đoạn code sau nha:

<head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@niemvuilaptrinh" />
<meta name="twitter:title" content="Niem Vui Lap Trinh" />
<meta name="twitter:description" content="Nơi chia sẻ các kiến thức về lập trình" />
<meta name="twitter:image" content="https://www.niemvuilaptrinh.com/image.png" />
</head>

Ở đây mình xin có một số lưu ý là:

  • twitter:card - Là loại mà bạn muốn hiển thị trên trang Twitter như "summary", "summary_large_image", "app" hay "player".
  • twitter:site - tên của bạn trên twitter. Ví dụ @niemvuilaptrinh
  • twitter:title - tiêu tề của trang web.
  • twitter:description - đoạn miêu tả cho website.
  • twitter:image - hình ảnh hiển thị.

Nếu bạn muốn tham khảo thêm về twitter card metadata thì truy cập ở đây nha.

Các Công Cụ Tạo Open Graph Miễn Phí

Trong phàn này chúng ta sẽ đi vào tìm hiểu các công cụ open graph tags generator nha.

Webcode Tools

Webcode Tools

Metatags

Metatags

megatags.co

megatags.co

Best Tool Website

Best Tool Website

Các Công Cụ Kiểm Tra Open Graph

Trong phần này mình sẽ giới thiệu đến bạn một số công cụ kiểm tra open graph cho website.

Công Cụ Gỡ Lỗi Chia Sẻ

Công Cụ Gỡ Lỗi Chia Sẻ

POST INSPECTOR Linkedin

POST INSPECTOR Linkedin

Card validator twitter

Card validator twitter

Rich Pins Validator

Rich Pins Validator

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo open graph metadata cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.