Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
AMPHTML

Update!! rel=amphtml versus rel=canonical

Mengetahui perbedaan rel=amphtml dan rel=canonical dan kegunaannya.
Tergesa-gesa adalah perbuatan Syetan. Itulah ungkapan awal saya, karena artikel ini merupakan perbaikan dri artikel sebelumnya (baca: Ingin Ada logo "Petir" AMP dihasil pencarian? ini caranya). Karena ingin cepat mendapatkan logo "petir" akhirnya saya melakukan ujicoba. Ya.. tapi dibalik semua ada hikmahnya.. ambil pelajaran.

rel="amphtml" vs rel="canonical"

Pada artikel sebelumnya, saya menganjurkan pada template html gunakan rel='amphtml', dan ternyata ada perbedaan yang mendasar antara rel='amphtml' dan rel='canonical'. Walau pun pada intinya untuk menunjukan URL kanonis sebuah web.

Kode rel='amphtml' dan rel='canonical' dua-duanya digunakan, hanya apabila web / blog sobat mempunyai 2 versi yaitu AMP dan non-AMP. Kode rel='amphtml' digunakan pada halaman non-AMP untuk menunjukan mana link versi AMP dari halaman tersebut.

Jadi, pada halaman non-AMP pasang kode yang menunjukan mana versi AMP nya, misal :

<link rel='amphtml' href='http://kangismet.net/amp/contoh-artikel.html'/>

Pada halaman AMP-nya, tunjukan mana versi non-AMP dengan rel='canonical',contoh :

<link rel='canonical' href='http://kangismet.net/contoh-artikel.html'/>

Gambarannya seperti pada gambar di bawah :



Bagaimana dengan Blogger / Blogspot? di karenakan Blogger hanya mempunyai 1 versi (kalau sobat sudah pake template AMP), maka cukup gunakan rel='canonical' saja. Cukup dengan kode ini saja :

<link expr:href='data:blog.url' rel='canonical'/>

Bagi sobat yang sudah menggunakan template AMP Ready, silahkan hapus (kalau masih ada) kode:

<link expr:href='data:blog.url' rel='amphtml'/>

Apakah langsung dapat "petir"

Untuk mendapatkan petir, tentunya ada beberapa syarat, diantaranya :
  1. Harus menggunakan Template Valid AMP HTML
  2. Penulisan artikel harus mengikuti pedoman AMP HTML (dalam penulisan tag image, video, iframe, dll)
  3. Harus menggunakan Markup Data terstruktur
  4. dll (lebih jelasnya akan saya buat artikel terpisah)
Semoga bermanfaat... 😃

Sumber: https://support.google.com/webmasters/answer/6340290?hl=id


#AMPHTML

9 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. kang kalau misal punya 2 blog yg 1 versi amp dan satunya versi non amp, untuk kodenya seperti apa ya, heheh baru mau belajar amp soalnya :)
    1. dua-duanya gunakan saja meta tag
      <link expr:href='data:blog.url' rel='canonical'/>
    2. jadi nantinya mau dijadiin satu kyk blognya kang ismet, jadi saya bikin domain.com buat yg non amp dan amp.domain.com buat yg versi amp kang, biar nggak duplikat konten kumaha nya

      aduh palibet pisan ngmng oge:D
    3. referensina ti https://amp.dev/id/documentation/guides-and-tutorials/optimize-and-measure/discovery/?format=websites
    4. kode <b:if cond='data:view.url == data:view.url params { amp: "1" }'>
      <link expr:href='data:blog.url.canonical' rel='canonical'/>
      <link expr:href='data:view.url' rel='alternate'/>
      <b:else/>
      <link expr:href='data:blog.url.canonical' rel='canonical'/>
      <link expr:href='data:view.url + "?m=1"' rel='alternate'/>
      <link expr:href='data:view.url params { amp: "1" }' rel='amphtml'/>
      </b:if>
      <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

      ditaro di blog mana kang
    5. berarti nganggo eta nu terakhir kang, janten sanes 2 blog. 1 blog 2 versi nya?
    6. muhun kang, kumaha nyak
    7. abi cuma masang kode <link href='https://amp.domain.com/' rel='amphtml'/> di blog versi non amp

      sareng kode <b:if cond='data:view.url != data:view.url params { amp: "1"}'>
      <link href='https://www.techntuto.com/' rel='canonical'/>
      <link expr:href='data:view.url params { amp: "1"}' rel='amphtml'/>
      </b:if>       salah nya kang?

      punten seueur nanya:D
    8. teu nanaon kitu kang, cuman versi Blogspot sanes amp.domain.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.