Padahal kita sudah memasang kode meta og:image dengan menggunakan post image, tapi kenapa yang muncul sebagai gambar postingan adalah foto author?
Sebagai contoh meta og:image seperti di bawah ini.
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
Jika masalahnya demikian, biasanya penyebab tidak munculnya gambar postingan ketika di-share ke Facebook dan berganti dengan foto author adalah karena ukuran gambar postingan terlalu kecil, lebih kecil dari ukuran foto author. Sementara pada postingan tersebut menampilkan foto author, biasanya pada author box atau postmeta dan secara default ukuran foto author adalah 512px x 512px.
Nah agar hal ini tidak terjadi, maka ukuran foto author harus kecil. Lebih baik ukurannya disamakan dengan ukuran tampilan foto di blog.
Biasanya untuk menampilkan foto author menggunakan kode seperti di bawah ini.
<b:if cond='data:post.authorPhoto.url'>
<img alt='author-photo' class='authorphoto' expr:src='data:post.authorPhoto.url' height='80' title='author photo' width='80'/>
</b:if>
Maka kode di atas akan menghasilkan image seperti di bawah ini (contoh menggunakan authorPhoto saya)
<img alt="author-photo" class="authorphoto" src="//lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s512/photo.jpg" height='80' title='author photo' width='80'>
Photo di atas akan tampil 80x80 di dalam postingan, namun ukuran photo sebenarnya adalah 512x512 terlihat dari kode
/s512/
yang terdapat pada url photo tersebut. Jadi jika ukuran gambar postingan kurang dari 512x512 maka gambar yang akan muncul ketika di-share ke Facebook adalah foto author-nya.Nah agar foto author berukuran kecil, sebaiknya gunakan kode resizeImage Blogger untuk gambar-gambar Blogger.
Silahkan gunakan kode di bawah ini untuk menampilkan foto author dengan ukuran kecil atau ukuran sesuai tampilannya di blog.
<b:if cond='data:post.authorPhoto.url'>
<img alt='author-photo' class='authorphoto' expr:src='resizeImage(data:post.authorPhoto.url,80)' height='80' title='author photo' width='80'/>
</b:if>
Silahkan sesuaikan
80
dengan ukuran tampilan foto di blog. Dengan kode di atas maka akan menghasilkan kode image seperti di bawah ini.
<img alt="author-photo" class="authorphoto" src="//lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/w80/photo.jpg" height='80' title='author photo' width='80'>
Dengan
/w80/
maka ukuran foto sebenarnya adalah 80x80.Trik ini juga bisa digunakan pada foto avatar komentar jika yang muncul ketika share postingan di Facebook adalah foto komentator Blogger. Semoga bermanfaat.