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/AVvXsEjkXnomjC6Z-O2c9BLqY3sbVHmM5cHjgRvmADQ49B0H3l79EJNavymZD_QWhhpx6MKZcyFP6p5zehRoRnWla8dH4CCD61TUQoo2-QSX7OL5alof2fACf9oDevQoNECrFsyzmOSdV9YH_ZBP/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 ^_^
_CTPG_

Trần Bá Đạt (_CTPG_)

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.info là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, BlogspotWindows

Post a Comment

[blogger]

Contact Form

Name

Email *

Message *

Javascript DisablePlease Enable Javascript To See All Widget