CATAT! INI DIA BATAS UKURAN GAMBAR TERBARU UNTUK KONTEN BLOG AMP

KESAKTIAN GAMBAR

Jika dulu orang menganggap Mesin pencari hanya bisa membaca text, sekarang sudah tidak sama lagi. Gambar juga akan di baca secara berbeda melalui "judul", "alt" dan "caption" yang di sematkan ke dalamnya, namun mampu membuat konten menempati halaman teratas mesin pencarian berkatnya. Melalui mesin algoritmanya Google akan memilih gambar yang paling baik dan berkualitas untuk ditampilkan ke halaman publik. Menarik bukan?

Begini cara memberikan tag dan judul (caption) pada gambar:
  • Masuk ke dasbor blogger
  • Buat atau compose satu postingan
  • Masukan gambar dengan cara biasa. 
  • Selanjutnya lihat gambar:
gambar 1

1. Klik persis di tengah gambar menggunakan mouse atau jari kalau layar sentuh akan muncul pilihan di bawah seperti : small, Medium, Large, X-Large, Original size, left, center, Right, Add Caption, Properties, dan Remove. Pilih Properties

gambar 2

2. Setelah Properties dipilih akan muncul dua kotak dialog dengan dua kolom isi bagian atas dengan judul gambar, dan bagian bawah dengan text keterangan atau ALT text dan tekan OK

gambar 3

3. Kalian juga bisa menambahkan "Caption" dengan mengklik pilihan Caption untuk memberikan penjelasan tangkapan gambar misal: Hak cipta gambar: Google.
Gambar juga harus mempresentasikan isi artikel. Artikel ini hasil mengikuti diskusi panjang saya bersama teman teman di forum dan twitter.

Catatan: Di awal tahun telah terjadi perubahan besar besaran terhadap antar-muka pengaturan pada dasbor blogger blogspot, Google telah mengupdate tool texting gambar, opsi caption telah ditiadakan, sekarang tinggal 'ALT Text' dan 'Title Text'. Tampilan terbaru form penulisan text pada gambar adalah sebagai berikut pada gambar di bawah ini:

gambar 4


Baca juga:
    Benar gak sih, template AMP mempercepat blog terindex Google?

    Beberapa hal terkait panduannya sebagai berikut:

    Hanya gambar yang di mark up langsung pada artikel
  1.  yang akan dimasukan pada kententuan ini.
  2. Ukuran Gambar paling kecil adalah 1200px
  3. Satu halaman paling sedikitnya harus memiliki satu gambar (baik yang di mark up maupun tidak) Google akan memilih gambar dengan kualitas terbaik untuk di tampilkan di hasil pencarian berdasarkan aspek rasio dan resolusi gambar tersebut.
  4. URL gambar harus bisa di index dan di "crawl" oleh mesin pencari (beri judul dan alt)
  5. Gambar harus harus mewakili isi konten
  6. Gambar harus berformat: JPG, PNG atau GIFT
  7. Penting!: Untuk hasil terbaik sediakan beberapa gambar dengan resolusi tinggi (minimun 800,000 pixels dengan rasio lebar dan tinggi: 16x9, 1x1, atau 4x3.
Memang AMP terkadang memiliki cacat pada tampilan layar yang lebih besar atau besarnya layar tanggung seperti tablet, tapi dengan mengikuti peraturan diatas diharapkan bisa mengatasi hal tersebut.

BAGAIMANA JIKA MENGGUNAKAN UKURAN GAMBAR YANG LEBIH KECIL DARIPADA YANG DIREKOMENDASIKAN?

Jangan mengira hal itu malah bagus untuk kecepatan loading sebuah tema AMP, tapi malahan akan menurunkan kualitas dan optimasi tampilannya. Mesin pencari akan memberikan warning dan menunda crawaling halaman AMP sobat, hal ini terungkap dari twit dengan salah satu petinggi Google @JohnMu perihal lusinan keluhan loading pada blogger AMP:

Tampaknya format gambar teknologi terbaru seperti WEBP belum siap direkomendasikan untuk blog AMP, dan dalam beberapa hal AMP mulai mendekati HTML klasik mobile dalam hal susunan struktur image yang terpasang pada konten. Saya rasa ini berita yang bagus disamping akibatnya seperti diatas. Namun sobat juga harus tahu bagaimana melengkapi sebuah konten dengan gambar atau image dengan ukuran dan resolusi yang tepat.

Untuk saat ini format image yang tepat buat halaman AMP masih menjadi masalah yang krusial. Sebagus apapun templat AMP dibuat jika sobat kurang menguasai "maintain" sebuah halaman AMP tetap saja akan pacundang kecepatannya dengan HTML klasik mobile biasa.

Kami melakukan pengujian terhadap selusin halaman AMP di GTMETRIX, hasilnya? Hanya satu halaman AMP yang benar benar cepat, sisanya jauh tertinggal di belakang HTML mobile klasik biasa.

Jadi bijaklah, AMP tidak memiliki kesalahan sepanjang diperlakukan sebagai "AMP" dia hanya akan terluka karena kita memperlakukannya seolah dia adalah halaman HTML klasik biasa....
Awalnya Google menetapkan ukuran minimal 696px ukuran gambar, namun pada akhirnya AMP berhasil di update menjadi lebih baik karena ukuran baru gambar untuk melengkapi artikel AMP batas minumnya ditetapkan menjadi 1200px.

26 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. AMP tidak memiliki kesalahan sepanjang diperlakukan sebagai "AMP" dia hanya akan terluka karena kita memperlakukannya seolah dia adalah halaman HTML klasik biasa....saya suka ungkapannya mengena.

    BalasHapus
  2. Thanks infonya Gan... Blog sy masih pakai 640 karena takut loading blog lama kalau sampai 1000 lebih. Abis saya suka banyak foto di artikel sih...

    BalasHapus
    Balasan
    1. @Menix news berplatform Wordpress beda sama blogspot. Namun penempatan gambar juga harus pas baik ukuran maupun resolusinya, tidak baik terlalu kecil agar konten menjadi optimal

      Hapus
  3. Kayknya tambah enteng aja tempilan gambar dan ada efek loading nya jg, pake lazy load bang?

    BalasHapus
  4. Aku masih belum bgitu paham alurnya AMP
    sudah setting tp entah kenapa di analitik ada yg eror,, perlu belajar lagi nih

    BalasHapus
    Balasan
    1. Jika yang digunakan blogger /blogspot, maka itu adalah templatenya. Harus valid HTML5, tidak boleh ada javascript, style font dll...

      Tapi jika menggunakan WordPress itu harusnya lebih sederhana karena hanya menggunakan add-on.

      Hapus
  5. makasih udah di share hu! *soalnya ada niat mau pake amp! hehe
    *jangan lupa mampir ya AORLIN(.)com

    BalasHapus
  6. Makasih banget ni,udah di share ilmunya

    BalasHapus
  7. Artikel yang sangat membantu, terimakasih Fren

    BalasHapus

  8. Masih bingung sama ukuran gambarnya, itu 1200px itu maksudnya gimana ya tinggi gambarnya atau lebar gambarnya?

    BalasHapus
    Balasan
    1. 12px adalah resolusi, untuk dimensi yang baik biasanya selalu ada dua pilihan ratio: 16:9 atau 4:3 (lebar x panjang)

      Hapus
    2. Oh resolusinya, berarti mutu dari gambarnya dengan kata lain semakin bagus gambar semakin disukai mesin pencari seperti Google.

      Hapus
    3. Untuk AMP masih di batasi 1200px itu. Untuk blog HTML klasik baik desktop dan klasik mobile kayaknya tidak terbatas., asal masih bisa loading cepat di halaman internet ya sudah bagus sekali.

      Hapus
  9. AMP, template revolusi dan paling terkini, dan kemungkinan di masa depan nanti pasti akan muncul yang baru lagi , entah namanya apa, ha-ha, yang pasti lebih cepat lagi

    BalasHapus
    Balasan
    1. Google mengharuskan (mewajibkan) konten kanonik, dan konten mobile yang kanonik akan di utamakan, beda dengan konten html klasik. Besok konten yang paling cepat di index adalah AMP.

      Hapus

  10. AMP itu sudah ada di Blogger atau belum ada gan?

    BalasHapus
    Balasan
    1. AMP (Accelarate Mobile Page) itu memang model halaman website, termasuk blogspot, wix, wordpress dll, halaman yang di prioritaskan untuk mobile, halaman masa depan.
      Pertanyaannya apakah ia dapat diterapkan pada blogger? Ya, dan ia telah di terapkan sejak 2017 lalu bahkan oleh media media besar di dunia. Ia project Google untuk masa depan halaman web (termasuk blogger)

      Dia dapat diterapkan:
      1. menggunakan template valid AMP, alih alih template HTML klasik mobile
      2. mengikuti kaedah dan penerapan AMP, seperti misalnya dilarang menggunakan javascript berlebihan (yang melipatgandakan jumlah DOM di dalam template), dilarang menggunakan gambar melebihi ketentuan, font atau bahkan CSS style secara berlebihan.

      Tentu saja untuk masa sekarang tidak ada yang otomatis, kita harus mengatur dan membuat konten yang valid AMP, tag gambar yang valid AMP, dan memastikan postingan bersifat kanonik (canonicle).

      Di webmaster hanya halaman mobile yang di dahulukan di index dan hanya halaman mobile yang dapat dengan mudah di 'sempurnakan' halaman web desktop akan segera terkena finalti.

      Hapus
    2. Sayangnya jika pertanyaannya, apakah template AMP sudah ada di dasbor blogger? Jawabannya belum ada. Blogger hanya menyediakan 4 varian template 100% mobile seperti contempo, emporio, soho dan notable. AMP masih dalam proses pengembangan atau dalam bentuk proyek yang sedang di kembangkan.

      Untuk informasi: AMP dapat dengan mudah di terapkan pada halaman blog wordpress menggunakan addon, dan templatenya juga tersedia di dalam dasbor mereka. Itu tampak simpel karena wordpress di buat berbasis PHP sedangkan Blogger berbasis HTML.

      Hapus
    3. Oh kirain ada di blogger yang siap pakai, hehe

      Hapus
  11. Pemasangan gambar harus dengan format dan tag yang benar juga, karena jika tidak tidak bisa valid

    BalasHapus
  12. keren sekali artikel nya mas , saya banyak bljar dari sini karena masih awam tentang blog

    BalasHapus
  13. Pengen script yang bisa bikin finfing yang bisa menutup gambar. seperti jendela

    BalasHapus
    Balasan
    1. Buat sendiri pakai css saja biar lebih ringan

      Hapus
  14. Kak Anis bisa di bantu lebih detil dan mudah di cerna oleh yg awam / pemula ini soal ini
    'Pemasangan gambar harus dengan format dan tag yang benar juga,"

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak