Thêm ảnh thu nhỏ khi chia sẻ bài viết lên mạng xã hội

Làm thế nào để thêm các hình ảnh thu nhỏ khi chia sẻ bài viết của bạn lên mạng xã hội? Hiện nay các mạng xã hội như facebook, twiter, google plus là những kênh giúp bạn quảng bá trang web của bạn nhanh nhất thông qua sự tương tác giữa những người dùng mạng xã hội. Thường thì khi các bạn bấm vào nút chia sẻ liên kết và tiêu đề trang của bạn sẽ được hiển thị, nhưng nếu có thêm hình ảnh thu nhỏ bài viết của bạn sẽ được chú ý hơn nhờ sự chuyên nghiệp và bắt mắt.

Bài viết này mình sẽ hướng dẫn các bạn cách để mỗi khi chia sẻ một bài viết hay các trang index như trang chủ, trang nhãn, trang tìm kiếm sẽ có kèm theo một hình ảnh thumbnail đại diện cho bài viết hoặc trang index đó.

Bạn có thể xem demo bằng cách chia sẻ một bài viết bất kỳ hoặc một trang bất kỳ trên blogspot của mình sẽ thấy tất cả đều có hình ảnh thu nhỏ kèm theo.

Cách thêm hình thu nhỏ khi chia sẻ bài viết lên mạng xã hội google, twiter, facebook

1. Đăng nhập vào bảng điều khiển Blog của bạn.
2. Bấm chọn Mẫu (template) => Chỉnh sử HTML

3. Thêm đoạn mã bên dưới vào sau thẻ mở <head> trong blogspot của bạn.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKlp69HJHLAwxVYO982x-boLjfuGdx1llzwuvPdl2ZvZG_d-2dnaeuNvkzCu2NuDIftyDnTvcbjCSFcglFb7Lll84PoCpc6pdLIUcVdj01w7o0N76n1X6BBoaZ3KxsYKg92imWx11nBPS/s1600/namloan.blogspot.com.png' property='og:image'/>
</b:if>

Thông tin thêm về đoạn code trên:

Đoạn mã màu xanh là đoạn mã lấy một hình ảnh thu nhỏ trong bài viết của bạn để làm ảnh thu nhỏ (đoạn mã này chỉ có tác dụng với các bài viết bạn có đăng kèm hình ảnh). Đoạn mã này bạn không được thay đổi nhé.
Đoạn mã màu đỏ là link của hình ảnh thu nhỏ hiển thị khi bài viết của bạn không có hình ảnh. Đoạn mã này áp dụng cho cả trang chủ, trang nhãn, trang index,... Hãy thay đường dẫn màu đỏ thành hình ảnh của bạn nhé. Bạn nên sử dụng hình ảnh này màu vuông thì khi chia sẻ sẽ đẹp hơn.

4. Lưu mẫu của bạn lại và giờ kiểm tra xem nhé.
Dưới đây là một số hình ảnh minh hoạ khi chia sẻ bài viết lên các mạng xã hội có hình ảnh thu nhỏ.
- Khi chia sẻ lên Google plus

Thêm hình thu nhỏ khi đăng bài viết lên mạng xã hội Google plus

- Khi chia sẻ lên Facebook

Với trang bài viết

Thêm hình ảnh khi chia sẻ trang chủ blogspot lên facebook

Với trang index như: Trang chủ, trang nhãn, trang lưu trữ, trang tìm kiếm

Nâng cao!

- Với một số blog trước khi áp dụng thủ thuật trên, nếu khi chia sẻ các bài viết có xuất hiện hình ảnh thu nhỏ, nhưng khi chia sẻ trang chủ, trang nhãn, trang archive, trang search lại không có hình ảnh thu nhỏ thì các bạn tìm đoạn code:

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

Và thay thế nó thành:

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKlp69HJHLAwxVYO982x-boLjfuGdx1llzwuvPdl2ZvZG_d-2dnaeuNvkzCu2NuDIftyDnTvcbjCSFcglFb7Lll84PoCpc6pdLIUcVdj01w7o0N76n1X6BBoaZ3KxsYKg92imWx11nBPS/s1600/namloan.blogspot.com.png' property='og:image'/>
</b:if>

Bài viết này mình chỉ hướng dẫn thêm hình ảnh thu nhỏ khi chia sẻ bài đăng, còn rất nhiều mã meta hữu ích khác, bài viết sau mình sẽ giới thiệu tới các bạn. Hãy để lại comment nếu trong quá trình thực hiện có vướng mắc nhé. Cuối cùng hãy like và chia sẻ bài viết cho bạn bè của bạn cùng biết và thực hiện nhé.

Nam Loan

Cảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

3 nhận xét

ChoiBlogs.blogspot.com

12/31/15, 7:53 PM

rat hay, minh van thuong bi loi ve van de nay` nhung khong tim ra huong giai quyet.

NGUYỄN PHƯỚC TRUNG

8/19/20, 2:21 AM

cho mình hỏi tại sao mình có 4 bài đăng hiện bản xem trước, còn bài gần nhất thi link không hiện bản xem trước, xin giúp mình.

https://datnen3mienbmc.blogspot.com/2020/08/at-can-gio-gia-re-nhung-gia-tri-truyen.html ( link hiện bản xem trước )
https://datnen3mienbmc.blogspot.com/2020/08/biet-thu-bien-7500m2-at-nam-ngay-mat.html ( link không hiện )

Anonymous

4/17/22, 5:04 AM

Thêm Ảnh Thu Nhỏ Khi Chia Sẻ Bài Viết Lên Mạng Xã Hội >>>>> Download Now

>>>>> Download Full

Thêm Ảnh Thu Nhỏ Khi Chia Sẻ Bài Viết Lên Mạng Xã Hội >>>>> Download LINK

>>>>> Download Now

Thêm Ảnh Thu Nhỏ Khi Chia Sẻ Bài Viết Lên Mạng Xã Hội >>>>> Download Full

>>>>> Download LINK I3