Khi chúng ta có website thì thường
chia sẻ lên các mạng xã hội để tăng traffic và quảng bá đến nhiều người hơn. Mình cũng vậy, nhưng trong quá trình
share link website lên
Facebook thì gặp phải một số vấn đề.
- Ảnh Thumbnail hiển thị không chuẩn
- Tiêu đề bài viết hoặc mô tả hiển thị không chuẩn (nhiều trường hợp không hiển thị)
Nên mình viết bài viết này để tìm hiểu sơ sơ xem nguyên tắc hoạt động của nó là như thế nào. Và cách tối ưu làm sao để cho website của bạn hiển thị
link đẹp mắt khi chia sẻ lên Facebook nhé.
Tìm hiểu về Facebook Open Graph Meta Tags
Facebook Open Graph Meta Tags là một giao thức mà Facebook tạo ra giúp những web developer có thể tùy biến hiển thị thông tin website mỗi khi bạn chia sẻ link website lên mạng xã hội này.
Nó thực chất là các thẻ mô tả <meta> với cấu trúc chung như sau
<meta property=”og:{tagName}” content=”{tagValue}”/>
Từ đây bạn có thể điền thông tin mà bạn muốn hiển thị mỗi khi chia sẻ link website lên Facebook
Cũng có khá nhiều các thẻ trong bộ Open Graph Meta Tags của Facebook. Nhưng trong bài viết này mình sẽ chỉ liệt kê ra vài thẻ quan trọng nhất để bạn có thể hiển thị link đẹp trên Facebook
Thẻ tiêu đề<meta content='Hiệp B - Advertising on Facebook' property='og:title'/>
Thẻ mô tả<meta content='Cập nhật những kiến thức mới nhất về marketing trên Facebook. Cách chạy quảng cáo Facebook hiệu quả.' property='og:description'/>
Xem thêm
Hiển thị link Fanpage khi share bài viết lên FacebookThẻ hình ảnh<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YPibQ8O-sryFJiCWs6VXVaq5gVX9627QpG5ZFH63rvEYBuMNB-khFH-eBxdEtlwQsELJWr2xuCZyZRLHAKznN8qOifHCt_RjodzCJ5ZnqWfxz9XZoIrDxBjw6SZKO0Kbye3UmwKc70WJ/s1600/author-image.png' property='og:image'/>
Xem thêm
Kích thước hình ảnh chuẩn trên FacebookCác bạn có thể tùy chỉnh cho phù hợp với website của mình. Để tìm hiểu sâu hơn về các thẻ này thì bạn hãy vào trang Facebook
Open Graph. Còn để kiểm tra trước xem link của bạn sẽ hiển thị như thế nào thì bạn có thể sử dụng công cụ
Debugger.
Chúc các bạn thành công!
Riêng những bạn dùng
Blogspot thì các bạn có thể sử dụng đoạn code sau và chèn vào header là được, chỉ cần thay phần mình đánh dấu màu đỏ thành nội dung của bạn là được.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Hiệp B - Advertising on Facebook' property='og:title'/>
<meta content='Cập nhật những kiến thức mới nhất về marketing trên Facebook. Cách chạy quảng cáo Facebook hiệu quả.' property='og:description'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YPibQ8O-sryFJiCWs6VXVaq5gVX9627QpG5ZFH63rvEYBuMNB-khFH-eBxdEtlwQsELJWr2xuCZyZRLHAKznN8qOifHCt_RjodzCJ5ZnqWfxz9XZoIrDxBjw6SZKO0Kbye3UmwKc70WJ/s1600/author-image.png' property='og:image'/>
</b:if>
