Cara Menciptakan Thumbnail Image Khusus Url Homepage

Cara Membuat Thumbnail Image Khusus URL HomePage - Home Page atau halaman beranda website harusnya memiliki thumbnail image sendiri menyerupai logo website yang sudah di desain khusus untuk menggambarkan keorganisasian website itu sendiri, aku memperhatikan banyak situs-situs blog personal yang tidak memperhatikan ini, jadi dikala pengguna membagikan url homepage situs web mereka ke sosial media, gambar thumbnail yang muncul berasal dari halaman post sehingga seringkali gambar thumbnail tersebut tidak sesuai dengan judul dan deskripsi situs.

Cara Membuat Thumbnail Image Khusus URL HomePage

Maka dari itu kini aku akan menjelaskan dan membagikan cara menciptakan thumbnail image khusus URL HomePage dengan memakai sedikit tag meta, mari kita simak dengan seksama.

1. Siapkan gambar atau logo situs kemudian upload ke host masing-masing, kemudian copy url gambar atau logo yang akan dijadikan thumbnail image url homepage
2. Khusus untuk pengguna blogger silahkan gunakan url gambar logo header masing-masing.
3. Jika situs tidak memakai logo header, silahkan upload gambar melalui posts editor atau page editor,
4. Setelah gambar berhasil di upload, klik HTML Mode pada post editor untuk melihat url gambar (logo), supaya lebih gampang silahkan Open image in new tab untuk melihat url gambar kemudian Copy URL
5. Setelah URL gambar di dapatkan (di copy), boleh menghapus gambar logo yang ada di post editor, kemudian
6. Masuk ke HTML Template dan tambahkan isyarat atau tag meta berikut ini sempurna sebelum atau di atas isyarat </head>.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='url_image_here/logo.png' property='og:image'/>
</b:if>

Secara lengkap meta tags yang mengatur thumbnail image, baik hompage maupun postpage yakni sebagai berikut;

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_gTVViS1L__Cnzg1W81TB9QbydBLSwktc_KdgPb37lm2z7NLhzsjBMBjBM7LBHt4eoqSzMOusNEknpVxh4JsSM_WO1L2SRunKPYlhSSnKhqa4qap_U1IioncCt6FHKK6jmZFWALRjzk/' property='og:image'/>
</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:elseif 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>

Cara ini sanggup juga dipakai untuk memperbaiki logo website yang tidak muncul di sosial media. Sekarang cobalah sendiri, bila anda ingin melihat apakah tutorial ini benar-benar bekerja dengan baik, silahkan share url situs blog Maxloger ke sosial media anda.