Kode Meta Facebook & Twitter di Blog untuk Share Posting

Post a Comment
SEBELUMNYA kita sudah pasang meta tag title seo friendly untuk blog. Kali ini saatnya Blogger Bandung berbagi kode dan tips cara memasang meta facebook dan twitter agar postingan tampil lengkap di media sosia --gambar, judul, deskripsi, dan link/url.

Kode Meta Facebook & Twitter di Blog untuk Share Posting

Cara Pasang Kode Meta Facebook & Twitter di Blog untuk Share Posting

Copas kode Meta Facebook & Twitter berikut ini di bawah kode <head> setelah kode viewport

Meta Facebook & Twitter Valid HTML

Kode ini untuk template blog Valid HTML dengan ciri <HTML> (kapital) di bagian atas kode template.

<!-- Twitter -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.metaDescription'>
       <meta content='summary_large_image' name='twitter:card'/>
<b:else/>
   <meta content='summary' name='twitter:card'/>
       <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
       <b:if cond='data:blog.postImageThumbnailUrl'>
       <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
       </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name="twitter:url" />
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<!-- Twitter End -->
<!-- Facebook -->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>
<meta content='ID APP FB' property='fb:app_id'/>
<meta content='ID ADMIN FB' property='fb:admins'/>
<!-- Facebook End-->


Meta Facebook & Twitter Non-HTML

Kode ini untuk template blog Default Blogger Template atau Non Valid HTML dengan ciri <html> (kuruf kecil) di  bagian atas kode template.

Simpan di bawah kode  <b:include data='blog' name='all-head-content'/>

<!-- Twitter -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.metaDescription'>
       <meta content='summary_large_image' name='twitter:card'/>
<b:else/>
   <meta content='summary' name='twitter:card'/>
       <meta expr:content='data:blog.pageName' name='twitter:title'/>
       <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
       <b:if cond='data:blog.postImageThumbnailUrl'>
          <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
       </b:if>
    </b:if>
</b:if>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<!-- Twitter End -->
<!-- Facebook -->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>
<meta content='ID APP FC' property='fb:app_id'/>
<meta content='ID ADMIN FC' property='fb:admins'/>
<!-- Facebook End-->

Setelah dipasang, save, dan tes salah satu posting Anda di:

  1. Fecebook Debugger
  2. Twitter Card Validator

Demikian Kode Meta Facebook & Twitter di Blog untuk Share Posting. (bloggerbandung).*

Related Posts

Post a Comment

Contact Form

Name

Email *

Message *