Chèn thẻ property="og:image" vào NopCommerce cho share image trên facebook

Nito Asia: Chèn thẻ property=”og:image” vào NopCommerce cho share image trên facebook nhưng không thay đổi bất cứ nội dung hình ảnh gì của website.

Mục tiêu: Muốn một hình ảnh to hiện lên facebook khi copy link trang web (đặc biệt sử dụng source code NopCommerce), giống như vầy.

Mở rộng hình ảnh khi copy link facebook — Mở rộng toàn hình ảnh khi copy link facebook. Ở đây mình lấy ví dụ copy link home page trang web https://ajumagarden.com. Khi share lên facebook, hình sẽ mở rộng chiều ngang.

CHUẨN BỊ:

Hình mong muốn với file .png (nếu bạn thành công với file .jpg vui lòng phản hồi lại cho mình biết với).
kích thước: 960 x 480 px (file mình đang sử dụng 960x481px)
Tài khoản GoogleDrive để upload
Tài khoản admin của NopCommerce

THỰC HIỆN:

Bước 1: share file

Sau khi chuẩn bị xong hình với kích thước: 960x480px cần upload hình lên tài khoản GoogleDrive, chọn chế độ “Anyone with the link” – và copy link này để sử dụng.

Bước 2: nhập link share vào admin NopCommerce

Admin NopCommerce vào: Configuration → Settings → All Settings (Advanced).

Ở đây mình sử dụng tiếng Việt, nên nó sẽ là: Cấu hình → Cấu hình → General settings (Advanced)

Setting NopCommerce: **Configuration → Settings → All Settings (Advanced).**

Từ General setting này bạn tìm dòng “Custom <head> tag” để chèn thẻ hiển thị hình của Facebook vào header của website.

Sau đó, chèn thẻ này vào, nhớ thay thế link hình của bạn đã copy từ Google Drive ở phần trên:

<meta property="og:image" content="https://drive.google.com/file/d/174CuBQdG-4veQdBd6qxu-a_5di57MAWb/view?usp=sharing" />

Nhớ save lại, bạn có thể clear cache hoặc khởi động lại ứng dụng của NopCommerce nếu nó chưa có tác dụng.

custom head tag — **Custom head tag**, bạn có thể thêm thẻ og:image:alt như trong hình nếu muốn.

Bước 3: Kiểm tra lại

Dùng Tools của Facebook để Debug và kiểm tra lại cho chắc chắn

Link đây: https://developers.facebook.com/tools/debug/

Facebook Tools Debug – nhập link website vào.

Facebook-debug — Sau khi nhập link website vào ta sẽ thấy hình mong muốn hiển thị khi share link facebook xuất hiện – Thành công.

Cuối cùng: sử dụng link này để chia sẻ với hình ảnh mong muốn mà không ảnh hưởng đến giao diện hoặc hình ảnh đang có trên website.

Hình ảnh thực tế trang home ajumagarden.com

Note: những thẻ meta khác về FB:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Kết luận:

Khi muốn muốn có một hình ảnh đẹp mong muốn để tự động hiển thị khi share link của home page website và muốn nó không ảnh hưởng đến bất cứ hình ảnh / nội dung nào đang có trên web đang chạy bằng NopCommerce thì bạn sử dụng phương cách chèn thuộc tính og:image vào header của nó.

Nếu bạn dùng các source code khác như WordPress thì chỉ cần sử dụng Yoast SEO Premium để thay đổi như tương tự. Nếu bạn có comment nào vui lòng nhập bên dưới, mình sẽ trả lời sớm nhất có thể.

Chúc bạn thành công!

Nito Asia

CHUẨN BỊ:

THỰC HIỆN:

Kết luận:

Trả lời Hủy