Mengatasi Gambar dan Deskripsi Posting/Blog di Facebook - Hey sobat, masih disini, di acara Tutorial Blogger Everywhere :D, kali ini saya akan membahas mengenai gambar dan deskripsi yang tidak muncul pada saat berbagi postingan di Facebook.

Mengenai hal ini, banyak sekali bloggers yang tidak mementingkan hal ini, sebenarnya ini sangat penting, apalagi jika ada pengunjung yang membagikan artikel sobat?, lalu pada gambar dan deskripsi di dalam facebook tidak muncul, dan itu membuat bingung para facebookers yang melihat artikel sobat, dan artikel ini adalah jawaban untuk sobat semua yang kebingungan melihat Gambar dan Deskripsi posting atau blog yang tidak muncul di Facebook, simak selengkapnya :

Agar sobat mengerti hal yang mengenai artikel ini, silahkan sobat baca terlebih dahulu :

Cara Kerja Facebook dalam Mengambil Snippet Data Halaman Blog/Web 

Facebook secara rutin mengambil data di dalam halaman dan menyimpannya ke dalam cache. Setelah suatu halaman baru ditemukan pada suatu url posting yang di-share, Facebook melakukan crawl dan menyimpan data-data halaman tersebut, dalam hal ini adalah gambar dan teks. Yang dilakukan pada saat crawl adalah mencari meta data (dalam tag opengraph dan tag-tag lain). Ketika meta data tidak ditemukan, algoritma Facebook akan mengambil data gambar dan teks apapun yg pertama kali ditemukan pada halaman tersebut. Nah, inilah mengapa kadang snippet gambar dan deskripsi yang ditampilkan tidak sesuai.

Memperbaiki Snippet Gambar Agar Sesuai Dengan Gambar/Thumbnail Posting 

Memperbaiki Gambar dan Deskripsi Posting/Blog di Facebook

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggB70Ly_StBhpMw4YDsB5Rhfts8XL2_4VLDshO6NzlKBtT-BL7R3SkrA37uW7ui3T7DF5kchKE8wJTKLExDO74v4tnXDB5iywpCdbL8SUB-djRCoAw7Z1vx6GLJq25BnG2kfzxyPaW7G7J/s1600/buka-rahasia.blogspot.com.jpg' property='og:image'/>
</b:if>

Memperbaiki Snippet Deskripsi Posting/Halaman Blog

Pada intinya, Facebook akan menampilkan thumbnail artikel yang didalam kode <p> yg telah saya ringkas diatas tadi, sebenarnya tidak menggunakan kode <p> diatas juga tidak apa, hanya saja saat sobat melihat thumbnail post pada Facebook hanya akan menampilkan deskripsi Blog sobat.

Icon Berdasarkan Label

<script type='text/javascript'> 
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOLTzDCLfOAfN9m_eoeHLSJE5KYp7sfF3pxS3zZ4X-ap4T0u2gO9gtKumd9fc8-W_FPk1_prWXBss6qFhUh-uFkTGMAjgt3r7PrVUKGPHusj1LaGctdCSwyQZPdulMD5Fbwy2EJRSO28/s84/image.png' title='Image'/>&quot;
imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_hut9T55loIH3ILQURCGpjoDy61zADhzTPjlXAMN8gbQLlVbC9tkyPe0TNDaBqgzl4gyqTJQrFagkW4wBfSD2jjQChVqZmCwsp1cos-jL4aKhmDliTZIJTDaxwam4CMVQldlyk7voR0/s84/video.png' title='Video'/>&quot;
imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6EFsLwCIGxu3Lzh2Jvc7-xfzOmPzeO-0_961VWMuPRKWVUt8RCTo73gNwBFUulNe5NMJM8xqA1N-DR_KYHTbGq-c4YVAQ_cv7qgjvHhV85rVNPpm4CiULZfcVOt89x3YftEV04G7BSE/s84/audio.png' title='Music'/>&quot;
imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNbl7bf1inyQ8h0Rlp_98IyfgJ9s-UHy5J8bRZ0tyBrkp28l_5e5K5elKEgkowVuMlIQmdtsVFhcm2JfmNomINPkbUDW5eI-MlEteFShMdmq31Zcph8YLtJ7Ak1upxsu1_jCnJ_O_ebw/s84/quote.png' title='Quote'/>&quot;
imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XnrReS5tvCq0dy9US3zxikAdyBmkm7x2CQuotNzUYxZ2UJ6li1wF4iJvV77v_8CSxM5avy4o9oOzU0e4gr0oChpoyLCDjyqznVVqLd2bjeuPp_vDFr9dCgu2PrCCWoWVIp7z4FIm5-8/s84/note.png' title='Note'/>&quot;
imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQcHAhMIYDfJSAA0uPo_p4F-Jc8z9ks55wq0nk4VFJUrrLxH3CJ3zShwe7lPDKVri01F8kx3tuIrRA07xzsrknu6SLytkFMHNG77bubGvckmULG1-MIMBybsmNeG8Si-qSClWN8btW2w/s84/Blogger.png' title='Blogger'/>&quot;
imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1Pg8WOIZvXW-YE-3GvgTIQw_fRqqDeZElM8yoQxfK-i3t8kXUxi36cvMH5LN6B2d2tmBpEKz0tTvhv3L5T4YgDwl1L1dvXyAo68ZkxTK9KlCX0ZRKkmX6HT6iOfJGa3MZbuCsP3u4qU/s84/wp.png' title='Wordpress'/>&quot;
if (etiqueta == &quot;Image&quot;)
{document.write(imagenes[1]);}
if (etiqueta == &quot;Video&quot;)
{document.write(imagenes[2]);} 
if (etiqueta == &quot;Music&quot;)
{document.write(imagenes[3]);} 
if (etiqueta == &quot;Quote&quot;)
{document.write(imagenes[4]);} 
if (etiqueta == &quot;Blog&quot;)
{document.write(imagenes[5]);} 
if (etiqueta == &quot;Blogspot&quot;)
{document.write(imagenes[6]);} 
if (etiqueta == &quot;Wordpress&quot;)
{document.write(imagenes[7]);} 
}
</script>

.format-icon{
position: absolute;
display:block;
margin:0px 0px 0px -62px;
padding:0px;
border:0px;
}

<b:loop values='data:post.labels' var='label'>
<a class='format-icon' expr:href='data:label.url' rel='tag'>
<script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script>
</a>
</b:loop>

Cara Membuat Blog 100% SEO di Chkme.com

<title><data:blog.pageTitle/></title>

<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | Namablog</title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Meta Title Halaman Search -->
<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: | NamaBlog</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Meta Title Halaman Arsip -->
<title>Arsip Artikel Bulan <data:blog.pageName/> | NamaBlog</title>
<!-- Meta Descriptin Halaman Arsip -->
<meta expr:content='&quot;Arsip Artikel Bulan &quot; + data:blog.pageName + &quot; selengkapnya silahkan kunjungi di NamaBlog&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- Meta Title Halaman Pages -->
<title><data:blog.pageName/> | NamaBlog</title>
<!-- Meta Description Halaman Pages -->
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NamaBlog&quot;' name='description'/>
<b:else/>
<!-- Meta Title Halaman Label -->
<b:if cond='data:blog.searchLabel'>
<title>Pencarian pada Label :: <data:blog.pageName/> :: | NamaBlog</title>
<!-- Meta Description Halaman Label -->
<meta expr:content='&quot;Pencarian pada kategori ::&quot; + data:blog.pageName + &quot;:: selengkapnya silahkan kunjungi di NamaBLog.&quot;' name='description'/>
<b:else/>
<!-- Meta Title Halaman Utama -->
<title><data:blog.pageTitle/></title>
<!-- Meta Description Halaman utama -->
<meta expr:content='data:blog.pageTitle + &quot; Tulis deskripsi blog anda disini.&quot;' name='description'/>
</b:if>
</b:if>
</b:if>
<!-- Meta Keyword Halaman utama-->
<meta content='keyword1, keyword2, dst' name='keywords'/>
<b:else/>
<!-- Meta Title Halaman Post -->
<title><data:blog.pageName/> - NamaBlog</title>
<!-- Meta Description Halaman Post aktif -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<!-- Tampilkan jika Meta Description Halaman post tidak aktif-->
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NamaBlog&quot;' name='description'/>
</b:if>
<!-- Meta Keyword Halaman post -->
<meta expr:content='data:blog.pageName + &quot;, keyword1, keyword2, dst&quot;' name='keywords'/>
</b:if>

Merapikan dan Modifikasi Gambar dan Link Di Postingan.

<a href="link-tujuan" title="Deskripsi" target="_blank">judul</a>

<img src="link images" alt="Deskripsi" title="Judul">

Intinya, sobat diharuskan memberi judul dan deskrpisi pada tautan link atau gambar

Template Blogspot SEO Responsive Premium

• Responsive Design
• Manual Featured Post from Image Widget (Responsive Skitter Slideshow)
• Auto Featured Post (Responsive Skitter Slideshow)*
• Support Blogger Template Customize Editor
• Lightweight Auto read-more (support third party image, and Youtube Thumbnail)
• Ajax load more post
• Page Navigation
• Tabs Widgets ready
• Cool blogger threaded comment (Support Google+ Comment)
• JSON Search Result *
• Ajax Recent Post by Tag (3 Post Type(Slider, Vertical, and Horizontal) support random) *
• Ajax Recent Comment Widget *
• Ajax Related Post Widget *
• Ajax News Ticker Widget *
• Two View Mode (List and Grid) with Cookies
• Optimize SEO
• Meta Keywords And Description
• Emoticon
• Compatible with major browsers (IE9+,Mozilla,Chrome,Safari,Opera)
• Custom Error 404 Page
• Custom Share widget icon (addthis widget plugin)
• Professional admin layout, help you easy work with blog layout.

Layouts

• a. Popular Post
• b. Recent Comment
• c. Archive Widget