Menambahkan thumbnail pada rich snippet

Kami biasa menyebutnya Open Graph, kustomisasi ini berguna untuk menambahkan gambar cuplikan ketika halaman web dibagikan ke platform media sosial seperti Whatsapp, Facebook, atau Twitter.

Secara default, snippet image hanya akan muncul di halaman post dengan mengambil data dari gambar pertama pada artikel, namun snippet image tidak muncul ketika link homepage di share ke media sosial, hal ini dikarenakan tidak ada data gambar yang dapat diambil oleh server, untuk itu Anda harus menambahkan url gambar secara manual, pada Edit HTML temukan kode seperti ini:

<b:comment>Replace Add_your_image_url_here with your image url</b:comment>
<b:with value='{url: &quot;Add_your_image_url_here&quot;}' var='thumb'>
  <meta expr:content='data:thumb.url' property='og:image'/>
  <meta expr:content='data:thumb.url' name='twitter:image:src'/>
</b:with>

Ganti kode yang bertanda Add_your_image_url_here dengan url gambar Anda. Kami sarankan untuk menggunakan gambar dengan rasio 16:9 atau setara dengan 1280px*720px.

Untuk mendapatkan url gambar, unggah terlebih dahulu melalui post editor, lalu klik kanan pada gambar › Copy image address.

Menambahkan/mengganti thumbnail pada skema bawaan

Untuk menghindari kesalahan pada Google Rich Result Test, kami menambahkan thumbnail default untuk halaman beranda dan logo dari jagodesain.com dalam skema blog JSON, kami tidak bermaksud atau bertujuan lain selain itu, hal ini juga tidak banyak berpengaruh pada situs Anda tapi Anda dapat selalu menggantinya kapanpun Anda mau, temukan kode seperti ini:

<b:includable id='postMetadataJSONImage'>
  &quot;image&quot;: {
    ...
  
    /* Get the first image, otherwise no default image will be shown */
    &quot;url&quot;: &quot;<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, &quot;1200:630&quot;) : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPtIuTVv-2uZUGyyw_R7w_ZiY63jiNmviSUv0GWYW3iYqGwqSgglDCaGQ2aHcqA-8meF9srEC0k7euqvAup4Dx0XulAGCf3QgIQWJzlgP2jIvcUpuUs0k8JsqlmZ0reaVtLhJHuoLcTNw/s1600/jagotheme-img.png&quot;)'/>&quot;,
    &quot;height&quot;: <b:eval expr='data:post.featuredImage ? 630 : 420'/>,
    &quot;width&quot;: 1200
  },
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
  &quot;publisher&quot;: {
    ...,
    ...,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWnD56LtxD4OSaGvdFLCuAtbahu8aopG0P74GNc9UL6oMmPlPe6kUId3DLsfcfEDRLslleIJvAYrAZAyIgGE-AqtzpoWfbtxWDeuBepblIiqL1SfBRHcCCLA6ykqk3Z_wbEUEqO1DKPY/s0/jd-logo.png&quot;,
      &quot;width&quot;: 297,
      &quot;height&quot;: 45
    }
  },
</b:includable>

Anda akan menemukan beberapa kode serupa di tempat berbeda, ganti bagian yang ditandai pada kode di atas dengan url gambar Anda, tidak ada ukuran gambar yang disarankan dalam pengaturan ini, tetapi akan lebih baik untuk menggunakan 1200*420 sesuai dengan nilai width and height pada kode di atas, dan 297*45 untuk logo, Anda juga dapat mengubah opsi ukuran agar sesuai dengan gambar yang Anda miliki dengan mengubah nilai width and height yang ditandai pada kode di atas.

Menggunakan lazy load pada gambar

Gambar menjadi salah satu penyebab menurunnya skor Pagespeed, pastikan setiap gambar pada postingan Anda menggunakan lazy load, web.dev juga menyarankan hal yang sama. Lihat halaman Komponen untuk panduan pengguna.

<!--<div class='separator hidden'>
  <img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/>
</div>-->

Menambahkan label disetiap postingan

Keuntungan yang bisa Anda dapatkan dari menambahkan label ke setiap posting antara lain: pengelompokan membuat posting lebih mudah untuk disesuaikan, daftar posting yang lebih rapi dan peluang Breadcrumb yang lebih tinggi untuk diindeks oleh mesin pencari.

Pastikan setiap postingan Anda memiliki label, tips terbaik adalah menggunakan judul label dengan maksimal satu kata tanpa spasi, penggunaan dua kata masih bisa dimaafkan, namun tiga kata atau lebih harus dihindari.

Untuk menambahkan label, cukup sorot kolom samping di editor posting, Anda akan menemukan tab berjudul Labels, tambahkan label pada input yang disediakan, dipisahkan dengan koma(,) untuk menambahkan dua label atau lebih.

Menggunakan tag <p> pada paragraf

Ada tiga pilihan untuk membuat paragraf pada postingan, menggunakan <div>, <br>, atau <p>, semua tag akan menghasilkan paragraf yang sama namun dari segi struktur tag <p> lebih disukai oleh mesin pencari karena <p> pada awalnya dibuat untuk menandai paragraf, tidak seperti dua kode yang lain.

Kabar baiknya adalah Blogger sekarang sudah mendukung penuh tag <<p>, Anda tidak perlu melakukan apapun pada bagian ini, tidak seperti beberapa tahun yang lalu sebelum adanya update, saat itu Blogger masih menggunakan tag <div> sehingga harus diganti dengan <p> secara manual.

Menambahkan atribut rel='noreferrer' atau rel='noopener' dan target='_blank' untuk eksternal link

Menurut referensi dari Chrome Lighthouse^*, ketika Anda menautkan ke halaman di situs lain menggunakan atribut target='_blank', Anda dapat mengekspos situs Anda ke masalah kinerja dan keamanan:

• Jika halaman lain tersebut menjalankan banyak Javascript, kinerja halaman Anda mungkin akan terganggu.
• Halaman lain dapat mengakses objek window dengan menggunakan properti window.opener, ini memungkinkan halaman lain untuk mengarahkan halaman Anda ke URL berbahaya.

Untuk alasan ini, selalu gunakan atribut rel='noreferrer' atau rel='noopener' ketika Anda menambahkan tautan eksternal dengan target='_blank':

<a class='extL' href='your_url' rel='noreferrer' target='_blank'>link_name</a>

Atribut rel='noreferrer' juga berfungsi untuk mem-bypass audit cross-origin destination pada Lighthouse.

Menggunakan fitur Pembatas Postingan bawaan Blogger

Anda mungkin pernah mengalami jumlah postingan yang ditampilkan tidak sesuai dengan jumlah yang ditentukan pada pengaturan Blogger, satu-satunya penyebab error ini adalah tidak ditemukannya Pembatas Postingan pada artikel, ini adalah fitur yang sudah lama disediakan Blogger namun masih jarang digunakan.

Untuk itu, pastikan setiap postingan di blog Anda memiliki fitur Pembatas Postingan untuk meminimalisir error ini:

• Pada Editor Postingan dengan Tampilan Menulis, klik ikon dan temukan fitur Sisipkan batas postingan, tambahkan di paragraf ke-2 atau ke-3 artikel.
• Dalam mode Tampilan HTML, masukkan kode <!--more--> pada paragraf ke-2 atau ke-3 artikel.

Menggunakan tag heading

Tag heading berfungsi untuk memberikan jeda visual pada konten, penempatan tag heading yang tepat akan memberikan konten yang mudah dicerna oleh pembaca. Mungkin terlihat sederhana, tetapi tag heading merupakan sinyal yang kuat dan penting untuk SEO karena membantu Google memahami konten Anda.

“Dalam hal teks pada halaman, tajuk adalah sinyal yang sangat kuat yang memberi tahu kami bahwa bagian halaman ini membahas topik ini.”

— John Mueller, Google

Jangan gunakan lebih dari satu tag H1

Dalam satu halaman, tag <h1> biasanya merupakan judul utama (tergantung pada bagaimana kode situs web disusun) yang dibaca oleh mesin pencari, tag ini harus menunjukkan tentang apa konten tersebut dan memudahkan mesin pencari untuk menempatkan konten dalam hasil pencarian.

Berdasarkan hal ini, penting untuk menempatkan hanya satu tag <h1> pada sebuah halaman. Selebihnya Anda bisa menggunakan beberapa tag <h2> - <h6> ke bagian lain dari konten di halaman tersebut.

<h2 class='h' data-text='1. '>Your_heading_title</h2>

Nonaktifkan/ganti format komentar Blogger

Jika Anda menguji skor postingan di PageSpeed, Anda mungkin tidak akan mendapatkan nilai 100. Setelah menyelidikinya, kami menemukan bahwa masalah utamanya adalah iframe komentar Blogger dan kode javaScript-nya. Oleh karena itu, bagi Anda yang menginginkan skor yang lebih baik disarankan untuk menonaktifkan komentar Blogger:

1. Pada dasbor Blogger, pergi ke Setelan.
2. Gulir ke bawah hingga Anda menemukan grup Komentar.
3. Klik pada Lokasi komentar, akan muncul pop-up yang menampilkan beberapa opsi.
4. Pilih Sembunyikan dan kemudian klik Simpan.

Alternatif lain adalah menggunakan formulir komentar pihak ketiga, Disqus adalah rekomendasi terbaik, ada dua pilihan yang tersedia dan mendukung lazyLoad: Komentar Disqus yang dipicu oleh tombol atau Komentar Disqus dengan fungsi onScroll.

Nonaktifkan fitur loadMore (optional)

Kami tidak mengatakan fitur ini memberatkan situs Anda, namun berdasarkan pengalaman pribadi, fitur ini mengurangi statistik kunjungan karena menggantikan halaman navigasi postingan, hal ini mungkin baik untuk pengguna namun tidak untuk pemilik situs terutama yang memasang iklan di situsnya. Halaman navigasi membantu meningkatkan jumlah penayangan iklan dan juga secara tidak langsung mengurangi skor bounce rate^* pada situs, tidak heran banyak situs berita besar (dalam hal ini Indonesia) yang membagi artikelnya menjadi beberapa halaman.

Temukan dan hapus atau nonaktifkan dengan tag komentar kode berikut ini:

<b:comment><!--[ Load More - Delete this section if you want to disable this feature ]--></b:comment>
<b:include cond='data:view.isHomepage or data:view.url == data:blog.homepageUrl.canonical path &quot;search&quot;' name='postPaginationMore'/>

Menambahkan deskripsi penelusuran

Deskripsi pencarian merupakan bagian dasar dari SEO yang terkadang diabaikan, padahal sangat berpengaruh dalam menentukan SERP (Search Engine Result Page). Deskripsi pencarian berfungsi sebagai rangkuman dari keseluruhan konten, semakin menarik deskripsi yang dibuat, maka semakin besar peluang kunjungan yang didapat dari mesin pencari.

Jika bagian ini dinonaktifkan, maka mesin pencari akan memilih deskripsi secara acak sesuai dengan kata kunci yang dicari pengguna. Perlu diingat bahwa deskripsi pencarian tidak berhubungan dengan deskripsi blog dan berbeda di setiap halaman tergantung pada kalimat entri:

1. Di dasbor Blogger, buka Setelan.
2. Gulir ke bawah hingga Anda menemukan grup Meta tag.
3. Jika belum aktif, klik tombol sakelar pada Aktifkan deskripsi pencarian.
4. Isi deskripsi Pencarian untuk beranda dengan maksimal 150 karakter.
5. Pada editor postingan, isi juga Deskripsi Penelusuran pada bilah samping. Lakukan hal yang sama untuk semua postingan Anda.
   

Pada halaman postingan, deskripsi pencarian akan muncul tepat di bawah judul postingan, hal ini berlaku untuk semua tema. Namun, Anda dapat menghapusnya jika Anda tidak menyukainya:

<!--[ Post description ]-->
<b:comment>Add a description on the post page only</b:comment>
<b:include cond='data:view.isPost' name='postDescription'/>

<!--[ Post description ]-->
<b:comment>Add a description on the post page only</b:comment>
<!--<b:include cond='data:view.isPost' name='postDescription'/>-->

Menambahkan kata kunci alternatif (optional)

Sebagai upaya untuk menargetkan atau menambah jumlah pengunjung blog, Anda bisa menambahkan kata kunci alternatif pada homepage. Hal ini bersifat opsional, Anda bisa menerapkannya atau tidak, karena menurut beberapa sumber^* yang kami pelajari meta keyword sudah tidak lagi memiliki fungsi yang baik untuk SEO.

<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped + &quot;, keyword_1, keyword_2, keyword_3 &quot;' name='keywords'/>

Pisahkan dengan tanda koma (,) untuk menambahkan kata kunci baru.

Sesuaikan judul blog (opsional)

Berdasarkan dokumen ahrefs^* tentang pedoman Meta title, panjang maksimum judul halaman adalah 60 karakter (termasuk menambahkan nama situs). Pada umumnya, sebagian besar situs menambahkan nama situs mereka di judul halaman, sehingga rumusnya akan menjadi seperti ini:

judul_artikel + nama_situs = Meta title

Sebagai contoh: Panduan Optimasi untuk SEO yang Lebih Baik - Jago Desain

Pada update terbaru, kami mengubah aturan meta title menjadi hanya menambahkan nama blog jika meta title tidak melebihi 60 karakter dan menghapus nama blog jika total karakter lebih dari itu.

Jika Anda tidak setuju dengan perubahan ini, Anda dapat kembali ke versi lama:

<!--[ SingleItem title ]-->
<b:comment>It will omit the blog title when the character count exceeds 57</b:comment>
<b:if cond='(data:blog.pageName.length + data:blog.title.length) gt 57'>
  <title><data:blog.pageName/></title>
  <b:else/>
  <title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>

Panduan setel robots.txt

File robots.txt menyediakan serangkaian instruksi untuk memudahkan bot mesin pencari membuat peta halaman situs dan menentukan halaman mana yang harus ditampilkan dalam hasil pencarian. Tanpa file ini, mesin pencari akan mengindeks semua konten bahkan bagian/halaman yang ingin Anda sembunyikan.

Instruksi dari file ini cukup jelas dan mudah untuk dibuat, file robots.txt hanya terdiri dari satu atau beberapa aturan untuk memblokir atau mengizinkan crawling ke halaman tertentu, file ini juga dapat digunakan untuk memblokir bot jahat yang mungkin berdampak negatif pada kinerja situs.

Berikut ini adalah file robots.txt dengan dua aturan sederhana:

User-agent: *
Allow: /
Disallow: /search

Sitemap: https://your_domain.blogspot.com/sitemap.xml

• User-agent, nama bot mesin pencari. Penulisan * untuk menentukan aturan yang berlaku untuk semua jenis user-agent.
• Allow, semua user-agent diizinkan untuk meng-crawl seluruh situs. Ini dapat dihilangkan karena perilaku defaultnya adalah user-agent diizinkan untuk meng-crawl seluruh halaman.
• Disallow, melarang atau memblokir user-agent untuk meng-crawl halaman tertentu. Pada contoh di atas, user-agent tidak diizinkan untuk meng-crawl URL apa pun yang dimulai dengan https://your_domain.blogspot.com/search.
• Sitemap, memberi tahu user-agent di mana letak peta situs, ganti dengan URL situs Anda.

Contoh dengan lebih dari satu instruksi pemblokiran:

User-agent: *
Allow: /
Disallow: /search
Disallow: /p/contact.html
Disallow: /2023/02/post_title.html

Sitemap: https://your_domain.blogspot.com/sitemap.xml

Ikuti panduan ini untuk mengaktifkan robots.txt

1. Di dasbor Blogger, buka Setelan.
2. Gulir ke bawah hingga Anda menemukan grup Crawler dan pengindeksan.
3. Klik tombol sakelar pada Aktifkan robots.txt khusus.
4. Tempelkan file robots.txt baru ke dalam kolom robots.txt kustom, Anda dapat menyalin salah satu file contoh di atas.
5. Pastikan untuk langsung memeriksa perubahan pada file robots.txt dengan menambahkan /robots.txt di akhir URL blog Anda, misalnya: https://your_domain.blogspot.com/robots.txt.