• Beranda
  • Artikel
  • Umum
  • Cara Menyiapkan WordPress & AMP: Laman Seluler yang Dipercepat: Analisis Penyiapan, AdSense, Panduan Media Sosial Terlampir

Cara Menyiapkan WordPress & AMP: Laman Seluler yang Dipercepat: Analisis Penyiapan, AdSense, Panduan Media Sosial Terlampir

Diterbitkan: 2016-09-25
setup-amp-and-wordpress-all-in-one-guide

Ada banyak buzz tentang Google AMP dalam beberapa hari terakhir. Google secara resmi mengumumkan dukungan halaman AMP sebagai bagian dari halaman Pencarian Seluler. Ini sangat menarik. Sejauh ini saya menghindari penerapan AMP di Crunchify untuk beberapa alasan dan tidak pernah merasa pentingnya itu.

Tapi setelah melihat tweet Barry, saya memutuskan AMPlify Crunchify juga.

Apakah Anda mencari tips AMP dan wordpress? Apakah Anda ingin Meningkatkan Situs WordPress Anda dengan Accelerated Mobile Pages Google? Atau Anda ingin memasang AMP di WordPress? Dalam tutorial ini kita akan membahas langkah-langkah tentang cara AMPlify situs WordPress Anda dengan semua langkah terperinci.

Apa itu Accelerated Mobile Pages (AMP)?

Proyek Accelerated Mobile Pages (AMP) adalah proyek open source yang dibuat dengan mengingat kecepatan yang membuat konten yang dioptimalkan untuk seluler sekali dan memuatnya secara instan di mana saja. Tidak ada pemuatan JavaScript sama sekali di halaman. Ada pemuatan CSS yang sangat minim dengan batasan ketat. Salah satu pengamatan yang saya perhatikan Anda bahkan tidak dapat menggunakan !important dalam CSS.

Punya pertanyaan di bawah ini?

  • Google AMP: Apa Itu dan Apakah Tepat untuk Situs WordPress Anda
  • Cara terbaik untuk Menyiapkan WordPress untuk AMP
  • Bagaimana memulai dengan halaman Google AMP dan WordPress
  • Plugin wordpress halaman seluler yang dipercepat
  • halaman ampli WordPress
  • Lem Yoast amp dan kueri wordpress

Mari kita mulai: Aktifkan AMP untuk Postingan WordPress Anda

Langkah 1

Instal plugin AMP resmi.

install-official-amp-plugin-crunchify-tips
  • Setelah diaktifkan, Anda sudah siap. Anda tidak akan melihat menu opsi apa pun.
  • Anda harus pergi ke menu Settings -> Permalinks . Klik Save Changes tanpa membuat perubahan apa pun.

Plugin AMP Resmi menyediakan fungsionalitas dasar dan semua posting Anda akan menjadi AMPlify secara otomatis. Anda dapat mengunjungi versi AMPlified dari postingan Anda dengan menambahkan /amp/ di akhir setiap URL Postingan.

Lihatlah contoh:

  • URL Posting Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • URL Posting AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Langkah 2

Instal Glue untuk plugin Yoast SEO & AMP. Mulai versi 0.4 AMP WordPress version Saya percaya, Anda tidak memerlukan plugin terkait AMP lainnya.

Sekarang:

  • Buka Appearance -> AMP .
  • Berikan warna Header dan Background dan klik Save .
amp-wordpress-plugin-customization-option

Langkah-3

Satu-satunya masalah yang saya lihat dengan plugin ini adalah ia menambahkan tautan Powered by WordPress di bagian bawah halaman. Untuk mengubahnya Anda mungkin ingin mengubah halaman footer.php dengan kode di bawah ini.

  • Buka Plugins -> Editor
  • Pilih Plugin AMP
  • Pilih file amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

Ubah kode baris hak cipta sesuai kebutuhan Anda

crunchify-amp-footer-and-social-sharing-buttons

Langkah-4

Tambahkan ikon Analytics dan Social Media ke halaman AMP Anda.

  1. Fungsi crunchify_amp_add_analytics_social_ads_js akan menambahkan analytics yang diperlukan dan kode javascript media sosial ke halaman amp Anda.
  2. Fungsi crunchify_amp_add_analytics_social_code akan menambahkan kode analitik dan ikon media sosial Anda yang sebenarnya.
  3. Pastikan Anda memperbarui Google Analytics Universal tracking ID Facebook App ID di bawah ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

Langkah-5

Tambahkan Kode Google Adsense ke halaman AMP Anda. Dalam kasus saya, saya ingin menambahkan kode Adsense 300x250 di bawah gambar unggulan. Tidak ada kait resmi yang tersedia untuk digunakan, jadi saya memodifikasi file single.php yang terletak di <AMP Plugin directory>/ amp/templates/single.php .

modifikasi-amp-plugins-single-php-file
  • Buka Menu Plugins
  • Klik Editor
  • Pilih Plugin AMP
  • Buka file single.php
  • Tambahkan kode Adsense seperti yang ditunjukkan pada cuplikan kode di bawah ini. Cari saja look for line featured-image dan tambahkan kode Adsense setelah itu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

Dan Anda sudah siap. Cukup bersihkan cache situs Anda dan periksa halaman AMP langsung. Anda akan melihat semua ikon Google Analytics, Adsense, dan Media Sosial berfungsi dengan baik

Sekarang apa?

Mari verifikasi dan periksa halaman AMP Anda untuk masalah apa pun. Buka https://validator.ampproject.org/ dan periksa hasilnya.

ampproject-validation-page-crunchify-tips

Bagaimana cara Google merayapi halaman Posting AMP?

Sekarang Anda memiliki versi AMP and non-AMP versions dari halaman Anda, Plugin AMP akan menambahkan tag meta relasi di bawah ini ke kedua halaman Anda secara otomatis.

Periksa ini di halaman non-AMP

Anda akan melihat referensi halaman versi AMP agar Google dan platform lain mengetahuinya:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

Periksa ini di halaman AMP

Anda akan melihat teks untuk merujuk versi kanonis non-AMP:

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

Sekarang mari kita tunggu beberapa hari atau setidaknya seminggu dan Anda akan melihat halaman AMPlify di Google Search Console. Bagi saya itu hanya 4 hari dan saya melihat hampir 500 halaman sudah diindeks untuk hasil AMP

wordpress-and-amp-setup-guide-by-crunchify-stats

Bagaimana cara memeriksa hasil langsung?

Cukup cari posting di Google pada browser seluler dan Anda akan melihat AMP result di Halaman Hasil Pencarian.

crunchifys-amp-result-in-google-mobile-search-page

Juga, terus kunjungi halaman ini atau bookmark karena saya akan terus memperbarui tutorial ini dari waktu ke waktu sesuai pembelajaran saya. Selamat ngeblog dan bantu mempercepat internet.