Bộ thẻ meta open graph chia sẻ mạng xã hội cho blogspot

Chia sẻ bài viết lên các kênh mạng xã hội là yếu tố quan trọng hàng đầu đối với một website giúp người đọc tiếp cận bài viết nhanh tróng, là phương thức hữu hiệu nhất để kéo trafic. Vấn đề này không cần phải đề cập nhiều vì hầu như website nào cũng áp dụng cả tuy nhiên có một vấn đề nếu bạn chưa áp dụng với blog của mình đó là bộ thẻ meta open graph chia sẻ mạng xã hội, vấn đề này tưởng chứng như đơn gian tuy nhiên đôi khi lại rất phức tạp nếu bài viết gặp lỗi khi chia sẻ lên một mạng xã hội nào đó.

Cấu trúc bắt buộc của một bài viết khi chia sẻ lên mạng xã hội phải bao gồm 4 thành phần cơ bản sau đây:

url của bài viết
Tiêu đề bài viết
Mô tả bài viết
Hình ảnh bài viết

Nếu khi bạn chia sẻ một url của bài viết mà thiếu một trong 4 thành phần thì trong mẫu của bạn đang bị thiếu thẻ meta tags hoặc bạn đang đặt cấu trúc HTML bị sai nhưng thông thường vẫn do thiếu thẻ meta. Các bạn lưu ý ở mỗi mạng xã hội sử dụng thẻ thẻ meta không giống nhau cho nên không thể sử dụng chung được.

Mình có soạn sẵn bộ thẻ meta open graph chia sẻ mạng xã hội cho blogspot áp dụng với Twitter, Facebook và Google Plus vì đây là ba mạng xã hội hàng đầu hiện nay, nếu có thời gian mình sẽ cập nhật thẻ meta cho các mạng xã hội khác. Dưới đây là bộ thẻ meta đầy đủ và chuẩn

Copy


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<!-- Twitter Open Graph-->

<meta content='summary' name='twitter:card'/>

<meta content='@thuthuatwin10' name='twitter:site'/>

<meta content='@thuthuatwin10' name='twitter:creator'/>

<meta expr:content='data:blog.title' name='twitter:title'/>

<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<meta content='https://i.imgur.com/5o7o5AM.png' name='twitter:image'/>

<!-- Facebook Open Graph-->

<meta content='583598571819746' property='fb:app_id'/>

<meta content='www.blogthuthuatwin10.com' property='og:site_name'/>

<meta content='website' property='og:type'/>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

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

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<meta content='https://i.imgur.com/5o7o5AM.png' property='og:image'/>

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

<!-- Google Plus Open Graph-->

<meta content='website' property='og:type'/>

<meta expr:content='data:blog.canonicalUrl' itemprop='og:url'/>

<meta expr:content='data:blog.title' itemprop='og:headline'/>

<meta expr:content='data:blog.metaDescription' itemprop='og:description'/>

<meta content='https://i.imgur.com/5o7o5AM.png' property='og:image'/>

</b:if>

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<!-- Twitter Open Graph-->

<meta content='summary' name='twitter:card'/>

<meta content='@thuthuatwin10' name='twitter:site'/>

<meta content='@thuthuatwin10' name='twitter:creator'/>

<meta expr:content='data:blog.pageName' name='twitter:title'/>

<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>

<!-- Facebook Open Graph-->

<meta content='583598571819746' property='fb:app_id'/>

<meta content='www.blogthuthuatwin10.com' property='og:site_name'/>

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<meta expr:content='data:blog.pageName' property='og:title'/>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

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

<!-- Google Plus Open Graph-->

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.canonicalUrl' itemprop='og:url'/>

<meta expr:content='data:blog.pageName' itemprop='og:headline'/>

<meta expr:content='data:blog.metaDescription' itemprop='og:description'/>

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

</b:if>

Cách chèn

Đăng nhập vào blog chọn Chủ đề > Chỉnh sửa HTML > chèn sau thẻ <head> hoặc trước <b:skin>

Cách sử dụng

1. Thay các dòng chữ màu đỏ cho blog của mình
2. Bật mô tả tìm kiếm: Truy cập Cài đặt > Tùy chọn tìm kiếm > bật thẻ Meta mô tả sau đó ghi tối đa 160 từ mô tả blog của mình viết về chủ đề gì?, lĩnh vực nào?...

3.Viết mô tả tìm kiếm bài viết: phần mô tả tìm kiếm cho bài viết cũng viết mô tả ngắn gọn tối đa 160 từ

4. Công cụ test của mạng xã hội

Một vài hình ảnh khi chia sẻ khi chia sẻ mạng xã hội

1. Twitter

Trang chủ

Bài viết

2. Facebook

Trang chủ

Bài viết

3. Google+

Trang chủ

Bài viết

Lưu ý quan trọng:

1. Bộ thẻ meta ở trên được sử dụng trong điều kiện ở trang index (trang chủ, trang nhãn, trang tìm kiếm, trang lưu trữ) và không phải index (trang bài viết, trang tĩnh).
2. Khi viết bài nên viết mô tả tìm kiếm để Google index tốt hơn.