Tối ưu website khi chia sẻ lên Facebook, Twitter

GTV - Chắc hẳn bất kỳ ai đọc bài viết này đều đã và đang sử dụng các mạng xã hội lớn như Facebook, Twitter nhỉ? Và ắt hẳn bạn cũng thấy rằng, nhiều liên kết được chia sẻ lên các mạng xã hội trên có định dạng rất đẹp.

thiet-ke-menu-cho-blogspot


Để làm điều đó, những người lập trình trang web đều sử dụng các thẻ metadata được cung cấp bởi các mạng xã hội trên, hay được nghe đến nhất là open graph facebook, đây là ảnh hiển thị bài viết chuẩn khi sử dụng metadata của Facebook:

Tối ưu website khi chia sẻ lên Facebook, G+, Twitter

Hướng dẫn tối ưu website khi chia sẻ lên Facebook, Twitter

– Truy cập vào trang quản trị Blogspot của bạn
– Vào Mẫu (Template) và Chỉnh sửa HTML (Edit HTML):

Chỉnh sửa HTML

– Thêm đoạn code này vào trong thẻ <head>:

<b:if cond=’data:blog.postImageUrl != &quot;&quot;’>
<meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
<b:else/>
<meta content=’https://lh4.ggpht.com/-MqkGRXr1mgw/VbwoRGm0zYI/AAAAAAAABnM/3nCSkLzUSFs/s1600/CTPG_Flat.png‘ property=’og:image’/>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/>
<meta expr:content=’data:blog.metaDescription’ itemprop=’description’/>
</b:if>
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
<meta expr:content=’data:blog.postImageUrl’ name=’twitter:image’/>
<meta expr:content=’data:blog.postImageUrl’ itemprop=’image’/>
<b:else/> <b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ name=’twitter:image’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ itemprop=’image’/>
</b:if></b:if>
<!– Metadata Facebook –>
<meta content=’https://www.facebook.com/chiaseblogspot‘ property=’article:author’/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<meta content=’article’ property=’og:type’/>
</b:if>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’1612004132418088‘ property=’fb:app_id’/>
<meta content=’100000351244406‘ property=’fb:admins’/>
<!– Metadata Twitter –>
<meta name=’twitter:card’ value=’summary’/>
<meta expr:content=’data:blog.pageTitle’ name=’twitter:title’/>
<meta content=’@publisher_handle’ name=’twitter:site’/>
<meta content=’@author_handle’ name=’twitter:creator’/>
<!– Schema.org markup for Google+ –>
<meta expr:content=’data:blog.pageTitle’ itemprop=’name’/>

Trong đó:

  • Thay link ảnh của bạn vào đoạn link màu xanh, đó là link ảnh sẽ hiển thị trên Facebook cho trang chủ, label… Còn bài viết sẽ lấy ảnh đầu!
  • Thay đường dẫn màu cam bằng link Trang Facebook hoặc bạn muốn ghi gì vào đó thì ghi, đó chính là cái CHIA SẺ TEMPLATE BLOGSPOT như ảnh demo của mình
  • Thay các id màu đỏ bằng app_id và admins của bạn

– Lưu template lại.

Từ nay website của bạn đã được tối ưu khi chia sẻ lên Facebook, Twitter rồi ^_^

Từ Khoá

Đăng nhận xét

0Nhận xét
Đăng nhận xét (0)

#buttons=(Chấp nhận !) #days=(20)

Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn. Tìm hiểu thêm
Accept !