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

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, Google + hay 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.

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

Để 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, Google +, 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9zgUGx9K6SnRPVHJVIFiWqEC3_DVjeYA6Eiqxc1e6L3pJX0DTteSAU0u5gOTYxYDaKJST0iu9LcAagAbyAtPo0qLDZhKFtE3iZ2FrRRetlVfX2jSA9DEuxdz2ekc-_TonUUT2tSLawE65/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, G+, Twitter rồi ^_^

Post a Comment

[blogger]

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.